@dotglitch/ngx-common 1.1.29 → 1.1.30
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.
- package/components/filemanager/file-grid/file-grid.component.d.ts +2 -0
- package/esm2022/components/filemanager/file-grid/file-grid.component.mjs +10 -4
- package/esm2022/components/filemanager/filemanager.component.mjs +3 -6
- package/esm2022/components/filemanager/toolbar/breadcrumb/breadcrumb.component.mjs +3 -7
- package/esm2022/components/filemanager/toolbar/icon-button/icon-button.component.mjs +2 -4
- package/esm2022/components/filemanager/toolbar/toolbar.component.mjs +3 -5
- package/esm2022/components/filemanager/tree-view/tree-view.component.mjs +4 -6
- package/fesm2022/dotglitch-ngx-common.mjs +19 -22
- package/fesm2022/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
|
|
3
3
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
4
4
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
@@ -26,17 +26,15 @@ export class TreeViewComponent {
|
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeViewComponent, deps: [{ token: i1.FilemanagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n @for (item of data; track item) {\n <mat-expansion-panel\n #panel\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n @if (panel.expanded) {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"\n />\n }\n @else {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path\"\n />\n }\n\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n @if (item['_children']) {\n <app-tree-view\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n }\n @else {\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n }\n </mat-expansion-panel>\n }\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
|
|
30
30
|
}
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
33
|
args: [{ selector: 'app-tree-view', imports: [
|
|
34
|
-
NgIf,
|
|
35
|
-
NgForOf,
|
|
36
34
|
NgTemplateOutlet,
|
|
37
35
|
MatExpansionModule,
|
|
38
36
|
MatProgressBarModule
|
|
39
|
-
], standalone: true, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n <mat-expansion-panel\n
|
|
37
|
+
], standalone: true, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n @for (item of data; track item) {\n <mat-expansion-panel\n #panel\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n @if (panel.expanded) {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"\n />\n }\n @else {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path\"\n />\n }\n\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n @if (item['_children']) {\n <app-tree-view\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n }\n @else {\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n }\n </mat-expansion-panel>\n }\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"] }]
|
|
40
38
|
}], ctorParameters: () => [{ type: i1.FilemanagerComponent }], propDecorators: { rowTemplate: [{
|
|
41
39
|
type: ContentChild,
|
|
42
40
|
args: ["rowTemplate", { read: TemplateRef }]
|
|
@@ -50,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
50
48
|
}], loadChildren: [{
|
|
51
49
|
type: Output
|
|
52
50
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvY29tcG9uZW50cy9maWxlbWFuYWdlci90cmVlLXZpZXcvdHJlZS12aWV3LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvY29tcG9uZW50cy9maWxlbWFuYWdlci90cmVlLXZpZXcvdHJlZS12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQXdCLEtBQUssRUFBWSxNQUFNLEVBQUUsV0FBVyxFQUFnQyxNQUFNLGVBQWUsQ0FBQztBQUNoSyxPQUFPLEVBQUUsa0JBQWtCLEVBQXFCLE1BQU0sNkJBQTZCLENBQUM7QUFDcEYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDdEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7OztBQWNoRCxNQUFNLE9BQU8saUJBQWlCO0lBVTFCLElBQUksU0FBUyxLQUFLLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO0lBRXRELFlBQ3FCLFdBQWlDO1FBQWpDLGdCQUFXLEdBQVgsV0FBVyxDQUFzQjtRQVA1QyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMzQixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFReEMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFFRCxlQUFlLENBQUMsSUFBSSxFQUFFLEtBQXdCO1FBQzFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ25CLElBQUk7WUFDSixFQUFFLEVBQUUsQ0FBQyxRQUFRLEVBQUUsRUFBRTtnQkFDYixJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsUUFBUSxDQUFDO2dCQUM3QixJQUFJLFFBQVEsQ0FBQyxNQUFNLElBQUksQ0FBQztvQkFDcEIsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3RCLENBQUM7U0FDSixDQUFDLENBQUE7SUFDTixDQUFDOzhHQTNCUSxpQkFBaUI7a0dBQWpCLGlCQUFpQixrU0FDVyxXQUFXLDZCQ25CcEQsaWxEQXlDQSxpakNEdkJhLGlCQUFpQiw4SEFMdEIsa0JBQWtCLGtpQkFDbEIsb0JBQW9COzsyRkFJZixpQkFBaUI7a0JBWDdCLFNBQVM7K0JBQ0ksZUFBZSxXQUdoQjt3QkFDTCxnQkFBZ0I7d0JBQ2hCLGtCQUFrQjt3QkFDbEIsb0JBQW9CO3FCQUN2QixjQUNXLElBQUk7eUZBR29DLFdBQVc7c0JBQTlELFlBQVk7dUJBQUMsYUFBYSxFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtnQkFDNUIsYUFBYTtzQkFBbEMsS0FBSzt1QkFBQyxhQUFhO2dCQUVYLElBQUk7c0JBQVosS0FBSztnQkFFSSxLQUFLO3NCQUFkLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nRm9yT2YsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbmplY3QsIElucHV0LCBPcHRpb25hbCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiwgRWxlbWVudFJlZiwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RXhwYW5zaW9uTW9kdWxlLCBNYXRFeHBhbnNpb25QYW5lbCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2V4cGFuc2lvbic7XG5pbXBvcnQgeyBNYXRQcm9ncmVzc0Jhck1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Byb2dyZXNzLWJhcic7XG5pbXBvcnQgeyBJY29uUmVzb2x2ZXIgfSBmcm9tICcuLi9pY29uLXJlc29sdmVyJztcbmltcG9ydCB7IEZpbGVtYW5hZ2VyQ29tcG9uZW50IH0gZnJvbSAnLi4vZmlsZW1hbmFnZXIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhcHAtdHJlZS12aWV3JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdHJlZS12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90cmVlLXZpZXcuY29tcG9uZW50LnNjc3MnXSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIE5nVGVtcGxhdGVPdXRsZXQsXG4gICAgICAgIE1hdEV4cGFuc2lvbk1vZHVsZSxcbiAgICAgICAgTWF0UHJvZ3Jlc3NCYXJNb2R1bGVcbiAgICBdLFxuICAgIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgVHJlZVZpZXdDb21wb25lbnQge1xuICAgIEBDb250ZW50Q2hpbGQoXCJyb3dUZW1wbGF0ZVwiLCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIHJvd1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAgIEBJbnB1dChcInJvd1RlbXBsYXRlXCIpIHJvd1RlbXBsYXRlSW46IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgICBASW5wdXQoKSBkYXRhOiBhbnlbXTtcblxuICAgIEBPdXRwdXQoKSBjbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICBAT3V0cHV0KCkgbG9hZENoaWxkcmVuID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgaWNvblJlc29sdmVyOiBJY29uUmVzb2x2ZXI7XG4gICAgZ2V0IGxpYkNvbmZpZygpIHsgcmV0dXJuIHRoaXMuZmlsZU1hbmFnZXIubGliQ29uZmlnOyB9XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSBmaWxlTWFuYWdlcjogRmlsZW1hbmFnZXJDb21wb25lbnQsXG4gICAgKSB7XG4gICAgICAgIHRoaXMuaWNvblJlc29sdmVyID0gbmV3IEljb25SZXNvbHZlcih0aGlzLmxpYkNvbmZpZy5hc3NldFBhdGgpO1xuICAgIH1cblxuICAgIHRyeUxvYWRDaGlsZHJlbihpdGVtLCBwYW5lbDogTWF0RXhwYW5zaW9uUGFuZWwpIHtcbiAgICAgICAgdGhpcy5sb2FkQ2hpbGRyZW4ubmV4dCh7XG4gICAgICAgICAgICBpdGVtLFxuICAgICAgICAgICAgY2I6IChjaGlsZHJlbikgPT4ge1xuICAgICAgICAgICAgICAgIGl0ZW1bJ19jaGlsZHJlbiddID0gY2hpbGRyZW47XG4gICAgICAgICAgICAgICAgaWYgKGNoaWxkcmVuLmxlbmd0aCA9PSAwKVxuICAgICAgICAgICAgICAgICAgICBwYW5lbC5jbG9zZSgpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KVxuICAgIH1cbn1cbiIsIjxtYXQtYWNjb3JkaW9uIGRpc3BsYXlNb2RlPVwiZmxhdFwiIFttdWx0aV09XCJ0cnVlXCI+XG4gICAgQGZvciAoaXRlbSBvZiBkYXRhOyB0cmFjayBpdGVtKSB7XG4gICAgICAgIDxtYXQtZXhwYW5zaW9uLXBhbmVsXG4gICAgICAgICAgICAjcGFuZWxcbiAgICAgICAgICAgIGV4cGFuZGVkPVwiZmFsc2VcIlxuICAgICAgICAgICAgdG9nZ2xlUG9zaXRpb249XCJiZWZvcmVcIlxuICAgICAgICAgICAgW2NsYXNzLmlzbGVhZl09XCJpdGVtWydfY2hpbGRyZW4nXT8ubGVuZ3RoID09IDBcIlxuICAgICAgICAgICAgKGFmdGVyRXhwYW5kKT1cInRyeUxvYWRDaGlsZHJlbihpdGVtLCBwYW5lbClcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8bWF0LWV4cGFuc2lvbi1wYW5lbC1oZWFkZXI+XG4gICAgICAgICAgICAgICAgPGRpdiAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpOyBjbGljay5uZXh0KGl0ZW0pO1wiIHN0eWxlPVwiZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjtcIj5cbiAgICAgICAgICAgICAgICAgICAgQGlmIChwYW5lbC5leHBhbmRlZCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgPGltZ1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPVwiaGVpZ2h0OiAyMHB4OyBtYXJnaW4tcmlnaHQ6IDhweFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW3NyY109XCJpY29uUmVzb2x2ZXIucmVzb2x2ZUljb24oaXRlbSk/LnBhdGgucmVwbGFjZSgnLnN2ZycsICctb3Blbi5zdmcnKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIEBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxpbWdcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT1cImhlaWdodDogMjBweDsgbWFyZ2luLXJpZ2h0OiA4cHhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtzcmNdPVwiaWNvblJlc29sdmVyLnJlc29sdmVJY29uKGl0ZW0pPy5wYXRoXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgICAgICB7e2l0ZW0ubmFtZX19XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L21hdC1leHBhbnNpb24tcGFuZWwtaGVhZGVyPlxuXG4gICAgICAgICAgICBAaWYgKGl0ZW1bJ19jaGlsZHJlbiddKSB7XG4gICAgICAgICAgICAgICAgPGFwcC10cmVlLXZpZXdcbiAgICAgICAgICAgICAgICAgICAgW2RhdGFdPVwiaXRlbVsnX2NoaWxkcmVuJ11cIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2xpY2submV4dChpdGVtKVwiXG4gICAgICAgICAgICAgICAgICAgIChsb2FkQ2hpbGRyZW4pPVwibG9hZENoaWxkcmVuLm5leHQoJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBlbHNlIHtcbiAgICAgICAgICAgICAgICA8bWF0LXByb2dyZXNzLWJhciBjb2xvcj1cInByaW1hcnlcIiBtb2RlPVwicXVlcnlcIi8+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvbWF0LWV4cGFuc2lvbi1wYW5lbD5cbiAgICB9XG48L21hdC1hY2NvcmRpb24+XG4iXX0=
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive, InjectionToken, Pipe, Injectable, EventEmitter, isDevMode, ViewContainerRef, ViewChild, Output, NgModule, ViewEncapsulation, SecurityContext, ContentChild, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/dialog';
|
|
4
4
|
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
5
|
-
import { NgTemplateOutlet, NgComponentOutlet, DOCUMENT, NgIf, NgForOf, DatePipe
|
|
5
|
+
import { NgTemplateOutlet, NgComponentOutlet, DOCUMENT, NgIf, NgForOf, DatePipe } from '@angular/common';
|
|
6
6
|
import * as i1$1 from '@angular/platform-browser';
|
|
7
7
|
import { createApplication } from '@angular/platform-browser';
|
|
8
8
|
import { firstValueFrom, debounceTime, of, Subject, BehaviorSubject } from 'rxjs';
|
|
@@ -9432,6 +9432,7 @@ class FileGridComponent {
|
|
|
9432
9432
|
this.draggingOver = false;
|
|
9433
9433
|
this.showLoader = false;
|
|
9434
9434
|
this.hideLoader = false;
|
|
9435
|
+
this.failedLoad = false;
|
|
9435
9436
|
this.columns = [
|
|
9436
9437
|
{ id: "name", label: "Name" },
|
|
9437
9438
|
{ id: "size", label: "Size" },
|
|
@@ -9710,6 +9711,7 @@ class FileGridComponent {
|
|
|
9710
9711
|
async loadFolder() {
|
|
9711
9712
|
this.showLoader = true;
|
|
9712
9713
|
this.hideLoader = false;
|
|
9714
|
+
this.failedLoad = false;
|
|
9713
9715
|
const url = this.config.apiSettings.listEntriesUrlTemplate
|
|
9714
9716
|
? this.config.apiSettings.listEntriesUrlTemplate(this.path)
|
|
9715
9717
|
: this.config.apiSettings.listEntriesUrl;
|
|
@@ -9738,7 +9740,11 @@ class FileGridComponent {
|
|
|
9738
9740
|
setTimeout(() => this.resize(), 2500);
|
|
9739
9741
|
setTimeout(() => this.resize(), 5000);
|
|
9740
9742
|
})
|
|
9741
|
-
.catch(e =>
|
|
9743
|
+
.catch(e => {
|
|
9744
|
+
this.failedLoad = true;
|
|
9745
|
+
this.error = e;
|
|
9746
|
+
console.error(e);
|
|
9747
|
+
})
|
|
9742
9748
|
.finally(() => {
|
|
9743
9749
|
this.hideLoader = true;
|
|
9744
9750
|
setTimeout(() => {
|
|
@@ -9938,7 +9944,7 @@ class FileGridComponent {
|
|
|
9938
9944
|
}).then(r => this.loadFolder());
|
|
9939
9945
|
}
|
|
9940
9946
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileGridComponent, deps: [{ token: Fetch }, { token: KeyboardService }, { token: DialogService }, { token: i1.MatDialog }, { token: FilemanagerComponent }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: FileGridComponent, isStandalone: true, selector: "app-file-grid", inputs: { path: "path", config: "config", showHiddenFiles: "showHiddenFiles", viewMode: "viewMode", gridSize: "gridSize", tab: "tab", selection: "selection", value: "value", sortOrder: "sortOrder" }, outputs: { pathChange: "pathChange", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", newTab: "newTab", loadFiles: "loadFiles", selectionChange: "selectionChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "filesRef", first: true, predicate: ["fileViewport"], descendants: true }, { propertyName: "tabulator", first: true, predicate: TabulatorComponent, descendants: true }, { propertyName: "renameTemplate", first: true, predicate: ["renameTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (showLoader) {\n <mat-progress-bar [class.hide]=\"hideLoader\" mode=\"query\"/>\n}\n\n<div\n style=\"display: contents\"\n [style.--filemanager-fileicon-backdrop]=\"'url(' + iconResolver.path + '/pop/generic.svg)'\"\n (dragstart)=\"userIsDraggingFile = true\"\n (dragend)=\"userIsDraggingFile = false\"\n (dragover)=\"draggingOver = true\"\n (dragleave)=\"draggingOver = false\"\n (ondrop)=\"onDrop($event)\"\n>\n <!-- <ng-container *ngIf=\"draggingOver\"></ng-container> -->\n <!-- Grid mode -->\n <ng-scrollbar\n *ngIf=\"viewMode == 'grid'\"\n class=\"grid {{gridSize}} {{config.imageSize || 'normal'}}\"\n [class.selectionMode]=\"config.mode == 'focusFiles'\"\n [class.showDropArea]=\"draggingOver\"\n style=\"height: 100%; width: 100%\"\n track=\"vertical\"\n pointerEventsMethod=\"scrollbar\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <div class=\"resize-observer\" #fileViewport></div>\n <cdk-virtual-scroll-viewport\n itemSize=\"134\"\n scrollViewport\n (click)=\"selection = []; selectionText = ''\"\n >\n <div class=\"row\" *cdkVirtualFor=\"let row of sortedFolders\">\n <div class=\"file\"\n *ngFor=\"let item of row\"\n [class.selected]=\"selection.includes(item)\"\n [class.generic]=\"item['_icon'].needsBackdrop\"\n [ngx-contextmenu]=\"fileContextMenu\"\n [ngx-menu-context]=\"item\"\n >\n <mat-checkbox\n #checkbox\n *ngIf=\"config.mode == 'focusFiles' && item.kind == 'file'\"\n [checked]=\"item['_value']\"\n (change)=\"onToggle(item, $event)\"\n />\n <div\n style=\"display: contents\"\n (click)=\"onSelect(item, $event)\"\n (dblclick)=\"onItemClick(item)\"\n (dragstart)=\"onDragStart($event, item)\"\n >\n <img [src]=\"item['_icon'].path\"/>\n <p>{{item['vanityName'] || item.name}}</p>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-scrollbar>\n\n <!-- List mode -->\n <div\n *ngIf=\"viewMode == 'list'\"\n style=\"width: 100%; height: 100%\"\n [class.showDropArea]=\"draggingOver\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <app-tabulator\n [dataSource]=\"directoryContents\"\n [columns]=\"[\n { field: 'name', title: 'Name', formatter: nameCellFormatter },\n { field: '_size', title: 'Size' },\n { field: '_ctime', title: 'Created' },\n { field: '_mtime', title: 'Modified' },\n ]\"\n [options]=\"{\n rowHeight: 32\n }\"\n (rowClick)=\"onRowClick($event)\"\n (rowDblClick)=\"onItemClick($event.data)\"\n (rowContext)=\"onRowCtx($event)\"\n />\n </div>\n</div>\n\n<div class=\"select-hint\" *ngIf=\"selectionText\">\n {{selectionText}}\n</div>\n\n<div class=\"controls\">\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onCreateFolder()\"\n >\n <mat-icon>create_new_folder</mat-icon>\n New Folder\n </button>\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onUploadFile()\"\n >\n <mat-icon>upload_file</mat-icon>\n Upload\n </button>\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}.resize-observer{position:absolute;inset:0}.grid .row{flex:1;display:grid;grid-template-columns:repeat(auto-fill,80px);justify-content:space-between;grid-gap:20px;grid-auto-rows:min-content;padding:10px;margin-right:10px}.grid .file{width:80px;z-index:1;position:relative;transition:opacity 50ms ease-in-out;display:flex;flex-direction:column;align-items:center;text-align:center}.grid .file.selected p{background-color:#8ad9d9;color:#000}.grid .file.generic:before{content:\" \";position:absolute;background:var(--filemanager-fileicon-backdrop);background-repeat:no-repeat;width:100%;height:100%;z-index:-1;left:0}.grid .file.generic img{height:44px;width:44px;margin-top:28px;margin-bottom:8px}.grid .file img{-webkit-user-select:none;user-select:none}.grid .file p{height:50px;width:100%;margin:0;padding:2px;font-size:14px;line-height:16px;border-radius:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow-wrap:break-word;transition:background-color 50ms ease-in-out,color 50ms ease-in-out}.grid .file mat-checkbox{position:absolute;left:-32px;top:-16px}:host ::ng-deep .small .file{width:46px}:host ::ng-deep .grid.selectionMode .row{padding-left:30px}:host ::ng-deep .grid.selectionMode .cdk-virtual-scroll-content-wrapper{padding-top:10px}:host ::ng-deep .tabulator .tabulator-row .tabulator-cell:not(:first-of-type){padding-top:9px}.list .row{flex:1;display:flex;align-items:center;padding:5px 10px;height:42px}.list .row p{margin:0}.list .row:hover{background-color:var(--filemanager-row-hover-background-color, #343434)}.list .row.selected p{background-color:#8ad9d9;color:#000;border-radius:5px;padding:0 4px}.list .row.odd{background-color:var(--filemanager-row-alt-background-color, #323232)}.controls{position:absolute;bottom:12px;right:12px;display:flex}.select-hint{position:absolute;font-size:14px;bottom:0;right:0;background-color:#000a;padding:2px 10px;border:1px solid black;border-top-right-radius:5px;border-bottom:none;border-right:none;z-index:9999}.select-hint:hover{display:none}.showDropArea{border:4px dashed rgba(18,18,18,.8);transition:border-color .25s ease}:host ::ng-deep ng-scrollbar.ng-scrollbar{box-sizing:border-box!important;--scrollbar-thumb-color: #666;min-height:200px;min-width:200px}mat-progress-bar{--mdc-linear-progress-track-height: 2px;position:absolute;top:0;left:0;width:100%;animation:dropIn .2s ease;transition:position .2s ease;z-index:100}mat-progress-bar.hide{top:-2px}@keyframes dropIn{0%{top:-2px}to{top:0}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i7.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i7.ScrollViewport, selector: "[scrollViewport]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: TabulatorComponent, selector: "app-tabulator", inputs: ["dataSource", "columns", "key", "options"], outputs: ["cellClick", "cellDblClick", "rowClick", "rowContext", "rowDblClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] }); }
|
|
9947
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: FileGridComponent, isStandalone: true, selector: "app-file-grid", inputs: { path: "path", config: "config", showHiddenFiles: "showHiddenFiles", viewMode: "viewMode", gridSize: "gridSize", tab: "tab", selection: "selection", value: "value", sortOrder: "sortOrder" }, outputs: { pathChange: "pathChange", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", newTab: "newTab", loadFiles: "loadFiles", selectionChange: "selectionChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "filesRef", first: true, predicate: ["fileViewport"], descendants: true }, { propertyName: "tabulator", first: true, predicate: TabulatorComponent, descendants: true }, { propertyName: "renameTemplate", first: true, predicate: ["renameTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (showLoader) {\n <mat-progress-bar [class.hide]=\"hideLoader\" mode=\"query\"/>\n}\n\n<div\n style=\"display: contents\"\n [style.--filemanager-fileicon-backdrop]=\"'url(' + iconResolver.path + '/pop/generic.svg)'\"\n (dragstart)=\"userIsDraggingFile = true\"\n (dragend)=\"userIsDraggingFile = false\"\n (dragover)=\"draggingOver = true\"\n (dragleave)=\"draggingOver = false\"\n (ondrop)=\"onDrop($event)\"\n>\n\n @if (failedLoad) {\n <div style=\"display: flex; align-items: center; justify-items: center; height: 100%\">\n <div style=\"max-width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n <img style=\"width: 200px\" src=\"data:image/svg+xml,%3Csvg fill='var(--text-color)' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 600.525 600.525' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M57.375,138.656L43.031,95.146c-23.428,8.128-40.162,29.166-42.553,54.028l45.9,3.825 C46.856,146.306,51.16,140.568,57.375,138.656z'/%3E%3Crect y='288.309' width='45.9' height='45.901'/%3E%3Cpath d='M554.625,446.091c0,3.346-0.956,6.215-2.868,9.084l38.25,25.34c6.693-10.039,10.04-21.992,10.04-34.424V423.14h-45.899 v22.951H554.625z'/%3E%3Crect x='456.609' y='146.306' width='45.9' height='45.9'/%3E%3Crect x='485.297' y='462.825' width='45.9' height='45.9'/%3E%3Crect x='393.497' y='462.825' width='45.9' height='45.9'/%3E%3Crect x='364.81' y='146.306' width='45.9' height='45.9'/%3E%3Crect x='118.097' y='462.825' width='45.9' height='45.9'/%3E%3Crect y='380.108' width='45.9' height='45.9'/%3E%3Crect y='196.509' width='45.9' height='45.9'/%3E%3Cpath d='M330.385,143.437c-2.391-1.434-3.825-2.391-4.304-2.869l-28.209-29.166c-1.913-1.913-4.303-3.825-6.694-5.737 l-27.253,36.815c0.478,0.478,0.956,0.956,0.956,0.956s37.772,34.425,44.465,41.119L330.385,143.437z'/%3E%3Crect x='554.625' y='239.541' width='45.9' height='45.9'/%3E%3Crect x='301.697' y='462.825' width='45.899' height='45.9'/%3E%3Cpath d='M559.885,146.306h-10.997v47.812h5.737h45.9v-7.172C600.525,164.475,582.356,146.306,559.885,146.306z'/%3E%3Crect x='187.425' y='91.8' width='45.9' height='45.9'/%3E%3Crect x='554.625' y='331.341' width='45.9' height='45.9'/%3E%3Crect x='95.625' y='91.8' width='45.9' height='45.9'/%3E%3Crect x='209.897' y='462.825' width='45.9' height='45.9'/%3E%3Cpath d='M49.247,456.132l-36.337,27.73c11.953,15.777,30.122,24.863,49.725,24.863h9.562v-45.9h-9.562 C57.375,462.825,52.594,460.435,49.247,456.132z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\">\n\n <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n <svg\n fill=\"var(--text-color)\"\n width=\"200px\"\n viewBox=\"0 0 600.525 600.525\"\n >\n <path d=\"M57.375,138.656L43.031,95.146c-23.428,8.128-40.162,29.166-42.553,54.028l45.9,3.825C46.856,146.306,51.16,140.568,57.375,138.656z\" />\n <rect y=\"288.309\" width=\"45.9\" height=\"45.901\" />\n <path d=\"M554.625,446.091c0,3.346-0.956,6.215-2.868,9.084l38.25,25.34c6.693-10.039,10.04-21.992,10.04-34.424V423.14h-45.899v22.951H554.625z\" />\n <rect x=\"456.609\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"485.297\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"393.497\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"364.81\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"118.097\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <rect y=\"380.108\" width=\"45.9\" height=\"45.9\" />\n <rect y=\"196.509\" width=\"45.9\" height=\"45.9\" />\n <path d=\"M330.385,143.437c-2.391-1.434-3.825-2.391-4.304-2.869l-28.209-29.166c-1.913-1.913-4.303-3.825-6.694-5.737l-27.253,36.815c0.478,0.478,0.956,0.956,0.956,0.956s37.772,34.425,44.465,41.119L330.385,143.437z\" />\n <rect x=\"554.625\" y=\"239.541\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"301.697\" y=\"462.825\" width=\"45.899\" height=\"45.9\" />\n <path d=\"M559.885,146.306h-10.997v47.812h5.737h45.9v-7.172C600.525,164.475,582.356,146.306,559.885,146.306z\" />\n <rect x=\"187.425\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"554.625\" y=\"331.341\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"95.625\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"209.897\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <path d=\"M49.247,456.132l-36.337,27.73c11.953,15.777,30.122,24.863,49.725,24.863h9.562v-45.9h-9.562C57.375,462.825,52.594,460.435,49.247,456.132z\" />\n </svg>\n\n <h3>Sorry about that.</h3>\n <p>\n Our servers aren't doing their thing right now.\n You can try again later or contact an administrator about this.\n </p>\n <hr style=\"width: 100%; opacity: .5;\"/>\n <p>\n Error:\n <span style=\"color: var(--mat-tab-header-active-focus-label-text-color)\">{{error.status}}</span>\n\n @if (error.error?.message) {\n Message: {{error.error?.message}}\n }\n @if (error.error?.message) {\n Message: {{error.error?.message}}\n }\n @if (error.error?.message) {\n Message: {{error.error?.message}}\n }\n </p>\n </div>\n </div>\n }\n @else {\n <!-- <ng-container *ngIf=\"draggingOver\"></ng-container> -->\n <!-- Grid mode -->\n @if (viewMode == 'grid') {\n <ng-scrollbar\n class=\"grid content-area {{gridSize}} {{config.imageSize || 'normal'}}\"\n [class.selectionMode]=\"config.mode == 'focusFiles'\"\n [class.showDropArea]=\"draggingOver\"\n style=\"height: 100%; width: 100%\"\n track=\"vertical\"\n pointerEventsMethod=\"scrollbar\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <div class=\"resize-observer\" #fileViewport></div>\n <cdk-virtual-scroll-viewport\n itemSize=\"134\"\n scrollViewport\n (click)=\"selection = []; selectionText = ''\"\n >\n <div class=\"row\" *cdkVirtualFor=\"let row of sortedFolders\">\n @for (item of row; track item) {\n <div class=\"file\"\n [class.selected]=\"selection.includes(item)\"\n [class.generic]=\"item['_icon'].needsBackdrop\"\n [ngx-contextmenu]=\"fileContextMenu\"\n [ngx-menu-context]=\"item\"\n >\n @if (config.mode == 'focusFiles' && item.kind == 'file') {\n <mat-checkbox\n #checkbox\n [checked]=\"item['_value']\"\n (change)=\"onToggle(item, $event)\"\n />\n }\n <div\n style=\"display: contents\"\n (click)=\"onSelect(item, $event)\"\n (dblclick)=\"onItemClick(item)\"\n (dragstart)=\"onDragStart($event, item)\"\n >\n <img [src]=\"item['_icon'].path\"/>\n <p>{{item['vanityName'] || item.name}}</p>\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-scrollbar>\n }\n\n <!-- List mode -->\n @if (viewMode == 'list') {\n <div\n class=\"content-area\"\n style=\"width: 100%; height: 100%\"\n [class.showDropArea]=\"draggingOver\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <app-tabulator\n [dataSource]=\"directoryContents\"\n [columns]=\"[\n { field: 'name', title: 'Name', formatter: nameCellFormatter },\n { field: '_size', title: 'Size' },\n { field: '_ctime', title: 'Created' },\n { field: '_mtime', title: 'Modified' },\n ]\"\n [options]=\"{\n rowHeight: 32\n }\"\n (rowClick)=\"onRowClick($event)\"\n (rowDblClick)=\"onItemClick($event.data)\"\n (rowContext)=\"onRowCtx($event)\"\n />\n </div>\n }\n }\n</div>\n\n@if (selectionText?.trim()?.length > 0) {\n <div class=\"select-hint\">\n {{selectionText}}\n </div>\n}\n\n<div class=\"controls\">\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onCreateFolder()\"\n >\n <mat-icon>create_new_folder</mat-icon>\n New Folder\n </button>\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onUploadFile()\"\n >\n <mat-icon>upload_file</mat-icon>\n Upload\n </button>\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}.resize-observer{position:absolute;inset:0}.grid .row{flex:1;display:grid;grid-template-columns:repeat(auto-fill,80px);justify-content:space-between;grid-gap:20px;grid-auto-rows:min-content;padding:10px;margin-right:10px}.grid .file{width:80px;z-index:1;position:relative;transition:opacity 50ms ease-in-out;display:flex;flex-direction:column;align-items:center;text-align:center}.grid .file.selected p{background-color:#8ad9d9;color:#000}.grid .file.generic:before{content:\" \";position:absolute;background:var(--filemanager-fileicon-backdrop);background-repeat:no-repeat;width:100%;height:100%;z-index:-1;left:0}.grid .file.generic img{height:44px;width:44px;margin-top:28px;margin-bottom:8px}.grid .file img{-webkit-user-select:none;user-select:none}.grid .file p{height:50px;width:100%;margin:0;padding:2px;font-size:14px;line-height:16px;border-radius:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow-wrap:break-word;transition:background-color 50ms ease-in-out,color 50ms ease-in-out}.grid .file mat-checkbox{position:absolute;left:-32px;top:-16px}:host ::ng-deep .small .file{width:46px}:host ::ng-deep .grid.selectionMode .row{padding-left:30px}:host ::ng-deep .grid.selectionMode .cdk-virtual-scroll-content-wrapper{padding-top:10px}:host ::ng-deep .tabulator .tabulator-row .tabulator-cell:not(:first-of-type){padding-top:9px}.list .row{flex:1;display:flex;align-items:center;padding:5px 10px;height:42px}.list .row p{margin:0}.list .row:hover{background-color:var(--filemanager-row-hover-background-color, #343434)}.list .row.selected p{background-color:#8ad9d9;color:#000;border-radius:5px;padding:0 4px}.list .row.odd{background-color:var(--filemanager-row-alt-background-color, #323232)}.controls{position:absolute;bottom:12px;right:12px;display:flex;gap:12px}.select-hint{position:absolute;font-size:14px;bottom:0;right:0;background-color:#000a;padding:2px 10px;border:1px solid black;border-top-right-radius:5px;border-bottom:none;border-right:none;z-index:9999}.select-hint:hover{display:none}.content-area{border:4px dashed rgba(0,0,0,0)}.showDropArea{border:4px dashed var(--theme-primary, rgba(128, 128, 128, .8));transition:border-color .25s ease}:host ::ng-deep ng-scrollbar.ng-scrollbar{box-sizing:border-box!important;--scrollbar-thumb-color: #666;min-height:200px;min-width:200px}mat-progress-bar{--mdc-linear-progress-track-height: 2px;position:absolute;top:0;left:0;width:100%;animation:dropIn .2s ease;transition:position .2s ease;z-index:100}mat-progress-bar.hide{top:-2px}@keyframes dropIn{0%{top:-2px}to{top:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i7.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i7.ScrollViewport, selector: "[scrollViewport]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: TabulatorComponent, selector: "app-tabulator", inputs: ["dataSource", "columns", "key", "options"], outputs: ["cellClick", "cellDblClick", "rowClick", "rowContext", "rowDblClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] }); }
|
|
9942
9948
|
}
|
|
9943
9949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileGridComponent, decorators: [{
|
|
9944
9950
|
type: Component,
|
|
@@ -9956,7 +9962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
9956
9962
|
TabulatorComponent,
|
|
9957
9963
|
MenuDirective,
|
|
9958
9964
|
ScrollingModule
|
|
9959
|
-
], standalone: true, template: "@if (showLoader) {\n <mat-progress-bar [class.hide]=\"hideLoader\" mode=\"query\"/>\n}\n\n<div\n style=\"display: contents\"\n [style.--filemanager-fileicon-backdrop]=\"'url(' + iconResolver.path + '/pop/generic.svg)'\"\n (dragstart)=\"userIsDraggingFile = true\"\n (dragend)=\"userIsDraggingFile = false\"\n (dragover)=\"draggingOver = true\"\n (dragleave)=\"draggingOver = false\"\n (ondrop)=\"onDrop($event)\"\n>\n <!-- <ng-container *ngIf=\"draggingOver\"></ng-container> -->\n <!-- Grid mode -->\n <ng-scrollbar\n *ngIf=\"viewMode == 'grid'\"\n class=\"grid {{gridSize}} {{config.imageSize || 'normal'}}\"\n [class.selectionMode]=\"config.mode == 'focusFiles'\"\n [class.showDropArea]=\"draggingOver\"\n style=\"height: 100%; width: 100%\"\n track=\"vertical\"\n pointerEventsMethod=\"scrollbar\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <div class=\"resize-observer\" #fileViewport></div>\n <cdk-virtual-scroll-viewport\n itemSize=\"134\"\n scrollViewport\n (click)=\"selection = []; selectionText = ''\"\n >\n <div class=\"row\" *cdkVirtualFor=\"let row of sortedFolders\">\n <div class=\"file\"\n *ngFor=\"let item of row\"\n [class.selected]=\"selection.includes(item)\"\n [class.generic]=\"item['_icon'].needsBackdrop\"\n [ngx-contextmenu]=\"fileContextMenu\"\n [ngx-menu-context]=\"item\"\n >\n <mat-checkbox\n #checkbox\n *ngIf=\"config.mode == 'focusFiles' && item.kind == 'file'\"\n [checked]=\"item['_value']\"\n (change)=\"onToggle(item, $event)\"\n />\n <div\n style=\"display: contents\"\n (click)=\"onSelect(item, $event)\"\n (dblclick)=\"onItemClick(item)\"\n (dragstart)=\"onDragStart($event, item)\"\n >\n <img [src]=\"item['_icon'].path\"/>\n <p>{{item['vanityName'] || item.name}}</p>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-scrollbar>\n\n <!-- List mode -->\n <div\n *ngIf=\"viewMode == 'list'\"\n style=\"width: 100%; height: 100%\"\n [class.showDropArea]=\"draggingOver\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <app-tabulator\n [dataSource]=\"directoryContents\"\n [columns]=\"[\n { field: 'name', title: 'Name', formatter: nameCellFormatter },\n { field: '_size', title: 'Size' },\n { field: '_ctime', title: 'Created' },\n { field: '_mtime', title: 'Modified' },\n ]\"\n [options]=\"{\n rowHeight: 32\n }\"\n (rowClick)=\"onRowClick($event)\"\n (rowDblClick)=\"onItemClick($event.data)\"\n (rowContext)=\"onRowCtx($event)\"\n />\n </div>\n</div>\n\n<div class=\"select-hint\" *ngIf=\"selectionText\">\n {{selectionText}}\n</div>\n\n<div class=\"controls\">\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onCreateFolder()\"\n >\n <mat-icon>create_new_folder</mat-icon>\n New Folder\n </button>\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onUploadFile()\"\n >\n <mat-icon>upload_file</mat-icon>\n Upload\n </button>\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}.resize-observer{position:absolute;inset:0}.grid .row{flex:1;display:grid;grid-template-columns:repeat(auto-fill,80px);justify-content:space-between;grid-gap:20px;grid-auto-rows:min-content;padding:10px;margin-right:10px}.grid .file{width:80px;z-index:1;position:relative;transition:opacity 50ms ease-in-out;display:flex;flex-direction:column;align-items:center;text-align:center}.grid .file.selected p{background-color:#8ad9d9;color:#000}.grid .file.generic:before{content:\" \";position:absolute;background:var(--filemanager-fileicon-backdrop);background-repeat:no-repeat;width:100%;height:100%;z-index:-1;left:0}.grid .file.generic img{height:44px;width:44px;margin-top:28px;margin-bottom:8px}.grid .file img{-webkit-user-select:none;user-select:none}.grid .file p{height:50px;width:100%;margin:0;padding:2px;font-size:14px;line-height:16px;border-radius:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow-wrap:break-word;transition:background-color 50ms ease-in-out,color 50ms ease-in-out}.grid .file mat-checkbox{position:absolute;left:-32px;top:-16px}:host ::ng-deep .small .file{width:46px}:host ::ng-deep .grid.selectionMode .row{padding-left:30px}:host ::ng-deep .grid.selectionMode .cdk-virtual-scroll-content-wrapper{padding-top:10px}:host ::ng-deep .tabulator .tabulator-row .tabulator-cell:not(:first-of-type){padding-top:9px}.list .row{flex:1;display:flex;align-items:center;padding:5px 10px;height:42px}.list .row p{margin:0}.list .row:hover{background-color:var(--filemanager-row-hover-background-color, #343434)}.list .row.selected p{background-color:#8ad9d9;color:#000;border-radius:5px;padding:0 4px}.list .row.odd{background-color:var(--filemanager-row-alt-background-color, #323232)}.controls{position:absolute;bottom:12px;right:12px;display:flex}.select-hint{position:absolute;font-size:14px;bottom:0;right:0;background-color:#000a;padding:2px 10px;border:1px solid black;border-top-right-radius:5px;border-bottom:none;border-right:none;z-index:9999}.select-hint:hover{display:none}.showDropArea{border:4px dashed rgba(18,18,18,.8);transition:border-color .25s ease}:host ::ng-deep ng-scrollbar.ng-scrollbar{box-sizing:border-box!important;--scrollbar-thumb-color: #666;min-height:200px;min-width:200px}mat-progress-bar{--mdc-linear-progress-track-height: 2px;position:absolute;top:0;left:0;width:100%;animation:dropIn .2s ease;transition:position .2s ease;z-index:100}mat-progress-bar.hide{top:-2px}@keyframes dropIn{0%{top:-2px}to{top:0}}\n"] }]
|
|
9965
|
+
], standalone: true, template: "@if (showLoader) {\n <mat-progress-bar [class.hide]=\"hideLoader\" mode=\"query\"/>\n}\n\n<div\n style=\"display: contents\"\n [style.--filemanager-fileicon-backdrop]=\"'url(' + iconResolver.path + '/pop/generic.svg)'\"\n (dragstart)=\"userIsDraggingFile = true\"\n (dragend)=\"userIsDraggingFile = false\"\n (dragover)=\"draggingOver = true\"\n (dragleave)=\"draggingOver = false\"\n (ondrop)=\"onDrop($event)\"\n>\n\n @if (failedLoad) {\n <div style=\"display: flex; align-items: center; justify-items: center; height: 100%\">\n <div style=\"max-width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n <img style=\"width: 200px\" src=\"data:image/svg+xml,%3Csvg fill='var(--text-color)' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 600.525 600.525' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M57.375,138.656L43.031,95.146c-23.428,8.128-40.162,29.166-42.553,54.028l45.9,3.825 C46.856,146.306,51.16,140.568,57.375,138.656z'/%3E%3Crect y='288.309' width='45.9' height='45.901'/%3E%3Cpath d='M554.625,446.091c0,3.346-0.956,6.215-2.868,9.084l38.25,25.34c6.693-10.039,10.04-21.992,10.04-34.424V423.14h-45.899 v22.951H554.625z'/%3E%3Crect x='456.609' y='146.306' width='45.9' height='45.9'/%3E%3Crect x='485.297' y='462.825' width='45.9' height='45.9'/%3E%3Crect x='393.497' y='462.825' width='45.9' height='45.9'/%3E%3Crect x='364.81' y='146.306' width='45.9' height='45.9'/%3E%3Crect x='118.097' y='462.825' width='45.9' height='45.9'/%3E%3Crect y='380.108' width='45.9' height='45.9'/%3E%3Crect y='196.509' width='45.9' height='45.9'/%3E%3Cpath d='M330.385,143.437c-2.391-1.434-3.825-2.391-4.304-2.869l-28.209-29.166c-1.913-1.913-4.303-3.825-6.694-5.737 l-27.253,36.815c0.478,0.478,0.956,0.956,0.956,0.956s37.772,34.425,44.465,41.119L330.385,143.437z'/%3E%3Crect x='554.625' y='239.541' width='45.9' height='45.9'/%3E%3Crect x='301.697' y='462.825' width='45.899' height='45.9'/%3E%3Cpath d='M559.885,146.306h-10.997v47.812h5.737h45.9v-7.172C600.525,164.475,582.356,146.306,559.885,146.306z'/%3E%3Crect x='187.425' y='91.8' width='45.9' height='45.9'/%3E%3Crect x='554.625' y='331.341' width='45.9' height='45.9'/%3E%3Crect x='95.625' y='91.8' width='45.9' height='45.9'/%3E%3Crect x='209.897' y='462.825' width='45.9' height='45.9'/%3E%3Cpath d='M49.247,456.132l-36.337,27.73c11.953,15.777,30.122,24.863,49.725,24.863h9.562v-45.9h-9.562 C57.375,462.825,52.594,460.435,49.247,456.132z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\">\n\n <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n <svg\n fill=\"var(--text-color)\"\n width=\"200px\"\n viewBox=\"0 0 600.525 600.525\"\n >\n <path d=\"M57.375,138.656L43.031,95.146c-23.428,8.128-40.162,29.166-42.553,54.028l45.9,3.825C46.856,146.306,51.16,140.568,57.375,138.656z\" />\n <rect y=\"288.309\" width=\"45.9\" height=\"45.901\" />\n <path d=\"M554.625,446.091c0,3.346-0.956,6.215-2.868,9.084l38.25,25.34c6.693-10.039,10.04-21.992,10.04-34.424V423.14h-45.899v22.951H554.625z\" />\n <rect x=\"456.609\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"485.297\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"393.497\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"364.81\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"118.097\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <rect y=\"380.108\" width=\"45.9\" height=\"45.9\" />\n <rect y=\"196.509\" width=\"45.9\" height=\"45.9\" />\n <path d=\"M330.385,143.437c-2.391-1.434-3.825-2.391-4.304-2.869l-28.209-29.166c-1.913-1.913-4.303-3.825-6.694-5.737l-27.253,36.815c0.478,0.478,0.956,0.956,0.956,0.956s37.772,34.425,44.465,41.119L330.385,143.437z\" />\n <rect x=\"554.625\" y=\"239.541\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"301.697\" y=\"462.825\" width=\"45.899\" height=\"45.9\" />\n <path d=\"M559.885,146.306h-10.997v47.812h5.737h45.9v-7.172C600.525,164.475,582.356,146.306,559.885,146.306z\" />\n <rect x=\"187.425\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"554.625\" y=\"331.341\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"95.625\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n <rect x=\"209.897\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n <path d=\"M49.247,456.132l-36.337,27.73c11.953,15.777,30.122,24.863,49.725,24.863h9.562v-45.9h-9.562C57.375,462.825,52.594,460.435,49.247,456.132z\" />\n </svg>\n\n <h3>Sorry about that.</h3>\n <p>\n Our servers aren't doing their thing right now.\n You can try again later or contact an administrator about this.\n </p>\n <hr style=\"width: 100%; opacity: .5;\"/>\n <p>\n Error:\n <span style=\"color: var(--mat-tab-header-active-focus-label-text-color)\">{{error.status}}</span>\n\n @if (error.error?.message) {\n Message: {{error.error?.message}}\n }\n @if (error.error?.message) {\n Message: {{error.error?.message}}\n }\n @if (error.error?.message) {\n Message: {{error.error?.message}}\n }\n </p>\n </div>\n </div>\n }\n @else {\n <!-- <ng-container *ngIf=\"draggingOver\"></ng-container> -->\n <!-- Grid mode -->\n @if (viewMode == 'grid') {\n <ng-scrollbar\n class=\"grid content-area {{gridSize}} {{config.imageSize || 'normal'}}\"\n [class.selectionMode]=\"config.mode == 'focusFiles'\"\n [class.showDropArea]=\"draggingOver\"\n style=\"height: 100%; width: 100%\"\n track=\"vertical\"\n pointerEventsMethod=\"scrollbar\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <div class=\"resize-observer\" #fileViewport></div>\n <cdk-virtual-scroll-viewport\n itemSize=\"134\"\n scrollViewport\n (click)=\"selection = []; selectionText = ''\"\n >\n <div class=\"row\" *cdkVirtualFor=\"let row of sortedFolders\">\n @for (item of row; track item) {\n <div class=\"file\"\n [class.selected]=\"selection.includes(item)\"\n [class.generic]=\"item['_icon'].needsBackdrop\"\n [ngx-contextmenu]=\"fileContextMenu\"\n [ngx-menu-context]=\"item\"\n >\n @if (config.mode == 'focusFiles' && item.kind == 'file') {\n <mat-checkbox\n #checkbox\n [checked]=\"item['_value']\"\n (change)=\"onToggle(item, $event)\"\n />\n }\n <div\n style=\"display: contents\"\n (click)=\"onSelect(item, $event)\"\n (dblclick)=\"onItemClick(item)\"\n (dragstart)=\"onDragStart($event, item)\"\n >\n <img [src]=\"item['_icon'].path\"/>\n <p>{{item['vanityName'] || item.name}}</p>\n </div>\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-scrollbar>\n }\n\n <!-- List mode -->\n @if (viewMode == 'list') {\n <div\n class=\"content-area\"\n style=\"width: 100%; height: 100%\"\n [class.showDropArea]=\"draggingOver\"\n [ngx-contextmenu]=\"folderContextMenu\"\n >\n <app-tabulator\n [dataSource]=\"directoryContents\"\n [columns]=\"[\n { field: 'name', title: 'Name', formatter: nameCellFormatter },\n { field: '_size', title: 'Size' },\n { field: '_ctime', title: 'Created' },\n { field: '_mtime', title: 'Modified' },\n ]\"\n [options]=\"{\n rowHeight: 32\n }\"\n (rowClick)=\"onRowClick($event)\"\n (rowDblClick)=\"onItemClick($event.data)\"\n (rowContext)=\"onRowCtx($event)\"\n />\n </div>\n }\n }\n</div>\n\n@if (selectionText?.trim()?.length > 0) {\n <div class=\"select-hint\">\n {{selectionText}}\n </div>\n}\n\n<div class=\"controls\">\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onCreateFolder()\"\n >\n <mat-icon>create_new_folder</mat-icon>\n New Folder\n </button>\n <button\n mat-flat-button\n class=\"upload-button\"\n (click)=\"onUploadFile()\"\n >\n <mat-icon>upload_file</mat-icon>\n Upload\n </button>\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}.resize-observer{position:absolute;inset:0}.grid .row{flex:1;display:grid;grid-template-columns:repeat(auto-fill,80px);justify-content:space-between;grid-gap:20px;grid-auto-rows:min-content;padding:10px;margin-right:10px}.grid .file{width:80px;z-index:1;position:relative;transition:opacity 50ms ease-in-out;display:flex;flex-direction:column;align-items:center;text-align:center}.grid .file.selected p{background-color:#8ad9d9;color:#000}.grid .file.generic:before{content:\" \";position:absolute;background:var(--filemanager-fileicon-backdrop);background-repeat:no-repeat;width:100%;height:100%;z-index:-1;left:0}.grid .file.generic img{height:44px;width:44px;margin-top:28px;margin-bottom:8px}.grid .file img{-webkit-user-select:none;user-select:none}.grid .file p{height:50px;width:100%;margin:0;padding:2px;font-size:14px;line-height:16px;border-radius:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow-wrap:break-word;transition:background-color 50ms ease-in-out,color 50ms ease-in-out}.grid .file mat-checkbox{position:absolute;left:-32px;top:-16px}:host ::ng-deep .small .file{width:46px}:host ::ng-deep .grid.selectionMode .row{padding-left:30px}:host ::ng-deep .grid.selectionMode .cdk-virtual-scroll-content-wrapper{padding-top:10px}:host ::ng-deep .tabulator .tabulator-row .tabulator-cell:not(:first-of-type){padding-top:9px}.list .row{flex:1;display:flex;align-items:center;padding:5px 10px;height:42px}.list .row p{margin:0}.list .row:hover{background-color:var(--filemanager-row-hover-background-color, #343434)}.list .row.selected p{background-color:#8ad9d9;color:#000;border-radius:5px;padding:0 4px}.list .row.odd{background-color:var(--filemanager-row-alt-background-color, #323232)}.controls{position:absolute;bottom:12px;right:12px;display:flex;gap:12px}.select-hint{position:absolute;font-size:14px;bottom:0;right:0;background-color:#000a;padding:2px 10px;border:1px solid black;border-top-right-radius:5px;border-bottom:none;border-right:none;z-index:9999}.select-hint:hover{display:none}.content-area{border:4px dashed rgba(0,0,0,0)}.showDropArea{border:4px dashed var(--theme-primary, rgba(128, 128, 128, .8));transition:border-color .25s ease}:host ::ng-deep ng-scrollbar.ng-scrollbar{box-sizing:border-box!important;--scrollbar-thumb-color: #666;min-height:200px;min-width:200px}mat-progress-bar{--mdc-linear-progress-track-height: 2px;position:absolute;top:0;left:0;width:100%;animation:dropIn .2s ease;transition:position .2s ease;z-index:100}mat-progress-bar.hide{top:-2px}@keyframes dropIn{0%{top:-2px}to{top:0}}\n"] }]
|
|
9960
9966
|
}], ctorParameters: () => [{ type: Fetch }, { type: KeyboardService }, { type: DialogService }, { type: i1.MatDialog }, { type: FilemanagerComponent }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { filesRef: [{
|
|
9961
9967
|
type: ViewChild,
|
|
9962
9968
|
args: ["fileViewport"]
|
|
@@ -10014,12 +10020,11 @@ class GtkIconButtonComponent {
|
|
|
10014
10020
|
this.click.emit();
|
|
10015
10021
|
}
|
|
10016
10022
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: GtkIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10017
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: GtkIconButtonComponent, isStandalone: true, selector: "gtk-icon-button", inputs: { fontIcon: "fontIcon", disabled: "disabled" }, outputs: { click: "click" }, ngImport: i0, template: "<button mat-flat-button [disabled]=\"disabled\">\n <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
10023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: GtkIconButtonComponent, isStandalone: true, selector: "gtk-icon-button", inputs: { fontIcon: "fontIcon", disabled: "disabled" }, outputs: { click: "click" }, ngImport: i0, template: "<button mat-flat-button [disabled]=\"disabled\">\n <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
10018
10024
|
}
|
|
10019
10025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: GtkIconButtonComponent, decorators: [{
|
|
10020
10026
|
type: Component,
|
|
10021
10027
|
args: [{ selector: 'gtk-icon-button', imports: [
|
|
10022
|
-
CommonModule,
|
|
10023
10028
|
MatIconModule,
|
|
10024
10029
|
MatButtonModule
|
|
10025
10030
|
], standalone: true, template: "<button mat-flat-button [disabled]=\"disabled\">\n <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"] }]
|
|
@@ -10038,14 +10043,11 @@ class GtkBreadcrumbComponent {
|
|
|
10038
10043
|
ngOnInit() {
|
|
10039
10044
|
}
|
|
10040
10045
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: GtkBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10041
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10046
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: GtkBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { crumbs: "crumbs", config: "config" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<button (click)=\"crumbClick.next({ id: config.chrootPath || '/', label: ''})\">\n {{config.rootName || 'Storage'}}\n</button>\n\n@for (crumb of crumbs; track crumb) {\n @if (crumb.label?.trim()?.length > 0) {\n <button (click)=\"crumbClick.next(crumb)\">{{crumb.label}}</button>\n }\n}\n", styles: [":host{border:1px solid var(--filemanager-breadcrumb-border-color, #171717);border-bottom-color:var(--filemanager-breadcrumb-border-bottom-color, #000);border-radius:6px;font-size:14px;display:flex;align-self:center;align-items:center;margin:0;gap:6px;height:30px;background:var(--filemanager-breadcrumb-background, #444)}button{position:relative;padding:0 6px;background-color:#0000;border:none;transition:color .2s ease;height:100%;color:var(--filemanager-breadcrumb-color, #bbb);border-radius:6px}button:hover{background-color:var(--filemanager-breadcrumb-button-hover-background-color, #4a4a4a);color:var(--filemanager-breadcrumb-button-hover-color, #fff)}button:after{content:\"/\";position:absolute;left:calc(100% + 1px);z-index:999}button:last-of-type{font-weight:700}button:last-of-type:after{content:\"\"}\n"] }); }
|
|
10042
10047
|
}
|
|
10043
10048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: GtkBreadcrumbComponent, decorators: [{
|
|
10044
10049
|
type: Component,
|
|
10045
|
-
args: [{ selector: 'app-breadcrumb',
|
|
10046
|
-
NgForOf,
|
|
10047
|
-
NgIf
|
|
10048
|
-
], standalone: true, template: "<button (click)=\"crumbClick.next({ id: config.chrootPath || '/', label: ''})\">{{config.rootName || 'Storage'}}</button>\n<ng-container *ngFor=\"let crumb of crumbs\">\n <button *ngIf=\"crumb.label.trim()\" (click)=\"crumbClick.next(crumb)\">{{crumb.label}}</button>\n</ng-container>\n", styles: [":host{border:1px solid var(--filemanager-breadcrumb-border-color, #171717);border-bottom-color:var(--filemanager-breadcrumb-border-bottom-color, #000);border-radius:6px;font-size:14px;display:flex;align-self:center;align-items:center;margin:0;gap:6px;height:30px;background:var(--filemanager-breadcrumb-background, #444)}button{position:relative;padding:0 6px;background-color:#0000;border:none;transition:color .2s ease;height:100%;color:var(--filemanager-breadcrumb-color, #bbb);border-radius:6px}button:hover{background-color:var(--filemanager-breadcrumb-button-hover-background-color, #4a4a4a);color:var(--filemanager-breadcrumb-button-hover-color, #fff)}button:after{content:\"/\";position:absolute;left:calc(100% + 1px);z-index:999}button:last-of-type{font-weight:700}button:last-of-type:after{content:\"\"}\n"] }]
|
|
10050
|
+
args: [{ selector: 'app-breadcrumb', standalone: true, template: "<button (click)=\"crumbClick.next({ id: config.chrootPath || '/', label: ''})\">\n {{config.rootName || 'Storage'}}\n</button>\n\n@for (crumb of crumbs; track crumb) {\n @if (crumb.label?.trim()?.length > 0) {\n <button (click)=\"crumbClick.next(crumb)\">{{crumb.label}}</button>\n }\n}\n", styles: [":host{border:1px solid var(--filemanager-breadcrumb-border-color, #171717);border-bottom-color:var(--filemanager-breadcrumb-border-bottom-color, #000);border-radius:6px;font-size:14px;display:flex;align-self:center;align-items:center;margin:0;gap:6px;height:30px;background:var(--filemanager-breadcrumb-background, #444)}button{position:relative;padding:0 6px;background-color:#0000;border:none;transition:color .2s ease;height:100%;color:var(--filemanager-breadcrumb-color, #bbb);border-radius:6px}button:hover{background-color:var(--filemanager-breadcrumb-button-hover-background-color, #4a4a4a);color:var(--filemanager-breadcrumb-button-hover-color, #fff)}button:after{content:\"/\";position:absolute;left:calc(100% + 1px);z-index:999}button:last-of-type{font-weight:700}button:last-of-type:after{content:\"\"}\n"] }]
|
|
10049
10051
|
}], ctorParameters: () => [], propDecorators: { crumbs: [{
|
|
10050
10052
|
type: Input
|
|
10051
10053
|
}], crumbClick: [{
|
|
@@ -10170,18 +10172,17 @@ class ToolbarComponent {
|
|
|
10170
10172
|
this.fileManager.fileGrids.forEach(g => g.loadFolder());
|
|
10171
10173
|
}
|
|
10172
10174
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ToolbarComponent, deps: [{ token: FilemanagerComponent }, { token: DialogService }, { token: Fetch }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ToolbarComponent, isStandalone: true, selector: "app-toolbar", inputs: { config: "config", currentTab: "currentTab", showHiddenFiles: "showHiddenFiles", showSidebar: "showSidebar", drawerMode: "drawerMode", showBareMinimum: "showBareMinimum" }, outputs: { onBreadcrumbClick: "onBreadcrumbClick", showHiddenFilesChange: "showHiddenFilesChange", showSidebarChange: "showSidebarChange" }, viewQueries: [{ propertyName: "zoomTemplate", first: true, predicate: ["zoomTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }], ngImport: i0, template: "<button\n *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n mat-icon-button\n (click)=\"toggleDrawer()\"\n>\n <mat-icon>list</mat-icon>\n</button>\n\n@if (!showBareMinimum) {\n <div class=\"buttongroup\">\n <gtk-icon-button\n fontIcon=\"arrow_back_ios_new\"\n (click)=\"historyBack(currentTab)\"\n [disabled]=\"currentTab.history?.length <= 1\"\n />\n <gtk-icon-button\n fontIcon=\"arrow_forward_ios\"\n (click)=\"historyForward(currentTab)\"\n [disabled]=\"currentTab.historyIndex >= (currentTab.history?.length-1)\"\n />\n </div>\n\n @if (!drawerMode) {\n <div style=\"width: 40px\"></div>\n }\n <gtk-icon-button\n fontIcon=\"sync\"\n (click)=\"onRefresh()\"\n />\n}\n\n\n<app-breadcrumb\n *ngIf=\"currentTab\"\n style=\"flex: 1\"\n [crumbs]=\"currentTab.breadcrumb\"\n (crumbClick)=\"onBreadcrumbClick.next($event)\"\n [config]=\"config\"\n/>\n\n@if (!drawerMode) {\n <!-- <div style=\"flex: 1\"></div> -->\n\n <gtk-icon-button\n fontIcon=\"more_vert\"\n [ngx-menu]=\"fileOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n\n <div style=\"width: 8px\"></div>\n\n <!-- <gtk-icon-button\n fontIcon=\"search\"\n /> -->\n\n @if (fileManager.width > 800) {\n <div style=\"width: 100px\"></div>\n }\n\n <gtk-icon-button\n [fontIcon]=\"currentTab.viewMode == 'list' ? 'view_list' : 'grid_view'\"\n (click)=\"currentTab.viewMode = currentTab.viewMode == 'list' ? 'grid' : 'list'; fileManager.onResize()\"\n />\n\n <gtk-icon-button\n fontIcon=\"sort\"\n [ngx-menu]=\"sortOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n\n}\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: GtkIconButtonComponent, selector: "gtk-icon-button", inputs: ["fontIcon", "disabled"], outputs: ["click"] }, { kind: "component", type: GtkBreadcrumbComponent, selector: "app-breadcrumb", inputs: ["crumbs", "config"], outputs: ["crumbClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }] }); }
|
|
10174
10176
|
}
|
|
10175
10177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
10176
10178
|
type: Component,
|
|
10177
10179
|
args: [{ selector: 'app-toolbar', imports: [
|
|
10178
|
-
NgIf,
|
|
10179
10180
|
MatIconModule,
|
|
10180
10181
|
MatButtonModule,
|
|
10181
10182
|
GtkIconButtonComponent,
|
|
10182
10183
|
GtkBreadcrumbComponent,
|
|
10183
10184
|
MenuDirective
|
|
10184
|
-
], standalone: true, template: "<button\n *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n mat-icon-button\n (click)=\"toggleDrawer()\"\n>\n <mat-icon>list</mat-icon>\n</button>\n\n
|
|
10185
|
+
], standalone: true, template: "<button\n *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n mat-icon-button\n (click)=\"toggleDrawer()\"\n>\n <mat-icon>list</mat-icon>\n</button>\n\n@if (!showBareMinimum) {\n <div class=\"buttongroup\">\n <gtk-icon-button\n fontIcon=\"arrow_back_ios_new\"\n (click)=\"historyBack(currentTab)\"\n [disabled]=\"currentTab.history?.length <= 1\"\n />\n <gtk-icon-button\n fontIcon=\"arrow_forward_ios\"\n (click)=\"historyForward(currentTab)\"\n [disabled]=\"currentTab.historyIndex >= (currentTab.history?.length-1)\"\n />\n </div>\n\n @if (!drawerMode) {\n <div style=\"width: 40px\"></div>\n }\n <gtk-icon-button\n fontIcon=\"sync\"\n (click)=\"onRefresh()\"\n />\n}\n\n\n<app-breadcrumb\n *ngIf=\"currentTab\"\n style=\"flex: 1\"\n [crumbs]=\"currentTab.breadcrumb\"\n (crumbClick)=\"onBreadcrumbClick.next($event)\"\n [config]=\"config\"\n/>\n\n@if (!drawerMode) {\n <!-- <div style=\"flex: 1\"></div> -->\n\n <gtk-icon-button\n fontIcon=\"more_vert\"\n [ngx-menu]=\"fileOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n\n <div style=\"width: 8px\"></div>\n\n <!-- <gtk-icon-button\n fontIcon=\"search\"\n /> -->\n\n @if (fileManager.width > 800) {\n <div style=\"width: 100px\"></div>\n }\n\n <gtk-icon-button\n [fontIcon]=\"currentTab.viewMode == 'list' ? 'view_list' : 'grid_view'\"\n (click)=\"currentTab.viewMode = currentTab.viewMode == 'list' ? 'grid' : 'list'; fileManager.onResize()\"\n />\n\n <gtk-icon-button\n fontIcon=\"sort\"\n [ngx-menu]=\"sortOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n\n}\n", styles: [":host{display:flex}\n"] }]
|
|
10185
10186
|
}], ctorParameters: () => [{ type: FilemanagerComponent }, { type: DialogService }, { type: Fetch }], propDecorators: { zoomTemplate: [{
|
|
10186
10187
|
type: ViewChild,
|
|
10187
10188
|
args: ['zoomTemplate']
|
|
@@ -10227,17 +10228,15 @@ class TreeViewComponent {
|
|
|
10227
10228
|
});
|
|
10228
10229
|
}
|
|
10229
10230
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeViewComponent, deps: [{ token: FilemanagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n @for (item of data; track item) {\n <mat-expansion-panel\n #panel\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n @if (panel.expanded) {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"\n />\n }\n @else {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path\"\n />\n }\n\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n @if (item['_children']) {\n <app-tree-view\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n }\n @else {\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n }\n </mat-expansion-panel>\n }\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
|
|
10231
10232
|
}
|
|
10232
10233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
10233
10234
|
type: Component,
|
|
10234
10235
|
args: [{ selector: 'app-tree-view', imports: [
|
|
10235
|
-
NgIf,
|
|
10236
|
-
NgForOf,
|
|
10237
10236
|
NgTemplateOutlet,
|
|
10238
10237
|
MatExpansionModule,
|
|
10239
10238
|
MatProgressBarModule
|
|
10240
|
-
], standalone: true, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n <mat-expansion-panel\n
|
|
10239
|
+
], standalone: true, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n @for (item of data; track item) {\n <mat-expansion-panel\n #panel\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n @if (panel.expanded) {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"\n />\n }\n @else {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path\"\n />\n }\n\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n @if (item['_children']) {\n <app-tree-view\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n }\n @else {\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n }\n </mat-expansion-panel>\n }\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"] }]
|
|
10241
10240
|
}], ctorParameters: () => [{ type: FilemanagerComponent }], propDecorators: { rowTemplate: [{
|
|
10242
10241
|
type: ContentChild,
|
|
10243
10242
|
args: ["rowTemplate", { read: TemplateRef }]
|
|
@@ -10479,13 +10478,11 @@ class FilemanagerComponent {
|
|
|
10479
10478
|
this.fileDownload.next(file);
|
|
10480
10479
|
}
|
|
10481
10480
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FilemanagerComponent, deps: [{ token: NGX_WEB_COMPONENTS_CONFIG, optional: true }, { token: LazyLoaderService }, { token: i0.ViewContainerRef }, { token: Fetch }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: FilemanagerComponent, isStandalone: true, selector: "app-filemanager", inputs: { config: "config", gridSize: "gridSize", mode: "mode", contextTags: "contextTags", value: "value" }, outputs: { valueChange: "valueChange", focusedFilesChange: "focusedFilesChange", fileUpload: "fileUpload", fileDownload: "fileDownload", fileRename: "fileRename", fileDelete: "fileDelete", fileCopy: "fileCopy", filePaste: "filePaste", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", filesSelect: "filesSelect" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }, { propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "toolbar", first: true, predicate: ToolbarComponent, descendants: true }, { propertyName: "drawer", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "fileGrids", predicate: FileGridComponent, descendants: true }], ngImport: i0, template: "<app-toolbar\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [showBareMinimum]=\"width < 500 && config.showBreadcrumb != false\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n/>\n\n<mat-drawer-container>\n <mat-drawer #drawer mode=\"over\">\n <app-toolbar\n *ngIf=\"width < 500 && config.showBreadcrumb != false\"\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [drawerMode]=\"true\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n />\n <app-tree-view\n [data]=\"currentTab.sidebarItems\"\n (loadChildren)=\"onTreeViewLoadChildren($event)\"\n (click)=\"onTreeViewSelect($event)\"\n />\n </mat-drawer>\n <mat-drawer-content>\n <as-split direction=\"horizontal\" [gutterSize]=\"sidebarOverlay ? 0 : 2\" [unit]=\"'pixel'\" (dragEnd)=\"onResizeEnd()\">\n <as-split-area\n style=\"background-color: var(--filemanager-sidebar-background-color, #2c2c2c)\"\n [size]=\"215\"\n [minSize]=\"215\"\n [maxSize]=\"width/4\"\n [visible]=\"!sidebarOverlay && config.showTreeview != false\"\n >\n <div class=\"sidebar\"\n *ngIf=\"!sidebarOverlay && config.showTreeview != false\"\n (click)=\"currentTab.selection = []\"\n >\n <app-tree-view\n [data]=\"currentTab.sidebarItems\"\n (loadChildren)=\"onTreeViewLoadChildren($event)\"\n (click)=\"onTreeViewSelect($event)\"\n />\n </div>\n </as-split-area>\n <as-split-area style=\"background-color: var(--filemanager-background-color, #272727);\">\n <div class=\"content\"\n [style.--tab-height]=\"tabs.length > 1 ? '36px' : '0'\"\n >\n <mat-tab-group #tabGroup (selectedTabChange)=\"currentTab = tabs[$event.index]\" [(selectedIndex)]=\"tabIndex\">\n <mat-tab *ngFor=\"let tab of tabs; let i = index\">\n <ng-template mat-tab-label>\n {{tab.label}}\n <mat-icon\n class=\"close\"\n (click)=\"closeTab(tab)\">\n close\n </mat-icon>\n </ng-template>\n\n <ng-template matTabContent>\n <app-file-grid\n [viewMode]=\"tab.viewMode\"\n [tab]=\"tab\"\n [config]=\"config\"\n [gridSize]=\"gridSize\"\n [sortOrder]=\"tab.sortOrder\"\n [(selection)]=\"tab.selection\"\n [(path)]=\"tab.path\"\n (pathChange)=\"onTabPathChange(tab)\"\n [(value)]=\"gridValues[i]\"\n (valueChange)=\"onGridValueChange()\"\n (loadFiles)=\"onTabLoadFiles(tab, $event)\"\n\n (fileSelect)=\"fileSelect.next($event)\"\n (fileDblClick)=\"fileDblClick.next($event)\"\n (folderSelect)=\"folderSelect.next($event)\"\n (folderDblClick)=\"folderDblClick.next($event)\"\n />\n </ng-template>\n </mat-tab>\n </mat-tab-group>\n </div>\n </as-split-area>\n </as-split>\n </mat-drawer-content>\n</mat-drawer-container>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}:host .content{display:flex;height:100%;overflow:hidden}:host ::ng-deep .as-split-gutter{background-color:var(--gutter-color, #121212)!important}:host ::ng-deep .mat-mdc-tab-header{height:var(--tab-height, 0);transition:height .25s ease}:host ::ng-deep .mat-mdc-tab-header .mdc-tab{height:var(--tab-height, 0);background-color:var(--filemanager-tab-background-color, #303030)}:host ::ng-deep .mat-mdc-tab .mdc-tab__content{position:static}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label{color:var(--text-subdued-color)}.sidebar{border-right:1px solid transparent;transition:background-color .2s cubic-bezier(0,0,.2,1),border-color .2s ease}.sidebar ul{list-style-type:none;text-align:left;margin:0;padding:0;display:flex;flex-direction:column}.sidebar ul li{display:flex;align-items:center;transition:all .2s ease;font-size:14px;padding:6px 6px 6px 24px}.sidebar ul li mat-icon{margin-right:8px}.sidebar ul li:hover{background-color:#343434}.sidebar ul .tooltip{background-color:#101010cc;border:1px solid #414141;opacity:0;pointer-events:none;transition:all .2s ease}.active .sidebar{background-color:#2c2c2c;border-right-color:#1c1c1c}.active .sidebar li:hover{background-color:#343434}.close{position:absolute;right:12px;color:#666;transition:color .25s ease}.close:hover{color:#ccc}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i3$2.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i3$2.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: FileGridComponent, selector: "app-file-grid", inputs: ["path", "config", "showHiddenFiles", "viewMode", "gridSize", "tab", "selection", "value", "sortOrder"], outputs: ["pathChange", "fileSelect", "fileDblClick", "folderSelect", "folderDblClick", "newTab", "loadFiles", "selectionChange", "valueChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4$2.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i4$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i6$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i6$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["config", "currentTab", "showHiddenFiles", "showSidebar", "drawerMode", "showBareMinimum"], outputs: ["onBreadcrumbClick", "showHiddenFilesChange", "showSidebarChange"] }, { kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }] }); }
|
|
10481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: FilemanagerComponent, isStandalone: true, selector: "app-filemanager", inputs: { config: "config", gridSize: "gridSize", mode: "mode", contextTags: "contextTags", value: "value" }, outputs: { valueChange: "valueChange", focusedFilesChange: "focusedFilesChange", fileUpload: "fileUpload", fileDownload: "fileDownload", fileRename: "fileRename", fileDelete: "fileDelete", fileCopy: "fileCopy", filePaste: "filePaste", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", filesSelect: "filesSelect" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }, { propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "toolbar", first: true, predicate: ToolbarComponent, descendants: true }, { propertyName: "drawer", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "fileGrids", predicate: FileGridComponent, descendants: true }], ngImport: i0, template: "<app-toolbar\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [showBareMinimum]=\"width < 500 && config.showBreadcrumb != false\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n/>\n\n<mat-drawer-container style=\"flex: 1\">\n <mat-drawer #drawer mode=\"over\">\n @if (width < 500 && config.showBreadcrumb != false) {\n <app-toolbar\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [drawerMode]=\"true\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n />\n }\n <app-tree-view\n [data]=\"currentTab.sidebarItems\"\n (loadChildren)=\"onTreeViewLoadChildren($event)\"\n (click)=\"onTreeViewSelect($event)\"\n />\n </mat-drawer>\n <mat-drawer-content>\n <as-split direction=\"horizontal\" [gutterSize]=\"sidebarOverlay ? 0 : 2\" [unit]=\"'pixel'\" (dragEnd)=\"onResizeEnd()\">\n <as-split-area\n style=\"background-color: var(--filemanager-sidebar-background-color, #2c2c2c)\"\n [size]=\"215\"\n [minSize]=\"215\"\n [maxSize]=\"width/4\"\n [visible]=\"!sidebarOverlay && config.showTreeview != false\"\n >\n @if (!sidebarOverlay && config.showTreeview != false) {\n <div class=\"sidebar\"\n (click)=\"currentTab.selection = []\"\n >\n <app-tree-view\n [data]=\"currentTab.sidebarItems\"\n (loadChildren)=\"onTreeViewLoadChildren($event)\"\n (click)=\"onTreeViewSelect($event)\"\n />\n </div>\n }\n </as-split-area>\n <as-split-area style=\"background-color: var(--filemanager-background-color, #272727);\">\n <div class=\"content\"\n [style.--tab-height]=\"tabs.length > 1 ? '36px' : '0'\"\n >\n <mat-tab-group #tabGroup (selectedTabChange)=\"currentTab = tabs[$event.index]\" [(selectedIndex)]=\"tabIndex\">\n @for (tab of tabs; track tab; let i = $index) {\n <mat-tab>\n <ng-template mat-tab-label>\n {{tab.label}}\n <mat-icon\n class=\"close\"\n (click)=\"closeTab(tab)\">\n close\n </mat-icon>\n </ng-template>\n\n <ng-template matTabContent>\n <app-file-grid\n [viewMode]=\"tab.viewMode\"\n [tab]=\"tab\"\n [config]=\"config\"\n [gridSize]=\"gridSize\"\n [sortOrder]=\"tab.sortOrder\"\n [(selection)]=\"tab.selection\"\n [(path)]=\"tab.path\"\n (pathChange)=\"onTabPathChange(tab)\"\n [(value)]=\"gridValues[i]\"\n (valueChange)=\"onGridValueChange()\"\n (loadFiles)=\"onTabLoadFiles(tab, $event)\"\n\n (fileSelect)=\"fileSelect.next($event)\"\n (fileDblClick)=\"fileDblClick.next($event)\"\n (folderSelect)=\"folderSelect.next($event)\"\n (folderDblClick)=\"folderDblClick.next($event)\"\n />\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n </div>\n </as-split-area>\n </as-split>\n </mat-drawer-content>\n</mat-drawer-container>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}:host .content{display:flex;height:100%;overflow:hidden}:host ::ng-deep .as-split-gutter{background-color:var(--gutter-color, #121212)!important}:host ::ng-deep .mat-mdc-tab-header{height:var(--tab-height, 0);transition:height .25s ease}:host ::ng-deep .mat-mdc-tab-header .mdc-tab{height:var(--tab-height, 0);background-color:var(--filemanager-tab-background-color, #303030)}:host ::ng-deep .mat-mdc-tab .mdc-tab__content{position:static}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label{color:var(--text-subdued-color)}.sidebar{border-right:1px solid transparent;transition:background-color .2s cubic-bezier(0,0,.2,1),border-color .2s ease}.sidebar ul{list-style-type:none;text-align:left;margin:0;padding:0;display:flex;flex-direction:column}.sidebar ul li{display:flex;align-items:center;transition:all .2s ease;font-size:14px;padding:6px 6px 6px 24px}.sidebar ul li mat-icon{margin-right:8px}.sidebar ul li:hover{background-color:#343434}.sidebar ul .tooltip{background-color:#101010cc;border:1px solid #414141;opacity:0;pointer-events:none;transition:all .2s ease}.active .sidebar{background-color:#2c2c2c;border-right-color:#1c1c1c}.active .sidebar li:hover{background-color:#343434}.close{position:absolute;right:12px;color:#666;transition:color .25s ease}.close:hover{color:#ccc}\n"], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i3$2.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i3$2.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: FileGridComponent, selector: "app-file-grid", inputs: ["path", "config", "showHiddenFiles", "viewMode", "gridSize", "tab", "selection", "value", "sortOrder"], outputs: ["pathChange", "fileSelect", "fileDblClick", "folderSelect", "folderDblClick", "newTab", "loadFiles", "selectionChange", "valueChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4$2.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i4$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i6$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i6$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["config", "currentTab", "showHiddenFiles", "showSidebar", "drawerMode", "showBareMinimum"], outputs: ["onBreadcrumbClick", "showHiddenFilesChange", "showSidebarChange"] }, { kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }] }); }
|
|
10483
10482
|
}
|
|
10484
10483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FilemanagerComponent, decorators: [{
|
|
10485
10484
|
type: Component,
|
|
10486
10485
|
args: [{ selector: 'app-filemanager', imports: [
|
|
10487
|
-
NgIf,
|
|
10488
|
-
NgForOf,
|
|
10489
10486
|
AngularSplitModule,
|
|
10490
10487
|
FileGridComponent,
|
|
10491
10488
|
MatTabsModule,
|
|
@@ -10493,7 +10490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
10493
10490
|
MatSidenavModule,
|
|
10494
10491
|
ToolbarComponent,
|
|
10495
10492
|
TreeViewComponent
|
|
10496
|
-
], standalone: true, template: "<app-toolbar\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [showBareMinimum]=\"width < 500 && config.showBreadcrumb != false\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n/>\n\n<mat-drawer-container>\n <mat-drawer #drawer mode=\"over\">\n
|
|
10493
|
+
], standalone: true, template: "<app-toolbar\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [showBareMinimum]=\"width < 500 && config.showBreadcrumb != false\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n/>\n\n<mat-drawer-container style=\"flex: 1\">\n <mat-drawer #drawer mode=\"over\">\n @if (width < 500 && config.showBreadcrumb != false) {\n <app-toolbar\n [currentTab]=\"currentTab\"\n [(showHiddenFiles)]=\"showHiddenFiles\"\n [(showSidebar)]=\"showSidebar\"\n [config]=\"config\"\n [drawerMode]=\"true\"\n (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n />\n }\n <app-tree-view\n [data]=\"currentTab.sidebarItems\"\n (loadChildren)=\"onTreeViewLoadChildren($event)\"\n (click)=\"onTreeViewSelect($event)\"\n />\n </mat-drawer>\n <mat-drawer-content>\n <as-split direction=\"horizontal\" [gutterSize]=\"sidebarOverlay ? 0 : 2\" [unit]=\"'pixel'\" (dragEnd)=\"onResizeEnd()\">\n <as-split-area\n style=\"background-color: var(--filemanager-sidebar-background-color, #2c2c2c)\"\n [size]=\"215\"\n [minSize]=\"215\"\n [maxSize]=\"width/4\"\n [visible]=\"!sidebarOverlay && config.showTreeview != false\"\n >\n @if (!sidebarOverlay && config.showTreeview != false) {\n <div class=\"sidebar\"\n (click)=\"currentTab.selection = []\"\n >\n <app-tree-view\n [data]=\"currentTab.sidebarItems\"\n (loadChildren)=\"onTreeViewLoadChildren($event)\"\n (click)=\"onTreeViewSelect($event)\"\n />\n </div>\n }\n </as-split-area>\n <as-split-area style=\"background-color: var(--filemanager-background-color, #272727);\">\n <div class=\"content\"\n [style.--tab-height]=\"tabs.length > 1 ? '36px' : '0'\"\n >\n <mat-tab-group #tabGroup (selectedTabChange)=\"currentTab = tabs[$event.index]\" [(selectedIndex)]=\"tabIndex\">\n @for (tab of tabs; track tab; let i = $index) {\n <mat-tab>\n <ng-template mat-tab-label>\n {{tab.label}}\n <mat-icon\n class=\"close\"\n (click)=\"closeTab(tab)\">\n close\n </mat-icon>\n </ng-template>\n\n <ng-template matTabContent>\n <app-file-grid\n [viewMode]=\"tab.viewMode\"\n [tab]=\"tab\"\n [config]=\"config\"\n [gridSize]=\"gridSize\"\n [sortOrder]=\"tab.sortOrder\"\n [(selection)]=\"tab.selection\"\n [(path)]=\"tab.path\"\n (pathChange)=\"onTabPathChange(tab)\"\n [(value)]=\"gridValues[i]\"\n (valueChange)=\"onGridValueChange()\"\n (loadFiles)=\"onTabLoadFiles(tab, $event)\"\n\n (fileSelect)=\"fileSelect.next($event)\"\n (fileDblClick)=\"fileDblClick.next($event)\"\n (folderSelect)=\"folderSelect.next($event)\"\n (folderDblClick)=\"folderDblClick.next($event)\"\n />\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n </div>\n </as-split-area>\n </as-split>\n </mat-drawer-content>\n</mat-drawer-container>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}:host .content{display:flex;height:100%;overflow:hidden}:host ::ng-deep .as-split-gutter{background-color:var(--gutter-color, #121212)!important}:host ::ng-deep .mat-mdc-tab-header{height:var(--tab-height, 0);transition:height .25s ease}:host ::ng-deep .mat-mdc-tab-header .mdc-tab{height:var(--tab-height, 0);background-color:var(--filemanager-tab-background-color, #303030)}:host ::ng-deep .mat-mdc-tab .mdc-tab__content{position:static}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label{color:var(--text-subdued-color)}.sidebar{border-right:1px solid transparent;transition:background-color .2s cubic-bezier(0,0,.2,1),border-color .2s ease}.sidebar ul{list-style-type:none;text-align:left;margin:0;padding:0;display:flex;flex-direction:column}.sidebar ul li{display:flex;align-items:center;transition:all .2s ease;font-size:14px;padding:6px 6px 6px 24px}.sidebar ul li mat-icon{margin-right:8px}.sidebar ul li:hover{background-color:#343434}.sidebar ul .tooltip{background-color:#101010cc;border:1px solid #414141;opacity:0;pointer-events:none;transition:all .2s ease}.active .sidebar{background-color:#2c2c2c;border-right-color:#1c1c1c}.active .sidebar li:hover{background-color:#343434}.close{position:absolute;right:12px;color:#666;transition:color .25s ease}.close:hover{color:#ccc}\n"] }]
|
|
10497
10494
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10498
10495
|
type: Optional
|
|
10499
10496
|
}, {
|