devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
622 lines (461 loc) • 24.9 kB
TypeScript
/*!
* devextreme-angular
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-angular
*/
import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core';
import FileSystemItem from 'devextreme/file_management/file_system_item';
import { dxFileManagerContextMenu, dxFileManagerDetailsColumn, FileManagerItemViewMode, ContentReadyEvent, ContextMenuItemClickEvent, ContextMenuShowingEvent, CurrentDirectoryChangedEvent, DirectoryCreatedEvent, DirectoryCreatingEvent, DisposingEvent, ErrorOccurredEvent, FileUploadedEvent, FileUploadingEvent, FocusedItemChangedEvent, InitializedEvent, ItemCopiedEvent, ItemCopyingEvent, ItemDeletedEvent, ItemDeletingEvent, ItemDownloadingEvent, ItemMovedEvent, ItemMovingEvent, ItemRenamedEvent, ItemRenamingEvent, OptionChangedEvent, SelectedFileOpenedEvent, SelectionChangedEvent, ToolbarItemClickEvent, dxFileManagerToolbar } from 'devextreme/ui/file_manager';
import { SingleOrMultiple } from 'devextreme/common';
import DxFileManager from 'devextreme/ui/file_manager';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import type * as DxFileManagerTypes from "devextreme/ui/file_manager_types";
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/ui/file-manager/nested";
import * as i3 from "devextreme-angular/core";
/**
* The FileManager is a UI component that allows users to upload, select, and manage files and directories in different file storages.
*/
export declare class DxFileManagerComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxFileManager;
/**
* Specifies the shortcut key that sets focus on the UI component.
*/
get accessKey(): string | undefined;
set accessKey(value: string | undefined);
/**
* Specifies whether the UI component changes its visual state as a result of user interaction.
*/
get activeStateEnabled(): boolean;
set activeStateEnabled(value: boolean);
/**
* Specifies the allowed upload file extensions.
*/
get allowedFileExtensions(): Array<string>;
set allowedFileExtensions(value: Array<string>);
/**
* Configures the context menu settings.
*/
get contextMenu(): dxFileManagerContextMenu;
set contextMenu(value: dxFileManagerContextMenu);
/**
* Specifies the path that is used when the FileManager is initialized.
*/
get currentPath(): string;
set currentPath(value: string);
/**
* Specifies an array of path keys to the current location.
*/
get currentPathKeys(): Array<string>;
set currentPathKeys(value: Array<string>);
/**
* Customizes columns in details view. Applies only if itemView.mode is 'details'.
*/
get customizeDetailColumns(): ((columns: Array<dxFileManagerDetailsColumn>) => Array<dxFileManagerDetailsColumn>);
set customizeDetailColumns(value: ((columns: Array<dxFileManagerDetailsColumn>) => Array<dxFileManagerDetailsColumn>));
/**
* Allows you to provide custom icons to be used as thumbnails.
*/
get customizeThumbnail(): ((fileSystemItem: FileSystemItem) => string);
set customizeThumbnail(value: ((fileSystemItem: FileSystemItem) => string));
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled(): boolean;
set disabled(value: boolean);
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr(): Record<string, any>;
set elementAttr(value: Record<string, any>);
/**
* Specifies the file system provider.
*/
get fileSystemProvider(): any;
set fileSystemProvider(value: any);
/**
* Specifies a key of the initially or currently focused item.
*/
get focusedItemKey(): string;
set focusedItemKey(value: string);
/**
* Specifies whether the UI component can be focused using keyboard navigation.
*/
get focusStateEnabled(): boolean;
set focusStateEnabled(value: boolean);
/**
* Specifies the UI component's height.
*/
get height(): (() => number | string) | number | string | undefined;
set height(value: (() => number | string) | number | string | undefined);
/**
* Specifies text for a hint that appears when a user pauses on the UI component.
*/
get hint(): string | undefined;
set hint(value: string | undefined);
/**
* Specifies whether the UI component changes its state when a user pauses on it.
*/
get hoverStateEnabled(): boolean;
set hoverStateEnabled(value: boolean);
/**
* Configures the file and directory view.
*/
get itemView(): {
details?: {
columns?: Array<dxFileManagerDetailsColumn | string>;
};
mode?: FileManagerItemViewMode;
showFolders?: boolean;
showParentFolder?: boolean;
};
set itemView(value: {
details?: {
columns?: Array<dxFileManagerDetailsColumn | string>;
};
mode?: FileManagerItemViewMode;
showFolders?: boolean;
showParentFolder?: boolean;
});
/**
* Configures notification settings.
*/
get notifications(): {
showPanel?: boolean;
showPopup?: boolean;
};
set notifications(value: {
showPanel?: boolean;
showPopup?: boolean;
});
/**
* Specifies actions that a user is allowed to perform on files and directories.
*/
get permissions(): {
copy?: boolean;
create?: boolean;
delete?: boolean;
download?: boolean;
move?: boolean;
rename?: boolean;
upload?: boolean;
};
set permissions(value: {
copy?: boolean;
create?: boolean;
delete?: boolean;
download?: boolean;
move?: boolean;
rename?: boolean;
upload?: boolean;
});
/**
* Specifies the root directory display name.
*/
get rootFolderName(): string;
set rootFolderName(value: string);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Contains an array of initially or currently selected files and directories' keys.
*/
get selectedItemKeys(): Array<string>;
set selectedItemKeys(value: Array<string>);
/**
* Specifies whether a user can select a single or multiple files and directories in the item view simultaneously.
*/
get selectionMode(): SingleOrMultiple;
set selectionMode(value: SingleOrMultiple);
/**
* Specifies the number of the element when the Tab key is used for navigating.
*/
get tabIndex(): number;
set tabIndex(value: number);
/**
* Configures toolbar settings.
*/
get toolbar(): dxFileManagerToolbar;
set toolbar(value: dxFileManagerToolbar);
/**
* Configures upload settings.
*/
get upload(): {
chunkSize?: number;
maxFileSize?: number;
};
set upload(value: {
chunkSize?: number;
maxFileSize?: number;
});
/**
* Specifies whether the UI component is visible.
*/
get visible(): boolean;
set visible(value: boolean);
/**
* Specifies the UI component's width.
*/
get width(): (() => number | string) | number | string | undefined;
set width(value: (() => number | string) | number | string | undefined);
/**
* A function that is executed when the UI component is rendered and each time the component is repainted.
*/
onContentReady: EventEmitter<ContentReadyEvent>;
/**
* A function that is executed when a context menu item is clicked.
*/
onContextMenuItemClick: EventEmitter<ContextMenuItemClickEvent>;
/**
* A function that is executed before a context menu is displayed.
*/
onContextMenuShowing: EventEmitter<ContextMenuShowingEvent>;
/**
* A function that is executed when the current directory is changed.
*/
onCurrentDirectoryChanged: EventEmitter<CurrentDirectoryChangedEvent>;
/**
* A function that is executed when a directory is created.
*/
onDirectoryCreated: EventEmitter<DirectoryCreatedEvent>;
/**
* A function that is executed before a directory is created.
*/
onDirectoryCreating: EventEmitter<DirectoryCreatingEvent>;
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<DisposingEvent>;
/**
* A function that is executed when an error occurs.
*/
onErrorOccurred: EventEmitter<ErrorOccurredEvent>;
/**
* A function that is executed when a file is successfully uploaded.
*/
onFileUploaded: EventEmitter<FileUploadedEvent>;
/**
* A function that is executed before the file is uploaded.
*/
onFileUploading: EventEmitter<FileUploadingEvent>;
/**
* A function that is executed when the focused item is changed.
*/
onFocusedItemChanged: EventEmitter<FocusedItemChangedEvent>;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized: EventEmitter<InitializedEvent>;
/**
* A function that is executed when a file or directory is copied.
*/
onItemCopied: EventEmitter<ItemCopiedEvent>;
/**
* A function that is executed before a file or directory is copied.
*/
onItemCopying: EventEmitter<ItemCopyingEvent>;
/**
* A function that is executed when a file or directory is deleted.
*/
onItemDeleted: EventEmitter<ItemDeletedEvent>;
/**
* A function that is executed before a file or directory is deleted.
*/
onItemDeleting: EventEmitter<ItemDeletingEvent>;
/**
* A function that is executed before a file is downloaded.
*/
onItemDownloading: EventEmitter<ItemDownloadingEvent>;
/**
* A function that is executed when a file or directory is moved.
*/
onItemMoved: EventEmitter<ItemMovedEvent>;
/**
* A function that is executed before a file or directory is moved.
*/
onItemMoving: EventEmitter<ItemMovingEvent>;
/**
* A function that is executed when a file or directory is renamed.
*/
onItemRenamed: EventEmitter<ItemRenamedEvent>;
/**
* A function that is executed before a file or directory is renamed.
*/
onItemRenaming: EventEmitter<ItemRenamingEvent>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<OptionChangedEvent>;
/**
* A function that is executed when the selected file is opened.
*/
onSelectedFileOpened: EventEmitter<SelectedFileOpenedEvent>;
/**
* A function that is executed when a file system item is selected or selection is canceled.
*/
onSelectionChanged: EventEmitter<SelectionChangedEvent>;
/**
* A function that is executed when a toolbar item is clicked.
*/
onToolbarItemClick: EventEmitter<ToolbarItemClickEvent>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
accessKeyChange: EventEmitter<string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
activeStateEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
allowedFileExtensionsChange: EventEmitter<Array<string>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
contextMenuChange: EventEmitter<dxFileManagerContextMenu>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
currentPathChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
currentPathKeysChange: EventEmitter<Array<string>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeDetailColumnsChange: EventEmitter<((columns: Array<dxFileManagerDetailsColumn>) => Array<dxFileManagerDetailsColumn>)>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeThumbnailChange: EventEmitter<((fileSystemItem: FileSystemItem) => string)>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
disabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
elementAttrChange: EventEmitter<Record<string, any>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
fileSystemProviderChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
focusedItemKeyChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
focusStateEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
heightChange: EventEmitter<(() => number | string) | number | string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
hintChange: EventEmitter<string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
hoverStateEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
itemViewChange: EventEmitter<{
details?: {
columns?: Array<dxFileManagerDetailsColumn | string>;
};
mode?: FileManagerItemViewMode;
showFolders?: boolean;
showParentFolder?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
notificationsChange: EventEmitter<{
showPanel?: boolean;
showPopup?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
permissionsChange: EventEmitter<{
copy?: boolean;
create?: boolean;
delete?: boolean;
download?: boolean;
move?: boolean;
rename?: boolean;
upload?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rootFolderNameChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rtlEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
selectedItemKeysChange: EventEmitter<Array<string>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
selectionModeChange: EventEmitter<SingleOrMultiple>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
tabIndexChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
toolbarChange: EventEmitter<dxFileManagerToolbar>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
uploadChange: EventEmitter<{
chunkSize?: number;
maxFileSize?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
visibleChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
widthChange: EventEmitter<(() => number | string) | number | string | undefined>;
constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any);
protected _createInstance(element: any, options: any): DxFileManager;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
setupChanges(prop: string, changes: SimpleChanges): void;
ngDoCheck(): void;
_setOption(name: string, value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DxFileManagerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DxFileManagerComponent, "dx-file-manager", never, { "accessKey": { "alias": "accessKey"; "required": false; }; "activeStateEnabled": { "alias": "activeStateEnabled"; "required": false; }; "allowedFileExtensions": { "alias": "allowedFileExtensions"; "required": false; }; "contextMenu": { "alias": "contextMenu"; "required": false; }; "currentPath": { "alias": "currentPath"; "required": false; }; "currentPathKeys": { "alias": "currentPathKeys"; "required": false; }; "customizeDetailColumns": { "alias": "customizeDetailColumns"; "required": false; }; "customizeThumbnail": { "alias": "customizeThumbnail"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "elementAttr": { "alias": "elementAttr"; "required": false; }; "fileSystemProvider": { "alias": "fileSystemProvider"; "required": false; }; "focusedItemKey": { "alias": "focusedItemKey"; "required": false; }; "focusStateEnabled": { "alias": "focusStateEnabled"; "required": false; }; "height": { "alias": "height"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hoverStateEnabled": { "alias": "hoverStateEnabled"; "required": false; }; "itemView": { "alias": "itemView"; "required": false; }; "notifications": { "alias": "notifications"; "required": false; }; "permissions": { "alias": "permissions"; "required": false; }; "rootFolderName": { "alias": "rootFolderName"; "required": false; }; "rtlEnabled": { "alias": "rtlEnabled"; "required": false; }; "selectedItemKeys": { "alias": "selectedItemKeys"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "upload": { "alias": "upload"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "onContentReady": "onContentReady"; "onContextMenuItemClick": "onContextMenuItemClick"; "onContextMenuShowing": "onContextMenuShowing"; "onCurrentDirectoryChanged": "onCurrentDirectoryChanged"; "onDirectoryCreated": "onDirectoryCreated"; "onDirectoryCreating": "onDirectoryCreating"; "onDisposing": "onDisposing"; "onErrorOccurred": "onErrorOccurred"; "onFileUploaded": "onFileUploaded"; "onFileUploading": "onFileUploading"; "onFocusedItemChanged": "onFocusedItemChanged"; "onInitialized": "onInitialized"; "onItemCopied": "onItemCopied"; "onItemCopying": "onItemCopying"; "onItemDeleted": "onItemDeleted"; "onItemDeleting": "onItemDeleting"; "onItemDownloading": "onItemDownloading"; "onItemMoved": "onItemMoved"; "onItemMoving": "onItemMoving"; "onItemRenamed": "onItemRenamed"; "onItemRenaming": "onItemRenaming"; "onOptionChanged": "onOptionChanged"; "onSelectedFileOpened": "onSelectedFileOpened"; "onSelectionChanged": "onSelectionChanged"; "onToolbarItemClick": "onToolbarItemClick"; "accessKeyChange": "accessKeyChange"; "activeStateEnabledChange": "activeStateEnabledChange"; "allowedFileExtensionsChange": "allowedFileExtensionsChange"; "contextMenuChange": "contextMenuChange"; "currentPathChange": "currentPathChange"; "currentPathKeysChange": "currentPathKeysChange"; "customizeDetailColumnsChange": "customizeDetailColumnsChange"; "customizeThumbnailChange": "customizeThumbnailChange"; "disabledChange": "disabledChange"; "elementAttrChange": "elementAttrChange"; "fileSystemProviderChange": "fileSystemProviderChange"; "focusedItemKeyChange": "focusedItemKeyChange"; "focusStateEnabledChange": "focusStateEnabledChange"; "heightChange": "heightChange"; "hintChange": "hintChange"; "hoverStateEnabledChange": "hoverStateEnabledChange"; "itemViewChange": "itemViewChange"; "notificationsChange": "notificationsChange"; "permissionsChange": "permissionsChange"; "rootFolderNameChange": "rootFolderNameChange"; "rtlEnabledChange": "rtlEnabledChange"; "selectedItemKeysChange": "selectedItemKeysChange"; "selectionModeChange": "selectionModeChange"; "tabIndexChange": "tabIndexChange"; "toolbarChange": "toolbarChange"; "uploadChange": "uploadChange"; "visibleChange": "visibleChange"; "widthChange": "widthChange"; }, never, never, false, never>;
}
export declare class DxFileManagerModule {
static ɵfac: i0.ɵɵFactoryDeclaration<DxFileManagerModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<DxFileManagerModule, [typeof DxFileManagerComponent], [typeof i1.DxoContextMenuModule, typeof i1.DxiItemModule, typeof i1.DxoItemViewModule, typeof i1.DxoDetailsModule, typeof i1.DxiColumnModule, typeof i1.DxoNotificationsModule, typeof i1.DxoPermissionsModule, typeof i1.DxoToolbarModule, typeof i1.DxiFileSelectionItemModule, typeof i1.DxoUploadModule, typeof i2.DxiFileManagerColumnModule, typeof i2.DxoFileManagerContextMenuModule, typeof i2.DxiFileManagerContextMenuItemModule, typeof i2.DxoFileManagerDetailsModule, typeof i2.DxiFileManagerFileSelectionItemModule, typeof i2.DxiFileManagerItemModule, typeof i2.DxoFileManagerItemViewModule, typeof i2.DxoFileManagerNotificationsModule, typeof i2.DxoFileManagerPermissionsModule, typeof i2.DxoFileManagerToolbarModule, typeof i2.DxiFileManagerToolbarItemModule, typeof i2.DxoFileManagerUploadModule, typeof i3.DxIntegrationModule, typeof i3.DxTemplateModule], [typeof DxFileManagerComponent, typeof i1.DxoContextMenuModule, typeof i1.DxiItemModule, typeof i1.DxoItemViewModule, typeof i1.DxoDetailsModule, typeof i1.DxiColumnModule, typeof i1.DxoNotificationsModule, typeof i1.DxoPermissionsModule, typeof i1.DxoToolbarModule, typeof i1.DxiFileSelectionItemModule, typeof i1.DxoUploadModule, typeof i2.DxiFileManagerColumnModule, typeof i2.DxoFileManagerContextMenuModule, typeof i2.DxiFileManagerContextMenuItemModule, typeof i2.DxoFileManagerDetailsModule, typeof i2.DxiFileManagerFileSelectionItemModule, typeof i2.DxiFileManagerItemModule, typeof i2.DxoFileManagerItemViewModule, typeof i2.DxoFileManagerNotificationsModule, typeof i2.DxoFileManagerPermissionsModule, typeof i2.DxoFileManagerToolbarModule, typeof i2.DxiFileManagerToolbarItemModule, typeof i2.DxoFileManagerUploadModule, typeof i3.DxTemplateModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<DxFileManagerModule>;
}
export { DxFileManagerTypes };