@dotglitch/ngx-common 1.1.31 → 1.1.32

package/fesm2022/dotglitch-ngx-common.mjs

@@ -9947,7 +9947,7 @@ class FileGridComponent {
         }).then(r => this.loadFolder());
     }
     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 }); }
-    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=\"150\"\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"] }] }); }
+    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-content: center; height: 100%\">\n            <div style=\"max-width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\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                    <br/>\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=\"150\"\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileGridComponent, decorators: [{
             type: Component,
@@ -9965,7 +9965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         TabulatorComponent,
                         MenuDirective,
                         ScrollingModule
-                    ], 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=\"150\"\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"] }]
+                    ], 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-content: center; height: 100%\">\n            <div style=\"max-width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\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                    <br/>\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=\"150\"\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"] }]
         }], ctorParameters: () => [{ type: Fetch }, { type: KeyboardService }, { type: DialogService }, { type: i1.MatDialog }, { type: FilemanagerComponent }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { filesRef: [{
                 type: ViewChild,
                 args: ["fileViewport"]