@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
71 lines (70 loc) • 2.95 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { IFileDropzoneFeedback } from '../types';
/**
* File dropzone component that allows users to drag and drop files for upload.
*
* The component supports a `<slot>` called 'dropzone' for adding custom content such as progress indicators or additional instructions within the dropzone area.
*/
export declare class ModusWcFileDropzone {
private inheritedAttributes;
/** Reference to the host element */
el: HTMLElement;
/** Tracks if files are being dragged over the dropzone */
private isDraggingOver;
/** Tracks if file has any validation error and the type of error */
private invalidFile;
/** Stores the error message when validation fails */
private errorMessage;
/** Tracks if files were successfully uploaded */
private uploadSuccess;
/** Accepted file types (e.g. '.jpg,.png' or 'image/*') */
acceptFileTypes?: string;
/** Custom CSS class to apply to the file dropzone element */
customClass?: string;
/** Disable the file input */
disabled?: boolean;
/** External feedback to display info, success, or error state with optional custom icon and message */
feedback?: IFileDropzoneFeedback;
/** Custom instructions shown when files are dragged over the dropzone */
fileDraggedOverInstructions?: string;
/** Include state icon for default, validation, upload, and feedback states */
includeStateIcon?: boolean;
/** Custom instructions shown as the default dropzone message */
instructions?: string;
/** Custom error message displayed when an invalid file type is selected */
invalidFileTypeMessage?: string;
/** Maximum allowed length of filename, will show error if exceeded */
maxFileNameLength?: number;
/** Maximum number of files allowed, will show error if exceeded */
maxFileCount?: number;
/** Maximum total file size in bytes allowed, will show error if exceeded */
maxTotalFileSizeBytes?: number;
/** Allow multiple file selection */
multiple?: boolean;
/** Success message displayed when files are uploaded successfully */
successMessage?: string;
/** Event emitted when files are selected */
fileSelect: EventEmitter<FileList>;
componentWillLoad(): void;
/**
* Reset the dropzone to its initial state, clearing all error and success states
*/
reset(): Promise<void>;
private getErrorMessage;
private isValidFileType;
private isValidFileName;
private isValidFileCount;
private isValidFileSize;
private setInputValue;
handleFileChange(event: Event): void;
private getClasses;
private inputRef?;
private handleDropzoneDrop;
private handleDropzoneDragOver;
private handleDropzoneDragLeave;
private handleDropzoneClick;
private handleDropzoneKeyDown;
private formatFileSize;
private getDisplayState;
render(): any;
}