import { EventName } from '@lit/react'; import { default as Component } from '../../components/file-input/file-input.component.js'; import { DdsUploadStartEvent, DdsUploadProgressEvent, DdsUploadCompleteEvent, DdsUploadErrorEvent, DdsAllUploadsCompleteEvent, DdsFileRemovedEvent, DdsFileDeleteErrorEvent, DdsFileChangeEvent, DdsFilesAcceptedEvent } from '../../events/events'; export type { DdsUploadStartEvent } from '../../events/events'; export type { DdsUploadProgressEvent } from '../../events/events'; export type { DdsUploadCompleteEvent } from '../../events/events'; export type { DdsUploadErrorEvent } from '../../events/events'; export type { DdsAllUploadsCompleteEvent } from '../../events/events'; export type { DdsFileRemovedEvent } from '../../events/events'; export type { DdsFileDeleteErrorEvent } from '../../events/events'; export type { DdsFileChangeEvent } from '../../events/events'; export type { DdsFilesAcceptedEvent } from '../../events/events'; /** * `dap-ds-file-input` * @summary A file input is a control that allows users to select files to upload. * @element dap-ds-file-input * @title - File input * * @property {string} name - The name of the file input. * @property {string} value - The value of the file input. * @property {'success' | 'error'} status - The status of the file input. * @property {string} label - The label for the file input. * @property {string} description - The description for the file input. * @property {string} tooltip - The tooltip for the file input. * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input. * @property {boolean} disabled - Whether the file input is disabled. * @property { 'xs' | 'sm' | 'lg' } size - The size of the file input. * @property {string} feedback - The feedback for the file input. * @property {'negative' | 'positive' | 'warning'} feedbackType - The type of feedback for the file input. * @property {boolean} required - Whether the file input is required. * @property {boolean} optional - Whether the file input is optional. * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold. * @property {string} uploadButtonLabel - The label for the upload button. * @property {string} browseButtonLabel - The label for the browse button. * @property {string} accept - The file types that the file input accepts. * @property {boolean} multiple - Whether the file input accepts multiple files. * @property {boolean} keepValue - Whether to keep the value when new files are selected. * @property {string} uploadUrl - A remote URL to upload files to. * @property {string} deleteUrl - A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`. * @property {string} uploadHeaders - Custom headers for upload requests (JSON string). * @property {string} deleteHeaders - Custom headers for delete requests (JSON string). * @property {boolean} autoupload - Whether to automatically upload files after selection. * @property {number} maxFiles - The maximum number of files that can be uploaded. * @property {number} maxFileSize - The maximum size of files that can be uploaded (in bytes). * @property {number} maxSizePerFile - The maximum size a single file can have (in bytes). * @property {string} maxFileSizeErrorText - Text for the max file size error. * @property {string} maxSizePerFileErrorText - Text for the max size per file error. * @property {string} maxFileAmountErrorText - Text for the max file amount error. * @property {string} fileTypeErrorText - Text for the file type error. * @property {boolean} showDropzone - Whether to show a separate dropzone area. * @property {string} dropzoneText - Text to display in the dropzone. * @property {string} dropzoneAriaLabel - Aria label for the dropzone. * @property {boolean} dropzoneFocusable - Whether the dropzone is in the tab order and exposes button keyboard behavior (default: true). * @property {boolean} showFileList - Whether to show the built-in file list. * @property {boolean} confirmRemove - Whether to show confirmation dialog before removing files. * @property {string} showUploadButton - Whether to show the upload button. Default is `true`. * @property {string} removeButtonLabel - The label for the remove button. * @property {string} cancelButtonLabel - The label for the cancel button. * * @event {{ file: File }} dds-upload-start - Fired when a file upload starts. * @event {{ file: File, progress: number }} dds-upload-progress - Fired during file upload progress. * @event {{ file: File, item: DapDSFileInputListItem, result: any }} dds-upload-complete - Fired when a file upload completes successfully. * @event {{ file?: File, errors: FileError[], item?: DapDSFileInputListItem }} dds-upload-error - Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error. * @event {{ void }} dds-all-uploads-complete - Fired when all file uploads are complete. * @event {{ file: FileListElement }} dds-file-removed - Fired when a file is removed from the file input. * @event {{ file: FileListElement, error: Error }} dds-file-delete-error - Fired when a file deletion from server encounters an error. * @event {{ newFiles: File[], files: File[], canceledFiles: Set, currentFiles: File[] }} dds-file-change - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files. * @event {{ files: File[] }} dds-files-accepted - Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true). * * @slot dropzone-content - The content to display in the dropzone. * * @csspart base - The main file input container. * @csspart input - The file input control. * @csspart label - The file input label. * @csspart description - The file input description. * @csspart feedback - The file input feedback. * @csspart tooltip - The file input tooltip. * @csspart upload-progress - The upload progress container. * @csspart browse-button - The browse button. * @csspart upload-button - The upload button. * @csspart dropzone - The dropzone area. * * @cssproperty --dds-file-input-holder-margin - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0) * @cssproperty --dds-file-input-dropzone-padding - The padding of the dropzone (default: var(--dds-spacing-800)) * @cssproperty --dds-file-input-dropzone-border - The border of the dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-subtle)) * @cssproperty --dds-file-input-dropzone-border-radius - The border radius of the dropzone (default: var(--dds-radius-base)) * @cssproperty --dds-file-input-dropzone-background - The background of the dropzone (default: var(--dds-color-background-primary)) * @cssproperty --dds-file-input-dropzone-border-hover - The border of the dropzone on hover in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-primary-hover)) * @cssproperty --dds-file-input-dropzone-background-hover - The background of the dropzone on hover (default: var(--dds-color-background-primary-hover)) * @cssproperty --dds-file-input-dropzone-border-dragover - The border of the dropzone when dragging over in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-accent)) * @cssproperty --dds-file-input-dropzone-background-dragover - The background of the dropzone when dragging over (default: var(--dds-color-background-accent-light)) * @cssproperty --dds-file-input-dropzone-border-disabled - The border of the disabled dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-disabled)) * @cssproperty --dds-file-input-dropzone-gap - The gap between elements in the dropzone content (default: var(--dds-spacing-300)) * @cssproperty --dds-file-input-dropzone-accept-color - The text color of the accepted file types in the dropzone (default: var(--dds-color-text-secondary)) */ declare const reactWrapper: import('@lit/react').ReactWebComponent; onDdsUploadProgress: EventName; onDdsUploadComplete: EventName; onDdsUploadError: EventName; onDdsAllUploadsComplete: EventName; onDdsFileRemoved: EventName; onDdsFileDeleteError: EventName; onDdsFileChange: EventName; onDdsFilesAccepted: EventName; }>; export default reactWrapper;