@yuuvis/app-drive 2.0.2 → 2.0.4
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.
|
@@ -9,7 +9,7 @@ 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';
|
|
11
11
|
import { SystemType, ClipboardService, TranslateService, TranslateModule, BaseObjectTypeField, EventService, DmsService, SearchService, BackendService, YuvEventType, ContentStreamField, NotificationService, Utils, RetentionService, SystemService, Situation, Operator, SearchUtils, UserService, ObjectConfigService, DeviceService, AppCacheService } from '@yuuvis/client-core';
|
|
12
|
-
import { ActionsService, BASE_ACTION, AbstractContextAction, SelectionRange } from '@yuuvis/client-framework/actions';
|
|
12
|
+
import { ActionsService, BASE_ACTION, AbstractContextAction, SelectionRange, ContextmenuComponent, YuvContextMenuTriggerDirective } from '@yuuvis/client-framework/actions';
|
|
13
13
|
import { UploadProgressComponent } from '@yuuvis/client-framework/upload-progress';
|
|
14
14
|
import { AppLogoComponent } from '@yuuvis/client-shell';
|
|
15
15
|
import { OverflowMenuComponent } from '@yuuvis/client-framework/overflow-menu';
|
|
@@ -1480,11 +1480,11 @@ class FolderTreeComponent {
|
|
|
1480
1480
|
}
|
|
1481
1481
|
}
|
|
1482
1482
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: FolderTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1483
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: FolderTreeComponent, isStandalone: true, selector: "ymd-folder-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav aria-label=\"Navigation\">\n <mat-tree class=\"folder-tree\" #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node\"\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"false\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Go to page: ' + node.name\"\n (click)=\"routeChange(node)\"\n (keydown.enter)=\"routeChange(node)\"\n (keydown.space)=\"routeChange(node)\"\n >\n <div class=\"folder-tree__item-icon\" *ngIf=\"node.icon\">\n <mat-icon class=\"ymt-icon--size-s\">{{ node.icon }}</mat-icon>\n </div>\n <span class=\"folder-tree__item\">{{ node.name }}</span>\n </mat-tree-node>\n\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodeToggle\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"true\"\n [isExpanded]=\"tree.isExpanded(node)\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Toggle and Go to page: ' + node.name\"\n (activation)=\"routeChange($event)\"\n >\n <button ymt-icon-button icon-button-size=\"small\" tabindex=\"-1\"
|
|
1483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: FolderTreeComponent, isStandalone: true, selector: "ymd-folder-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav aria-label=\"Navigation\">\n <mat-tree class=\"folder-tree\" #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node\"\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"false\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Go to page: ' + node.name\"\n (click)=\"routeChange(node)\"\n (keydown.enter)=\"routeChange(node)\"\n (keydown.space)=\"routeChange(node)\"\n >\n <div class=\"folder-tree__item-icon\" *ngIf=\"node.icon\">\n <mat-icon class=\"ymt-icon--size-s\">{{ node.icon }}</mat-icon>\n </div>\n <span class=\"folder-tree__item\">{{ node.name }}</span>\n </mat-tree-node>\n\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodeToggle\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"true\"\n [isExpanded]=\"tree.isExpanded(node)\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Toggle and Go to page: ' + node.name\"\n (activation)=\"routeChange($event)\"\n >\n <button ymt-icon-button icon-button-size=\"small\" tabindex=\"-1\">\n <mat-icon class=\"ymt-icon--size-s\">\n {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <div class=\"folder-tree__item-icon\" *ngIf=\"node.icon\">\n <mat-icon class=\"ymt-icon--size-s\">{{ node.icon }}</mat-icon>\n </div>\n <a class=\"folder-tree__item\" tabindex=\"-1\" (click)=\"routeChange(node); $event.stopPropagation()\">{{ node.name }}</a>\n </mat-tree-node>\n </mat-tree>\n</nav>\n", styles: [".folder-tree__item-icon{width:var(--ymt-sizing-l);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.folder-tree__item{all:unset;cursor:pointer;flex:1;align-self:stretch;display:flex;align-items:center}.folder-tree__node{cursor:pointer;transition:color .2s ease-in-out;gap:var(--ymt-spacing-s);margin-block-end:var(--ymt-spacing-2xs)}.folder-tree__node:hover{color:var(--ymt-primary)}.folder-tree__node:focus-visible{outline-offset:var(--ymt-focus-indicator-size);outline:var(--ymt-focus-indicator-outer) solid var(--ymt-focus-indicator-size);box-shadow:0 0 0 var(--ymt-focus-indicator-size) var(--ymt-focus-indicator-inner)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i2$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i2$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i2$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2$3.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
|
|
1484
1484
|
}
|
|
1485
1485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: FolderTreeComponent, decorators: [{
|
|
1486
1486
|
type: Component,
|
|
1487
|
-
args: [{ selector: 'ymd-folder-tree', standalone: true, imports: [CommonModule, RouterModule, TranslateModule, MatTreeModule, MatIcon, YmtIconButtonDirective], template: "<nav aria-label=\"Navigation\">\n <mat-tree class=\"folder-tree\" #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node\"\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"false\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Go to page: ' + node.name\"\n (click)=\"routeChange(node)\"\n (keydown.enter)=\"routeChange(node)\"\n (keydown.space)=\"routeChange(node)\"\n >\n <div class=\"folder-tree__item-icon\" *ngIf=\"node.icon\">\n <mat-icon class=\"ymt-icon--size-s\">{{ node.icon }}</mat-icon>\n </div>\n <span class=\"folder-tree__item\">{{ node.name }}</span>\n </mat-tree-node>\n\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodeToggle\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"true\"\n [isExpanded]=\"tree.isExpanded(node)\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Toggle and Go to page: ' + node.name\"\n (activation)=\"routeChange($event)\"\n >\n <button ymt-icon-button icon-button-size=\"small\" tabindex=\"-1\"
|
|
1487
|
+
args: [{ selector: 'ymd-folder-tree', standalone: true, imports: [CommonModule, RouterModule, TranslateModule, MatTreeModule, MatIcon, YmtIconButtonDirective], template: "<nav aria-label=\"Navigation\">\n <mat-tree class=\"folder-tree\" #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node\"\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"false\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Go to page: ' + node.name\"\n (click)=\"routeChange(node)\"\n (keydown.enter)=\"routeChange(node)\"\n (keydown.space)=\"routeChange(node)\"\n >\n <div class=\"folder-tree__item-icon\" *ngIf=\"node.icon\">\n <mat-icon class=\"ymt-icon--size-s\">{{ node.icon }}</mat-icon>\n </div>\n <span class=\"folder-tree__item\">{{ node.name }}</span>\n </mat-tree-node>\n\n <mat-tree-node\n class=\"folder-tree__node\"\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodeToggle\n matTreeNodePadding\n [matTreeNodePaddingIndent]=\"treeNodePaddingIndent\"\n [isExpandable]=\"true\"\n [isExpanded]=\"tree.isExpanded(node)\"\n [attr.aria-current]=\"currentPage === node.id ? 'page' : null\"\n [attr.aria-label]=\"'Toggle and Go to page: ' + node.name\"\n (activation)=\"routeChange($event)\"\n >\n <button ymt-icon-button icon-button-size=\"small\" tabindex=\"-1\">\n <mat-icon class=\"ymt-icon--size-s\">\n {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <div class=\"folder-tree__item-icon\" *ngIf=\"node.icon\">\n <mat-icon class=\"ymt-icon--size-s\">{{ node.icon }}</mat-icon>\n </div>\n <a class=\"folder-tree__item\" tabindex=\"-1\" (click)=\"routeChange(node); $event.stopPropagation()\">{{ node.name }}</a>\n </mat-tree-node>\n </mat-tree>\n</nav>\n", styles: [".folder-tree__item-icon{width:var(--ymt-sizing-l);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.folder-tree__item{all:unset;cursor:pointer;flex:1;align-self:stretch;display:flex;align-items:center}.folder-tree__node{cursor:pointer;transition:color .2s ease-in-out;gap:var(--ymt-spacing-s);margin-block-end:var(--ymt-spacing-2xs)}.folder-tree__node:hover{color:var(--ymt-primary)}.folder-tree__node:focus-visible{outline-offset:var(--ymt-focus-indicator-size);outline:var(--ymt-focus-indicator-outer) solid var(--ymt-focus-indicator-size);box-shadow:0 0 0 var(--ymt-focus-indicator-size) var(--ymt-focus-indicator-inner)}\n"] }]
|
|
1488
1488
|
}] });
|
|
1489
1489
|
|
|
1490
1490
|
class VersionTileComponent {
|
|
@@ -2571,6 +2571,7 @@ class FilesPageComponent {
|
|
|
2571
2571
|
this.actions = this.drive.state$.actions;
|
|
2572
2572
|
this.selection = this.drive.state$.selection;
|
|
2573
2573
|
this.extendedQuery = this.drive.state$.extendedQuery;
|
|
2574
|
+
this.hasActions = computed(() => !!this.actions().length);
|
|
2574
2575
|
this.busy = this.drive.state$.busy;
|
|
2575
2576
|
this.flavorChips = this.shellService.getObjectFlavors();
|
|
2576
2577
|
this.selectionActions = computed(() => ({ selection: this.selection(), actions: this.actions() }));
|
|
@@ -2738,9 +2739,8 @@ class FilesPageComponent {
|
|
|
2738
2739
|
filters: [{ f: BaseObjectTypeField.PARENT_ID, o: Operator.EQUAL, v1: this.currentFolderID || null }]
|
|
2739
2740
|
}, queryTitle);
|
|
2740
2741
|
}
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
this.actionsService.openContextMenu(this.actions, (a) => a.run(this.selection()), { x: event.x, y: event.y });
|
|
2742
|
+
onContextmenuAction(data) {
|
|
2743
|
+
data.action.run(this.selection());
|
|
2744
2744
|
}
|
|
2745
2745
|
onFileDrop(files) {
|
|
2746
2746
|
this.drive.setBusy(true);
|
|
@@ -2851,13 +2851,13 @@ class FilesPageComponent {
|
|
|
2851
2851
|
this.clipboard.clear(APP_ID);
|
|
2852
2852
|
}
|
|
2853
2853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: FilesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2854
|
-
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 <div class=\"search\">\n <ymd-drive-search></ymd-drive-search>\n </div>\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\" (layoutSettingsChange)=\"onLayoutSettingsChange($event)\" 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\n </header>\n\n <yuv-tile-list\n #tileList\n class=\"staggered\"\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\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 (ctxMenu)=\"onContextmenu($event)\"\n [highlights]=\"highlightStyles$ | async\"\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 </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 header>nav .search{grid-column:-1/-2;grid-row:1;z-index: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{display:contents;--ymt-scrollbar-outer-size: 0}: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;--paging-background: var(--ymt-surface-panel)}: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: "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: "component", type: DriveSearchComponent, selector: "ymd-drive-search" }, { 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"] }] }); }
|
|
2854
|
+
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 <div class=\"search\">\n <ymd-drive-search></ymd-drive-search>\n </div>\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\" (layoutSettingsChange)=\"onLayoutSettingsChange($event)\" 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\n </header>\n <yuv-tile-list\n #tileList\n class=\"staggered\"\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\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\n [actions]=\"actions()\"\n (itemSelect)=\"onContextmenuAction($event)\"\n ></yuv-contextmenu>\n </ng-template>\n\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 header>nav .search{grid-column:-1/-2;grid-row:1;z-index: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{display:contents;--ymt-scrollbar-outer-size: 0}: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;--paging-background: var(--ymt-surface-panel)}: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: "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: "component", type: DriveSearchComponent, selector: "ymd-drive-search" }, { 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"] }] }); }
|
|
2855
2855
|
}
|
|
2856
2856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: FilesPageComponent, decorators: [{
|
|
2857
2857
|
type: Component,
|
|
2858
|
-
args: [{ selector: 'ymd-files', standalone: true, imports: [NgClass, AsyncPipe, ...module, ...components, FileDropZoneDirective], host: {
|
|
2858
|
+
args: [{ selector: 'ymd-files', standalone: true, imports: [NgClass, AsyncPipe, ...module, ...components, FileDropZoneDirective, ContextmenuComponent, YuvContextMenuTriggerDirective], host: {
|
|
2859
2859
|
'[class.smallScreen]': 'smallScreenLayout()'
|
|
2860
|
-
}, 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 <div class=\"search\">\n <ymd-drive-search></ymd-drive-search>\n </div>\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\" (layoutSettingsChange)=\"onLayoutSettingsChange($event)\" 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\n </header>\n\n <yuv-tile-list\n #tileList\n class=\"staggered\"\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\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 (ctxMenu)=\"onContextmenu($event)\"\n [highlights]=\"highlightStyles$ | async\"\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 </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 header>nav .search{grid-column:-1/-2;grid-row:1;z-index: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{display:contents;--ymt-scrollbar-outer-size: 0}: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;--paging-background: var(--ymt-surface-panel)}: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"] }]
|
|
2860
|
+
}, 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 <div class=\"search\">\n <ymd-drive-search></ymd-drive-search>\n </div>\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\" (layoutSettingsChange)=\"onLayoutSettingsChange($event)\" 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\n </header>\n <yuv-tile-list\n #tileList\n class=\"staggered\"\n [attr.aria-label]=\"'yuv.app.drive.files.content.aria.label' | translate\"\n [attr.aria-busy]=\"busy()\"\n [attr.role]=\"'listbox'\"\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\n [actions]=\"actions()\"\n (itemSelect)=\"onContextmenuAction($event)\"\n ></yuv-contextmenu>\n </ng-template>\n\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 header>nav .search{grid-column:-1/-2;grid-row:1;z-index: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{display:contents;--ymt-scrollbar-outer-size: 0}: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;--paging-background: var(--ymt-surface-panel)}: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"] }]
|
|
2861
2861
|
}], ctorParameters: () => [] });
|
|
2862
2862
|
|
|
2863
2863
|
class ObjectPageComponent {
|