@dotglitch/ngx-common
Version:
Angular components and utilities that are commonly used.
207 lines (206 loc) • 7.36 kB
TypeScript
import { EventEmitter, OnInit, QueryList, ViewContainerRef } from '@angular/core';
import { MatDrawerContainer } from '@angular/material/sidenav';
import { MatTabGroup } from '@angular/material/tabs';
import { Fetch, LazyLoaderService, NgxWebComponentsConfig } from '@dotglitch/ngx-common/core';
import { FileGridComponent } from './file-grid/file-grid.component';
import { IconResolver } from './icon-resolver';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { TreeViewComponent } from './tree-view/tree-view.component';
import { FileSorting } from './types';
import * as i0 from "@angular/core";
/**
* Multiple music / video / image files selected turns into a playlist
* Dragging music / video / image queues the file(s)
* Can save and edit a list of files as playlist
* Can "loop" "randomize"
*/
export type DirectoryDescriptor = {
kind: "directory";
path: string;
name: string;
contents: {
dirs: DirectoryDescriptor[];
files: FileDescriptor[];
};
};
export type FileDescriptor = {
kind: "file";
stats: {
size: number;
compressedSize?: number;
atimeMs: number;
mtimeMs: number;
ctimeMs: number;
birthtimeMs: number;
};
path: string;
name: string;
ext: string;
comment?: string;
};
export type FSDescriptor = DirectoryDescriptor | FileDescriptor;
export type FileViewTab = {
id: string;
label: string;
breadcrumb: {
id: string;
label: string;
}[];
path: string;
selection: FSDescriptor[];
viewMode: "grid" | "list";
historyIndex: number;
history: string[];
sidebarItems: FSDescriptor[];
sortOrder: FileSorting;
};
export type NgxFileManagerConfiguration = Partial<{
/**
* Initial path
*/
path: string;
/**
* Custom root path (will appear as '/').
* Defaults to '/'.
*
* User cannot view outside of this path.
* (Not to be used as a security measure!)
*/
chrootPath: string;
/**
* Restrict users to only navigate around to subpaths of the specified `path`
*/
navigateOnlyToDescendants: boolean;
showBreadcrumb: boolean;
showTreeview: boolean;
/**
* Name of the "root" path `/`
* Defaults to "Storage"
*/
rootName: string;
/**
* Maximum number of items to be stored in history.
*/
maxHistoryLength: number;
apiSettings: {
listEntriesUrl?: string;
listEntriesUrlTemplate?: (path: string) => string;
downloadEntryUrl?: string;
downloadEntryUrlTemplate?: (path: string) => string;
uploadEntryUrl?: string;
uploadEntryUrlTemplate?: (path: string) => string;
deleteEntryUrl?: string;
deleteEntryUrlTemplate?: (path: string) => string;
renameEntryUrl?: string;
renameEntryUrlTemplate?: (path: string) => string;
createDirectoryUrl?: string;
createDirectoryUrlTemplate?: (path: string) => string;
};
/**
* The path that images are loaded from.
* Default value `/assets/dotglitch/webcomponents/`
*/
assetPath: string;
sidebarLocationStrategy: "known" | "currentDirectory";
iconResolver: (file: FSDescriptor) => string;
imageSize: "normal" | "small" | "huge";
/**
*
*/
selectionMode: "single" | "multiple";
/**
* This determines if the filemanager shows selected entries
*
* If set to `focusFiles`, file paths that match from the provided `focusedFiles`
* will be highlighted, and can be selected / deselected.
*/
mode: "focusFiles" | "normal";
focusedFiles: string[];
}>;
export declare class FilemanagerComponent implements OnInit {
readonly libConfig: NgxWebComponentsConfig;
private readonly lazyLoader;
private viewContainer;
private fetch;
tabGroup: MatTabGroup;
fileGrids: QueryList<FileGridComponent>;
treeView: TreeViewComponent;
toolbar: ToolbarComponent;
drawer: MatDrawerContainer;
config: NgxFileManagerConfiguration;
gridSize: "small" | "normal" | "large";
mode: "grid" | "list";
contextTags: {
[key: string]: string;
};
value: FSDescriptor[];
valueChange: EventEmitter<FSDescriptor[]>;
gridValues: FSDescriptor[][];
/**
* Emits when focused files change.
* Only available in `focusFiles` mode.
*/
focusedFilesChange: EventEmitter<any>;
/**
* Emits when a file is uploaded.
*/
fileUpload: EventEmitter<any>;
/**
* Emits when a file is downloaded.
*/
fileDownload: EventEmitter<any>;
fileRename: EventEmitter<any>;
fileDelete: EventEmitter<any>;
fileCopy: EventEmitter<any>;
filePaste: EventEmitter<any>;
fileSelect: EventEmitter<FileDescriptor>;
fileDblClick: EventEmitter<FileDescriptor>;
folderSelect: EventEmitter<DirectoryDescriptor>;
folderDblClick: EventEmitter<DirectoryDescriptor>;
/**
* Emits when multiple file selections change.
*/
filesSelect: EventEmitter<FSDescriptor[]>;
/**
* Emits when any selection changes, single or multiple files.
*/
showHiddenFiles: boolean;
showSidebar: boolean;
sidebarOverlay: boolean;
width: number;
isHomeAncestor: boolean;
currentTab: FileViewTab;
get currentFileGrid(): FileGridComponent;
tabIndex: number;
tabs: FileViewTab[];
iconResolver: IconResolver;
constructor(libConfig: NgxWebComponentsConfig, lazyLoader: LazyLoaderService, viewContainer: ViewContainerRef, fetch: Fetch);
ngOnInit(): void;
ngAfterViewInit(): void;
onTreeViewLoadChildren({ item, cb }: {
item: any;
cb: any;
}): void;
initTab(path: string): void;
closeTab(tab: FileViewTab): void;
calcBreadcrumb(path: string): {
id: string;
label: string;
}[];
onBreadcrumbClick(crumb: any): void;
onTabPathChange(tab: FileViewTab): void;
onTreeViewSelect(item: FSDescriptor): void;
onTabLoadFiles(tab: FileViewTab, files: FSDescriptor[]): void;
onGridValueChange(): void;
getTabLabel(path: string): string;
onResize(): Promise<void>;
onResizeEnd(): Promise<void>;
getSelection(): FSDescriptor[];
clearSelection(): void;
refreshSorting(): void;
refreshData(): void;
getFileData(file: FileDescriptor): string;
downloadFile(file: FSDescriptor): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FilemanagerComponent, [{ optional: true; }, null, null, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<FilemanagerComponent, "app-filemanager", never, { "config": { "alias": "config"; "required": false; }; "gridSize": { "alias": "gridSize"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "contextTags": { "alias": "contextTags"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "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"; }, never, never, true, never>;
}