dap-design-system/dist/react/dap-ds-file-input/index.d.ts

Official design system for the DÁP (dap.gov.hu)

import { EventName } from '@lit/react';
import { default as Component } from '../../components/file-input/file-input.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 {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
* @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 {string} requiredLabel - The required indicator of the file input. (default: '*')
* @property {boolean} optional - Whether the file input is optional.
* @property {string} optionalLabel - The optional label of the file input.
* @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<File>, 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<Component, {
    onDdsUploadStart: EventName<DdsUploadStartEvent>;
    onDdsUploadProgress: EventName<DdsUploadProgressEvent>;
    onDdsUploadComplete: EventName<DdsUploadCompleteEvent>;
    onDdsUploadError: EventName<DdsUploadErrorEvent>;
    onDdsAllUploadsComplete: EventName<DdsAllUploadsCompleteEvent>;
    onDdsFileRemoved: EventName<DdsFileRemovedEvent>;
    onDdsFileDeleteError: EventName<DdsFileDeleteErrorEvent>;
    onDdsFileChange: EventName<DdsFileChangeEvent>;
    onDdsFilesAccepted: EventName<DdsFilesAcceptedEvent>;
}>;
export default reactWrapper;