dap-design-system

import { FileListElement, default as DapDSFileInputListItem } from './file-input-list-item.component'; import { GenericFormElement } from '../../internal/mixin/genericFormElement'; import { default as DapDSButton } from '../button/button.component'; import { default as DapDSFeedback } from '../feedback/feedback.component'; import { default as DapDSFormLabel } from '../form/form-label/form-label.component'; import { default as DapDSIcon } from '../icon/icon.component'; import { default as DapDSIconButton } from '../icon-button/icon-button.component'; import { default as DapDSModal } from '../modal/modal.component'; import { default as DapDSTooltip } from '../tooltip/tooltip.component'; import { default as DapDSTypography } from '../typography/typography.component'; import { default as DapDSFileInputList } from './file-input-list.component'; /** * `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)) */ export default class DapDSFileInput extends GenericFormElement { static tagName: string; static dependencies: { 'dap-ds-form-label': typeof DapDSFormLabel; 'dap-ds-tooltip': typeof DapDSTooltip; 'dap-ds-icon-button': typeof DapDSIconButton; 'dap-ds-icon': typeof DapDSIcon; 'dap-ds-typography': typeof DapDSTypography; 'dap-ds-button': typeof DapDSButton; 'dap-ds-modal': typeof DapDSModal; 'dap-ds-feedback': typeof DapDSFeedback; }; private readonly input; /** Label for the upload button */ uploadButtonLabel: string; /** Label for the browse button */ browseButtonLabel: string; /** `data-testid` for the browse button. */ browseButtonTestId: string; /** `data-testid` for the upload button. */ uploadButtonTestId: string; /** Whether to show a separate dropzone area */ showDropzone: boolean; /** Text to display in the dropzone */ dropzoneText: string; /** Whether to show the built-in file list */ showFileList: boolean; /** Whether to show confirmation dialog before removing files */ confirmRemove: boolean; /** Whether to show the upload button */ showUploadButton: string; /** Whether to show the browse button */ showBrowseButton: string; /** The file types that the file input accepts */ accept: string; /** Whether the file input accepts multiple files. */ multiple: boolean; /** Whether to keep the value of the file input when new files are selected. */ keepValue: boolean; /** A remote URL to upload files to */ uploadUrl: string; /** Whether to automatically upload files after selection */ autoupload: boolean; /** The property to use when uploading files */ uploadProperty: string; /** The HTTP method to use when uploading files */ uploadMethod: string; /** A remote URL to delete uploaded files from */ deleteUrl: string; /** The HTTP method to use when deleting files */ deleteMethod: string; /** Whether to send credentials with the file upload request */ withCredentials: boolean; /** Custom headers to send with upload requests (JSON string) */ uploadHeaders: string; /** Custom headers to send with delete requests (JSON string) */ deleteHeaders: string; /** The file list component to bind to */ fileList: DapDSFileInputList | null; /** The maximum number of files that can be uploaded */ maxFiles?: number; /** The maximum size of files that can be uploaded (in bytes) sum of all files */ maxFileSize?: number; /** The maximum size a single file can have (in bytes) */ maxSizePerFile?: number; /** Text for the max file size error */ maxFileSizeErrorText?: string; /** Text for the max size per file error */ maxSizePerFileErrorText?: string; /** Text for the max file amount error */ maxFileAmountErrorText?: string; /** Text for the file type error */ fileTypeErrorText?: string; /** The label for the remove button */ removeButtonLabel: string; /** The label for the cancel button */ cancelButtonLabel: string; /** Whether the remove button is dangerous */ removeButtonDanger: string; /** Whether to show thumbnail preview for supported file types in the built-in file list */ showThumbnail: string; /** Aria label for the dropzone */ dropzoneAriaLabel: string; /** * When false, the dropzone is not tab-focusable (tabindex -1), uses role="group" * instead of role="button", and Enter/Space no longer opens the file dialog from * the dropzone. Click and drag-and-drop still work. When the browse button is * also hidden, slot a focusable control into dropzone-content to keep a keyboard * path to the file dialog — the hidden native input is out of the tab order * whenever a dropzone is rendered. */ dropzoneFocusable: string; /** Size of the thumbnail preview in the built-in file list */ thumbnailSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg'; get files(): File[]; private _files; private _uploadProgress; private readonly _uploadingFiles; private readonly _activeUploads; private readonly _uploadedFiles; private _isDragOver; private _showRemoveDialog; private _fileToRemove; private _removeResolve; private _removeReject; static readonly styles: import('lit').CSSResult; checkFileEquality(file1: File | FileListElement, file2: File | FileListElement): boolean; /** * Validates if a file type is accepted based on the accept attribute */ private validateFileType; get focusElement(): HTMLInputElement; /** * Validates a file list against all constraints (count, size, type) */ private validateFiles; removeFile(fileData: FileListElement | File): Promise<void> | void; private performFileRemoval; private languageChangeHandler; connectedCallback(): void; disconnectedCallback(): void; onConfirmDelete(): Promise<void>; onCancelDelete(): void; onCancel(): void; onClick(): void; onDropzoneKeydown(event: KeyboardEvent): void; setFileLoadingState(file: File, loading: boolean): DapDSFileInputListItem | undefined; /** * Aborts upload for a specific file */ abortUpload(fileName: string): void; /** * Aborts all active uploads */ abortAllUploads(): void; /** * Manually start upload of all selected files */ startUpload(): void; /** * Delete an uploaded file from the server */ private deleteUploadedFile; private uploadFiles; /** * Calculates what the new file list would be if the given files were added * Does not modify component state */ private calculateNewFileList; private handleFileList; onChange(event: InputEvent): void; onDragenter(event: DragEvent): void; onDragover(event: DragEvent): void; onDragleave(event: DragEvent): void; onDrop(event: DragEvent): void; render(): import('lit-html').TemplateResult<1>; }