import { IEventEmitter } from '@breadstone/mosaik-elements'; import { type IInvalidable } from '../../../Behaviors/Invalidable'; import type { DropZoneDataEvent, IFileAddEventDetail, IFileErrorEventDetail, IFileRemoveEventDetail, IFilesChangedEventDetail } from '../../../events'; import { FileUploadView } from '../../../Types/FileUploadView'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IFileUploadElementProps } from './IFileUploadElementProps'; import { FileUploadElementIntl } from './Intl/FileUploadElementIntl'; import { IFileInfo } from './Models/Interfaces/IFileInfo'; import type { IUploadStrategy } from './Strategies/Interfaces/IUploadStrategy'; declare const FileUploadElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * File Upload - A comprehensive file upload control with drag-and-drop support and multiple view modes. * * @description * The File Upload component provides a complete file upload workflow with drag-and-drop functionality, * multiple view modes (list, table, card), upload progress tracking, and extensive customization options. * It supports single and multiple file selection, file type restrictions, size validation, custom upload * strategies, and comprehensive file management features. The component handles file selection via dialog * or drag-and-drop, displays upload progress, provides error handling and retry mechanisms, and offers * different visual representations for uploaded files. Features include file preview capabilities, * batch operations, upload resumption, and integration with various backend services. Perfect for * document management systems, media upload interfaces, form attachments, and any application requiring * robust file handling capabilities. * * @name File Upload * @element mosaik-file-upload * @category Inputs * * @slot actions - The actions slot. * * @csspart actions - The actions part. * @csspart dropZone - The drag-and-drop zone container. * @csspart extension - The extension part. * @csspart name - The name part. * @csspart size - The size part. * * @cssprop {Color} --file-upload-background-color - The background color. * @cssprop {Color} --file-upload-border-color - The border color. * @cssprop {String} --file-upload-border-radius - The border radius. * @cssprop {String} --file-upload-border-style - The border style. * @cssprop {String} --file-upload-border-width - The border width. * @cssprop {String} --file-upload-font-family - The upload font family CSS custom property. * @cssprop {String} --file-upload-font-letter-spacing - The upload font letter spacing CSS custom property. * @cssprop {String} --file-upload-font-line-height - The upload font line height CSS custom property. * @cssprop {String} --file-upload-font-size - The upload font size CSS custom property. * @cssprop {String} --file-upload-font-text-decoration - The upload font text decoration CSS custom property. * @cssprop {String} --file-upload-font-text-transform - The upload font text transform CSS custom property. * @cssprop {String} --file-upload-font-weight - The upload font weight CSS custom property. * @cssprop {Color} --file-upload-foreground-color - The foreground color. * @cssprop {String} --file-upload-gap - The upload gap CSS custom property. * @cssprop {String} --file-upload-padding-bottom - The upload padding bottom CSS custom property. * @cssprop {String} --file-upload-padding-left - The upload padding left CSS custom property. * @cssprop {String} --file-upload-padding-right - The upload padding right CSS custom property. * @cssprop {String} --file-upload-padding-top - The upload padding top CSS custom property. * @cssprop {String} --file-upload-shadow - The shadow. * @cssprop {String} --file-upload-shadow-blur - The upload shadow blur CSS custom property. * @cssprop {String} --file-upload-shadow-color - The upload shadow color CSS custom property. * @cssprop {String} --file-upload-shadow-offset-x - The upload shadow offset x CSS custom property. * @cssprop {String} --file-upload-shadow-offset-y - The upload shadow offset y CSS custom property. * @cssprop {String} --file-upload-shadow-spread - The upload shadow spread CSS custom property. * @cssprop {String} --file-upload-transition-duration - The upload transition duration CSS custom property. * @cssprop {String} --file-upload-transition-mode - The upload transition mode CSS custom property. * @cssprop {String} --file-upload-transition-property - The upload transition property CSS custom property. * @cssprop {String} --file-upload-translate - The upload translate CSS custom property. * * @fires fileAdded {FileAddEvent} - Fired when a file is added to the upload list. * @fires fileRemoved {FileRemoveEvent} - Fired when a file is removed from the upload list. * @fires fileFailed {FileErrorEvent} - Fired when a file upload fails. * @fires filesChanged {FilesChangedEvent} - Fired when the set of files has changed. * * @dependency mosaik-button - Used for upload buttons. * @dependency mosaik-card - Used for card view mode. * @dependency mosaik-card-content - The Card Content element. * @dependency mosaik-card-header - The Card Header element. * @dependency mosaik-chip - Used for file tags. * @dependency mosaik-drop-zone - Used for drag-and-drop functionality. * @dependency mosaik-file-picker - Used for file selection dialog. * @dependency mosaik-list - Used for list view mode. * @dependency mosaik-list-item - The List Item element. * @dependency mosaik-progress-ring - The Progress Ring element. * @dependency mosaik-stack - The Stack element. * @dependency mosaik-table - Used for table view mode. * @dependency mosaik-table-body - The Table Body element. * @dependency mosaik-table-cell - The Table Cell element. * @dependency mosaik-table-header - The Table Header element. * @dependency mosaik-table-row - The Table Row element. * @dependency mosaik-text - The Text element. * * @example * ```html * * ``` * * @example * Table view with 10 MB size limit (`max-size` is in bytes): * ```html * * ``` * * @public */ export declare class FileUploadElement extends FileUploadElement_base implements IFileUploadElementProps, IInvalidable { private readonly _fileAdded; private readonly _fileRemoved; private readonly _fileFailed; private readonly _filesChanged; private readonly _intl; private _inputElement; private _autoUpload; private _view; private _multiple; private _directory; private _accept; private _strategy; private _value; private _placeholder; private _maxSize; private _isDragging; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `autoUpload` property. * * @public * @attr */ get autoUpload(): boolean; set autoUpload(value: boolean); /** * Gets or sets the `view` property. * * @public * @attr */ get view(): FileUploadView; set view(value: FileUploadView); /** * Gets or sets the `multiple` property. * * @public * @attr */ get multiple(): boolean; set multiple(value: boolean); /** * Gets or sets the `directory` property. * * @public * @attr */ get directory(): boolean; set directory(value: boolean); /** * Gets or sets the `accept` property. * * @public */ get accept(): Array; set accept(value: Array); /** * Gets or sets the `strategy` property. * * @public */ get strategy(): IUploadStrategy | null; set strategy(value: IUploadStrategy | null); /** * Gets or sets the `value` property. * * @public * @override */ get value(): Array; set value(value: Array); /** * Gets or sets the `placeholder` property. * * @public */ get placeholder(): string; set placeholder(value: string); /** * Gets or sets the `maxSize` property. * * @public * @attr */ get maxSize(): number; set maxSize(value: number); get isDragging(): boolean; private set isDragging(value); get intl(): FileUploadElementIntl; /** * Called when a file is added. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get fileAdded(): IEventEmitter; /** * Called when a file is deleted. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get fileRemoved(): IEventEmitter; /** * Called when a file upload fails. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get fileFailed(): IEventEmitter; /** * Called when the files are changed. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get filesChanged(): IEventEmitter; /** * @public */ add(value?: File | Array | FileList): void; /** * @public */ delete(fileInfo: IFileInfo): void; /** * @public */ save(fileInfo: IFileInfo): Promise; /** * Resets the value, all kinds of validation and errors. * * @public */ reset(): void; /** * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. * * @public * @override */ checkValidity(): boolean; /** * @protected * @template */ onDataTransferred(event: DropZoneDataEvent): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @hidden */ protected onPaste(event: ClipboardEvent): void; /** * @private */ private upload; /** * @private */ private download; /** * Emits the `fileAdded` event. * * @protected */ protected onFileAdded(args: IFileAddEventDetail): void; /** * Emits the `fileRemoved` event. * * @protected */ protected onFileRemoved(args: IFileRemoveEventDetail): void; /** * Emits the `fileFailed` event. * * @protected */ protected onFileFailed(args: IFileErrorEventDetail): void; /** * Emits the `filesChanged` event. * * @protected */ protected onFilesChanged(args: IFilesChangedEventDetail): void; } /** * @public */ export declare namespace FileUploadElement { type Props = IFileUploadElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-file-upload': FileUploadElement; } } export {}; //# sourceMappingURL=FileUploadElement.d.ts.map