@yuuvis/app-drive 2.1.11 → 2.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i1$1 from '@angular/common';
|
|
2
2
|
import { CommonModule, DOCUMENT, DatePipe, NgClass, AsyncPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken, inject, Component, Injectable, input, effect, viewChild, signal, linkedSignal, HostBinding, ViewEncapsulation,
|
|
4
|
+
import { InjectionToken, inject, Component, Injectable, input, effect, viewChild, signal, linkedSignal, HostBinding, ViewEncapsulation, viewChildren, HostListener, ChangeDetectionStrategy, computed, output, DestroyRef, contentChild, untracked } from '@angular/core';
|
|
5
5
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
|
-
import { FormBuilder, Validators, ReactiveFormsModule
|
|
7
|
+
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
8
8
|
import * as i1$3 from '@angular/router';
|
|
9
9
|
import { Router, NavigationStart, ActivatedRoute, RouterModule, NavigationEnd } from '@angular/router';
|
|
10
10
|
import * as i2 from '@yuuvis/client-core';
|
|
@@ -37,7 +37,6 @@ import * as i4 from '@angular/material/icon';
|
|
|
37
37
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
38
38
|
import * as i2$2 from '@angular/material/menu';
|
|
39
39
|
import { MatMenuModule } from '@angular/material/menu';
|
|
40
|
-
import { MatDivider } from '@angular/material/divider';
|
|
41
40
|
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
|
|
42
41
|
import { Directionality } from '@angular/cdk/bidi';
|
|
43
42
|
import * as i5 from '@yuuvis/client-framework/list';
|
|
@@ -59,6 +58,7 @@ import { MatTabsModule } from '@angular/material/tabs';
|
|
|
59
58
|
import { TileListComponent, TileConfigTriggerComponent } from '@yuuvis/client-framework/tile-list';
|
|
60
59
|
import { ObjectMetadataComponent, ObjectAuditComponent, RetentionBadgeComponent } from '@yuuvis/client-framework/object-details';
|
|
61
60
|
import { ClipboardComponent } from '@yuuvis/client-framework/clipboard';
|
|
61
|
+
import { SortComponent } from '@yuuvis/client-framework/sort';
|
|
62
62
|
import { YUV_ICONS, YuvIconComponent } from '@yuuvis/client-framework/icons';
|
|
63
63
|
import { ObjectFlavorComponent } from '@yuuvis/client-framework/object-flavor';
|
|
64
64
|
import { RendererDirective } from '@yuuvis/client-framework/renderer';
|
|
@@ -1217,98 +1217,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
1217
1217
|
args: ['class.popover']
|
|
1218
1218
|
}] } });
|
|
1219
1219
|
|
|
1220
|
-
class SortComponent {
|
|
1221
|
-
#drive;
|
|
1222
|
-
#systemService;
|
|
1223
|
-
constructor() {
|
|
1224
|
-
this.#drive = inject(DriveService);
|
|
1225
|
-
this.#systemService = inject(SystemService);
|
|
1226
|
-
this.translate = inject(TranslateService);
|
|
1227
|
-
this.sortOptions = signal(this.#initSortOptions());
|
|
1228
|
-
this.orderOptions = signal([
|
|
1229
|
-
{ label: 'Ascending', value: 'asc', type: 'order' },
|
|
1230
|
-
{ label: 'Descending', value: 'desc', type: 'order' }
|
|
1231
|
-
]);
|
|
1232
|
-
this.sortFields = computed(() => [...this.sortOptions(), ...this.orderOptions()]);
|
|
1233
|
-
this.sortForm = new FormGroup({
|
|
1234
|
-
sort: new FormControl(''),
|
|
1235
|
-
order: new FormControl('asc', { nonNullable: true })
|
|
1236
|
-
});
|
|
1237
|
-
this.sortChanged = output();
|
|
1238
|
-
// listen for language changes to update labels
|
|
1239
|
-
this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
1240
|
-
this.sortOptions.set(this.#initSortOptions());
|
|
1241
|
-
});
|
|
1242
|
-
}
|
|
1243
|
-
selectSortByIndex(idx) {
|
|
1244
|
-
this.selectSort(this.sortFields()[idx].type, this.sortFields()[idx].value);
|
|
1245
|
-
}
|
|
1246
|
-
selectSort(type, value) {
|
|
1247
|
-
const sortCtrl = this.sortForm.get('sort');
|
|
1248
|
-
sortCtrl?.value === value ? sortCtrl?.setValue(null) : this.sortForm.get(type)?.setValue(value);
|
|
1249
|
-
this.onSelectionChange();
|
|
1250
|
-
}
|
|
1251
|
-
// Emit the form values when changes occur
|
|
1252
|
-
onSelectionChange() {
|
|
1253
|
-
const { sort, order } = this.sortForm.value;
|
|
1254
|
-
this.#drive.setSort(sort, order);
|
|
1255
|
-
this.sortChanged.emit({ sort: sort, order: order });
|
|
1256
|
-
}
|
|
1257
|
-
#initSortOptions() {
|
|
1258
|
-
const baseData = [];
|
|
1259
|
-
const fields = [FS_PROPERTIES.name, BaseObjectTypeField.CREATION_DATE, BaseObjectTypeField.MODIFICATION_DATE];
|
|
1260
|
-
const contentFields = [ContentStreamField.LENGTH, ContentStreamField.MIME_TYPE];
|
|
1261
|
-
[...fields, ...contentFields].forEach((f) => {
|
|
1262
|
-
baseData.push({
|
|
1263
|
-
label: this.#systemService.getLocalizedLabel(f) || f,
|
|
1264
|
-
value: f,
|
|
1265
|
-
type: 'sort'
|
|
1266
|
-
});
|
|
1267
|
-
});
|
|
1268
|
-
return baseData;
|
|
1269
|
-
}
|
|
1270
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1271
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: SortComponent, isStandalone: true, selector: "ymd-sort", outputs: { sortChanged: "sortChanged" }, ngImport: i0, template: `
|
|
1272
|
-
<button mat-icon-button [matMenuTriggerFor]="menu" title="{{ 'yuv.app.drive.sort.tooltip' | translate }}">
|
|
1273
|
-
<mat-icon>swap_vert</mat-icon>
|
|
1274
|
-
</button>
|
|
1275
|
-
|
|
1276
|
-
<mat-menu #menu="matMenu">
|
|
1277
|
-
@for (option of sortFields(); track $index) {
|
|
1278
|
-
@let selected = sortForm.value[option.type] === option.value;
|
|
1279
|
-
<button mat-menu-item (click)="selectSort(option.type, option.value)">
|
|
1280
|
-
<mat-icon>{{ selected ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
|
|
1281
|
-
{{ option.label }}
|
|
1282
|
-
</button>
|
|
1283
|
-
@if (sortFields().length - 3 === $index) {
|
|
1284
|
-
<mat-divider></mat-divider>
|
|
1285
|
-
}
|
|
1286
|
-
}
|
|
1287
|
-
</mat-menu>
|
|
1288
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1289
|
-
}
|
|
1290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SortComponent, decorators: [{
|
|
1291
|
-
type: Component,
|
|
1292
|
-
args: [{ selector: 'ymd-sort', standalone: true, imports: [MatIconModule, MatMenuModule, MatButtonModule, ReactiveFormsModule, TranslateModule, MatDivider], template: `
|
|
1293
|
-
<button mat-icon-button [matMenuTriggerFor]="menu" title="{{ 'yuv.app.drive.sort.tooltip' | translate }}">
|
|
1294
|
-
<mat-icon>swap_vert</mat-icon>
|
|
1295
|
-
</button>
|
|
1296
|
-
|
|
1297
|
-
<mat-menu #menu="matMenu">
|
|
1298
|
-
@for (option of sortFields(); track $index) {
|
|
1299
|
-
@let selected = sortForm.value[option.type] === option.value;
|
|
1300
|
-
<button mat-menu-item (click)="selectSort(option.type, option.value)">
|
|
1301
|
-
<mat-icon>{{ selected ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
|
|
1302
|
-
{{ option.label }}
|
|
1303
|
-
</button>
|
|
1304
|
-
@if (sortFields().length - 3 === $index) {
|
|
1305
|
-
<mat-divider></mat-divider>
|
|
1306
|
-
}
|
|
1307
|
-
}
|
|
1308
|
-
</mat-menu>
|
|
1309
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush }]
|
|
1310
|
-
}], ctorParameters: () => [] });
|
|
1311
|
-
|
|
1312
1220
|
class BreadcrumbComponent {
|
|
1313
1221
|
constructor() {
|
|
1314
1222
|
this.#drive = inject(DriveService);
|
|
@@ -2574,6 +2482,13 @@ class FilesPageComponent {
|
|
|
2574
2482
|
this.objectConfigBucket = APP_ID;
|
|
2575
2483
|
this.splitViewCmp = viewChild.required(SplitViewComponent);
|
|
2576
2484
|
this.selected = signal(undefined);
|
|
2485
|
+
this.sortOptions = signal([
|
|
2486
|
+
BaseObjectTypeField.CREATION_DATE,
|
|
2487
|
+
BaseObjectTypeField.MODIFICATION_DATE,
|
|
2488
|
+
ContentStreamField.LENGTH,
|
|
2489
|
+
ContentStreamField.MIME_TYPE
|
|
2490
|
+
]);
|
|
2491
|
+
this.storageKey = 'yuv.app.drive.files.sort';
|
|
2577
2492
|
this.#editAction = {
|
|
2578
2493
|
id: 'edit',
|
|
2579
2494
|
icon: 'edit_note',
|
|
@@ -2743,6 +2658,9 @@ class FilesPageComponent {
|
|
|
2743
2658
|
}))
|
|
2744
2659
|
.subscribe();
|
|
2745
2660
|
}
|
|
2661
|
+
onSortChanged(event) {
|
|
2662
|
+
this.drive.setSort(event.field, event.order);
|
|
2663
|
+
}
|
|
2746
2664
|
onFilterQueryChange(q) {
|
|
2747
2665
|
this.drive.updateQuery(q, this.translate.instant('yuv.app.drive.files.search.result.title'));
|
|
2748
2666
|
this.drive.setSelection([]);
|
|
@@ -2867,13 +2785,13 @@ class FilesPageComponent {
|
|
|
2867
2785
|
this.clipboard.clear(APP_ID);
|
|
2868
2786
|
}
|
|
2869
2787
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: FilesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2870
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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\"></ymd-add-button>\n </ng-template>\n\n <ng-template #secondaryActions>\n <div class=\"options\">\n @if (!smallScreenLayout()) {\n <button\n mat-icon-button\n class=\"toggle-tree toggle\"\n [ngClass]=\"{ enabled: enableTree() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n (click)=\"enableTree.set(!enableTree())\"\n >\n <mat-icon>dock_to_right</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"toggle-details toggle\"\n [ngClass]=\"{ enabled: enableDetails() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n (click)=\"enableDetails.set(!enableDetails())\"\n >\n <mat-icon>dock_to_left</mat-icon>\n </button>\n }\n <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n </div>\n </ng-template>\n </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n <!-- folder tree -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n <ymd-folder-tree></ymd-folder-tree>\n </ng-template>\n\n <!-- files -->\n <ng-template yuvSplitArea [size]=\"60\">\n @let err = error();\n @if (err) {\n <div class=\"error\">\n <p>\n <mat-icon>warning</mat-icon>\n @switch (err) {\n @case (ERROR_CODE.NOT_FOUND) {\n {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n }\n @case (ERROR_CODE.INVALID_ID) {\n {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n }\n @default {\n {{ 'yuv.app.drive.files.error.load' | translate }}\n }\n }\n </p>\n </div>\n } @else {\n <div class=\"files\" [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 <ymd-sort />\n }\n <!-- <div class=\"flavors\">\n TODO: enable again once flavors/aspects are supported -->\n <!-- @for (f of flavorChips; track f.id) {\n <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n }\n </div>-->\n @if (query()?.term && !extendedQuery()) {\n <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n }\n </header>\n <yuv-tile-list\n #tileList\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\n (keydown.backspace)=\"openParent()\"\n (keydown.delete)=\"onDelete()\"\n [bucket]=\"objectConfigBucket\"\n [multiselect]=\"true\"\n [query]=\"query()\"\n [flavor]=\"appliedFlavor\"\n [options]=\"tileListOptions\"\n (itemDblClick)=\"itemDoubleClicked($event)\"\n (itemSelect)=\"itemClicked($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n (tileCopy)=\"onCopy($event)\"\n (tileCut)=\"onCut($event)\"\n (busy)=\"setBusy($event)\"\n [highlights]=\"highlightStyles$ | async\"\n [yuvContextMenuTrigger]=\"context_menu\"\n [yuvContextMenuTriggerWhen]=\"hasActions()\"\n >\n <div #empty>\n @if (emptyMode() === 'root') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n } @else if (emptyMode() === 'query') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n } @else {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n }\n </div>\n\n <ng-template #context_menu>\n <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n </ng-template>\n </yuv-tile-list>\n </div>\n }\n </ng-template>\n\n <!-- details -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n @let selectedItem = selected();\n @if (enableDetails() && selectedItem) {\n @if (selectedItem?.isFolder) {\n <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n } @else {\n <yuv-object-summary\n [actions]=\"summaryActions()\"\n [configType]=\"configTypeOptions['file']\"\n [dmsObject]=\"selectedItem\"\n [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.content.replace.label' | translate }\"\n [fileDropDisabled]=\"fileDropSummaryDisabled()\"\n (fileDrop)=\"onFileUpdateDrop($event)\"\n ></yuv-object-summary>\n }\n } @else {\n @let sel = selection();\n @if (sel && sel.length > 0) {\n <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n } @else if (tileList()?.items?.length === 0) {\n <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n } @else {\n <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n }\n }\n </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort\" \"flavors flavors\" \"searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { 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", "multiselect", "options", "flavor", "query", "preselect", "highlights"], outputs: ["itemSelect", "tileCopy", "tileCut", "busy", "queryResult", "selectionChange", "itemDblClick", "ctxMenu"] }, { kind: "component", type: BreadcrumbComponent, selector: "ymd-breadcrumb" }, { kind: "component", type: FolderTreeComponent, selector: "ymd-folder-tree" }, { kind: "component", type: ObjectSummaryComponent, selector: "yuv-object-summary", inputs: ["actions", "dmsObject", "objectId", "configType"] }, { kind: "component", type: TileConfigTriggerComponent, selector: "yuv-tile-config-trigger", inputs: ["icon", "bucket", "bucketLabel", "options"] }, { kind: "component", type: RibbonComponent, selector: "ymd-ribbon", inputs: ["busy", "enableClipboard", "objects", "excludeActions"] }, { kind: "component", type: AddButtonComponent, selector: "ymd-add-button", inputs: ["disabled"] }, { kind: "component", type: MultiObjectSummaryComponent, selector: "yuv-multi-object-summary", inputs: ["headline"] }, { kind: "component", type: SortComponent, selector: "ymd-sort", 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"] }] }); }
|
|
2788
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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\"></ymd-add-button>\n </ng-template>\n\n <ng-template #secondaryActions>\n <div class=\"options\">\n @if (!smallScreenLayout()) {\n <button\n mat-icon-button\n class=\"toggle-tree toggle\"\n [ngClass]=\"{ enabled: enableTree() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n (click)=\"enableTree.set(!enableTree())\"\n >\n <mat-icon>dock_to_right</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"toggle-details toggle\"\n [ngClass]=\"{ enabled: enableDetails() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n (click)=\"enableDetails.set(!enableDetails())\"\n >\n <mat-icon>dock_to_left</mat-icon>\n </button>\n }\n <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n </div>\n </ng-template>\n </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n <!-- folder tree -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n <ymd-folder-tree></ymd-folder-tree>\n </ng-template>\n\n <!-- files -->\n <ng-template yuvSplitArea [size]=\"60\">\n @let err = error();\n @if (err) {\n <div class=\"error\">\n <p>\n <mat-icon>warning</mat-icon>\n @switch (err) {\n @case (ERROR_CODE.NOT_FOUND) {\n {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n }\n @case (ERROR_CODE.INVALID_ID) {\n {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n }\n @default {\n {{ 'yuv.app.drive.files.error.load' | translate }}\n }\n }\n </p>\n </div>\n } @else {\n <div class=\"files\" [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.label' | translate }\" (fileDrop)=\"onFileDrop($event)\">\n <header class=\"files-header\">\n <h1>{{ queryTitle() }}</h1>\n @if (sortOptionsAvailable()) {\n <yuv-sort [sortOptions]=\"sortOptions()\" [storageKey]=\"storageKey\" (sortChanged)=\"onSortChanged($event)\"></yuv-sort>\n }\n <!-- <div class=\"flavors\">\n TODO: enable again once flavors/aspects are supported -->\n <!-- @for (f of flavorChips; track f.id) {\n <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n }\n </div>-->\n @if (query()?.term && !extendedQuery()) {\n <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n }\n </header>\n <yuv-tile-list\n #tileList\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\n (keydown.backspace)=\"openParent()\"\n (keydown.delete)=\"onDelete()\"\n [bucket]=\"objectConfigBucket\"\n [multiselect]=\"true\"\n [query]=\"query()\"\n [flavor]=\"appliedFlavor\"\n [options]=\"tileListOptions\"\n (itemDblClick)=\"itemDoubleClicked($event)\"\n (itemSelect)=\"itemClicked($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n (tileCopy)=\"onCopy($event)\"\n (tileCut)=\"onCut($event)\"\n (busy)=\"setBusy($event)\"\n [highlights]=\"highlightStyles$ | async\"\n [yuvContextMenuTrigger]=\"context_menu\"\n [yuvContextMenuTriggerWhen]=\"hasActions()\"\n >\n <div #empty>\n @if (emptyMode() === 'root') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n } @else if (emptyMode() === 'query') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n } @else {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n }\n </div>\n\n <ng-template #context_menu>\n <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n </ng-template>\n </yuv-tile-list>\n </div>\n }\n </ng-template>\n\n <!-- details -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n @let selectedItem = selected();\n @if (enableDetails() && selectedItem) {\n @if (selectedItem?.isFolder) {\n <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n } @else {\n <yuv-object-summary\n [actions]=\"summaryActions()\"\n [configType]=\"configTypeOptions['file']\"\n [dmsObject]=\"selectedItem\"\n [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.content.replace.label' | translate }\"\n [fileDropDisabled]=\"fileDropSummaryDisabled()\"\n (fileDrop)=\"onFileUpdateDrop($event)\"\n ></yuv-object-summary>\n }\n } @else {\n @let sel = selection();\n @if (sel && sel.length > 0) {\n <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n } @else if (tileList()?.items?.length === 0) {\n <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n } @else {\n <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n }\n }\n </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort\" \"flavors flavors\" \"searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { 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", "multiselect", "options", "flavor", "query", "preselect", "highlights"], outputs: ["itemSelect", "tileCopy", "tileCut", "busy", "queryResult", "selectionChange", "itemDblClick", "ctxMenu"] }, { kind: "component", type: BreadcrumbComponent, selector: "ymd-breadcrumb" }, { kind: "component", type: FolderTreeComponent, selector: "ymd-folder-tree" }, { kind: "component", type: ObjectSummaryComponent, selector: "yuv-object-summary", inputs: ["actions", "dmsObject", "objectId", "configType"] }, { kind: "component", type: TileConfigTriggerComponent, selector: "yuv-tile-config-trigger", inputs: ["icon", "bucket", "bucketLabel", "options"] }, { kind: "component", type: RibbonComponent, selector: "ymd-ribbon", inputs: ["busy", "enableClipboard", "objects", "excludeActions"] }, { kind: "component", type: AddButtonComponent, selector: "ymd-add-button", inputs: ["disabled"] }, { kind: "component", type: MultiObjectSummaryComponent, selector: "yuv-multi-object-summary", inputs: ["headline"] }, { kind: "component", type: SortComponent, selector: "yuv-sort", inputs: ["sortOptions", "storageKey"], 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"] }] }); }
|
|
2871
2789
|
}
|
|
2872
2790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: FilesPageComponent, decorators: [{
|
|
2873
2791
|
type: Component,
|
|
2874
2792
|
args: [{ selector: 'ymd-files', standalone: true, imports: [NgClass, AsyncPipe, ...module, ...components, FileDropZoneDirective, ContextmenuComponent, YuvContextMenuTriggerDirective], host: {
|
|
2875
2793
|
'[class.smallScreen]': 'smallScreenLayout()'
|
|
2876
|
-
}, 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\"></ymd-add-button>\n </ng-template>\n\n <ng-template #secondaryActions>\n <div class=\"options\">\n @if (!smallScreenLayout()) {\n <button\n mat-icon-button\n class=\"toggle-tree toggle\"\n [ngClass]=\"{ enabled: enableTree() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n (click)=\"enableTree.set(!enableTree())\"\n >\n <mat-icon>dock_to_right</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"toggle-details toggle\"\n [ngClass]=\"{ enabled: enableDetails() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n (click)=\"enableDetails.set(!enableDetails())\"\n >\n <mat-icon>dock_to_left</mat-icon>\n </button>\n }\n <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n </div>\n </ng-template>\n </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n <!-- folder tree -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n <ymd-folder-tree></ymd-folder-tree>\n </ng-template>\n\n <!-- files -->\n <ng-template yuvSplitArea [size]=\"60\">\n @let err = error();\n @if (err) {\n <div class=\"error\">\n <p>\n <mat-icon>warning</mat-icon>\n @switch (err) {\n @case (ERROR_CODE.NOT_FOUND) {\n {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n }\n @case (ERROR_CODE.INVALID_ID) {\n {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n }\n @default {\n {{ 'yuv.app.drive.files.error.load' | translate }}\n }\n }\n </p>\n </div>\n } @else {\n <div class=\"files\" [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 <ymd-sort />\n }\n <!-- <div class=\"flavors\">\n TODO: enable again once flavors/aspects are supported -->\n <!-- @for (f of flavorChips; track f.id) {\n <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n }\n </div>-->\n @if (query()?.term && !extendedQuery()) {\n <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n }\n </header>\n <yuv-tile-list\n #tileList\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\n (keydown.backspace)=\"openParent()\"\n (keydown.delete)=\"onDelete()\"\n [bucket]=\"objectConfigBucket\"\n [multiselect]=\"true\"\n [query]=\"query()\"\n [flavor]=\"appliedFlavor\"\n [options]=\"tileListOptions\"\n (itemDblClick)=\"itemDoubleClicked($event)\"\n (itemSelect)=\"itemClicked($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n (tileCopy)=\"onCopy($event)\"\n (tileCut)=\"onCut($event)\"\n (busy)=\"setBusy($event)\"\n [highlights]=\"highlightStyles$ | async\"\n [yuvContextMenuTrigger]=\"context_menu\"\n [yuvContextMenuTriggerWhen]=\"hasActions()\"\n >\n <div #empty>\n @if (emptyMode() === 'root') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n } @else if (emptyMode() === 'query') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n } @else {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n }\n </div>\n\n <ng-template #context_menu>\n <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n </ng-template>\n </yuv-tile-list>\n </div>\n }\n </ng-template>\n\n <!-- details -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n @let selectedItem = selected();\n @if (enableDetails() && selectedItem) {\n @if (selectedItem?.isFolder) {\n <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n } @else {\n <yuv-object-summary\n [actions]=\"summaryActions()\"\n [configType]=\"configTypeOptions['file']\"\n [dmsObject]=\"selectedItem\"\n [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.content.replace.label' | translate }\"\n [fileDropDisabled]=\"fileDropSummaryDisabled()\"\n (fileDrop)=\"onFileUpdateDrop($event)\"\n ></yuv-object-summary>\n }\n } @else {\n @let sel = selection();\n @if (sel && sel.length > 0) {\n <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n } @else if (tileList()?.items?.length === 0) {\n <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n } @else {\n <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n }\n }\n </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort\" \"flavors flavors\" \"searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"] }]
|
|
2794
|
+
}, 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\"></ymd-add-button>\n </ng-template>\n\n <ng-template #secondaryActions>\n <div class=\"options\">\n @if (!smallScreenLayout()) {\n <button\n mat-icon-button\n class=\"toggle-tree toggle\"\n [ngClass]=\"{ enabled: enableTree() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggletree.tooltip' | translate\"\n (click)=\"enableTree.set(!enableTree())\"\n >\n <mat-icon>dock_to_right</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"toggle-details toggle\"\n [ngClass]=\"{ enabled: enableDetails() }\"\n [matTooltip]=\"'yuv.app.drive.files.toggledetails.tooltip' | translate\"\n (click)=\"enableDetails.set(!enableDetails())\"\n >\n <mat-icon>dock_to_left</mat-icon>\n </button>\n }\n <yuv-tile-config-trigger [bucket]=\"objectConfigBucket\" [bucketLabel]=\"tileConfigBucketLabel\" [options]=\"tileListOptions\"></yuv-tile-config-trigger>\n </div>\n </ng-template>\n </ymd-ribbon>\n</header>\n\n<yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"LAYOUT_SETTINGS_STORAGE_KEY\" class=\"files__surface\">\n <!-- folder tree -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableTree() && !smallScreenLayout()\">\n <ymd-folder-tree></ymd-folder-tree>\n </ng-template>\n\n <!-- files -->\n <ng-template yuvSplitArea [size]=\"60\">\n @let err = error();\n @if (err) {\n <div class=\"error\">\n <p>\n <mat-icon>warning</mat-icon>\n @switch (err) {\n @case (ERROR_CODE.NOT_FOUND) {\n {{ 'yuv.app.drive.files.error.load.not-found' | translate }}\n }\n @case (ERROR_CODE.INVALID_ID) {\n {{ 'yuv.app.drive.files.error.load.invalid-id' | translate }}\n }\n @default {\n {{ 'yuv.app.drive.files.error.load' | translate }}\n }\n }\n </p>\n </div>\n } @else {\n <div class=\"files\" [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.label' | translate }\" (fileDrop)=\"onFileDrop($event)\">\n <header class=\"files-header\">\n <h1>{{ queryTitle() }}</h1>\n @if (sortOptionsAvailable()) {\n <yuv-sort [sortOptions]=\"sortOptions()\" [storageKey]=\"storageKey\" (sortChanged)=\"onSortChanged($event)\"></yuv-sort>\n }\n <!-- <div class=\"flavors\">\n TODO: enable again once flavors/aspects are supported -->\n <!-- @for (f of flavorChips; track f.id) {\n <yuv-flavor-chip [ngClass]=\"{ active: f.id === appliedFlavor?.id }\" [flavor]=\"f\" (click)=\"appliedFlavor = f\"></yuv-flavor-chip>\n }\n </div>-->\n @if (query()?.term && !extendedQuery()) {\n <ymd-search-filter [query]=\"query()\" (queryChange)=\"onFilterQueryChange($event)\"></ymd-search-filter>\n }\n </header>\n <yuv-tile-list\n #tileList\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\n (keydown.backspace)=\"openParent()\"\n (keydown.delete)=\"onDelete()\"\n [bucket]=\"objectConfigBucket\"\n [multiselect]=\"true\"\n [query]=\"query()\"\n [flavor]=\"appliedFlavor\"\n [options]=\"tileListOptions\"\n (itemDblClick)=\"itemDoubleClicked($event)\"\n (itemSelect)=\"itemClicked($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n (tileCopy)=\"onCopy($event)\"\n (tileCut)=\"onCut($event)\"\n (busy)=\"setBusy($event)\"\n [highlights]=\"highlightStyles$ | async\"\n [yuvContextMenuTrigger]=\"context_menu\"\n [yuvContextMenuTriggerWhen]=\"hasActions()\"\n >\n <div #empty>\n @if (emptyMode() === 'root') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.root.list' | translate }}</p>\n } @else if (emptyMode() === 'query') {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.query.list' | translate }}</p>\n } @else {\n <p class=\"empty\">{{ 'yuv.app.drive.files.content.empty.list' | translate }}</p>\n }\n </div>\n\n <ng-template #context_menu>\n <yuv-contextmenu [actions]=\"actions()\" (itemSelect)=\"onContextmenuAction($event)\"></yuv-contextmenu>\n </ng-template>\n </yuv-tile-list>\n </div>\n }\n </ng-template>\n\n <!-- details -->\n <ng-template yuvSplitArea [size]=\"20\" [visible]=\"enableDetails()\">\n @let selectedItem = selected();\n @if (enableDetails() && selectedItem) {\n @if (selectedItem?.isFolder) {\n <yuv-object-summary [actions]=\"summaryActions()\" [configType]=\"configTypeOptions['folder']\" [dmsObject]=\"selectedItem\"></yuv-object-summary>\n } @else {\n <yuv-object-summary\n [actions]=\"summaryActions()\"\n [configType]=\"configTypeOptions['file']\"\n [dmsObject]=\"selectedItem\"\n [yuvFileDropZone]=\"{ label: 'yuv.app.drive.files.dropzone.content.replace.label' | translate }\"\n [fileDropDisabled]=\"fileDropSummaryDisabled()\"\n (fileDrop)=\"onFileUpdateDrop($event)\"\n ></yuv-object-summary>\n }\n } @else {\n @let sel = selection();\n @if (sel && sel.length > 0) {\n <yuv-multi-object-summary [headline]=\"'yuv.app.drive.multiselected.details' | translate: { count: selection().length }\"></yuv-multi-object-summary>\n } @else if (tileList()?.items?.length === 0) {\n <!-- TODO: CHOULD HAVE A DIFFERENT MESSAGE FOR EMPTY RESULTS EMPTY FOR NOW -->\n <div class=\"message\">{{ 'yuv.app.drive.empty.results.details.message' | translate }}</div>\n } @else {\n <div class=\"message\">{{ 'yuv.app.drive.unselected.details' | translate }}</div>\n }\n }\n </ng-template>\n</yuv-split-view>\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s);min-height:40px}:host header>nav .nav{grid-column:1/2;grid-row:1;display:flex;border-inline-end:1px solid var(--ymt-outline-variant);padding-inline-end:var(--ymt-spacing-xs);gap:var(--ymt-spacing-3xs);margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host header>nav .breadcrumb{grid-column:2/4;grid-row:1;display:flex;margin-bottom:calc(var(--ymt-spacing-s) * -1)}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1;animation:fade-in .3s ease-in-out}:host main{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .error{display:grid;justify-items:center;align-items:center;height:100%;padding:0 2rem;text-align:center;color:var(--ymt-text-color-subtle)}:host .error p{max-width:31ch;line-height:1.5em;display:grid;justify-items:center}:host .error p mat-icon{display:block;margin-block-end:1rem}:host .files{display:flex;flex-flow:column;overflow:hidden;height:100%}:host .files header{flex:0 0 auto;padding:var(--ymt-spacing-l) var(--ymt-spacing-l) var(--ymt-spacing-s) var(--ymt-spacing-l);display:grid;grid-template-columns:1fr;gap:var(--ymt-spacing-3xs);grid-template-areas:\"title sort\" \"flavors flavors\" \"searchfilter searchfilter\"}:host .files header h1{grid-area:title;margin:0;height:min-content}:host .files header .flavors{grid-area:flavors;display:flex;gap:2px;justify-content:flex-end;padding:var(--ymt-spacing-2xs)}:host .files header .flavors yuv-flavor-chip{font:var(--ymt-font-body-subtle);cursor:pointer;--flavor-background: var(--ymt-surface-panel);--flavor-icon-size: 16px}:host .files header .flavors yuv-flavor-chip:hover{--flavor-border-color: var(--ymt-primary)}:host .files header ymd-sort{grid-area:sort}:host .files header ymd-search-filter{grid-area:searchfilter}:host .files yuv-tile-list{--paging-margin: 0;overflow-y:auto}:host .message{display:grid;justify-items:center;align-items:center;height:100%;padding:0 var(--ymt-spacing-3xl);text-align:center;color:var(--ymt-text-color-subtle)}:host .message p{max-width:31ch;line-height:1.5em}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);display:flex;height:100%;box-sizing:border-box}:host ymd-folder-tree{padding:var(--ymt-spacing-l) var(--ymt-spacing-m);min-width:300px}:host ymd-folder-tree,:host yuv-object-summary{height:100%;overflow-y:auto;display:block}:host yuv-tile-list{--tile-border: 1px solid var(--ymt-outline-variant);--tile-border-width: 0 0 1px 0;--tile-icon-size: 18px;--tile-action-icon-size: 18px}:host p.empty{color:var(--ymt-text-color-subtle)}:host .details{height:100%}:host .details yuv-object-details{height:100%}:host.smallScreen yuv-tile-list{--tile-padding: var(--ymt-spacing-m) !important}@keyframes fade-in{0%{opacity:0}}.files__surface{background-color:var(--ymt-surface)}\n"] }]
|
|
2877
2795
|
}], ctorParameters: () => [] });
|
|
2878
2796
|
|
|
2879
2797
|
class ObjectPageComponent {
|