@yuuvis/app-drive 3.3.1 → 3.4.2

package/fesm2022/yuuvis-app-drive.mjs

@@ -37,6 +37,8 @@ import * as i4 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i2$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import * as i2$4 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import * as i5 from '@yuuvis/client-framework/list';
@@ -51,8 +53,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { ObjectFormComponent } from '@yuuvis/client-framework/object-form';
 import * as i1$2 from '@yuuvis/client-framework/split-view';
 import { YuvSplitViewModule, SplitViewComponent } from '@yuuvis/client-framework/split-view';
-import * as i2$4 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { ObjectMetadataComponent, ObjectAuditComponent } from '@yuuvis/client-framework/object-details';
@@ -154,7 +154,6 @@ const APP_FLAVORS = [
             mimeTypes: ['message/rfc822', 'application/vnd.ms-outlook'],
             documents: true
         },
-        preventRemove: true,
         preventApply: true
     }
 ];
@@ -479,12 +478,27 @@ class DriveService {
     setSort(property, order) {
         const stateQuery = this.state$.query();
         if (stateQuery) {
-            const clonedQueryState = structuredClone(stateQuery);
-            // TODO: remove if folders should stay on top
-            clonedQueryState.sort = [];
             const sort = property ? { property, order } : { ...this.#defaultSort, order };
-            patchState(this.state$, { query: clonedQueryState, sort });
-            this.applyFolderListSearchConditions(clonedQueryState, !property);
+            // Clone the query and apply the new sort directly
+            const clonedQueryState = structuredClone(stateQuery);
+            // Build the two-level sort with the NEW sort value
+            clonedQueryState.sort = [
+                {
+                    field: BaseObjectTypeField.BASE_TYPE_ID,
+                    order: 'desc'
+                },
+                {
+                    field: sort.property,
+                    order: sort.order
+                }
+            ];
+            // Update both sort and query state together with the new values.
+            // The query signal change will automatically trigger the tile-list's
+            // effect to re-execute the search — no explicit refresh event needed.
+            patchState(this.state$, {
+                sort,
+                query: clonedQueryState
+            });
         }
     }
     updateCurrentFolder(currentFolderID) {
@@ -658,31 +672,41 @@ class DriveService {
      * Apply search conditions regarding folder listings
      * @param q
      */
-    applyFolderListSearchConditions(q, addBaseTypeId = true) {
-        // folders first
-        if (!q.sort)
-            q.sort = [];
-        addBaseTypeId &&
-            q.sort.push({
+    applyFolderListSearchConditions(q) {
+        const sort = this.state$.sort() || this.#defaultSort;
+        // Always maintain two-level sort: baseTypeId first (folders first), then user selection
+        q.sort = [
+            {
                 field: BaseObjectTypeField.BASE_TYPE_ID,
                 order: 'desc'
-            });
+            },
+            {
+                field: sort.property,
+                order: sort.order
+            }
+        ];
         q = this.applyBasicSearchConditions(q);
         return q;
     }
     applyBasicSearchConditions(q) {
         if (!q.types || !q.types.includes(FS_SOTS.object))
             q.types = [...(q.types || []), FS_SOTS.object];
-        // q.sortOptions.push(new SortOption(BaseObjectTypeField.BASE_TYPE_ID, 'desc'));
-        const sort = this.state$.sort() || this.#defaultSort;
-        if (!q.sort)
-            q.sort = [];
-        q.sort.push({
-            field: sort.property,
-            order: sort.order
-        });
+        // Note: sort array should already be set by applyFolderListSearchConditions
+        // This is a fallback if sort is not set
+        if (!q.sort || q.sort.length === 0) {
+            const sort = this.state$.sort() || this.#defaultSort;
+            q.sort = [
+                {
+                    field: BaseObjectTypeField.BASE_TYPE_ID,
+                    order: 'desc'
+                },
+                {
+                    field: sort.property,
+                    order: sort.order
+                }
+            ];
+        }
         q.includePermissions = true;
-        // new SortOption(sort.property, sort.order));
         return q;
     }
     resolveFilesState(id) {
@@ -1215,11 +1239,11 @@ class AddButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AddButtonComponent, isStandalone: true, selector: "ymd-add-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canCreateFolder: { classPropertyName: "canCreateFolder", publicName: "canCreateFolder", isSignal: true, isRequired: false, transformFunction: null }, canUploadFile: { classPropertyName: "canUploadFile", publicName: "canUploadFile", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.popover": "this.popoverOpen" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-mini-fab [attr.aria-label]=\"'yuv.app.drive.create.label' | translate\" class=\"toggle primary\" [disabled]=\"disabled()\" [matMenuTriggerFor]=\"menu\">\n  <mat-icon>add</mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"add-button-menu\">\n  @for (i of defaultItems; track $index) {\n    <button mat-menu-item [disabled]=\"i.type === 'folder' ? !canCreateFolder() : !canUploadFile()\" (click)=\"onSelect($index)\">\n      <mat-icon>{{i.icon}}</mat-icon>\n      {{ i.label }}\n    </button>\n  }\n  <!-- Upload file with flavor -->\n  @for (f of flavorListItems; track f.flavor.id) {\n    <button mat-menu-item class=\"flavor\" (click)=\"onSelect($index, true)\">\n      <mat-icon>{{f.flavor.icon}}</mat-icon>\n      {{ f.label }}\n    </button>\n  }\n</mat-menu>\n\n<input style=\"display: none\" multiple=\"true\" #fileInput type=\"file\" (change)=\"createDocument(fileInput)\" />\n", styles: [".add-button-menu{border:1px solid var(--ymt-primary-container)}.add-button-menu{--mat-menu-container-color: var(--ymt-primary-container)}.add-button-menu{--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AddButtonComponent, isStandalone: true, selector: "ymd-add-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canCreateFolder: { classPropertyName: "canCreateFolder", publicName: "canCreateFolder", isSignal: true, isRequired: false, transformFunction: null }, canUploadFile: { classPropertyName: "canUploadFile", publicName: "canUploadFile", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.popover": "this.popoverOpen" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<span [matTooltip]=\"'yuv.app.drive.create.folder.tooltip' | translate\" [matTooltipDisabled]=\"!disabled()\">\n  <button mat-mini-fab [attr.aria-label]=\"'yuv.app.drive.create.label' | translate\" class=\"toggle primary\" [disabled]=\"disabled()\" [matMenuTriggerFor]=\"menu\">\n    <mat-icon>add</mat-icon>\n  </button>\n</span>\n<mat-menu #menu=\"matMenu\" class=\"add-button-menu\">\n  @for (i of defaultItems; track $index) {\n    <button mat-menu-item [disabled]=\"i.type === 'folder' ? !canCreateFolder() : !canUploadFile()\" (click)=\"onSelect($index)\">\n      <mat-icon>{{i.icon}}</mat-icon>\n      {{ i.label }}\n    </button>\n  }\n  <!-- Upload file with flavor -->\n  @for (f of flavorListItems; track f.flavor.id) {\n    <button mat-menu-item class=\"flavor\" (click)=\"onSelect($index, true)\">\n      <mat-icon>{{f.flavor.icon}}</mat-icon>\n      {{ f.label }}\n    </button>\n  }\n</mat-menu>\n\n<input style=\"display: none\" multiple=\"true\" #fileInput type=\"file\" (change)=\"createDocument(fileInput)\" />\n", styles: [".add-button-menu{border:1px solid var(--ymt-primary-container)}.add-button-menu{--mat-menu-container-color: var(--ymt-primary-container)}.add-button-menu{--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymd-add-button', standalone: true, imports: [CommonModule, TranslateModule, MatMenuModule, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<button mat-mini-fab [attr.aria-label]=\"'yuv.app.drive.create.label' | translate\" class=\"toggle primary\" [disabled]=\"disabled()\" [matMenuTriggerFor]=\"menu\">\n  <mat-icon>add</mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"add-button-menu\">\n  @for (i of defaultItems; track $index) {\n    <button mat-menu-item [disabled]=\"i.type === 'folder' ? !canCreateFolder() : !canUploadFile()\" (click)=\"onSelect($index)\">\n      <mat-icon>{{i.icon}}</mat-icon>\n      {{ i.label }}\n    </button>\n  }\n  <!-- Upload file with flavor -->\n  @for (f of flavorListItems; track f.flavor.id) {\n    <button mat-menu-item class=\"flavor\" (click)=\"onSelect($index, true)\">\n      <mat-icon>{{f.flavor.icon}}</mat-icon>\n      {{ f.label }}\n    </button>\n  }\n</mat-menu>\n\n<input style=\"display: none\" multiple=\"true\" #fileInput type=\"file\" (change)=\"createDocument(fileInput)\" />\n", styles: [".add-button-menu{border:1px solid var(--ymt-primary-container)}.add-button-menu{--mat-menu-container-color: var(--ymt-primary-container)}.add-button-menu{--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)}\n"] }]
+            args: [{ selector: 'ymd-add-button', standalone: true, imports: [CommonModule, TranslateModule, MatMenuModule, MatButtonModule, MatIconModule, MatTooltip], encapsulation: ViewEncapsulation.None, template: "<span [matTooltip]=\"'yuv.app.drive.create.folder.tooltip' | translate\" [matTooltipDisabled]=\"!disabled()\">\n  <button mat-mini-fab [attr.aria-label]=\"'yuv.app.drive.create.label' | translate\" class=\"toggle primary\" [disabled]=\"disabled()\" [matMenuTriggerFor]=\"menu\">\n    <mat-icon>add</mat-icon>\n  </button>\n</span>\n<mat-menu #menu=\"matMenu\" class=\"add-button-menu\">\n  @for (i of defaultItems; track $index) {\n    <button mat-menu-item [disabled]=\"i.type === 'folder' ? !canCreateFolder() : !canUploadFile()\" (click)=\"onSelect($index)\">\n      <mat-icon>{{i.icon}}</mat-icon>\n      {{ i.label }}\n    </button>\n  }\n  <!-- Upload file with flavor -->\n  @for (f of flavorListItems; track f.flavor.id) {\n    <button mat-menu-item class=\"flavor\" (click)=\"onSelect($index, true)\">\n      <mat-icon>{{f.flavor.icon}}</mat-icon>\n      {{ f.label }}\n    </button>\n  }\n</mat-menu>\n\n<input style=\"display: none\" multiple=\"true\" #fileInput type=\"file\" (change)=\"createDocument(fileInput)\" />\n", styles: [".add-button-menu{border:1px solid var(--ymt-primary-container)}.add-button-menu{--mat-menu-container-color: var(--ymt-primary-container)}.add-button-menu{--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)}\n"] }]
         }], propDecorators: { popoverOpen: [{
                 type: HostBinding,
                 args: ['class.popover']
@@ -1864,7 +1888,7 @@ class DriveSearchOverlayComponent {
         ]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DriveSearchOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DriveSearchOverlayComponent, isStandalone: true, selector: "ymd-drive-search-overlay", viewQueries: [{ propertyName: "objectForms", predicate: ObjectFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<h2 matDialogTitle class=\"yuv-dialog-title\">\n  {{ 'yuv.app.drive.search.extended.dialog.title' | translate }}\n</h2>\n<mat-dialog-content class=\"yuv-dialog-content\">\n  <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.app.drive.search.meta.splitview'\">\n    <!-- search options -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <form class=\"options\" role=\"search\" [formGroup]=\"filterForm\">\n        <!--  term and scope -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.term' | translate }}</mat-label>\n          <input matInput class=\"term\" type=\"search\" formControlName=\"term\" />\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.where' | translate }}</mat-label>\n          <mat-select formControlName=\"scope\" [disabled]=\"!filterForm.value.term\">\n            @for (food of scopeOptions(); track food) {\n            <mat-option [value]=\"food.value\">{{ food.label }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        <!--  types -->\n        <div class=\"options-type-list\">\n          <h2>{{ 'yuv.app.drive.search.meta.options.type' | translate }}</h2>\n          <yuv-list (itemSelect)=\"typeSelected($event)\" [selfHandleSelection]=\"true\">\n            @for (t of flavors; track t.id) {\n            <div class=\"type\" yuvListItem [ngClass]=\"{ selected: !!selectedFlavorsRec[t.id] }\">\n              <mat-pseudo-checkbox [state]=\"!!selectedFlavorsRec[t.id] ? 'checked' : 'unchecked'\"></mat-pseudo-checkbox>\n              {{ t.label }}\n            </div>\n            }\n          </yuv-list>\n        </div>\n\n        <!-- created -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.created' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"created\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- modified -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.modified' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"modified\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- content length -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.contentlength' | translate }}</mat-label>\n          <yuv-range-select-filesize formControlName=\"contentlength\"></yuv-range-select-filesize>\n        </mat-form-field>\n      </form>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"query\">\n        <h1>{{ 'yuv.app.drive.search.meta.headline.query' | translate }}</h1>\n\n        <div class=\"tokens\">\n          @if (flavorForms().length === 0 && !filterForm.value.term) {\n          <p>\n            {{ 'yuv.app.drive.search.meta.query.for-everything' | translate }}\n          </p>\n          } @for (o of flavorForms(); track o.id) {\n          <details class=\"token\" open>\n            <summary [ngClass]=\"{ dirty: (formStates[o.id] && formStates[o.id].dirty) }\">\n              @if (o.icon && o.svgIcon) {\n              <mat-icon [svgIcon]=\"o.icon\"></mat-icon>\n              } @else {\n              <mat-icon>{{ o.icon }}</mat-icon>\n              }\n              {{ o.label }}\n              <mat-icon class=\"arr\">arrow_drop_down</mat-icon>\n            </summary>\n            <yuv-object-form [formOptions]=\"o.formOptions\" (statusChanged)=\"onFormStatusChanged(o.id, $event)\"></yuv-object-form>\n          </details>\n          } @for (t of searchTokens; track $index) {\n          <div class=\"searchToken token\">\n            {{ t.label }}\n            <button mat-icon-button class=\"ymt-icon-button--size-s\" (click)=\"removeSearchToken(t)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\" class=\"yuv-dialog-actions\">\n  <button ymtButton=\"secondary\" mat-dialog-close type=\"button\" (click)=\"cancel()\">\n    {{ 'yuv.app.drive.search.meta.button.cancel' | translate }}\n  </button>\n  <button ymtButton=\"primary\" type=\"submit\" (click)=\"submit()\">\n    {{ 'yuv.app.drive.search.meta.button.search' | translate }}\n  </button>\n</mat-dialog-actions>\n", styles: [".yuv-dialog-title{border-bottom:1px solid var(--ymt-outline-variant);margin:0}.yuv-dialog-content{flex-grow:1;flex-basis:1px;max-height:inherit}.yuv-dialog-content yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:contents}.yuv-dialog-content form.options{padding:var(--ymt-spacing-m);display:flex;flex-flow:column}.yuv-dialog-content form.options [aria-disabled=true]{cursor:default;opacity:.5}.yuv-dialog-content form.options h2{font:var(--ymt-font-subhead);margin-top:0}.yuv-dialog-content form.options .type:hover{background-color:var(--ymt-surface-container-low)}.yuv-dialog-content form.options .yuv-form-field{cursor:pointer}.yuv-dialog-content form.options .options-type-list,.yuv-dialog-content form.options .yuv-form-field{margin:var(--ymt-spacing-xs) 0}.yuv-dialog-content form.options .options-type-list{margin-bottom:var(--ymt-spacing-3xl)}.yuv-dialog-content form.options .type{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs);cursor:pointer}.yuv-dialog-content .query{background-color:var(--ymt-surface);height:100%;box-sizing:border-box;overflow-y:auto;padding:var(--ymt-spacing-m)}.yuv-dialog-content .query h1{font:var(--yuv-font-display);margin:.5rem 0 1rem;color:var(--ymt-text-color-subtle)}.yuv-dialog-content .query .tokens{display:flex;flex-flow:row wrap;align-items:start;gap:var(--ymt-spacing-m)}.yuv-dialog-content .query .tokens>.token{background-color:var(--ymt-surface-container);border:1px solid var(--ymt-outline-variant);animation:searchTokenEnter .2s ease-in-out forwards;box-sizing:border-box;color:var(--ymt-text-color-subtle);border-radius:4px}.yuv-dialog-content .query .tokens details{width:var(--om-section-max-width);max-width:100%}.yuv-dialog-content .query .tokens details[open]{width:100%}.yuv-dialog-content .query .tokens details[open] mat-icon.arr{transform:rotate(180deg)}.yuv-dialog-content .query .tokens details summary{padding:var(--ymt-spacing-xs);padding-inline-end:var(--ymt-spacing-3xl);cursor:pointer;display:flex;align-items:center;position:relative;font-weight:700}.yuv-dialog-content .query .tokens details summary.dirty:after{content:\"\";width:.5em;height:.5em;border-radius:50%;background-color:var(--ymt-primary);margin-inline-start:.5em;align-self:start}.yuv-dialog-content .query .tokens details summary::marker{display:none}.yuv-dialog-content .query .tokens details summary mat-icon{margin-inline-end:var(--ymt-spacing-xs)}.yuv-dialog-content .query .tokens details summary mat-icon.arr{position:absolute;inset-inline-end:0}.yuv-dialog-content .query .tokens .searchToken{padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-xs);cursor:pointer;display:flex;align-items:center;line-height:1em;font-weight:700}.yuv-dialog-actions{border-top:1px solid var(--ymt-outline-variant)}@keyframes searchTokenEnter{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ObjectFormComponent, selector: "yuv-object-form", inputs: ["formOptions", "inert", "readonly", "elementExtensions", "isInnerTableForm"], outputs: ["statusChanged", "onFormReady"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i5.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i5.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: RangeSelectDateComponent, selector: "yuv-range-select-date", inputs: ["ranges", "customRange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatFormFieldModule }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: RangeSelectFilesizeComponent, selector: "yuv-range-select-filesize", inputs: ["ranges"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DriveSearchOverlayComponent, isStandalone: true, selector: "ymd-drive-search-overlay", viewQueries: [{ propertyName: "objectForms", predicate: ObjectFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<h2 matDialogTitle class=\"yuv-dialog-title\">\n  {{ 'yuv.app.drive.search.extended.dialog.title' | translate }}\n</h2>\n<mat-dialog-content class=\"yuv-dialog-content\">\n  <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.app.drive.search.meta.splitview'\">\n    <!-- search options -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <form class=\"options\" role=\"search\" [formGroup]=\"filterForm\">\n        <!--  term and scope -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.term' | translate }}</mat-label>\n          <input matInput class=\"term\" type=\"search\" formControlName=\"term\" />\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.where' | translate }}</mat-label>\n          <mat-select formControlName=\"scope\" [disabled]=\"!filterForm.value.term\">\n            @for (food of scopeOptions(); track food) {\n            <mat-option [value]=\"food.value\">{{ food.label }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        <!--  types -->\n        <div class=\"options-type-list\">\n          <h2>{{ 'yuv.app.drive.search.meta.options.type' | translate }}</h2>\n          <yuv-list (itemSelect)=\"typeSelected($event)\" [selfHandleSelection]=\"true\">\n            @for (t of flavors; track t.id) {\n            <div class=\"type\" yuvListItem [ngClass]=\"{ selected: !!selectedFlavorsRec[t.id] }\">\n              <mat-pseudo-checkbox [state]=\"!!selectedFlavorsRec[t.id] ? 'checked' : 'unchecked'\"></mat-pseudo-checkbox>\n              {{ t.label }}\n            </div>\n            }\n          </yuv-list>\n        </div>\n\n        <!-- created -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.system.creation-date' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"created\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- modified -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.system.modification-date' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"modified\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- content length -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.system.file-size' | translate }}</mat-label>\n          <yuv-range-select-filesize formControlName=\"contentlength\"></yuv-range-select-filesize>\n        </mat-form-field>\n      </form>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"query\">\n        <h1>{{ 'yuv.app.drive.search.meta.headline.query' | translate }}</h1>\n\n        <div class=\"tokens\">\n          @if (flavorForms().length === 0 && !filterForm.value.term) {\n          <p>\n            {{ 'yuv.app.drive.search.meta.query.for-everything' | translate }}\n          </p>\n          } @for (o of flavorForms(); track o.id) {\n          <details class=\"token\" open>\n            <summary [ngClass]=\"{ dirty: (formStates[o.id] && formStates[o.id].dirty) }\">\n              @if (o.icon && o.svgIcon) {\n              <mat-icon [svgIcon]=\"o.icon\"></mat-icon>\n              } @else {\n              <mat-icon>{{ o.icon }}</mat-icon>\n              }\n              {{ o.label }}\n              <mat-icon class=\"arr\">arrow_drop_down</mat-icon>\n            </summary>\n            <yuv-object-form [formOptions]=\"o.formOptions\" (statusChanged)=\"onFormStatusChanged(o.id, $event)\"></yuv-object-form>\n          </details>\n          } @for (t of searchTokens; track $index) {\n          <div class=\"searchToken token\">\n            {{ t.label }}\n            <button mat-icon-button class=\"ymt-icon-button--size-s\" (click)=\"removeSearchToken(t)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\" class=\"yuv-dialog-actions\">\n  <button ymtButton=\"secondary\" mat-dialog-close type=\"button\" (click)=\"cancel()\">\n    {{ 'yuv.app.drive.search.meta.button.cancel' | translate }}\n  </button>\n  <button ymtButton=\"primary\" type=\"submit\" (click)=\"submit()\">\n    {{ 'yuv.app.drive.search.meta.button.search' | translate }}\n  </button>\n</mat-dialog-actions>\n", styles: [".yuv-dialog-title{border-bottom:1px solid var(--ymt-outline-variant);margin:0}.yuv-dialog-content{flex-grow:1;flex-basis:1px;max-height:inherit}.yuv-dialog-content yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:contents}.yuv-dialog-content form.options{padding:var(--ymt-spacing-m);display:flex;flex-flow:column}.yuv-dialog-content form.options [aria-disabled=true]{cursor:default;opacity:.5}.yuv-dialog-content form.options h2{font:var(--ymt-font-subhead);margin-top:0}.yuv-dialog-content form.options .type:hover{background-color:var(--ymt-surface-container-low)}.yuv-dialog-content form.options .yuv-form-field{cursor:pointer}.yuv-dialog-content form.options .options-type-list,.yuv-dialog-content form.options .yuv-form-field{margin:var(--ymt-spacing-xs) 0}.yuv-dialog-content form.options .options-type-list{margin-bottom:var(--ymt-spacing-3xl)}.yuv-dialog-content form.options .type{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs);cursor:pointer}.yuv-dialog-content .query{background-color:var(--ymt-surface);height:100%;box-sizing:border-box;overflow-y:auto;padding:var(--ymt-spacing-m)}.yuv-dialog-content .query h1{font:var(--yuv-font-display);margin:.5rem 0 1rem;color:var(--ymt-text-color-subtle)}.yuv-dialog-content .query .tokens{display:flex;flex-flow:row wrap;align-items:start;gap:var(--ymt-spacing-m)}.yuv-dialog-content .query .tokens>.token{background-color:var(--ymt-surface-container);border:1px solid var(--ymt-outline-variant);animation:searchTokenEnter .2s ease-in-out forwards;box-sizing:border-box;color:var(--ymt-text-color-subtle);border-radius:4px}.yuv-dialog-content .query .tokens details{width:var(--om-section-max-width);max-width:100%}.yuv-dialog-content .query .tokens details[open]{width:100%}.yuv-dialog-content .query .tokens details[open] mat-icon.arr{transform:rotate(180deg)}.yuv-dialog-content .query .tokens details summary{padding:var(--ymt-spacing-xs);padding-inline-end:var(--ymt-spacing-3xl);cursor:pointer;display:flex;align-items:center;position:relative;font-weight:700}.yuv-dialog-content .query .tokens details summary.dirty:after{content:\"\";width:.5em;height:.5em;border-radius:50%;background-color:var(--ymt-primary);margin-inline-start:.5em;align-self:start}.yuv-dialog-content .query .tokens details summary::marker{display:none}.yuv-dialog-content .query .tokens details summary mat-icon{margin-inline-end:var(--ymt-spacing-xs)}.yuv-dialog-content .query .tokens details summary mat-icon.arr{position:absolute;inset-inline-end:0}.yuv-dialog-content .query .tokens .searchToken{padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-xs);cursor:pointer;display:flex;align-items:center;line-height:1em;font-weight:700}.yuv-dialog-actions{border-top:1px solid var(--ymt-outline-variant)}@keyframes searchTokenEnter{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ObjectFormComponent, selector: "yuv-object-form", inputs: ["formOptions", "inert", "readonly", "elementExtensions", "isInnerTableForm"], outputs: ["statusChanged", "onFormReady"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i5.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i5.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: RangeSelectDateComponent, selector: "yuv-range-select-date", inputs: ["ranges", "customRange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatFormFieldModule }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: RangeSelectFilesizeComponent, selector: "yuv-range-select-filesize", inputs: ["ranges"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DriveSearchOverlayComponent, decorators: [{
             type: Component,
@@ -1888,7 +1912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatPseudoCheckbox,
                         YmtButtonDirective,
                         RangeSelectFilesizeComponent
-                    ], template: "<h2 matDialogTitle class=\"yuv-dialog-title\">\n  {{ 'yuv.app.drive.search.extended.dialog.title' | translate }}\n</h2>\n<mat-dialog-content class=\"yuv-dialog-content\">\n  <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.app.drive.search.meta.splitview'\">\n    <!-- search options -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <form class=\"options\" role=\"search\" [formGroup]=\"filterForm\">\n        <!--  term and scope -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.term' | translate }}</mat-label>\n          <input matInput class=\"term\" type=\"search\" formControlName=\"term\" />\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.where' | translate }}</mat-label>\n          <mat-select formControlName=\"scope\" [disabled]=\"!filterForm.value.term\">\n            @for (food of scopeOptions(); track food) {\n            <mat-option [value]=\"food.value\">{{ food.label }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        <!--  types -->\n        <div class=\"options-type-list\">\n          <h2>{{ 'yuv.app.drive.search.meta.options.type' | translate }}</h2>\n          <yuv-list (itemSelect)=\"typeSelected($event)\" [selfHandleSelection]=\"true\">\n            @for (t of flavors; track t.id) {\n            <div class=\"type\" yuvListItem [ngClass]=\"{ selected: !!selectedFlavorsRec[t.id] }\">\n              <mat-pseudo-checkbox [state]=\"!!selectedFlavorsRec[t.id] ? 'checked' : 'unchecked'\"></mat-pseudo-checkbox>\n              {{ t.label }}\n            </div>\n            }\n          </yuv-list>\n        </div>\n\n        <!-- created -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.created' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"created\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- modified -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.modified' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"modified\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- content length -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.contentlength' | translate }}</mat-label>\n          <yuv-range-select-filesize formControlName=\"contentlength\"></yuv-range-select-filesize>\n        </mat-form-field>\n      </form>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"query\">\n        <h1>{{ 'yuv.app.drive.search.meta.headline.query' | translate }}</h1>\n\n        <div class=\"tokens\">\n          @if (flavorForms().length === 0 && !filterForm.value.term) {\n          <p>\n            {{ 'yuv.app.drive.search.meta.query.for-everything' | translate }}\n          </p>\n          } @for (o of flavorForms(); track o.id) {\n          <details class=\"token\" open>\n            <summary [ngClass]=\"{ dirty: (formStates[o.id] && formStates[o.id].dirty) }\">\n              @if (o.icon && o.svgIcon) {\n              <mat-icon [svgIcon]=\"o.icon\"></mat-icon>\n              } @else {\n              <mat-icon>{{ o.icon }}</mat-icon>\n              }\n              {{ o.label }}\n              <mat-icon class=\"arr\">arrow_drop_down</mat-icon>\n            </summary>\n            <yuv-object-form [formOptions]=\"o.formOptions\" (statusChanged)=\"onFormStatusChanged(o.id, $event)\"></yuv-object-form>\n          </details>\n          } @for (t of searchTokens; track $index) {\n          <div class=\"searchToken token\">\n            {{ t.label }}\n            <button mat-icon-button class=\"ymt-icon-button--size-s\" (click)=\"removeSearchToken(t)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\" class=\"yuv-dialog-actions\">\n  <button ymtButton=\"secondary\" mat-dialog-close type=\"button\" (click)=\"cancel()\">\n    {{ 'yuv.app.drive.search.meta.button.cancel' | translate }}\n  </button>\n  <button ymtButton=\"primary\" type=\"submit\" (click)=\"submit()\">\n    {{ 'yuv.app.drive.search.meta.button.search' | translate }}\n  </button>\n</mat-dialog-actions>\n", styles: [".yuv-dialog-title{border-bottom:1px solid var(--ymt-outline-variant);margin:0}.yuv-dialog-content{flex-grow:1;flex-basis:1px;max-height:inherit}.yuv-dialog-content yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:contents}.yuv-dialog-content form.options{padding:var(--ymt-spacing-m);display:flex;flex-flow:column}.yuv-dialog-content form.options [aria-disabled=true]{cursor:default;opacity:.5}.yuv-dialog-content form.options h2{font:var(--ymt-font-subhead);margin-top:0}.yuv-dialog-content form.options .type:hover{background-color:var(--ymt-surface-container-low)}.yuv-dialog-content form.options .yuv-form-field{cursor:pointer}.yuv-dialog-content form.options .options-type-list,.yuv-dialog-content form.options .yuv-form-field{margin:var(--ymt-spacing-xs) 0}.yuv-dialog-content form.options .options-type-list{margin-bottom:var(--ymt-spacing-3xl)}.yuv-dialog-content form.options .type{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs);cursor:pointer}.yuv-dialog-content .query{background-color:var(--ymt-surface);height:100%;box-sizing:border-box;overflow-y:auto;padding:var(--ymt-spacing-m)}.yuv-dialog-content .query h1{font:var(--yuv-font-display);margin:.5rem 0 1rem;color:var(--ymt-text-color-subtle)}.yuv-dialog-content .query .tokens{display:flex;flex-flow:row wrap;align-items:start;gap:var(--ymt-spacing-m)}.yuv-dialog-content .query .tokens>.token{background-color:var(--ymt-surface-container);border:1px solid var(--ymt-outline-variant);animation:searchTokenEnter .2s ease-in-out forwards;box-sizing:border-box;color:var(--ymt-text-color-subtle);border-radius:4px}.yuv-dialog-content .query .tokens details{width:var(--om-section-max-width);max-width:100%}.yuv-dialog-content .query .tokens details[open]{width:100%}.yuv-dialog-content .query .tokens details[open] mat-icon.arr{transform:rotate(180deg)}.yuv-dialog-content .query .tokens details summary{padding:var(--ymt-spacing-xs);padding-inline-end:var(--ymt-spacing-3xl);cursor:pointer;display:flex;align-items:center;position:relative;font-weight:700}.yuv-dialog-content .query .tokens details summary.dirty:after{content:\"\";width:.5em;height:.5em;border-radius:50%;background-color:var(--ymt-primary);margin-inline-start:.5em;align-self:start}.yuv-dialog-content .query .tokens details summary::marker{display:none}.yuv-dialog-content .query .tokens details summary mat-icon{margin-inline-end:var(--ymt-spacing-xs)}.yuv-dialog-content .query .tokens details summary mat-icon.arr{position:absolute;inset-inline-end:0}.yuv-dialog-content .query .tokens .searchToken{padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-xs);cursor:pointer;display:flex;align-items:center;line-height:1em;font-weight:700}.yuv-dialog-actions{border-top:1px solid var(--ymt-outline-variant)}@keyframes searchTokenEnter{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    ], template: "<h2 matDialogTitle class=\"yuv-dialog-title\">\n  {{ 'yuv.app.drive.search.extended.dialog.title' | translate }}\n</h2>\n<mat-dialog-content class=\"yuv-dialog-content\">\n  <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.app.drive.search.meta.splitview'\">\n    <!-- search options -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <form class=\"options\" role=\"search\" [formGroup]=\"filterForm\">\n        <!--  term and scope -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.term' | translate }}</mat-label>\n          <input matInput class=\"term\" type=\"search\" formControlName=\"term\" />\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.search.meta.options.where' | translate }}</mat-label>\n          <mat-select formControlName=\"scope\" [disabled]=\"!filterForm.value.term\">\n            @for (food of scopeOptions(); track food) {\n            <mat-option [value]=\"food.value\">{{ food.label }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        <!--  types -->\n        <div class=\"options-type-list\">\n          <h2>{{ 'yuv.app.drive.search.meta.options.type' | translate }}</h2>\n          <yuv-list (itemSelect)=\"typeSelected($event)\" [selfHandleSelection]=\"true\">\n            @for (t of flavors; track t.id) {\n            <div class=\"type\" yuvListItem [ngClass]=\"{ selected: !!selectedFlavorsRec[t.id] }\">\n              <mat-pseudo-checkbox [state]=\"!!selectedFlavorsRec[t.id] ? 'checked' : 'unchecked'\"></mat-pseudo-checkbox>\n              {{ t.label }}\n            </div>\n            }\n          </yuv-list>\n        </div>\n\n        <!-- created -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.system.creation-date' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"created\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- modified -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.system.modification-date' | translate }}</mat-label>\n          <yuv-range-select-date formControlName=\"modified\"></yuv-range-select-date>\n        </mat-form-field>\n\n        <!-- content length -->\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.drive.system.file-size' | translate }}</mat-label>\n          <yuv-range-select-filesize formControlName=\"contentlength\"></yuv-range-select-filesize>\n        </mat-form-field>\n      </form>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"query\">\n        <h1>{{ 'yuv.app.drive.search.meta.headline.query' | translate }}</h1>\n\n        <div class=\"tokens\">\n          @if (flavorForms().length === 0 && !filterForm.value.term) {\n          <p>\n            {{ 'yuv.app.drive.search.meta.query.for-everything' | translate }}\n          </p>\n          } @for (o of flavorForms(); track o.id) {\n          <details class=\"token\" open>\n            <summary [ngClass]=\"{ dirty: (formStates[o.id] && formStates[o.id].dirty) }\">\n              @if (o.icon && o.svgIcon) {\n              <mat-icon [svgIcon]=\"o.icon\"></mat-icon>\n              } @else {\n              <mat-icon>{{ o.icon }}</mat-icon>\n              }\n              {{ o.label }}\n              <mat-icon class=\"arr\">arrow_drop_down</mat-icon>\n            </summary>\n            <yuv-object-form [formOptions]=\"o.formOptions\" (statusChanged)=\"onFormStatusChanged(o.id, $event)\"></yuv-object-form>\n          </details>\n          } @for (t of searchTokens; track $index) {\n          <div class=\"searchToken token\">\n            {{ t.label }}\n            <button mat-icon-button class=\"ymt-icon-button--size-s\" (click)=\"removeSearchToken(t)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\" class=\"yuv-dialog-actions\">\n  <button ymtButton=\"secondary\" mat-dialog-close type=\"button\" (click)=\"cancel()\">\n    {{ 'yuv.app.drive.search.meta.button.cancel' | translate }}\n  </button>\n  <button ymtButton=\"primary\" type=\"submit\" (click)=\"submit()\">\n    {{ 'yuv.app.drive.search.meta.button.search' | translate }}\n  </button>\n</mat-dialog-actions>\n", styles: [".yuv-dialog-title{border-bottom:1px solid var(--ymt-outline-variant);margin:0}.yuv-dialog-content{flex-grow:1;flex-basis:1px;max-height:inherit}.yuv-dialog-content yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:contents}.yuv-dialog-content form.options{padding:var(--ymt-spacing-m);display:flex;flex-flow:column}.yuv-dialog-content form.options [aria-disabled=true]{cursor:default;opacity:.5}.yuv-dialog-content form.options h2{font:var(--ymt-font-subhead);margin-top:0}.yuv-dialog-content form.options .type:hover{background-color:var(--ymt-surface-container-low)}.yuv-dialog-content form.options .yuv-form-field{cursor:pointer}.yuv-dialog-content form.options .options-type-list,.yuv-dialog-content form.options .yuv-form-field{margin:var(--ymt-spacing-xs) 0}.yuv-dialog-content form.options .options-type-list{margin-bottom:var(--ymt-spacing-3xl)}.yuv-dialog-content form.options .type{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs);cursor:pointer}.yuv-dialog-content .query{background-color:var(--ymt-surface);height:100%;box-sizing:border-box;overflow-y:auto;padding:var(--ymt-spacing-m)}.yuv-dialog-content .query h1{font:var(--yuv-font-display);margin:.5rem 0 1rem;color:var(--ymt-text-color-subtle)}.yuv-dialog-content .query .tokens{display:flex;flex-flow:row wrap;align-items:start;gap:var(--ymt-spacing-m)}.yuv-dialog-content .query .tokens>.token{background-color:var(--ymt-surface-container);border:1px solid var(--ymt-outline-variant);animation:searchTokenEnter .2s ease-in-out forwards;box-sizing:border-box;color:var(--ymt-text-color-subtle);border-radius:4px}.yuv-dialog-content .query .tokens details{width:var(--om-section-max-width);max-width:100%}.yuv-dialog-content .query .tokens details[open]{width:100%}.yuv-dialog-content .query .tokens details[open] mat-icon.arr{transform:rotate(180deg)}.yuv-dialog-content .query .tokens details summary{padding:var(--ymt-spacing-xs);padding-inline-end:var(--ymt-spacing-3xl);cursor:pointer;display:flex;align-items:center;position:relative;font-weight:700}.yuv-dialog-content .query .tokens details summary.dirty:after{content:\"\";width:.5em;height:.5em;border-radius:50%;background-color:var(--ymt-primary);margin-inline-start:.5em;align-self:start}.yuv-dialog-content .query .tokens details summary::marker{display:none}.yuv-dialog-content .query .tokens details summary mat-icon{margin-inline-end:var(--ymt-spacing-xs)}.yuv-dialog-content .query .tokens details summary mat-icon.arr{position:absolute;inset-inline-end:0}.yuv-dialog-content .query .tokens .searchToken{padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-xs);cursor:pointer;display:flex;align-items:center;line-height:1em;font-weight:700}.yuv-dialog-actions{border-top:1px solid var(--ymt-outline-variant)}@keyframes searchTokenEnter{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [] });
 
 class DriveSearchComponent {
@@ -2052,7 +2076,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 [headertitle]=\"folderName\">\n  <main [yuvBusyOverlay]=\"metadata.busySaving()\">\n    <yuv-object-metadata\n      [dmsObject]=\"dmsObject()\"\n      [flavors]=\"flavors()\"\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"] }] });
+    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 [headertitle]=\"folderName\">\n  <main [yuvBusyOverlay]=\"metadata.busySaving()\">\n    <yuv-object-metadata\n      [dmsObject]=\"dmsObject()\"\n      [flavors]=\"flavors()\"\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", "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,
@@ -2262,13 +2286,13 @@ class RibbonComponent {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RibbonComponent, isStandalone: true, selector: "ymd-ribbon", inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, enableClipboard: { classPropertyName: "enableClipboard", publicName: "enableClipboard", isSignal: true, isRequired: false, transformFunction: null }, objects: { classPropertyName: "objects", publicName: "objects", isSignal: true, isRequired: false, transformFunction: null }, excludeActions: { classPropertyName: "excludeActions", publicName: "excludeActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ymd-ribbon" }, queries: [{ propertyName: "primarySlot", first: true, predicate: ["primaryActions"], descendants: true, isSignal: true }, { propertyName: "secondarySlot", first: true, predicate: ["secondaryActions"], descendants: true, isSignal: true }], ngImport: i0, template: "@let primary = primarySlot();\n@let secondary = secondarySlot();\n\n@if (primary) {\n  <div class=\"primary-actions\">\n    <ng-container [ngTemplateOutlet]=\"primary\"></ng-container>\n  </div>\n}\n\n<div class=\"object-actions\">\n  @if (enableClipboard()) {\n    <yuv-clipboard class=\"dark\" [bucket]=\"clipboardBucket\" [enablePaste]=\"true\" (paste)=\"onClipboardPaste()\"></yuv-clipboard>\n  }\n  <yuv-overflow-menu [menuItems]=\"menuItems\"></yuv-overflow-menu>\n</div>\n\n@if (secondary) {\n  <div class=\"secondary-actions\">\n    <ng-container [ngTemplateOutlet]=\"secondary\"></ng-container>\n  </div>\n}\n\n@if (busy()) {\n  <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n", styles: ["ymd-ribbon{--ribbon-button-padding: var(--ymt-spacing-2xs);--ribbon-button-border-radius: 2px;--ribbon-button-gap: var(--ymt-spacing-2xs);--ribbon-icon-size: 20px;flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"primary actions secondary\";align-items:center;gap:var(--ymt-spacing-xs);border-block-end:1px solid var(--ymt-outline-variant);position:relative;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s)}ymd-ribbon .primary-actions{grid-area:primary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .secondary-actions{grid-area:secondary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .object-actions{grid-area:actions;align-self:stretch;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 1px 0 1px;border-style:solid;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;padding-inline:var(--ymt-spacing-xs) 0;position:relative}ymd-ribbon .object-actions yuv-clipboard{z-index:1;position:absolute;inset:0;left:var(--ymt-spacing-xs);right:var(--ymt-spacing-xs)}ymd-ribbon .object-actions ymd-sort{grid-row:1;grid-column:1}ymd-ribbon .sort-column{grid-area:sort;display:flex;align-items:center;gap:var(--ribbon-button-gap);padding:0 var(--ribbon-button-padding)}ymd-ribbon .progress-bar{position:absolute;bottom:-1px}ymd-ribbon .progress-bar{--mdc-linear-progress-active-indicator-height: 2px}ymd-ribbon .progress-bar{--mdc-linear-progress-track-height: 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClipboardComponent, selector: "yuv-clipboard", inputs: ["enablePaste", "bucket"], outputs: ["paste"] }, { kind: "component", type: OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RibbonComponent, isStandalone: true, selector: "ymd-ribbon", inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, enableClipboard: { classPropertyName: "enableClipboard", publicName: "enableClipboard", isSignal: true, isRequired: false, transformFunction: null }, objects: { classPropertyName: "objects", publicName: "objects", isSignal: true, isRequired: false, transformFunction: null }, excludeActions: { classPropertyName: "excludeActions", publicName: "excludeActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ymd-ribbon" }, queries: [{ propertyName: "primarySlot", first: true, predicate: ["primaryActions"], descendants: true, isSignal: true }, { propertyName: "secondarySlot", first: true, predicate: ["secondaryActions"], descendants: true, isSignal: true }], ngImport: i0, template: "@let primary = primarySlot();\n@let secondary = secondarySlot();\n\n@if (primary) {\n  <div class=\"primary-actions\">\n    <ng-container [ngTemplateOutlet]=\"primary\"></ng-container>\n  </div>\n}\n\n<div class=\"object-actions\">\n  @if (enableClipboard()) {\n    <yuv-clipboard class=\"dark\" [bucket]=\"clipboardBucket\" [enablePaste]=\"true\" (paste)=\"onClipboardPaste()\"></yuv-clipboard>\n  }\n  <yuv-overflow-menu [menuItems]=\"menuItems\"></yuv-overflow-menu>\n</div>\n\n@if (secondary) {\n  <div class=\"secondary-actions\">\n    <ng-container [ngTemplateOutlet]=\"secondary\"></ng-container>\n  </div>\n}\n\n@if (busy()) {\n  <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n", styles: ["body.yuv-high-contrast{--ymt-surface-app: light-dark(#ffffff, #000000);--ymt-surface: light-dark(#f5f5f5, #0a0a0a);--ymt-surface-container-lowest: light-dark(#ffffff, #000000);--ymt-surface-container-low: light-dark(#f0f0f0, #0d0d0d);--ymt-surface-container: light-dark(#e8e8e8, #141414);--ymt-surface-container-high: light-dark(#e0e0e0, #1a1a1a);--ymt-surface-container-highest: light-dark(#d6d6d6, #212121);--ymt-surface-panel: light-dark(#ffffff, #0d0d0d);--ymt-pane-surface: light-dark(#ffffff, #000000);--ymt-pane-surface-floating: light-dark(#ffffff, #141414);--ymt-pane-surface-blank: transparent;--ymt-pane-surface-floating-inverse: light-dark(#000000, #ffffff);--ymt-bar-surface: light-dark(#ffffff, #000000);--ymt-bar-surface-blank: transparent;--ymt-on-surface: light-dark(#000000, #ffffff);--ymt-on-surface-type-subtle: light-dark(#595959, #a0a0a0);--ymt-text-color: light-dark(#000000, #ffffff);--ymt-text-color-subtle: light-dark(#595959, #a0a0a0);--ymt-on-bar-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface-floating-inverse: light-dark(#ffffff, #000000);--ymt-pane-drag-handle: light-dark(#8c8c8c, #606060);--ymt-primary: light-dark(#0047cc, #6ba4ff);--ymt-on-primary: light-dark(#ffffff, #000000);--ymt-primary-container: light-dark(#d6e4ff, #002766);--ymt-on-primary-container: light-dark(#001a52, #c8dcff);--ymt-text-color-primary: light-dark(#0047cc, #6ba4ff);--ymt-brand: light-dark(#ffffff, #000000);--ymt-on-brand: light-dark(#000000, #ffffff);--ymt-outline-width: 1px;--ymt-outline: light-dark(#767676, #737373);--ymt-outline-variant: light-dark(#949494, #525252);--ymt-outline-variant-emphasized: light-dark(#595959, #8a8a8a);--ymt-success: light-dark(#166534, #4ade80);--ymt-on-success: light-dark(#ffffff, #000000);--ymt-success-container: light-dark(#dcfce7, #003314);--ymt-on-success-container: light-dark(#14532d, #86efac);--ymt-danger: light-dark(#b91c1c, #ff6b6b);--ymt-on-danger: light-dark(#ffffff, #000000);--ymt-danger-container: light-dark(#fee2e2, #4a0000);--ymt-on-danger-container: light-dark(#7f1d1d, #ffbebe);--ymt-warning: light-dark(#92400e, #facc15);--ymt-on-warning: light-dark(#ffffff, #000000);--ymt-warning-container: light-dark(#fef3c7, #3d2800);--ymt-on-warning-container: light-dark(#78350f, #ffe082);--ymt-inverse-surface: light-dark(#000000, #ffffff);--ymt-inverse-surface-90: light-dark(rgba(0, 0, 0, .9), rgba(255, 255, 255, .9));--ymt-on-inverse-surface: light-dark(#ffffff, #000000);--ymt-scrim: #000000;--ymt-scrim-opacity: 65;--ymt-text-selection-container: light-dark(#d6e4ff, #002766);--ymt-on-text-selection-container: light-dark(#001a52, #c8dcff);--ymt-focus-background: light-dark(#e8e8e8, #1a1a1a);--ymt-on-focus-background: light-dark(#000000, #ffffff);--ymt-hover-background: light-dark(#f0f0f0, #141414);--ymt-on-hover-background: light-dark(#000000, #ffffff);--ymt-selection-background: light-dark(#d6d6d6, #212121);--ymt-on-selection-background: light-dark(#000000, #ffffff);--ymt-current-background: light-dark(#d6e4ff, #002766);--ymt-on-current-background: light-dark(#001a52, #c8dcff);--ymt-focus-indicator-size: 3px;--ymt-focus-indicator-inner: light-dark(#ffffff, #000000);--ymt-focus-indicator-outer: light-dark(#000000, #ffffff);--ymt-scrollbar-thumb-color: light-dark(#949494, #525252);--ymt-scrollbar-thumb-color-hover: light-dark(#595959, #737373);--ymt-scrollbar-track-color: light-dark(#f0f0f0, #141414);--ymt-hover-state-layer-opacity: .16;--ymt-focus-state-layer-opacity: .24;--ymt-pressed-state-layer-opacity: .32;--ymt-disabled-opacity: .5}@media (prefers-contrast: more){:root:not(.yuuvis-high-contrast-theme){color-scheme:light dark}:root:not(.yuuvis-high-contrast-theme){--ymt-surface-app: light-dark(#ffffff, #000000);--ymt-surface: light-dark(#f5f5f5, #0a0a0a);--ymt-surface-container-lowest: light-dark(#ffffff, #000000);--ymt-surface-container-low: light-dark(#f0f0f0, #0d0d0d);--ymt-surface-container: light-dark(#e8e8e8, #141414);--ymt-surface-container-high: light-dark(#e0e0e0, #1a1a1a);--ymt-surface-container-highest: light-dark(#d6d6d6, #212121);--ymt-surface-panel: light-dark(#ffffff, #0d0d0d);--ymt-pane-surface: light-dark(#ffffff, #000000);--ymt-pane-surface-floating: light-dark(#ffffff, #141414);--ymt-pane-surface-blank: transparent;--ymt-pane-surface-floating-inverse: light-dark(#000000, #ffffff);--ymt-bar-surface: light-dark(#ffffff, #000000);--ymt-bar-surface-blank: transparent;--ymt-on-surface: light-dark(#000000, #ffffff);--ymt-on-surface-type-subtle: light-dark(#595959, #a0a0a0);--ymt-text-color: light-dark(#000000, #ffffff);--ymt-text-color-subtle: light-dark(#595959, #a0a0a0);--ymt-on-bar-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface-floating-inverse: light-dark(#ffffff, #000000);--ymt-pane-drag-handle: light-dark(#8c8c8c, #606060);--ymt-primary: light-dark(#0047cc, #6ba4ff);--ymt-on-primary: light-dark(#ffffff, #000000);--ymt-primary-container: light-dark(#d6e4ff, #002766);--ymt-on-primary-container: light-dark(#001a52, #c8dcff);--ymt-text-color-primary: light-dark(#0047cc, #6ba4ff);--ymt-brand: light-dark(#ffffff, #000000);--ymt-on-brand: light-dark(#000000, #ffffff);--ymt-outline-width: 1px;--ymt-outline: light-dark(#767676, #737373);--ymt-outline-variant: light-dark(#949494, #525252);--ymt-outline-variant-emphasized: light-dark(#595959, #8a8a8a);--ymt-success: light-dark(#166534, #4ade80);--ymt-on-success: light-dark(#ffffff, #000000);--ymt-success-container: light-dark(#dcfce7, #003314);--ymt-on-success-container: light-dark(#14532d, #86efac);--ymt-danger: light-dark(#b91c1c, #ff6b6b);--ymt-on-danger: light-dark(#ffffff, #000000);--ymt-danger-container: light-dark(#fee2e2, #4a0000);--ymt-on-danger-container: light-dark(#7f1d1d, #ffbebe);--ymt-warning: light-dark(#92400e, #facc15);--ymt-on-warning: light-dark(#ffffff, #000000);--ymt-warning-container: light-dark(#fef3c7, #3d2800);--ymt-on-warning-container: light-dark(#78350f, #ffe082);--ymt-inverse-surface: light-dark(#000000, #ffffff);--ymt-inverse-surface-90: light-dark(rgba(0, 0, 0, .9), rgba(255, 255, 255, .9));--ymt-on-inverse-surface: light-dark(#ffffff, #000000);--ymt-scrim: #000000;--ymt-scrim-opacity: 65;--ymt-text-selection-container: light-dark(#d6e4ff, #002766);--ymt-on-text-selection-container: light-dark(#001a52, #c8dcff);--ymt-focus-background: light-dark(#e8e8e8, #1a1a1a);--ymt-on-focus-background: light-dark(#000000, #ffffff);--ymt-hover-background: light-dark(#f0f0f0, #141414);--ymt-on-hover-background: light-dark(#000000, #ffffff);--ymt-selection-background: light-dark(#d6d6d6, #212121);--ymt-on-selection-background: light-dark(#000000, #ffffff);--ymt-current-background: light-dark(#d6e4ff, #002766);--ymt-on-current-background: light-dark(#001a52, #c8dcff);--ymt-focus-indicator-size: 3px;--ymt-focus-indicator-inner: light-dark(#ffffff, #000000);--ymt-focus-indicator-outer: light-dark(#000000, #ffffff);--ymt-scrollbar-thumb-color: light-dark(#949494, #525252);--ymt-scrollbar-thumb-color-hover: light-dark(#595959, #737373);--ymt-scrollbar-track-color: light-dark(#f0f0f0, #141414);--ymt-hover-state-layer-opacity: .16;--ymt-focus-state-layer-opacity: .24;--ymt-pressed-state-layer-opacity: .32;--ymt-disabled-opacity: .5}}ymd-ribbon{--ribbon-button-padding: var(--ymt-spacing-2xs);--ribbon-button-border-radius: 2px;--ribbon-button-gap: var(--ymt-spacing-2xs);--ribbon-icon-size: 20px;flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"primary actions secondary\";align-items:center;gap:var(--ymt-spacing-xs);border-block-end:1px solid var(--ymt-outline-variant);position:relative;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s)}ymd-ribbon .primary-actions{grid-area:primary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .secondary-actions{grid-area:secondary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .object-actions{grid-area:actions;align-self:stretch;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 1px 0 1px;border-style:solid;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;padding-inline:var(--ymt-spacing-xs) 0;position:relative}ymd-ribbon .object-actions yuv-clipboard{z-index:1;position:absolute;inset:0;left:var(--ymt-spacing-xs);right:var(--ymt-spacing-xs)}ymd-ribbon .object-actions ymd-sort{grid-row:1;grid-column:1}ymd-ribbon .sort-column{grid-area:sort;display:flex;align-items:center;gap:var(--ribbon-button-gap);padding:0 var(--ribbon-button-padding)}ymd-ribbon .progress-bar{position:absolute;bottom:-1px}ymd-ribbon .progress-bar{--mdc-linear-progress-active-indicator-height: 2px}ymd-ribbon .progress-bar{--mdc-linear-progress-track-height: 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClipboardComponent, selector: "yuv-clipboard", inputs: ["enablePaste", "bucket"], outputs: ["paste"] }, { kind: "component", type: OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymd-ribbon', standalone: true, imports: [CommonModule, ClipboardComponent, OverflowMenuComponent, MatProgressBar], encapsulation: ViewEncapsulation.None, host: {
                         class: 'ymd-ribbon'
-                    }, template: "@let primary = primarySlot();\n@let secondary = secondarySlot();\n\n@if (primary) {\n  <div class=\"primary-actions\">\n    <ng-container [ngTemplateOutlet]=\"primary\"></ng-container>\n  </div>\n}\n\n<div class=\"object-actions\">\n  @if (enableClipboard()) {\n    <yuv-clipboard class=\"dark\" [bucket]=\"clipboardBucket\" [enablePaste]=\"true\" (paste)=\"onClipboardPaste()\"></yuv-clipboard>\n  }\n  <yuv-overflow-menu [menuItems]=\"menuItems\"></yuv-overflow-menu>\n</div>\n\n@if (secondary) {\n  <div class=\"secondary-actions\">\n    <ng-container [ngTemplateOutlet]=\"secondary\"></ng-container>\n  </div>\n}\n\n@if (busy()) {\n  <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n", styles: ["ymd-ribbon{--ribbon-button-padding: var(--ymt-spacing-2xs);--ribbon-button-border-radius: 2px;--ribbon-button-gap: var(--ymt-spacing-2xs);--ribbon-icon-size: 20px;flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"primary actions secondary\";align-items:center;gap:var(--ymt-spacing-xs);border-block-end:1px solid var(--ymt-outline-variant);position:relative;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s)}ymd-ribbon .primary-actions{grid-area:primary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .secondary-actions{grid-area:secondary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .object-actions{grid-area:actions;align-self:stretch;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 1px 0 1px;border-style:solid;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;padding-inline:var(--ymt-spacing-xs) 0;position:relative}ymd-ribbon .object-actions yuv-clipboard{z-index:1;position:absolute;inset:0;left:var(--ymt-spacing-xs);right:var(--ymt-spacing-xs)}ymd-ribbon .object-actions ymd-sort{grid-row:1;grid-column:1}ymd-ribbon .sort-column{grid-area:sort;display:flex;align-items:center;gap:var(--ribbon-button-gap);padding:0 var(--ribbon-button-padding)}ymd-ribbon .progress-bar{position:absolute;bottom:-1px}ymd-ribbon .progress-bar{--mdc-linear-progress-active-indicator-height: 2px}ymd-ribbon .progress-bar{--mdc-linear-progress-track-height: 2px}\n"] }]
+                    }, template: "@let primary = primarySlot();\n@let secondary = secondarySlot();\n\n@if (primary) {\n  <div class=\"primary-actions\">\n    <ng-container [ngTemplateOutlet]=\"primary\"></ng-container>\n  </div>\n}\n\n<div class=\"object-actions\">\n  @if (enableClipboard()) {\n    <yuv-clipboard class=\"dark\" [bucket]=\"clipboardBucket\" [enablePaste]=\"true\" (paste)=\"onClipboardPaste()\"></yuv-clipboard>\n  }\n  <yuv-overflow-menu [menuItems]=\"menuItems\"></yuv-overflow-menu>\n</div>\n\n@if (secondary) {\n  <div class=\"secondary-actions\">\n    <ng-container [ngTemplateOutlet]=\"secondary\"></ng-container>\n  </div>\n}\n\n@if (busy()) {\n  <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n", styles: ["body.yuv-high-contrast{--ymt-surface-app: light-dark(#ffffff, #000000);--ymt-surface: light-dark(#f5f5f5, #0a0a0a);--ymt-surface-container-lowest: light-dark(#ffffff, #000000);--ymt-surface-container-low: light-dark(#f0f0f0, #0d0d0d);--ymt-surface-container: light-dark(#e8e8e8, #141414);--ymt-surface-container-high: light-dark(#e0e0e0, #1a1a1a);--ymt-surface-container-highest: light-dark(#d6d6d6, #212121);--ymt-surface-panel: light-dark(#ffffff, #0d0d0d);--ymt-pane-surface: light-dark(#ffffff, #000000);--ymt-pane-surface-floating: light-dark(#ffffff, #141414);--ymt-pane-surface-blank: transparent;--ymt-pane-surface-floating-inverse: light-dark(#000000, #ffffff);--ymt-bar-surface: light-dark(#ffffff, #000000);--ymt-bar-surface-blank: transparent;--ymt-on-surface: light-dark(#000000, #ffffff);--ymt-on-surface-type-subtle: light-dark(#595959, #a0a0a0);--ymt-text-color: light-dark(#000000, #ffffff);--ymt-text-color-subtle: light-dark(#595959, #a0a0a0);--ymt-on-bar-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface-floating-inverse: light-dark(#ffffff, #000000);--ymt-pane-drag-handle: light-dark(#8c8c8c, #606060);--ymt-primary: light-dark(#0047cc, #6ba4ff);--ymt-on-primary: light-dark(#ffffff, #000000);--ymt-primary-container: light-dark(#d6e4ff, #002766);--ymt-on-primary-container: light-dark(#001a52, #c8dcff);--ymt-text-color-primary: light-dark(#0047cc, #6ba4ff);--ymt-brand: light-dark(#ffffff, #000000);--ymt-on-brand: light-dark(#000000, #ffffff);--ymt-outline-width: 1px;--ymt-outline: light-dark(#767676, #737373);--ymt-outline-variant: light-dark(#949494, #525252);--ymt-outline-variant-emphasized: light-dark(#595959, #8a8a8a);--ymt-success: light-dark(#166534, #4ade80);--ymt-on-success: light-dark(#ffffff, #000000);--ymt-success-container: light-dark(#dcfce7, #003314);--ymt-on-success-container: light-dark(#14532d, #86efac);--ymt-danger: light-dark(#b91c1c, #ff6b6b);--ymt-on-danger: light-dark(#ffffff, #000000);--ymt-danger-container: light-dark(#fee2e2, #4a0000);--ymt-on-danger-container: light-dark(#7f1d1d, #ffbebe);--ymt-warning: light-dark(#92400e, #facc15);--ymt-on-warning: light-dark(#ffffff, #000000);--ymt-warning-container: light-dark(#fef3c7, #3d2800);--ymt-on-warning-container: light-dark(#78350f, #ffe082);--ymt-inverse-surface: light-dark(#000000, #ffffff);--ymt-inverse-surface-90: light-dark(rgba(0, 0, 0, .9), rgba(255, 255, 255, .9));--ymt-on-inverse-surface: light-dark(#ffffff, #000000);--ymt-scrim: #000000;--ymt-scrim-opacity: 65;--ymt-text-selection-container: light-dark(#d6e4ff, #002766);--ymt-on-text-selection-container: light-dark(#001a52, #c8dcff);--ymt-focus-background: light-dark(#e8e8e8, #1a1a1a);--ymt-on-focus-background: light-dark(#000000, #ffffff);--ymt-hover-background: light-dark(#f0f0f0, #141414);--ymt-on-hover-background: light-dark(#000000, #ffffff);--ymt-selection-background: light-dark(#d6d6d6, #212121);--ymt-on-selection-background: light-dark(#000000, #ffffff);--ymt-current-background: light-dark(#d6e4ff, #002766);--ymt-on-current-background: light-dark(#001a52, #c8dcff);--ymt-focus-indicator-size: 3px;--ymt-focus-indicator-inner: light-dark(#ffffff, #000000);--ymt-focus-indicator-outer: light-dark(#000000, #ffffff);--ymt-scrollbar-thumb-color: light-dark(#949494, #525252);--ymt-scrollbar-thumb-color-hover: light-dark(#595959, #737373);--ymt-scrollbar-track-color: light-dark(#f0f0f0, #141414);--ymt-hover-state-layer-opacity: .16;--ymt-focus-state-layer-opacity: .24;--ymt-pressed-state-layer-opacity: .32;--ymt-disabled-opacity: .5}@media (prefers-contrast: more){:root:not(.yuuvis-high-contrast-theme){color-scheme:light dark}:root:not(.yuuvis-high-contrast-theme){--ymt-surface-app: light-dark(#ffffff, #000000);--ymt-surface: light-dark(#f5f5f5, #0a0a0a);--ymt-surface-container-lowest: light-dark(#ffffff, #000000);--ymt-surface-container-low: light-dark(#f0f0f0, #0d0d0d);--ymt-surface-container: light-dark(#e8e8e8, #141414);--ymt-surface-container-high: light-dark(#e0e0e0, #1a1a1a);--ymt-surface-container-highest: light-dark(#d6d6d6, #212121);--ymt-surface-panel: light-dark(#ffffff, #0d0d0d);--ymt-pane-surface: light-dark(#ffffff, #000000);--ymt-pane-surface-floating: light-dark(#ffffff, #141414);--ymt-pane-surface-blank: transparent;--ymt-pane-surface-floating-inverse: light-dark(#000000, #ffffff);--ymt-bar-surface: light-dark(#ffffff, #000000);--ymt-bar-surface-blank: transparent;--ymt-on-surface: light-dark(#000000, #ffffff);--ymt-on-surface-type-subtle: light-dark(#595959, #a0a0a0);--ymt-text-color: light-dark(#000000, #ffffff);--ymt-text-color-subtle: light-dark(#595959, #a0a0a0);--ymt-on-bar-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface: light-dark(#000000, #ffffff);--ymt-on-pane-surface-floating-inverse: light-dark(#ffffff, #000000);--ymt-pane-drag-handle: light-dark(#8c8c8c, #606060);--ymt-primary: light-dark(#0047cc, #6ba4ff);--ymt-on-primary: light-dark(#ffffff, #000000);--ymt-primary-container: light-dark(#d6e4ff, #002766);--ymt-on-primary-container: light-dark(#001a52, #c8dcff);--ymt-text-color-primary: light-dark(#0047cc, #6ba4ff);--ymt-brand: light-dark(#ffffff, #000000);--ymt-on-brand: light-dark(#000000, #ffffff);--ymt-outline-width: 1px;--ymt-outline: light-dark(#767676, #737373);--ymt-outline-variant: light-dark(#949494, #525252);--ymt-outline-variant-emphasized: light-dark(#595959, #8a8a8a);--ymt-success: light-dark(#166534, #4ade80);--ymt-on-success: light-dark(#ffffff, #000000);--ymt-success-container: light-dark(#dcfce7, #003314);--ymt-on-success-container: light-dark(#14532d, #86efac);--ymt-danger: light-dark(#b91c1c, #ff6b6b);--ymt-on-danger: light-dark(#ffffff, #000000);--ymt-danger-container: light-dark(#fee2e2, #4a0000);--ymt-on-danger-container: light-dark(#7f1d1d, #ffbebe);--ymt-warning: light-dark(#92400e, #facc15);--ymt-on-warning: light-dark(#ffffff, #000000);--ymt-warning-container: light-dark(#fef3c7, #3d2800);--ymt-on-warning-container: light-dark(#78350f, #ffe082);--ymt-inverse-surface: light-dark(#000000, #ffffff);--ymt-inverse-surface-90: light-dark(rgba(0, 0, 0, .9), rgba(255, 255, 255, .9));--ymt-on-inverse-surface: light-dark(#ffffff, #000000);--ymt-scrim: #000000;--ymt-scrim-opacity: 65;--ymt-text-selection-container: light-dark(#d6e4ff, #002766);--ymt-on-text-selection-container: light-dark(#001a52, #c8dcff);--ymt-focus-background: light-dark(#e8e8e8, #1a1a1a);--ymt-on-focus-background: light-dark(#000000, #ffffff);--ymt-hover-background: light-dark(#f0f0f0, #141414);--ymt-on-hover-background: light-dark(#000000, #ffffff);--ymt-selection-background: light-dark(#d6d6d6, #212121);--ymt-on-selection-background: light-dark(#000000, #ffffff);--ymt-current-background: light-dark(#d6e4ff, #002766);--ymt-on-current-background: light-dark(#001a52, #c8dcff);--ymt-focus-indicator-size: 3px;--ymt-focus-indicator-inner: light-dark(#ffffff, #000000);--ymt-focus-indicator-outer: light-dark(#000000, #ffffff);--ymt-scrollbar-thumb-color: light-dark(#949494, #525252);--ymt-scrollbar-thumb-color-hover: light-dark(#595959, #737373);--ymt-scrollbar-track-color: light-dark(#f0f0f0, #141414);--ymt-hover-state-layer-opacity: .16;--ymt-focus-state-layer-opacity: .24;--ymt-pressed-state-layer-opacity: .32;--ymt-disabled-opacity: .5}}ymd-ribbon{--ribbon-button-padding: var(--ymt-spacing-2xs);--ribbon-button-border-radius: 2px;--ribbon-button-gap: var(--ymt-spacing-2xs);--ribbon-icon-size: 20px;flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"primary actions secondary\";align-items:center;gap:var(--ymt-spacing-xs);border-block-end:1px solid var(--ymt-outline-variant);position:relative;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s)}ymd-ribbon .primary-actions{grid-area:primary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .secondary-actions{grid-area:secondary;overflow-x:auto;overflow-y:hidden}ymd-ribbon .object-actions{grid-area:actions;align-self:stretch;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 1px 0 1px;border-style:solid;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;padding-inline:var(--ymt-spacing-xs) 0;position:relative}ymd-ribbon .object-actions yuv-clipboard{z-index:1;position:absolute;inset:0;left:var(--ymt-spacing-xs);right:var(--ymt-spacing-xs)}ymd-ribbon .object-actions ymd-sort{grid-row:1;grid-column:1}ymd-ribbon .sort-column{grid-area:sort;display:flex;align-items:center;gap:var(--ribbon-button-gap);padding:0 var(--ribbon-button-padding)}ymd-ribbon .progress-bar{position:absolute;bottom:-1px}ymd-ribbon .progress-bar{--mdc-linear-progress-active-indicator-height: 2px}ymd-ribbon .progress-bar{--mdc-linear-progress-track-height: 2px}\n"] }]
         }], ctorParameters: () => [] });
 
 class SearchFilterComponent {
@@ -2440,6 +2464,7 @@ class FilesPageComponent {
     #retention = inject(RetentionService);
     #shell = inject(ShellService);
     #dialog = inject(MatDialog);
+    #system = inject(SystemService);
     #router = inject(Router);
     #route = inject(ActivatedRoute);
     #eventService = inject(EventService);
@@ -2453,6 +2478,7 @@ class FilesPageComponent {
     splitViewCmp = viewChild.required(SplitViewComponent);
     selected = signal(undefined);
     sortOptions = signal([
+        FS_PROPERTIES.name,
         BaseObjectTypeField.CREATION_DATE,
         BaseObjectTypeField.MODIFICATION_DATE,
         ContentStreamField.LENGTH,
@@ -2613,6 +2639,18 @@ class FilesPageComponent {
     query = this.drive.state$.query;
     queryTitle = this.drive.state$.queryTitle;
     constructor() {
+        if (this.#system.system) {
+            const i18n = this.#system.system.i18n;
+            i18n[`${FS_PROPERTIES.name}_label`] = this.translate.instant('yuv.app.drive.property.name');
+            i18n[`${BaseObjectTypeField.CREATED_BY}_label`] = this.translate.instant('yuv.app.drive.system.created-by');
+            i18n[`${BaseObjectTypeField.CREATION_DATE}_label`] = this.translate.instant('yuv.app.drive.system.creation-date');
+            i18n[`${BaseObjectTypeField.MODIFIED_BY}_label`] = this.translate.instant('yuv.app.drive.system.modified-by');
+            i18n[`${BaseObjectTypeField.MODIFICATION_DATE}_label`] = this.translate.instant('yuv.app.drive.system.modification-date');
+            i18n[`${BaseObjectTypeField.VERSION_NUMBER}_label`] = this.translate.instant('yuv.app.drive.system.version-number');
+            i18n[`${ContentStreamField.LENGTH}_label`] = this.translate.instant('yuv.app.drive.system.file-size');
+            i18n[`${ContentStreamField.MIME_TYPE}_label`] = this.translate.instant('yuv.app.drive.system.mime-type');
+            i18n[`${ContentStreamField.FILENAME}_label`] = this.translate.instant('yuv.app.drive.system.file-name');
+        }
         this.drive.events$.pipe(takeUntilDestroyed()).subscribe({
             next: (e) => {
                 if (e === DRIVE_EVENT.refresh) {
@@ -2802,13 +2840,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      </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", "autoSelect", "disableCustomContextMenu"], 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", "selfHandleClick", "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"] }] });
+    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 ymd-add-button{display:flex}: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", "autoSelect", "disableCustomContextMenu"], 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", "selfHandleClick", "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      </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"] }]
+                    }, 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 ymd-add-button{display:flex}: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 {
@@ -2946,7 +2984,7 @@ class ObjectPageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ObjectPageComponent, isStandalone: true, selector: "ymd-object", host: { attributes: { "class.smallScreenLayout": "smallScreenLayout()" } }, providers: [ObjectPreviewService], ngImport: i0, template: "@let object = dmsObject();\n@if (object) {\n  <div\n    class=\"object\"\n    yuvContainerSize\n    [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.content.replace.label' | translate }\"\n    [fileDropDisabled]=\"fileDropReplaceDisabled()\"\n    (fileDrop)=\"onFileDrop($event)\"\n  >\n    <ymd-ribbon [objects]=\"[object]\" [excludeActions]=\"excludeActions\" class=\"object__surface\">\n      <ng-template #primaryActions>\n        <div class=\"nav\">\n          <button mat-icon-button class=\"back\" (click)=\"openParent()\">\n            <mat-icon>arrow_back</mat-icon>\n          </button>\n          <button mat-icon-button class=\"refresh\" [matTooltip]=\"'yuv.app.drive.page.object.refresh.tooltip' | translate\" (click)=\"refresh()\">\n            <mat-icon>refresh</mat-icon>\n          </button>\n        </div>\n      </ng-template>\n      <!-- <ng-template #secondaryActions></ng-template> -->\n    </ymd-ribbon>\n\n    @let ssl = smallScreenLayout();\n    @if (ssl) {\n      <mat-tab-group class=\"object__surface\" mat-stretch-tabs=\"true\">\n        <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.content.title' | translate\">\n          <ng-template matTabContent>\n            @if (object && object?.content) {\n              <yuv-object-preview [dmsObject]=\"object\"></yuv-object-preview>\n            }\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.indexdata.title' | translate\">\n          <ng-template matTabContent>\n            <yuv-object-metadata [dmsObject]=\"dmsObject()\" [flavors]=\"\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.history.title' | translate\">\n          <ng-template matTabContent>\n            <yuv-object-audit [dmsObject]=\"object\"></yuv-object-audit>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\n    } @else {\n      <yuv-split-view [layoutSettingsID]=\"layoutSettingIdBase + 'splitview'\" [gutterSize]=\"1\" class=\"object__surface\">\n        <ng-template yuvSplitArea [size]=\"40\">\n          <section class=\"meta\">\n            <header>\n              <yuv-object-flavor disableSelection=\"true\" [dmsObject]=\"object\"></yuv-object-flavor>\n\n              @if (headerData) {\n\n                <div class=\"object-icon\"><mat-icon >{{headerData.icon}}</mat-icon></div>\n                <h1><ng-container *yuvRenderer=\"headerData.title\"></ng-container></h1>\n                <div class=\"description\"><ng-container *yuvRenderer=\"headerData.description\"></ng-container></div>\n                <div class=\"badges\">\n                  <yuv-retention-badge [dmsObject]=\"object\"></yuv-retention-badge>\n                </div>\n              }\n            </header>\n\n            <mat-tab-group>\n              <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.indexdata.title' | translate\" >\n                <yuv-object-metadata [dmsObject]=\"dmsObject()\" [flavors]=\"flavors()\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n              </mat-tab>\n              <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.history.title' | translate\">\n                <yuv-object-audit [dmsObject]=\"object\"></yuv-object-audit\n              ></mat-tab>\n            </mat-tab-group>\n          </section>\n        </ng-template>\n        <ng-template yuvSplitArea [size]=\"60\">\n          @if (object && object?.content) {\n            <yuv-object-preview [dmsObject]=\"object\"></yuv-object-preview>\n          }\n        </ng-template>\n      </yuv-split-view>\n    }\n  </div>\n} @else if (errorMessage) {\n  <!-- object could not be loaded -->\n  <div class=\"error state\">\n    <yuv-icon [svg]=\"icons.error\"></yuv-icon>\n    <p>{{ errorMessage }}</p>\n  </div>\n} @else {\n  <!-- object is loading -->\n  <div class=\"loading state\">\n    <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--giant\"></mat-progress-spinner>\n  </div>\n}\n", styles: [":host{--button-gap: var(--ymt-spacing-2xs);display:flex;flex-flow:column;height:100%;overflow:hidden}:host mat-tab-group{overflow:hidden;height:100%}:host mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host .state{display:flex;flex-flow:column;height:100%;align-items:center;justify-content:center;border-block-start:1px solid var(--ymt-outline-variant)}:host .error mat-icon{color:rgb(from var(--ymt-text-color) r g b/.1)}:host .error p{margin:var(--ymt-spacing-m);max-width:35ch;color:var(--ymt-text-color-subtle)}:host .state,:host .object{animation:fade-in .3s ease-in-out}:host .object{height:100%;display:flex;flex-flow:column}:host .object ymd-ribbon{background-color:var(--app-drive-header-background);border-block-end:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-xs) var(--ymt-spacing-s);flex:0 0 auto}:host .object ymd-ribbon .nav{display:flex;align-items:center;gap:var(--button-gap)}:host .object yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .meta{display:flex;flex-flow:column;height:100%}:host .meta header{flex:0 0 auto;display:grid;margin-block-end:var(--ymt-spacing-xl);gap:var(--ymt-spacing-xs);grid-template-columns:var(--ymt-sizing-5xl) repeat(auto-fit,minmax(0,1fr));grid-template-areas:\"flavor flavor\" \"icon title\" \". description\" \". badges\"}:host .meta header yuv-object-flavor{grid-area:flavor;border-block-end:1px solid var(--ymt-outline-variant);padding:0 var(--ymt-spacing-s);margin-block-end:var(--ymt-spacing-m);grid-column:span 5}:host .meta header .object-icon{color:var(--ymt-text-color);grid-area:icon;padding:0 var(--ymt-spacing-m);padding-block-start:var(--ymt-spacing-3xs)}:host .meta header h1{grid-area:title;margin:0;word-break:break-word;padding-inline-end:var(--ymt-spacing-l);grid-column:span 4}:host .meta header .description{grid-area:description;padding-inline-end:var(--ymt-spacing-l);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);text-overflow:ellipsis;grid-column:2/span 3;overflow:hidden;white-space:nowrap;--yuv-renderer-display: contents}:host .meta header .badges{grid-area:badges;padding-block-start:var(--ymt-spacing-xs);padding-inline-end:var(--ymt-spacing-l);grid-column:2/span 4;display:flex}@keyframes fade-in{0%{opacity:0}}.object__surface{background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectMetadataComponent, selector: "yuv-object-metadata", inputs: ["disableControls", "disableBasicMetadata", "elementExtensions", "situation", "formDisabled", "dmsObject", "flavoredDmsObject", "flavors"], outputs: ["indexDataSaved", "statusChanged"] }, { kind: "component", type: ObjectAuditComponent, selector: "yuv-object-audit", inputs: ["dmsObject", "skipActions", "allActions"] }, { kind: "component", type: ObjectFlavorComponent, selector: "yuv-object-flavor", inputs: ["dmsObject"], outputs: ["flavorSelect"] }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { 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: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: ContainerSizeDirective, selector: "[yuvContainerSize]", outputs: ["containerHeight", "containerWidth"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: RibbonComponent, selector: "ymd-ribbon", inputs: ["busy", "enableClipboard", "objects", "excludeActions"] }, { kind: "component", type: RetentionBadgeComponent, selector: "yuv-retention-badge", inputs: ["dmsObject"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version", "metadata"] }, { kind: "directive", type: FileDropZoneDirective, selector: "[yuvFileDropZone]", inputs: ["yuvFileDropZone", "fileDropDisabled"], outputs: ["fileDrop", "fileDropOver"] }, { 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: "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: MatTooltipModule }, { kind: "directive", type: i2$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ObjectPageComponent, isStandalone: true, selector: "ymd-object", host: { attributes: { "class.smallScreenLayout": "smallScreenLayout()" } }, providers: [ObjectPreviewService], ngImport: i0, template: "@let object = dmsObject();\n@if (object) {\n  <div\n    class=\"object\"\n    yuvContainerSize\n    [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.content.replace.label' | translate }\"\n    [fileDropDisabled]=\"fileDropReplaceDisabled()\"\n    (fileDrop)=\"onFileDrop($event)\"\n  >\n    <ymd-ribbon [objects]=\"[object]\" [excludeActions]=\"excludeActions\" class=\"object__surface\">\n      <ng-template #primaryActions>\n        <div class=\"nav\">\n          <button mat-icon-button class=\"back\" (click)=\"openParent()\">\n            <mat-icon>arrow_back</mat-icon>\n          </button>\n          <button mat-icon-button class=\"refresh\" [matTooltip]=\"'yuv.app.drive.page.object.refresh.tooltip' | translate\" (click)=\"refresh()\">\n            <mat-icon>refresh</mat-icon>\n          </button>\n        </div>\n      </ng-template>\n      <!-- <ng-template #secondaryActions></ng-template> -->\n    </ymd-ribbon>\n\n    @let ssl = smallScreenLayout();\n    @if (ssl) {\n      <mat-tab-group class=\"object__surface\" mat-stretch-tabs=\"true\">\n        <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.content.title' | translate\">\n          <ng-template matTabContent>\n            @if (object && object?.content) {\n              <yuv-object-preview [dmsObject]=\"object\"></yuv-object-preview>\n            }\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.indexdata.title' | translate\">\n          <ng-template matTabContent>\n            <yuv-object-metadata [dmsObject]=\"dmsObject()\" [flavors]=\"\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.history.title' | translate\">\n          <ng-template matTabContent>\n            <yuv-object-audit [dmsObject]=\"object\"></yuv-object-audit>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\n    } @else {\n      <yuv-split-view [layoutSettingsID]=\"layoutSettingIdBase + 'splitview'\" [gutterSize]=\"1\" class=\"object__surface\">\n        <ng-template yuvSplitArea [size]=\"40\">\n          <section class=\"meta\">\n            <header>\n              <yuv-object-flavor disableSelection=\"true\" [dmsObject]=\"object\"></yuv-object-flavor>\n\n              @if (headerData) {\n\n                <div class=\"object-icon\"><mat-icon >{{headerData.icon}}</mat-icon></div>\n                <h1><ng-container *yuvRenderer=\"headerData.title\"></ng-container></h1>\n                <div class=\"description\"><ng-container *yuvRenderer=\"headerData.description\"></ng-container></div>\n                <div class=\"badges\">\n                  <yuv-retention-badge [dmsObject]=\"object\"></yuv-retention-badge>\n                </div>\n              }\n            </header>\n\n            <mat-tab-group>\n              <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.indexdata.title' | translate\" >\n                <yuv-object-metadata [dmsObject]=\"dmsObject()\" [flavors]=\"flavors()\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n              </mat-tab>\n              <mat-tab [label]=\"'yuv.app.drive.object-metadata.tabs.history.title' | translate\">\n                <yuv-object-audit [dmsObject]=\"object\"></yuv-object-audit\n              ></mat-tab>\n            </mat-tab-group>\n          </section>\n        </ng-template>\n        <ng-template yuvSplitArea [size]=\"60\">\n          @if (object && object?.content) {\n            <yuv-object-preview [dmsObject]=\"object\"></yuv-object-preview>\n          }\n        </ng-template>\n      </yuv-split-view>\n    }\n  </div>\n} @else if (errorMessage) {\n  <!-- object could not be loaded -->\n  <div class=\"error state\">\n    <yuv-icon [svg]=\"icons.error\"></yuv-icon>\n    <p>{{ errorMessage }}</p>\n  </div>\n} @else {\n  <!-- object is loading -->\n  <div class=\"loading state\">\n    <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--giant\"></mat-progress-spinner>\n  </div>\n}\n", styles: [":host{--button-gap: var(--ymt-spacing-2xs);display:flex;flex-flow:column;height:100%;overflow:hidden}:host mat-tab-group{overflow:hidden;height:100%}:host mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host .state{display:flex;flex-flow:column;height:100%;align-items:center;justify-content:center;border-block-start:1px solid var(--ymt-outline-variant)}:host .error mat-icon{color:rgb(from var(--ymt-text-color) r g b/.1)}:host .error p{margin:var(--ymt-spacing-m);max-width:35ch;color:var(--ymt-text-color-subtle)}:host .state,:host .object{animation:fade-in .3s ease-in-out}:host .object{height:100%;display:flex;flex-flow:column}:host .object ymd-ribbon{background-color:var(--app-drive-header-background);border-block-end:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-xs) var(--ymt-spacing-s);flex:0 0 auto}:host .object ymd-ribbon .nav{display:flex;align-items:center;gap:var(--button-gap)}:host .object yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .meta{display:flex;flex-flow:column;height:100%}:host .meta header{flex:0 0 auto;display:grid;margin-block-end:var(--ymt-spacing-xl);gap:var(--ymt-spacing-xs);grid-template-columns:var(--ymt-sizing-5xl) repeat(auto-fit,minmax(0,1fr));grid-template-areas:\"flavor flavor\" \"icon title\" \". description\" \". badges\"}:host .meta header yuv-object-flavor{grid-area:flavor;border-block-end:1px solid var(--ymt-outline-variant);padding:0 var(--ymt-spacing-s);margin-block-end:var(--ymt-spacing-m);grid-column:span 5}:host .meta header .object-icon{color:var(--ymt-text-color);grid-area:icon;padding:0 var(--ymt-spacing-m);padding-block-start:var(--ymt-spacing-3xs)}:host .meta header h1{grid-area:title;margin:0;word-break:break-word;padding-inline-end:var(--ymt-spacing-l);grid-column:span 4}:host .meta header .description{grid-area:description;padding-inline-end:var(--ymt-spacing-l);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);text-overflow:ellipsis;grid-column:2/span 3;overflow:hidden;white-space:nowrap;--yuv-renderer-display: contents}:host .meta header .badges{grid-area:badges;padding-block-start:var(--ymt-spacing-xs);padding-inline-end:var(--ymt-spacing-l);grid-column:2/span 4;display:flex}@keyframes fade-in{0%{opacity:0}}.object__surface{background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectMetadataComponent, selector: "yuv-object-metadata", inputs: ["disableControls", "disableBasicMetadata", "elementExtensions", "situation", "dmsObject", "flavoredDmsObject", "flavors"], outputs: ["indexDataSaved", "statusChanged"] }, { kind: "component", type: ObjectAuditComponent, selector: "yuv-object-audit", inputs: ["dmsObject", "skipActions", "allActions"] }, { kind: "component", type: ObjectFlavorComponent, selector: "yuv-object-flavor", inputs: ["dmsObject"], outputs: ["flavorSelect"] }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { 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: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: ContainerSizeDirective, selector: "[yuvContainerSize]", outputs: ["containerHeight", "containerWidth"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: RibbonComponent, selector: "ymd-ribbon", inputs: ["busy", "enableClipboard", "objects", "excludeActions"] }, { kind: "component", type: RetentionBadgeComponent, selector: "yuv-retention-badge", inputs: ["dmsObject"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version", "metadata"] }, { kind: "directive", type: FileDropZoneDirective, selector: "[yuvFileDropZone]", inputs: ["yuvFileDropZone", "fileDropDisabled"], outputs: ["fileDrop", "fileDropOver"] }, { 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: "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: MatTooltipModule }, { kind: "directive", type: i2$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectPageComponent, decorators: [{
             type: Component,