/** * Represents a value that may be of type T, or null. */ export type Nullable = T | null; /** * Stable identifier for error codes used in the `files-dropzone-error` event. */ export type FilesDropzoneErrorCode = (typeof FilesDropzone.ERROR_CODES)[keyof typeof FilesDropzone.ERROR_CODES]; /** * The detail payload for the `files-dropzone-error` event. */ export type FilesDropzoneErrorDetail = { /** * - Stable identifier for the type of error that occurred. */ code: FilesDropzoneErrorCode; /** * - The underlying error object or value that triggered the event. */ error: unknown; }; /** * Stable identifier for rejection codes used in the various drop-related events. */ export type FilesDropzoneRejectionCode = (typeof FilesDropzone.REJECTION_CODES)[keyof typeof FilesDropzone.REJECTION_CODES]; /** * @summary A custom element that allows users to drag and drop files into it. * @documentation https://github.com/georapbox/files-dropzone-element * * @tagname files-dropzone - This is the default tag name, unless overridden by the `defineCustomElement` method. * * @property {string} accept - A comma-separated list of unique file type specifiers describing file types to allow. * @property {boolean} disabled - Determines whether the dropzone is disabled. * @property {number} maxFiles - The maximum number of files allowed to be dropped. * @property {number} maxSize - The maximum file size allowed in bytes. * @property {number} minSize - The minimum file size allowed in bytes. * @property {boolean} multiple - Allows multiple files to be dropped. * @property {boolean} autoFocus - Automatically focuses the dropzone when it's connected to the DOM. * @property {boolean} noStyle - Prevents the dropzone from applying any styling. * * @attribute {string} accept - A comma-separated list of unique file type specifiers describing file types to allow. * @attribute {boolean} disabled - Determines whether the dropzone is disabled. * @attribute {number} max-files - The maximum number of files allowed to be dropped. * @attribute {number} max-size - The maximum file size allowed in bytes. * @attribute {number} min-size - The minimum file size allowed in bytes. * @attribute {boolean} multiple - Allows multiple files to be dropped. * @attribute {boolean} auto-focus - Automatically focuses the dropzone when it's connected to the DOM. * @attribute {boolean} no-style - Prevents the dropzone from applying any styling. * * @slot - The default slot content of the dropzone. * * @csspart dropzone - The dropzone element. * @csspart dropzone--dragover - The state of the dropzone when dragging over it. * * @cssproperty --dropzone-border-width - The border width of the dropzone. * @cssproperty --dropzone-border-style - The border style of the dropzone. * @cssproperty --dropzone-border-radius - The border radius of the dropzone. * @cssproperty --dropzone-border-color - The border color of the dropzone. * @cssproperty --dropzone-border-color-dragover - The border color of the dropzone when dragging over it. * @cssproperty --dropzone-border-color-hover - The border color of the dropzone when hovering over it. * @cssproperty --dropzone-background-color - The background color of the dropzone. * @cssproperty --dropzone-background-color-dragover - The background color of the dropzone when dragging over it. * @cssproperty --dropzone-background-color-hover - The background color of the dropzone when hovering over it. * @cssproperty --dropzone-body-color - The text color of the dropzone. * @cssproperty --dropzone-body-color-dragover - The text color of the dropzone when dragging over it. * @cssproperty --dropzone-body-color-hover - The text color of the dropzone when hovering over it. * @cssproperty --dropzone-focus-shadow-rgb - The RGB value of the dropzone's focus shadow. * @cssproperty --dropzone-focus-box-shadow - The box shadow of the dropzone when focused. * @cssproperty --dropzone-transition-duration - The transition's duration for the dropzone area. * * @event files-dropzone-drop - Fired when files are dropped. * @event files-dropzone-drop-accepted - Fired when files dropped files are accepted. * @event files-dropzone-drop-rejected - Fired when files dropped files are rejected. * @event files-dropzone-dragenter - Fired when files are dragged into the dropzone. * @event files-dropzone-dragover - Fired when files are dragged over the dropzone. * @event files-dropzone-dragleave - Fired when files are dragged out of the dropzone. * @event files-dropzone-error - Fired when there is any error in the process of reading dropped files or directories. * * @method defineCustomElement - Static method. Defines a custom element with the given name. * @method openFileDialog - Instance method. Opens the file dialog programmatically. */ export class FilesDropzone extends HTMLElement { /** * Central list of error codes used in drop error event. * @readonly */ static readonly ERROR_CODES: { readonly FILE_DIALOG_OPEN_FAILED: "FILE_DIALOG_OPEN_FAILED"; readonly FILE_INPUT_CHANGE_FAILED: "FILE_INPUT_CHANGE_FAILED"; readonly DROP_EVENT_PROCESSING_FAILED: "DROP_EVENT_PROCESSING_FAILED"; readonly UNKNOWN_ERROR: "UNKNOWN_ERROR"; }; /** * Central list of rejection codes for files that are rejected during the drop process. * @readonly */ static readonly REJECTION_CODES: { readonly TOO_MANY_FILES: "TOO_MANY_FILES"; readonly FILE_TOO_LARGE: "FILE_TOO_LARGE"; readonly FILE_TOO_SMALL: "FILE_TOO_SMALL"; readonly INVALID_MIME_TYPE: "INVALID_MIME_TYPE"; }; static get observedAttributes(): string[]; /** * Defines a custom element with the given name. * The name must contain a dash (-). * * @param {string} [elementName='files-dropzone'] - The name of the custom element. * @example * * FilesDropzone.defineCustomElement('my-dropzone'); */ static defineCustomElement(elementName?: string): void; /** * Lifecycle method that is called when attributes are changed, added, removed, or replaced. * * @param {string} name - The name of the attribute. * @param {string} oldValue - The old value of the attribute. * @param {string} newValue - The new value of the attribute. */ attributeChangedCallback(name: string, oldValue: string, newValue: string): void; /** * Lifecycle method that is called when the element is added to the DOM. */ connectedCallback(): void; /** * Lifecycle method that is called when the element is removed from the DOM. */ disconnectedCallback(): void; set accept(value: string); /** * @type {string} - A comma-separated list of unique file type specifiers describing file types to allow. * @attribute accept * @default '' */ get accept(): string; set disabled(value: boolean); /** * @type {boolean} - Determines whether the dropzone is disabled. * @attribute disabled * @default false */ get disabled(): boolean; set maxFiles(value: number); /** * @type {number} - The maximum number of files allowed to be dropped. * @attribute max-files * @default Infinity */ get maxFiles(): number; set maxSize(value: number); /** * @type {number} - The maximum file size allowed in bytes. * @attribute max-size * @default Infinity */ get maxSize(): number; set minSize(value: number); /** * @type {number} - The minimum file size allowed in bytes. * @attribute min-size * @default 0 */ get minSize(): number; set multiple(value: boolean); /** * @type {boolean} - Allows multiple files to be dropped. * @attribute multiple * @default false */ get multiple(): boolean; set autoFocus(value: boolean); /** * @type {boolean} - Automatically focuses the dropzone when it's connected to the DOM. * @attribute auto-focus * @default false */ get autoFocus(): boolean; set noStyle(value: boolean); /** * @type {boolean} - Prevents the dropzone from applying any styling. * @attribute no-style * @default false */ get noStyle(): boolean; /** * Opens the file dialog programmatically. */ openFileDialog(): void; #private; } //# sourceMappingURL=files-dropzone.d.ts.map