@yuuvis/app-drive 2.6.4 → 3.0.1

package/fesm2022/yuuvis-app-drive.mjs

@@ -32,7 +32,7 @@ import { Overlay } from '@angular/cdk/overlay';
 import { ObjectPreviewComponent, ObjectPreviewService } from '@yuuvis/client-framework/object-preview';
 import { ObjectSummaryDataComponent, ObjectSummaryComponent, MultiObjectSummaryComponent } from '@yuuvis/client-framework/object-summary';
 import * as i3 from '@angular/material/button';
-import { MatButtonModule, MatIconAnchor, MatIconButton } from '@angular/material/button';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i2$2 from '@angular/material/menu';
@@ -40,7 +40,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import * as i5 from '@yuuvis/client-framework/list';
-import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
+import { ListItemDirective, YuvListModule, ListComponent } from '@yuuvis/client-framework/list';
 import * as i2$3 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
 import { SimpleSearchComponent } from '@yuuvis/client-framework/simple-search';
@@ -321,7 +321,7 @@ class ResolveNameConflictsComponent {
         this.#setupContent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ResolveNameConflictsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ResolveNameConflictsComponent, isStandalone: true, selector: "ymd-resolve-name-conflicts", ngImport: i0, template: "<yuv-dialog [headertitel]=\"content.headline\">\n  <main>\n    <p>{{ content.message }}</p>\n\n    <ul>\n      @for (ef of existingFileNames; track $index) {\n        <li>{{ ef }}</li>\n      }\n    </ul>\n\n    @if (validItems.length) {\n      <p>{{ content.messageValid }}</p>\n      <ul>\n        @for (f of validItems; track $index) {\n          <li>{{ f.name }}</li>\n        }\n      </ul>\n    }\n  </main>\n  <footer>\n    @if (validItems.length) {\n      <button ymtButton=\"primary\" (click)=\"proceed()\">{{ content.proceed }}</button>\n    }\n    <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.app.drive.name.conflict.cancel' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main{padding:var(--ymt-spacing-m)}:host ul{font-weight:700;list-style:none;padding:0 1em}:host ul li{padding:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ul li:before{content:\"\\2022\";margin-inline-end:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ResolveNameConflictsComponent, isStandalone: true, selector: "ymd-resolve-name-conflicts", ngImport: i0, template: "<yuv-dialog [headertitel]=\"content.headline\">\n  <main>\n    <p>{{ content.message }}</p>\n\n    <ul>\n      @for (ef of existingFileNames; track $index) {\n        <li>{{ ef }}</li>\n      }\n    </ul>\n\n    @if (validItems.length) {\n      <p>{{ content.messageValid }}</p>\n      <ul>\n        @for (f of validItems; track $index) {\n          <li>{{ f.name }}</li>\n        }\n      </ul>\n    }\n  </main>\n  <footer>\n    @if (validItems.length) {\n      <button ymtButton=\"primary\" (click)=\"proceed()\">{{ content.proceed }}</button>\n    }\n    <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.app.drive.name.conflict.cancel' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main{padding:var(--ymt-spacing-m)}:host ul{font-weight:700;list-style:none;padding:0 1em}:host ul li{padding:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ul li:before{content:\"\\2022\";margin-inline-end:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ResolveNameConflictsComponent, decorators: [{
             type: Component,
@@ -926,7 +926,7 @@ class RenameComponent {
         this.#dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RenameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RenameComponent, isStandalone: true, selector: "ymd-rename", host: { properties: { "class.busy": "busy()" } }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ObjectNameComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.app.drive.action.rename.headline' | translate\">\n  <main>\n    <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n    <form [formGroup]=\"formComp().nameForm\" (ngSubmit)=\"rename()\">\n      <ymd-object-name [item]=\"item()\"></ymd-object-name>\n\n      @if (error()) {\n        <mat-error class=\"error\">{{ error() }}</mat-error>\n      }\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.app.drive.action.rename.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"button\" (click)=\"rename()\" [disabled]=\"disabledSubmit()\">\n      {{ 'yuv.app.drive.action.rename.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host .progress-bar{opacity:0}:host ymd-object-name{display:block;padding:var(--ymt-spacing-m)}:host.busy .progress-bar{opacity:1}:host main .error{color:var(--ymt-text-color-subtle);background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25rem;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);margin-block-start:var(--ymt-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectNameComponent, selector: "ymd-object-name", inputs: ["item", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RenameComponent, isStandalone: true, selector: "ymd-rename", host: { properties: { "class.busy": "busy()" } }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ObjectNameComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.app.drive.action.rename.headline' | translate\">\n  <main>\n    <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n    <form [formGroup]=\"formComp().nameForm\" (ngSubmit)=\"rename()\">\n      <ymd-object-name [item]=\"item()\"></ymd-object-name>\n\n      @if (error()) {\n        <mat-error class=\"error\">{{ error() }}</mat-error>\n      }\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.app.drive.action.rename.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"button\" (click)=\"rename()\" [disabled]=\"disabledSubmit()\">\n      {{ 'yuv.app.drive.action.rename.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host .progress-bar{opacity:0}:host ymd-object-name{display:block;padding:var(--ymt-spacing-m)}:host.busy .progress-bar{opacity:1}:host main .error{color:var(--ymt-text-color-subtle);background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25rem;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);margin-block-start:var(--ymt-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectNameComponent, selector: "ymd-object-name", inputs: ["item", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RenameComponent, decorators: [{
             type: Component,
@@ -1077,7 +1077,7 @@ class CreateFolderComponent {
         this.#dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CreateFolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CreateFolderComponent, isStandalone: true, selector: "ymd-create-folder", host: { properties: { "class.busy": "busy()" } }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ObjectNameComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.app.drive.folder.create.headline' | translate\">\n  <main>\n    <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n    <form [formGroup]=\"formComp().nameForm\">\n      <ymd-object-name></ymd-object-name>\n\n      @if (error()) {\n        <mat-error class=\"error\">{{ error() }}</mat-error>\n      }\n      @if (message()) {\n        <mat-error class=\"message\">{{ message() }}</mat-error>\n      }\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.app.drive.action.rename.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"button\" (click)=\"createFolder()\" [disabled]=\"disabledSubmit()\">\n      {{ 'yuv.app.drive.folder.create.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host .progress-bar{inset-inline-start:0;inset-inline-end:0;inset-block-start:0;opacity:0}:host ymd-object-name{display:block;padding:var(--ymt-spacing-m)}:host.busy .progress-bar{opacity:1}:host .error{color:var(--ymt-text-color-subtle);background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25rem;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);margin-block-start:var(--ymt-spacing-xs)}:host .message{padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-block-start:1px solid var(--ymt-outline-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectNameComponent, selector: "ymd-object-name", inputs: ["item", "disabled"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CreateFolderComponent, isStandalone: true, selector: "ymd-create-folder", host: { properties: { "class.busy": "busy()" } }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ObjectNameComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.app.drive.folder.create.headline' | translate\">\n  <main>\n    <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n    <form [formGroup]=\"formComp().nameForm\">\n      <ymd-object-name></ymd-object-name>\n\n      @if (error()) {\n        <mat-error class=\"error\">{{ error() }}</mat-error>\n      }\n      @if (message()) {\n        <mat-error class=\"message\">{{ message() }}</mat-error>\n      }\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.app.drive.action.rename.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"button\" (click)=\"createFolder()\" [disabled]=\"disabledSubmit()\">\n      {{ 'yuv.app.drive.folder.create.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host .progress-bar{inset-inline-start:0;inset-inline-end:0;inset-block-start:0;opacity:0}:host ymd-object-name{display:block;padding:var(--ymt-spacing-m)}:host.busy .progress-bar{opacity:1}:host .error{color:var(--ymt-text-color-subtle);background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25rem;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);margin-block-start:var(--ymt-spacing-xs)}:host .message{padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-block-start:1px solid var(--ymt-outline-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectNameComponent, selector: "ymd-object-name", inputs: ["item", "disabled"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CreateFolderComponent, decorators: [{
             type: Component,
@@ -1219,13 +1219,13 @@ class BreadcrumbComponent {
         this.#keyManager?.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: BreadcrumbComponent, isStandalone: true, selector: "ymd-breadcrumb", host: { listeners: { "blur": "onBlur()", "keydown": "onKeydown($event)" }, classAttribute: "breadcrumb" }, viewQueries: [{ propertyName: "items", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let bread = breadcrumb();\n\n<nav class=\"breadcrumb\" aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb__list\">\n    @if (bread.items.length) {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--root\">\n        <a class=\"breadcrumb__list-item-anchor breadcrumb__list-item-anchor--root\" mat-icon-button disableRipple tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation('root', $event)\">\n          <mat-icon [attr.aria-label]=\"'yuv.app.drive.folder-tree.mydrive' | translate\">{{ homeIcon }}</mat-icon>\n        </a>\n      </li>\n\n\n\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--last\" yuvDragScroll>\n        @if (bread.partial) {\n          <div class=\"partial\" aria-hidden=\"true\"></div>\n        }\n\n        <ol class=\"breadcrumb__list\">\n          @for (crumb of bread.items; track $index) {\n            @if (!$last) {\n              <li class=\"breadcrumb__list-item\">\n                <a class=\"breadcrumb__list-item-anchor\" tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation(crumb.id, $event)\">\n                  {{ crumb.name }}\n                </a>\n              </li>\n            } @else {\n              <li class=\"breadcrumb__list-item  breadcrumb__list-item--current\" aria-current=\"location\">{{ crumb.name }}</li>\n            }\n          }\n        </ol>\n      </li>\n    } @else {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--current breadcrumb__list-item--root\" aria-current=\"location\">\n        <button mat-icon-button disabled class=\"breadcrumb__list-item-anchor  breadcrumb__list-item-anchor--root\">\n          <mat-icon>{{ homeIcon }}</mat-icon>\n        </button>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{font:var(--ymt-font-body-subtle);color:var(--ymt-on-surface)}.breadcrumb{overflow:hidden;display:flex;align-items:center}.breadcrumb__list{list-style:none;margin:0;padding:0;align-items:center;display:flex;flex-wrap:nowrap}.breadcrumb__list-item{align-items:center;display:flex;white-space:nowrap}.breadcrumb__list-item:after{content:\"chevron_right\";font-family:Material Symbols Sharp,serif;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.breadcrumb__list-item--current:after,.breadcrumb__list-item--last:after{content:none}.breadcrumb__list-item--current:not(.breadcrumb__list-item--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root):hover:before{content:\"\";inset:0;position:absolute;pointer-events:none;border-radius:inherit;background-color:var(--ymt-on-surface);opacity:var(--ymt-hover-state-layer-opacity)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root)[aria-current=true]{outline-offset:var(--ymt-focus-indicator-size);outline:var(--ymt-focus-indicator-outer) solid var(--ymt-focus-indicator-size);box-shadow:0 0 0 var(--ymt-focus-indicator-size) var(--ymt-focus-indicator-inner)}.breadcrumb__list-item-anchor{white-space:nowrap;border-radius:var(--ymt-corner-extra-small);text-decoration:none;position:relative;margin:calc(var(--ymt-focus-indicator-size) * 2)}.breadcrumb__list-item-anchor:not(:disabled){color:var(--ymt-on-surface)}nav>.breadcrumb__list{overflow:hidden}nav>.breadcrumb__list li[ymtDragScroll]{overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}.partial:after{content:\"...\";display:block;padding:var(--ymt-spacing-2xs)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i5.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: YuvCommonModule }, { kind: "directive", type: i3$1.DragScrollDirective, selector: "[yuvDragScroll]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: BreadcrumbComponent, isStandalone: true, selector: "ymd-breadcrumb", host: { listeners: { "blur": "onBlur()", "keydown": "onKeydown($event)" }, classAttribute: "breadcrumb" }, viewQueries: [{ propertyName: "items", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let bread = breadcrumb();\n\n<nav class=\"breadcrumb\" aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb__list\">\n    @if (bread.items.length) {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--root\">\n        <button class=\"breadcrumb__list-item-anchor breadcrumb__list-item-anchor--root\" mat-icon-button disableRipple tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation('root', $event)\">\n          <mat-icon [attr.aria-label]=\"'yuv.app.drive.folder-tree.mydrive' | translate\">{{ homeIcon }}</mat-icon>\n        </button>\n      </li>\n\n\n\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--last\" yuvDragScroll>\n        @if (bread.partial) {\n          <div class=\"partial\" aria-hidden=\"true\"></div>\n        }\n\n        <ol class=\"breadcrumb__list\">\n          @for (crumb of bread.items; track $index) {\n            @if (!$last) {\n              <li class=\"breadcrumb__list-item\">\n                <a class=\"breadcrumb__list-item-anchor\" tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation(crumb.id, $event)\">\n                  {{ crumb.name }}\n                </a>\n              </li>\n            } @else {\n              <li class=\"breadcrumb__list-item  breadcrumb__list-item--current\" aria-current=\"location\">{{ crumb.name }}</li>\n            }\n          }\n        </ol>\n      </li>\n    } @else {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--current breadcrumb__list-item--root\" aria-current=\"location\">\n        <button mat-icon-button disabled class=\"breadcrumb__list-item-anchor  breadcrumb__list-item-anchor--root\">\n          <mat-icon>{{ homeIcon }}</mat-icon>\n        </button>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{font:var(--ymt-font-body-subtle);color:var(--ymt-on-surface)}.breadcrumb{overflow:hidden;display:flex;align-items:center}.breadcrumb__list{list-style:none;margin:0;padding:0;align-items:center;display:flex;flex-wrap:nowrap}.breadcrumb__list-item{align-items:center;display:flex;white-space:nowrap}.breadcrumb__list-item:after{content:\"chevron_right\";font-family:Material Symbols Sharp,serif;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.breadcrumb__list-item--current:after,.breadcrumb__list-item--last:after{content:none}.breadcrumb__list-item--current:not(.breadcrumb__list-item--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root):hover:before{content:\"\";inset:0;position:absolute;pointer-events:none;border-radius:inherit;background-color:var(--ymt-on-surface);opacity:var(--ymt-hover-state-layer-opacity)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root)[aria-current=true]{outline-offset:var(--ymt-focus-indicator-size);outline:var(--ymt-focus-indicator-outer) solid var(--ymt-focus-indicator-size);box-shadow:0 0 0 var(--ymt-focus-indicator-size) var(--ymt-focus-indicator-inner)}.breadcrumb__list-item-anchor{white-space:nowrap;border-radius:var(--ymt-corner-extra-small);text-decoration:none;position:relative;margin:calc(var(--ymt-focus-indicator-size) * 2)}.breadcrumb__list-item-anchor:not(:disabled){color:var(--ymt-on-surface)}nav>.breadcrumb__list{overflow:hidden}nav>.breadcrumb__list li[ymtDragScroll]{overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}.partial:after{content:\"...\";display:block;padding:var(--ymt-spacing-2xs)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i5.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: YuvCommonModule }, { kind: "directive", type: i3$1.DragScrollDirective, selector: "[yuvDragScroll]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymd-breadcrumb', standalone: true, imports: [TranslateModule, YuvListModule, MatIcon, MatIconAnchor, MatIconButton, YuvCommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ymd-breadcrumb', standalone: true, imports: [TranslateModule, YuvListModule, MatIcon, MatIconButton, YuvCommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'breadcrumb'
-                    }, template: "@let bread = breadcrumb();\n\n<nav class=\"breadcrumb\" aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb__list\">\n    @if (bread.items.length) {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--root\">\n        <a class=\"breadcrumb__list-item-anchor breadcrumb__list-item-anchor--root\" mat-icon-button disableRipple tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation('root', $event)\">\n          <mat-icon [attr.aria-label]=\"'yuv.app.drive.folder-tree.mydrive' | translate\">{{ homeIcon }}</mat-icon>\n        </a>\n      </li>\n\n\n\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--last\" yuvDragScroll>\n        @if (bread.partial) {\n          <div class=\"partial\" aria-hidden=\"true\"></div>\n        }\n\n        <ol class=\"breadcrumb__list\">\n          @for (crumb of bread.items; track $index) {\n            @if (!$last) {\n              <li class=\"breadcrumb__list-item\">\n                <a class=\"breadcrumb__list-item-anchor\" tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation(crumb.id, $event)\">\n                  {{ crumb.name }}\n                </a>\n              </li>\n            } @else {\n              <li class=\"breadcrumb__list-item  breadcrumb__list-item--current\" aria-current=\"location\">{{ crumb.name }}</li>\n            }\n          }\n        </ol>\n      </li>\n    } @else {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--current breadcrumb__list-item--root\" aria-current=\"location\">\n        <button mat-icon-button disabled class=\"breadcrumb__list-item-anchor  breadcrumb__list-item-anchor--root\">\n          <mat-icon>{{ homeIcon }}</mat-icon>\n        </button>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{font:var(--ymt-font-body-subtle);color:var(--ymt-on-surface)}.breadcrumb{overflow:hidden;display:flex;align-items:center}.breadcrumb__list{list-style:none;margin:0;padding:0;align-items:center;display:flex;flex-wrap:nowrap}.breadcrumb__list-item{align-items:center;display:flex;white-space:nowrap}.breadcrumb__list-item:after{content:\"chevron_right\";font-family:Material Symbols Sharp,serif;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.breadcrumb__list-item--current:after,.breadcrumb__list-item--last:after{content:none}.breadcrumb__list-item--current:not(.breadcrumb__list-item--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root):hover:before{content:\"\";inset:0;position:absolute;pointer-events:none;border-radius:inherit;background-color:var(--ymt-on-surface);opacity:var(--ymt-hover-state-layer-opacity)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root)[aria-current=true]{outline-offset:var(--ymt-focus-indicator-size);outline:var(--ymt-focus-indicator-outer) solid var(--ymt-focus-indicator-size);box-shadow:0 0 0 var(--ymt-focus-indicator-size) var(--ymt-focus-indicator-inner)}.breadcrumb__list-item-anchor{white-space:nowrap;border-radius:var(--ymt-corner-extra-small);text-decoration:none;position:relative;margin:calc(var(--ymt-focus-indicator-size) * 2)}.breadcrumb__list-item-anchor:not(:disabled){color:var(--ymt-on-surface)}nav>.breadcrumb__list{overflow:hidden}nav>.breadcrumb__list li[ymtDragScroll]{overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}.partial:after{content:\"...\";display:block;padding:var(--ymt-spacing-2xs)}\n"] }]
+                    }, template: "@let bread = breadcrumb();\n\n<nav class=\"breadcrumb\" aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb__list\">\n    @if (bread.items.length) {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--root\">\n        <button class=\"breadcrumb__list-item-anchor breadcrumb__list-item-anchor--root\" mat-icon-button disableRipple tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation('root', $event)\">\n          <mat-icon [attr.aria-label]=\"'yuv.app.drive.folder-tree.mydrive' | translate\">{{ homeIcon }}</mat-icon>\n        </button>\n      </li>\n\n\n\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--last\" yuvDragScroll>\n        @if (bread.partial) {\n          <div class=\"partial\" aria-hidden=\"true\"></div>\n        }\n\n        <ol class=\"breadcrumb__list\">\n          @for (crumb of bread.items; track $index) {\n            @if (!$last) {\n              <li class=\"breadcrumb__list-item\">\n                <a class=\"breadcrumb__list-item-anchor\" tabindex=\"-1\" yuvListItem draggable=\"false\" href=\"\" (click)=\"navigation(crumb.id, $event)\">\n                  {{ crumb.name }}\n                </a>\n              </li>\n            } @else {\n              <li class=\"breadcrumb__list-item  breadcrumb__list-item--current\" aria-current=\"location\">{{ crumb.name }}</li>\n            }\n          }\n        </ol>\n      </li>\n    } @else {\n      <li class=\"breadcrumb__list-item breadcrumb__list-item--current breadcrumb__list-item--root\" aria-current=\"location\">\n        <button mat-icon-button disabled class=\"breadcrumb__list-item-anchor  breadcrumb__list-item-anchor--root\">\n          <mat-icon>{{ homeIcon }}</mat-icon>\n        </button>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{font:var(--ymt-font-body-subtle);color:var(--ymt-on-surface)}.breadcrumb{overflow:hidden;display:flex;align-items:center}.breadcrumb__list{list-style:none;margin:0;padding:0;align-items:center;display:flex;flex-wrap:nowrap}.breadcrumb__list-item{align-items:center;display:flex;white-space:nowrap}.breadcrumb__list-item:after{content:\"chevron_right\";font-family:Material Symbols Sharp,serif;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.breadcrumb__list-item--current:after,.breadcrumb__list-item--last:after{content:none}.breadcrumb__list-item--current:not(.breadcrumb__list-item--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root){padding:var(--ymt-spacing-2xs)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root):hover:before{content:\"\";inset:0;position:absolute;pointer-events:none;border-radius:inherit;background-color:var(--ymt-on-surface);opacity:var(--ymt-hover-state-layer-opacity)}.breadcrumb__list-item-anchor:not(.breadcrumb__list-item-anchor--root)[aria-current=true]{outline-offset:var(--ymt-focus-indicator-size);outline:var(--ymt-focus-indicator-outer) solid var(--ymt-focus-indicator-size);box-shadow:0 0 0 var(--ymt-focus-indicator-size) var(--ymt-focus-indicator-inner)}.breadcrumb__list-item-anchor{white-space:nowrap;border-radius:var(--ymt-corner-extra-small);text-decoration:none;position:relative;margin:calc(var(--ymt-focus-indicator-size) * 2)}.breadcrumb__list-item-anchor:not(:disabled){color:var(--ymt-on-surface)}nav>.breadcrumb__list{overflow:hidden}nav>.breadcrumb__list li[ymtDragScroll]{overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}.partial:after{content:\"...\";display:block;padding:var(--ymt-spacing-2xs)}\n"] }]
         }], propDecorators: { onBlur: [{
                 type: HostListener,
                 args: ['blur']
@@ -1973,7 +1973,7 @@ class ManageVersionsComponent {
         this.#drive.clearVersions();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ManageVersionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ManageVersionsComponent, isStandalone: true, selector: "ymd-manage-versions", providers: [ObjectPreviewService], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.app.drive.versions.header.label' | translate\">\n  <main>\n    <div class=\"progress-bar-container\">\n      @if (isLoading()) {\n        <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n      }\n    </div>\n    <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"layoutSettingIdBase + 'split'\">\n      <!-- Versions -->\n      <ng-template yuvSplitArea [size]=\"60\">\n        <div class=\"version-details\">\n          <header>\n            <span>{{ dmsObject().name }}</span>\n          </header>\n          <div class=\"details\">\n            @let selected = selectedVersion();\n            @if (selected && selected.length === 1) {\n              <mat-tab-group class=\"version-tabs\">\n                <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.content.title' | translate\">\n                  <ng-template matTabContent>\n                    <yuv-object-preview [dmsObject]=\"selected[0]\" [version]=\"selected[0].version\"></yuv-object-preview>\n                  </ng-template>\n                </mat-tab>\n                <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.indexdata.title' | translate\">\n                  <ng-template matTabContent>\n                    <yuv-object-summary-data [dmsObject]=\"selected[0]\"></yuv-object-summary-data>\n                  </ng-template>\n                </mat-tab>\n              </mat-tab-group>\n            }\n          </div>\n        </div>\n      </ng-template>\n      <!-- Details -->\n      <ng-template yuvSplitArea [size]=\"40\">\n        <div class=\"versions\">\n          <header>\n            <h2>{{ 'yuv.app.drive.versions.header.label.short' | translate }}</h2>\n            <div class=\"actions\">\n              <button mat-icon-button class=\"refresh\" (click)=\"reloadList()\"><mat-icon>refresh</mat-icon></button>\n            </div>\n          </header>\n          <ymd-versions-list\n            class=\"staggered\"\n            [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n            [attr.aria-busy]=\"isLoading()\"\n            [attr.role]=\"'listbox'\"\n            [id]=\"id()\"\n          >\n          </ymd-versions-list>\n        </div>\n      </ng-template>\n    </yuv-split-view>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" class=\"close\" (click)=\"close()\">{{ 'yuv.app.drive.action.set.new.versions.cancel' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledRestore()\" (click)=\"setNewVersion()\">\n      {{ 'yuv.app.drive.action.set.new.versions.label' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{display:contents}:host .progress-bar-container{height:calc(var(--ymt-progress-bar-height) + 1px);background-color:transparent}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);height:100%}:host header{display:grid;grid-template-columns:2fr max-content;grid-template-rows:1fr max-content;gap:0px 0px;grid-auto-flow:row;grid-template-areas:\"label actions\" \"title title\";padding:var(--ymt-spacing-m);align-items:center}:host .versions,:host .version-details{display:flex;flex-flow:column;height:100%}:host .version-details .details{flex:1;overflow-y:hidden}:host .version-details .details .version-tabs{height:100%}:host .version-details .details ::ng-deep .mat-mdc-tab-body-wrapper{height:100%;overflow:hidden}:host .versions header{border-bottom:1px solid var(--ymt-outline-variant);padding-top:0}:host .versions .label{grid-area:label}:host .versions .actions{grid-area:actions;display:flex;justify-content:center;align-items:center}:host .versions .actions button{padding:0}:host .versions .title{grid-area:title}:host .versions .staggered{flex:1;overflow-y:scroll}:host .versions-details{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible", "lockSize"] }, { kind: "component", type: i1$2.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: VersionsListComponent, selector: "ymd-versions-list" }, { kind: "component", type: ObjectSummaryDataComponent, selector: "yuv-object-summary-data", inputs: ["dmsObject", "flavors", "showAppliedFlavors"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version", "metadata"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ManageVersionsComponent, isStandalone: true, selector: "ymd-manage-versions", providers: [ObjectPreviewService], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.app.drive.versions.header.label' | translate\">\n  <main>\n    <div class=\"progress-bar-container\">\n      @if (isLoading()) {\n        <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n      }\n    </div>\n    <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"layoutSettingIdBase + 'split'\">\n      <!-- Versions -->\n      <ng-template yuvSplitArea [size]=\"60\">\n        <div class=\"version-details\">\n          <header>\n            <span>{{ dmsObject().name }}</span>\n          </header>\n          <div class=\"details\">\n            @let selected = selectedVersion();\n            @if (selected && selected.length === 1) {\n              <mat-tab-group class=\"version-tabs\">\n                <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.content.title' | translate\">\n                  <ng-template matTabContent>\n                    <yuv-object-preview [dmsObject]=\"selected[0]\" [version]=\"selected[0].version\"></yuv-object-preview>\n                  </ng-template>\n                </mat-tab>\n                <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.indexdata.title' | translate\">\n                  <ng-template matTabContent>\n                    <yuv-object-summary-data [dmsObject]=\"selected[0]\"></yuv-object-summary-data>\n                  </ng-template>\n                </mat-tab>\n              </mat-tab-group>\n            }\n          </div>\n        </div>\n      </ng-template>\n      <!-- Details -->\n      <ng-template yuvSplitArea [size]=\"40\">\n        <div class=\"versions\">\n          <header>\n            <h2>{{ 'yuv.app.drive.versions.header.label.short' | translate }}</h2>\n            <div class=\"actions\">\n              <button mat-icon-button class=\"refresh\" (click)=\"reloadList()\"><mat-icon>refresh</mat-icon></button>\n            </div>\n          </header>\n          <ymd-versions-list\n            class=\"staggered\"\n            [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n            [attr.aria-busy]=\"isLoading()\"\n            [attr.role]=\"'listbox'\"\n            [id]=\"id()\"\n          >\n          </ymd-versions-list>\n        </div>\n      </ng-template>\n    </yuv-split-view>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" class=\"close\" (click)=\"close()\">{{ 'yuv.app.drive.action.set.new.versions.cancel' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledRestore()\" (click)=\"setNewVersion()\">\n      {{ 'yuv.app.drive.action.set.new.versions.label' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{display:contents}:host .progress-bar-container{height:calc(var(--ymt-progress-bar-height) + 1px);background-color:transparent}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);height:100%}:host header{display:grid;grid-template-columns:2fr max-content;grid-template-rows:1fr max-content;gap:0px 0px;grid-auto-flow:row;grid-template-areas:\"label actions\" \"title title\";padding:var(--ymt-spacing-m);align-items:center}:host .versions,:host .version-details{display:flex;flex-flow:column;height:100%}:host .version-details .details{flex:1;overflow-y:hidden}:host .version-details .details .version-tabs{height:100%}:host .version-details .details ::ng-deep .mat-mdc-tab-body-wrapper{height:100%;overflow:hidden}:host .versions header{border-bottom:1px solid var(--ymt-outline-variant);padding-top:0}:host .versions .label{grid-area:label}:host .versions .actions{grid-area:actions;display:flex;justify-content:center;align-items:center}:host .versions .actions button{padding:0}:host .versions .title{grid-area:title}:host .versions .staggered{flex:1;overflow-y:scroll}:host .versions-details{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible", "lockSize"] }, { kind: "component", type: i1$2.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: VersionsListComponent, selector: "ymd-versions-list" }, { kind: "component", type: ObjectSummaryDataComponent, selector: "yuv-object-summary-data", inputs: ["dmsObject", "flavors", "showAppliedFlavors"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version", "metadata"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ManageVersionsComponent, decorators: [{
             type: Component,
@@ -2106,7 +2106,7 @@ class FolderDetailsDialogComponent {
         this.#dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FolderDetailsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FolderDetailsDialogComponent, isStandalone: true, selector: "ymd-folder-details-dialog", ngImport: i0, template: "<yuv-dialog [headertitel]=\"folderName\">\n  <main [yuvBusyOverlay]=\"metadata.busySaving()\">\n    <yuv-object-metadata\n      [flavoredDmsObject]=\"flavoredDmsObject()\"\n      #metadata\n      [disableControls]=\"true\"\n      (statusChanged)=\"onMetadataStatusChanged($event)\"\n      (indexDataSaved)=\"onIndexdataSaved($event)\"\n    >\n    </yuv-object-metadata>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"metadata.busySaving()\">\n      {{ 'yuv.app.drive.action.rename.cancel' | translate }}\n    </button>\n    <button ymtButton=\"secondary\" (click)=\"metadata.resetForm()\" [hidden]=\"!formState()?.dirty\" [disabled]=\"!formState()?.dirty\">\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      class=\"primary\"\n      [ngClass]=\"{ spinning: metadata.busySaving() }\"\n      (click)=\"metadata.save()\"\n      [disabled]=\"!formState()?.dirty || formState()?.invalid\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ObjectMetadataComponent, selector: "yuv-object-metadata", inputs: ["disableControls", "disableBasicMetadata", "elementExtensions", "situation", "formDisabled", "dmsObject", "flavoredDmsObject", "flavors"], outputs: ["indexDataSaved", "statusChanged"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FolderDetailsDialogComponent, isStandalone: true, selector: "ymd-folder-details-dialog", ngImport: i0, template: "<yuv-dialog [headertitel]=\"folderName\">\n  <main [yuvBusyOverlay]=\"metadata.busySaving()\">\n    <yuv-object-metadata\n      [flavoredDmsObject]=\"flavoredDmsObject()\"\n      #metadata\n      [disableControls]=\"true\"\n      (statusChanged)=\"onMetadataStatusChanged($event)\"\n      (indexDataSaved)=\"onIndexdataSaved($event)\"\n    >\n    </yuv-object-metadata>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"metadata.busySaving()\">\n      {{ 'yuv.app.drive.action.rename.cancel' | translate }}\n    </button>\n    <button ymtButton=\"secondary\" (click)=\"metadata.resetForm()\" [hidden]=\"!formState()?.dirty\" [disabled]=\"!formState()?.dirty\">\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      class=\"primary\"\n      [ngClass]=\"{ spinning: metadata.busySaving() }\"\n      (click)=\"metadata.save()\"\n      [disabled]=\"!formState()?.dirty || formState()?.invalid\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ObjectMetadataComponent, selector: "yuv-object-metadata", inputs: ["disableControls", "disableBasicMetadata", "elementExtensions", "situation", "formDisabled", "dmsObject", "flavoredDmsObject", "flavors"], outputs: ["indexDataSaved", "statusChanged"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FolderDetailsDialogComponent, decorators: [{
             type: Component,
@@ -2337,7 +2337,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 const components = [
     TileListComponent,
     BreadcrumbComponent,
-    FolderTreeComponent,
+    ListComponent,
+    ListItemDirective,
     ObjectSummaryComponent,
     TileConfigTriggerComponent,
     RibbonComponent,
@@ -2367,6 +2368,8 @@ class FilesPageComponent {
     #retention = inject(RetentionService);
     #shell = inject(ShellService);
     #dialog = inject(MatDialog);
+    #router = inject(Router);
+    #route = inject(ActivatedRoute);
     #eventService = inject(EventService);
     ERROR_CODE = {
         NOT_FOUND: '404',
@@ -2455,6 +2458,44 @@ class FilesPageComponent {
             ]
             : [];
     }));
+    dataSource = [
+        {
+            id: 0,
+            route: 'mydrive',
+            name: this.translate.instant('yuv.app.drive.folder-tree.mydrive'),
+        },
+        {
+            id: 1,
+            route: 'ymsq.ymd.recent.added.by.me',
+            name: this.translate.instant('ymsq.ymd.recent.added.by.me')
+        },
+        {
+            id: 2,
+            route: 'ymsq.ymd.recent.modified.by.me',
+            name: this.translate.instant('ymsq.ymd.recent.modified.by.me')
+        }
+    ];
+    currentPage = this.dataSource[0].route;
+    itemSelected(idx) {
+        const node = this.dataSource.find(({ id }) => id === idx[0]);
+        if (node) {
+            this.routeChange(node);
+        }
+    }
+    routeChange(node) {
+        const commands = node.route === 'mydrive'
+            ? ['..', DRIVE_ROOT_FOLDER_ID]
+            : node.route.startsWith(STORED_QUERY_ID_PREFIX)
+                ? ['..', DRIVE_QUERY_FOLDER_ID]
+                : ['..', node.route];
+        const extras = { relativeTo: this.#route };
+        if (node.route.startsWith(STORED_QUERY_ID_PREFIX)) {
+            extras.queryParams = { q: node.route };
+        }
+        this.#router.navigate(commands, extras)
+            .then(() => (this.currentPage = node.route))
+            .catch((e) => { throw new Error(e); });
+    }
     #highlightStyles = {
         cut: { opacity: 0.5 }
     };
@@ -2689,13 +2730,13 @@ class FilesPageComponent {
         this.clipboard.clear(APP_ID);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FilesPageComponent, isStandalone: true, selector: "ymd-files", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.smallScreen": "smallScreenLayout()" } }, viewQueries: [{ propertyName: "tileList", first: true, predicate: ["tileList"], descendants: true, isSignal: true }, { propertyName: "splitViewCmp", first: true, predicate: SplitViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<header>\n  <!-- navigation bar -->\n  <nav [attr.aria-label]=\"'yuv.app.drive.files.naviagtion.aria.label' | translate\">\n    <div class=\"nav\">\n      <button mat-icon-button [disabled]=\"!currentFolder\" [matTooltip]=\"'yuv.app.drive.files.nav.back.tooltip' | translate\" (click)=\"openParent()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button mat-icon-button [matTooltip]=\"'yuv.app.drive.files.nav.refresh.tooltip' | translate\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </div>\n\n    @if (!query()?.term) {\n      <ymd-breadcrumb></ymd-breadcrumb>\n    } @else {\n      <div class=\"breadcrumb\"></div>\n    }\n  </nav>\n\n  <!-- ribbon with actions and options -->\n  <ymd-ribbon [objects]=\"selection()\" [busy]=\"busy()\" [enableClipboard]=\"true\" class=\"files__surface\">\n    <ng-template #primaryActions>\n      <ymd-add-button [disabled]=\"disableCreate\" [canCreateFolder]=\"canCreateFolder\" [canUploadFile]=\"canUploadFile\"></ymd-add-button>\n    </ng-template>\n\n    <ng-template #secondaryActions>\n      <div class=\"options\">\n        @if (!smallScreenLayout()) {\n          <button\n            mat-icon-button\n            class=\"toggle-tree toggle\"\n            [ngClass]=\"{ enabled: enableTree() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n            (click)=\"enableTree.set(!enableTree())\"\n          >\n            <mat-icon>dock_to_right</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            class=\"toggle-details toggle\"\n            [ngClass]=\"{ enabled: enableDetails() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n            (click)=\"enableDetails.set(!enableDetails())\"\n          >\n            <mat-icon>dock_to_left</mat-icon>\n          </button>\n        }\n        <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n      </div>\n    </ng-template>\n  </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n  <!-- folder tree -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n    <ymd-folder-tree></ymd-folder-tree>\n  </ng-template>\n\n  <!-- files -->\n  <ng-template yuvSplitArea [size]=\"60\">\n    @let err = error();\n    @if (err) {\n      <div class=\"error\">\n        <p>\n          <mat-icon>warning</mat-icon>\n          @switch (err) {\n            @case (ERROR_CODE.NOT_FOUND) {\n              {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n            }\n            @case (ERROR_CODE.INVALID_ID) {\n              {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n            }\n            @default {\n              {{ 'yuv.app.drive.files.error.load' | translate }}\n            }\n          }\n        </p>\n      </div>\n    } @else {\n        <div class=\"files\" [fileDropDisabled]=\"this.disableCreate || !canUploadFile\" [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.label' | translate }\" (fileDrop)=\"onFileDrop($event)\">\n        <header class=\"files-header\">\n          <h1>{{ queryTitle() }}</h1>\n          @if (sortOptionsAvailable()) {\n            <yuv-sort [sortOptions]=\"sortOptions()\" [storageKey]=\"storageKey\" (sortChanged)=\"onSortChanged($event)\"></yuv-sort>\n          }\n          <!-- <div class=\"flavors\">\n          TODO: enable again once flavors/aspects are supported -->\n          <!--  @for (f of flavorChips; track f.id) {\n            <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n          }\n          </div>-->\n          @if (query()?.term && !extendedQuery()) {\n            <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n          }\n        </header>\n        <yuv-tile-list\n          #tileList\n          [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n          [attr.aria-busy]=\"busy()\"\n          [attr.role]=\"'listbox'\"\n          (keydown.backspace)=\"openParent()\"\n          (keydown.delete)=\"onDelete()\"\n          [bucket]=\"objectConfigBucket\"\n          [multiselect]=\"true\"\n          [query]=\"query()\"\n          [flavor]=\"appliedFlavor\"\n          [options]=\"tileListOptions\"\n          (itemDblClick)=\"itemDoubleClicked($event)\"\n          (itemSelect)=\"itemClicked($event)\"\n          (selectionChange)=\"selectionChanged($event)\"\n          (tileCopy)=\"onCopy($event)\"\n          (tileCut)=\"onCut($event)\"\n          (busy)=\"setBusy($event)\"\n          [highlights]=\"highlightStyles$ | async\"\n          [yuvContextMenuTrigger]=\"context_menu\"\n          [yuvContextMenuTriggerWhen]=\"hasActions()\"\n        >\n          <div #empty>\n            @if (emptyMode() === 'root') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n            } @else if (emptyMode() === 'query') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n            } @else {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n            }\n          </div>\n\n          <ng-template #context_menu>\n            <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n          </ng-template>\n        </yuv-tile-list>\n      </div>\n    }\n  </ng-template>\n\n  <!-- details -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n    @let selectedItem = selected();\n    @if (enableDetails() && selectedItem) {\n      @if (selectedItem?.isFolder) {\n        <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n      } @else {\n        <yuv-object-preview [dmsObject]=\"selectedItem\"></yuv-object-preview>\n      }\n    } @else {\n      @let sel = selection();\n      @if (sel && sel.length > 0) {\n        <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n      } @else if (tileList()?.items?.length === 0) {\n        <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n        <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n      } @else {\n        <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n      }\n    }\n  </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort\" \"flavors flavors\" \"searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible", "lockSize"] }, { kind: "component", type: i1$2.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "component", type: TileListComponent, selector: "yuv-tile-list", inputs: ["bucket", "pageSize", "multiselect", "dense", "options", "flavor", "query", "preselect", "highlights", "preventChangeUntil"], outputs: ["itemSelect", "tileCopy", "tileCut", "busy", "queryResult", "selectionChange", "itemDblClick", "ctxMenu"] }, { kind: "component", type: BreadcrumbComponent, selector: "ymd-breadcrumb" }, { kind: "component", type: FolderTreeComponent, selector: "ymd-folder-tree" }, { kind: "component", type: ObjectSummaryComponent, selector: "yuv-object-summary", inputs: ["actions", "dmsObject", "objectId", "configType"] }, { kind: "component", type: TileConfigTriggerComponent, selector: "yuv-tile-config-trigger", inputs: ["icon", "bucket", "bucketLabel", "options", "small"] }, { kind: "component", type: RibbonComponent, selector: "ymd-ribbon", inputs: ["busy", "enableClipboard", "objects", "excludeActions"] }, { kind: "component", type: AddButtonComponent, selector: "ymd-add-button", inputs: ["disabled", "canCreateFolder", "canUploadFile"] }, { kind: "component", type: MultiObjectSummaryComponent, selector: "yuv-multi-object-summary", inputs: ["headline"] }, { kind: "component", type: SortComponent, selector: "yuv-sort", inputs: ["sortOptions", "selectedSortOption", "storageKey", "small"], outputs: ["sortChanged"] }, { kind: "component", type: SearchFilterComponent, selector: "ymd-search-filter", inputs: ["query"], outputs: ["queryChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FileDropZoneDirective, selector: "[yuvFileDropZone]", inputs: ["yuvFileDropZone", "fileDropDisabled"], outputs: ["fileDrop", "fileDropOver"] }, { kind: "component", type: ContextmenuComponent, selector: "yuv-contextmenu", inputs: ["actions", "selection"], outputs: ["itemSelect"] }, { kind: "directive", type: YuvContextMenuTriggerDirective, selector: "[yuvContextMenuTrigger]", inputs: ["yuvContextMenuTrigger", "yuvContextMenuTriggerWhen"], exportAs: ["yuvContextMenuTrigger"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version", "metadata"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FilesPageComponent, isStandalone: true, selector: "ymd-files", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.smallScreen": "smallScreenLayout()" } }, viewQueries: [{ propertyName: "tileList", first: true, predicate: ["tileList"], descendants: true, isSignal: true }, { propertyName: "splitViewCmp", first: true, predicate: SplitViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<header>\n  <!-- navigation bar -->\n  <nav [attr.aria-label]=\"'yuv.app.drive.files.naviagtion.aria.label' | translate\">\n    <div class=\"nav\">\n      <button mat-icon-button [disabled]=\"!currentFolder\" [matTooltip]=\"'yuv.app.drive.files.nav.back.tooltip' | translate\" (click)=\"openParent()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button mat-icon-button [matTooltip]=\"'yuv.app.drive.files.nav.refresh.tooltip' | translate\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </div>\n\n    @if (!query()?.term) {\n      <ymd-breadcrumb></ymd-breadcrumb>\n    } @else {\n      <div class=\"breadcrumb\"></div>\n    }\n  </nav>\n\n  <!-- ribbon with actions and options -->\n  <ymd-ribbon [objects]=\"selection()\" [busy]=\"busy()\" [enableClipboard]=\"true\" class=\"files__surface\">\n    <ng-template #primaryActions>\n      <ymd-add-button [disabled]=\"disableCreate\" [canCreateFolder]=\"canCreateFolder\" [canUploadFile]=\"canUploadFile\"></ymd-add-button>\n    </ng-template>\n\n    <ng-template #secondaryActions>\n      <div class=\"options\">\n        @if (!smallScreenLayout()) {\n          <button\n            mat-icon-button\n            class=\"toggle-tree toggle\"\n            [ngClass]=\"{ enabled: enableTree() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n            (click)=\"enableTree.set(!enableTree())\"\n          >\n            <mat-icon>dock_to_right</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            class=\"toggle-details toggle\"\n            [ngClass]=\"{ enabled: enableDetails() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n            (click)=\"enableDetails.set(!enableDetails())\"\n          >\n            <mat-icon>dock_to_left</mat-icon>\n          </button>\n        }\n      </div>\n    </ng-template>\n  </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n  <!-- folder tree -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n     <yuv-list (itemSelect)=\"itemSelected($event)\" selectOnEnter=\"true\" [autoSelect]=\"true\">\n       @for (source of dataSource; track source.id){\n          <div yuvListItem>\n            <span class=\"desc\">{{ source.name }}</span>\n          </div>\n        }\n     </yuv-list>\n  </ng-template>\n\n  <!-- files -->\n  <ng-template yuvSplitArea [size]=\"60\">\n    @let err = error();\n    @if (err) {\n      <div class=\"error\">\n        <p>\n          <mat-icon>warning</mat-icon>\n          @switch (err) {\n            @case (ERROR_CODE.NOT_FOUND) {\n              {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n            }\n            @case (ERROR_CODE.INVALID_ID) {\n              {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n            }\n            @default {\n              {{ 'yuv.app.drive.files.error.load' | translate }}\n            }\n          }\n        </p>\n      </div>\n    } @else {\n        <div class=\"files\" [fileDropDisabled]=\"this.disableCreate || !canUploadFile\" [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.label' | translate }\" (fileDrop)=\"onFileDrop($event)\">\n        <header class=\"files-header\">\n          <h1>{{ queryTitle() }}</h1>\n          @if (sortOptionsAvailable()) {\n            <yuv-sort [sortOptions]=\"sortOptions()\" [storageKey]=\"storageKey\" (sortChanged)=\"onSortChanged($event)\"></yuv-sort>\n          }\n          <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n          <!-- <div class=\"flavors\">\n          TODO: enable again once flavors/aspects are supported -->\n          <!--  @for (f of flavorChips; track f.id) {\n            <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n          }\n          </div>-->\n          @if (query()?.term && !extendedQuery()) {\n            <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n          }\n        </header>\n        <yuv-tile-list\n          #tileList\n          [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n          [attr.aria-busy]=\"busy()\"\n          [attr.role]=\"'listbox'\"\n          (keydown.backspace)=\"openParent()\"\n          (keydown.delete)=\"onDelete()\"\n          [bucket]=\"objectConfigBucket\"\n          [multiselect]=\"true\"\n          [query]=\"query()\"\n          [flavor]=\"appliedFlavor\"\n          [options]=\"tileListOptions\"\n          (itemDblClick)=\"itemDoubleClicked($event)\"\n          (itemSelect)=\"itemClicked($event)\"\n          (selectionChange)=\"selectionChanged($event)\"\n          (tileCopy)=\"onCopy($event)\"\n          (tileCut)=\"onCut($event)\"\n          (busy)=\"setBusy($event)\"\n          [highlights]=\"highlightStyles$ | async\"\n          [yuvContextMenuTrigger]=\"context_menu\"\n          [yuvContextMenuTriggerWhen]=\"hasActions()\"\n        >\n          <div #empty>\n            @if (emptyMode() === 'root') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n            } @else if (emptyMode() === 'query') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n            } @else {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n            }\n          </div>\n\n          <ng-template #context_menu>\n            <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n          </ng-template>\n        </yuv-tile-list>\n      </div>\n    }\n  </ng-template>\n\n  <!-- details -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n    @let selectedItem = selected();\n    @if (enableDetails() && selectedItem) {\n      @if (selectedItem?.isFolder) {\n        <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n      } @else {\n        <yuv-object-preview [dmsObject]=\"selectedItem\"></yuv-object-preview>\n      }\n    } @else {\n      @let sel = selection();\n      @if (sel && sel.length > 0) {\n        <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n      } @else if (tileList()?.items?.length === 0) {\n        <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n        <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n      } @else {\n        <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n      }\n    }\n  </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort config\" \"flavors flavors flavors\" \"searchfilter searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header yuv-tile-config-trigger{grid-area:config}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host yuv-list{outline:0}:host yuv-list [yuvListItem]{cursor:pointer;display:flex;font-size:14px;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host yuv-list [yuvListItem]:nth-child(2){border-block-end:1px solid rgb(from var(--ymt-on-primary) r g b/.2)}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible", "lockSize"] }, { kind: "component", type: i1$2.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "component", type: TileListComponent, selector: "yuv-tile-list", inputs: ["bucket", "pageSize", "multiselect", "dense", "options", "flavor", "query", "preselect", "highlights", "preventChangeUntil"], outputs: ["itemSelect", "tileCopy", "tileCut", "busy", "queryResult", "selectionChange", "itemDblClick", "ctxMenu"] }, { kind: "component", type: BreadcrumbComponent, selector: "ymd-breadcrumb" }, { kind: "component", type: ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: ObjectSummaryComponent, selector: "yuv-object-summary", inputs: ["actions", "dmsObject", "objectId", "configType"] }, { kind: "component", type: TileConfigTriggerComponent, selector: "yuv-tile-config-trigger", inputs: ["icon", "bucket", "bucketLabel", "options", "small"] }, { kind: "component", type: RibbonComponent, selector: "ymd-ribbon", inputs: ["busy", "enableClipboard", "objects", "excludeActions"] }, { kind: "component", type: AddButtonComponent, selector: "ymd-add-button", inputs: ["disabled", "canCreateFolder", "canUploadFile"] }, { kind: "component", type: MultiObjectSummaryComponent, selector: "yuv-multi-object-summary", inputs: ["headline"] }, { kind: "component", type: SortComponent, selector: "yuv-sort", inputs: ["sortOptions", "selectedSortOption", "storageKey", "small"], outputs: ["sortChanged"] }, { kind: "component", type: SearchFilterComponent, selector: "ymd-search-filter", inputs: ["query"], outputs: ["queryChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FileDropZoneDirective, selector: "[yuvFileDropZone]", inputs: ["yuvFileDropZone", "fileDropDisabled"], outputs: ["fileDrop", "fileDropOver"] }, { kind: "component", type: ContextmenuComponent, selector: "yuv-contextmenu", inputs: ["actions", "selection"], outputs: ["itemSelect"] }, { kind: "directive", type: YuvContextMenuTriggerDirective, selector: "[yuvContextMenuTrigger]", inputs: ["yuvContextMenuTrigger", "yuvContextMenuTriggerWhen"], exportAs: ["yuvContextMenuTrigger"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version", "metadata"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilesPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymd-files', standalone: true, imports: [NgClass, AsyncPipe, ...module, ...components, FileDropZoneDirective, ContextmenuComponent, YuvContextMenuTriggerDirective, ObjectPreviewComponent], host: {
                         '[class.smallScreen]': 'smallScreenLayout()'
-                    }, template: "<header>\n  <!-- navigation bar -->\n  <nav [attr.aria-label]=\"'yuv.app.drive.files.naviagtion.aria.label' | translate\">\n    <div class=\"nav\">\n      <button mat-icon-button [disabled]=\"!currentFolder\" [matTooltip]=\"'yuv.app.drive.files.nav.back.tooltip' | translate\" (click)=\"openParent()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button mat-icon-button [matTooltip]=\"'yuv.app.drive.files.nav.refresh.tooltip' | translate\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </div>\n\n    @if (!query()?.term) {\n      <ymd-breadcrumb></ymd-breadcrumb>\n    } @else {\n      <div class=\"breadcrumb\"></div>\n    }\n  </nav>\n\n  <!-- ribbon with actions and options -->\n  <ymd-ribbon [objects]=\"selection()\" [busy]=\"busy()\" [enableClipboard]=\"true\" class=\"files__surface\">\n    <ng-template #primaryActions>\n      <ymd-add-button [disabled]=\"disableCreate\" [canCreateFolder]=\"canCreateFolder\" [canUploadFile]=\"canUploadFile\"></ymd-add-button>\n    </ng-template>\n\n    <ng-template #secondaryActions>\n      <div class=\"options\">\n        @if (!smallScreenLayout()) {\n          <button\n            mat-icon-button\n            class=\"toggle-tree toggle\"\n            [ngClass]=\"{ enabled: enableTree() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n            (click)=\"enableTree.set(!enableTree())\"\n          >\n            <mat-icon>dock_to_right</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            class=\"toggle-details toggle\"\n            [ngClass]=\"{ enabled: enableDetails() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n            (click)=\"enableDetails.set(!enableDetails())\"\n          >\n            <mat-icon>dock_to_left</mat-icon>\n          </button>\n        }\n        <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n      </div>\n    </ng-template>\n  </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n  <!-- folder tree -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n    <ymd-folder-tree></ymd-folder-tree>\n  </ng-template>\n\n  <!-- files -->\n  <ng-template yuvSplitArea [size]=\"60\">\n    @let err = error();\n    @if (err) {\n      <div class=\"error\">\n        <p>\n          <mat-icon>warning</mat-icon>\n          @switch (err) {\n            @case (ERROR_CODE.NOT_FOUND) {\n              {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n            }\n            @case (ERROR_CODE.INVALID_ID) {\n              {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n            }\n            @default {\n              {{ 'yuv.app.drive.files.error.load' | translate }}\n            }\n          }\n        </p>\n      </div>\n    } @else {\n        <div class=\"files\" [fileDropDisabled]=\"this.disableCreate || !canUploadFile\" [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.label' | translate }\" (fileDrop)=\"onFileDrop($event)\">\n        <header class=\"files-header\">\n          <h1>{{ queryTitle() }}</h1>\n          @if (sortOptionsAvailable()) {\n            <yuv-sort [sortOptions]=\"sortOptions()\" [storageKey]=\"storageKey\" (sortChanged)=\"onSortChanged($event)\"></yuv-sort>\n          }\n          <!-- <div class=\"flavors\">\n          TODO: enable again once flavors/aspects are supported -->\n          <!--  @for (f of flavorChips; track f.id) {\n            <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n          }\n          </div>-->\n          @if (query()?.term && !extendedQuery()) {\n            <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n          }\n        </header>\n        <yuv-tile-list\n          #tileList\n          [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n          [attr.aria-busy]=\"busy()\"\n          [attr.role]=\"'listbox'\"\n          (keydown.backspace)=\"openParent()\"\n          (keydown.delete)=\"onDelete()\"\n          [bucket]=\"objectConfigBucket\"\n          [multiselect]=\"true\"\n          [query]=\"query()\"\n          [flavor]=\"appliedFlavor\"\n          [options]=\"tileListOptions\"\n          (itemDblClick)=\"itemDoubleClicked($event)\"\n          (itemSelect)=\"itemClicked($event)\"\n          (selectionChange)=\"selectionChanged($event)\"\n          (tileCopy)=\"onCopy($event)\"\n          (tileCut)=\"onCut($event)\"\n          (busy)=\"setBusy($event)\"\n          [highlights]=\"highlightStyles$ | async\"\n          [yuvContextMenuTrigger]=\"context_menu\"\n          [yuvContextMenuTriggerWhen]=\"hasActions()\"\n        >\n          <div #empty>\n            @if (emptyMode() === 'root') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n            } @else if (emptyMode() === 'query') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n            } @else {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n            }\n          </div>\n\n          <ng-template #context_menu>\n            <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n          </ng-template>\n        </yuv-tile-list>\n      </div>\n    }\n  </ng-template>\n\n  <!-- details -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n    @let selectedItem = selected();\n    @if (enableDetails() && selectedItem) {\n      @if (selectedItem?.isFolder) {\n        <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n      } @else {\n        <yuv-object-preview [dmsObject]=\"selectedItem\"></yuv-object-preview>\n      }\n    } @else {\n      @let sel = selection();\n      @if (sel && sel.length > 0) {\n        <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n      } @else if (tileList()?.items?.length === 0) {\n        <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n        <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n      } @else {\n        <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n      }\n    }\n  </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort\" \"flavors flavors\" \"searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"] }]
+                    }, template: "<header>\n  <!-- navigation bar -->\n  <nav [attr.aria-label]=\"'yuv.app.drive.files.naviagtion.aria.label' | translate\">\n    <div class=\"nav\">\n      <button mat-icon-button [disabled]=\"!currentFolder\" [matTooltip]=\"'yuv.app.drive.files.nav.back.tooltip' | translate\" (click)=\"openParent()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button mat-icon-button [matTooltip]=\"'yuv.app.drive.files.nav.refresh.tooltip' | translate\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </div>\n\n    @if (!query()?.term) {\n      <ymd-breadcrumb></ymd-breadcrumb>\n    } @else {\n      <div class=\"breadcrumb\"></div>\n    }\n  </nav>\n\n  <!-- ribbon with actions and options -->\n  <ymd-ribbon [objects]=\"selection()\" [busy]=\"busy()\" [enableClipboard]=\"true\" class=\"files__surface\">\n    <ng-template #primaryActions>\n      <ymd-add-button [disabled]=\"disableCreate\" [canCreateFolder]=\"canCreateFolder\" [canUploadFile]=\"canUploadFile\"></ymd-add-button>\n    </ng-template>\n\n    <ng-template #secondaryActions>\n      <div class=\"options\">\n        @if (!smallScreenLayout()) {\n          <button\n            mat-icon-button\n            class=\"toggle-tree toggle\"\n            [ngClass]=\"{ enabled: enableTree() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n            (click)=\"enableTree.set(!enableTree())\"\n          >\n            <mat-icon>dock_to_right</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            class=\"toggle-details toggle\"\n            [ngClass]=\"{ enabled: enableDetails() }\"\n            [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n            (click)=\"enableDetails.set(!enableDetails())\"\n          >\n            <mat-icon>dock_to_left</mat-icon>\n          </button>\n        }\n      </div>\n    </ng-template>\n  </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n  <!-- folder tree -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n     <yuv-list (itemSelect)=\"itemSelected($event)\" selectOnEnter=\"true\" [autoSelect]=\"true\">\n       @for (source of dataSource; track source.id){\n          <div yuvListItem>\n            <span class=\"desc\">{{ source.name }}</span>\n          </div>\n        }\n     </yuv-list>\n  </ng-template>\n\n  <!-- files -->\n  <ng-template yuvSplitArea [size]=\"60\">\n    @let err = error();\n    @if (err) {\n      <div class=\"error\">\n        <p>\n          <mat-icon>warning</mat-icon>\n          @switch (err) {\n            @case (ERROR_CODE.NOT_FOUND) {\n              {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n            }\n            @case (ERROR_CODE.INVALID_ID) {\n              {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n            }\n            @default {\n              {{ 'yuv.app.drive.files.error.load' | translate }}\n            }\n          }\n        </p>\n      </div>\n    } @else {\n        <div class=\"files\" [fileDropDisabled]=\"this.disableCreate || !canUploadFile\" [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.label' | translate }\" (fileDrop)=\"onFileDrop($event)\">\n        <header class=\"files-header\">\n          <h1>{{ queryTitle() }}</h1>\n          @if (sortOptionsAvailable()) {\n            <yuv-sort [sortOptions]=\"sortOptions()\" [storageKey]=\"storageKey\" (sortChanged)=\"onSortChanged($event)\"></yuv-sort>\n          }\n          <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n          <!-- <div class=\"flavors\">\n          TODO: enable again once flavors/aspects are supported -->\n          <!--  @for (f of flavorChips; track f.id) {\n            <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n          }\n          </div>-->\n          @if (query()?.term && !extendedQuery()) {\n            <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n          }\n        </header>\n        <yuv-tile-list\n          #tileList\n          [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n          [attr.aria-busy]=\"busy()\"\n          [attr.role]=\"'listbox'\"\n          (keydown.backspace)=\"openParent()\"\n          (keydown.delete)=\"onDelete()\"\n          [bucket]=\"objectConfigBucket\"\n          [multiselect]=\"true\"\n          [query]=\"query()\"\n          [flavor]=\"appliedFlavor\"\n          [options]=\"tileListOptions\"\n          (itemDblClick)=\"itemDoubleClicked($event)\"\n          (itemSelect)=\"itemClicked($event)\"\n          (selectionChange)=\"selectionChanged($event)\"\n          (tileCopy)=\"onCopy($event)\"\n          (tileCut)=\"onCut($event)\"\n          (busy)=\"setBusy($event)\"\n          [highlights]=\"highlightStyles$ | async\"\n          [yuvContextMenuTrigger]=\"context_menu\"\n          [yuvContextMenuTriggerWhen]=\"hasActions()\"\n        >\n          <div #empty>\n            @if (emptyMode() === 'root') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n            } @else if (emptyMode() === 'query') {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n            } @else {\n              <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n            }\n          </div>\n\n          <ng-template #context_menu>\n            <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n          </ng-template>\n        </yuv-tile-list>\n      </div>\n    }\n  </ng-template>\n\n  <!-- details -->\n  <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n    @let selectedItem = selected();\n    @if (enableDetails() && selectedItem) {\n      @if (selectedItem?.isFolder) {\n        <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n      } @else {\n        <yuv-object-preview [dmsObject]=\"selectedItem\"></yuv-object-preview>\n      }\n    } @else {\n      @let sel = selection();\n      @if (sel && sel.length > 0) {\n        <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n      } @else if (tileList()?.items?.length === 0) {\n        <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n        <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n      } @else {\n        <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n      }\n    }\n  </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort config\" \"flavors flavors flavors\" \"searchfilter searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header yuv-tile-config-trigger{grid-area:config}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host yuv-list{outline:0}:host yuv-list [yuvListItem]{cursor:pointer;display:flex;font-size:14px;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host yuv-list [yuvListItem]:nth-child(2){border-block-end:1px solid rgb(from var(--ymt-on-primary) r g b/.2)}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ObjectPageComponent {