import { FormControlController } from '../../internal/form.js'; import AWCElement from '../../internal/awc-element.js'; import AWCFileUploadItem from '../file-upload-item/file-upload-item.component.js'; import AWCIcon from '../icon/icon.component.js'; import type { AWCFormControl } from '../../internal/awc-element.js'; import type { CSSResultGroup } from 'lit'; import type { FileInfo } from './library.js'; /** * @summary File Upload provides an area where files can be dragged and dropped onto from the Operating System to be uploaded or to be used for other tasks. It also provides a button to open a file dialog and select files from the file system. Per default the File Dropzone shows a list of all selected files below the dropzone. * @documentation https://webcomponents.adeliom.io/?path=/docs/components-file-upload--documentation * @status experimental * @since 1.0 * * @dependency awc-icon * @dependency awc-file-upload-item * * @slot content - The dropzone's content. Alternatively, you can use the image slot and label prop. * @slot image - The dropzone's image. * @slot button - The dropzone's button. * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * * @event awc-drop - Emitted when dragged files have been dropped on the dropzone area. * @event awc-select - Emitted when files have been selected via the file dialog. * @event {{ fileList: FileList }} awc-change - Emitted when files have been uploaded via the dropzone or file dialog. * @event {{ response: unknown }} awc-load - Emitted when a file transfer was finished * @event {{ event: ProgressEvent }} awc-error - Emitted when a file transfer threw an error * @event {{ event: ProgressEvent }} awc-abort - Emitted when a file transfer was aborted by the user * @event {{ file: FileInfo }} awc-remove - Emitted when a file was removed * * @csspart base - The component's internal wrapper. * @csspart content - The dropzone container. * @csspart image - The dropzone image. * @csspart button - The dropzone button. * @csspart help-text - The help text's wrapper. * * @cssproperty [--border-radius=var(--awc-border-radius-medium)] --border-radius - The border radius of the dropzone borders. * @cssproperty [--border-width=var(--awc-input-border-width)] --border-width - The width of the dropzone borders. * @cssproperty [--border-style=solid] --border-style - The style of the dropzone borders. * @cssproperty [--list-border-style=solid] --list-border-style - The style of the file list borders. */ export default class AWCFileUpload extends AWCElement implements AWCFormControl { static styles: CSSResultGroup; static dependencies: { 'awc-icon': typeof AWCIcon; 'awc-file-upload-item': typeof AWCFileUploadItem; }; private readonly hasSlotController; protected readonly formControlController: FormControlController; type: string; private readonly localize; /** Internal property to show an error in the dropzone */ error?: string; /** Indicates whether a file is currently dragged over the dropzone */ isDragover: boolean; input: HTMLInputElement; files: FileInfo[]; /** The input's name attribute. */ name: string; get value(): string | File; set value(file: string | File); /** Disables the dropzone. */ disabled: boolean; /** If true, hides button to open the native file selection dialog */ noButton: boolean; /** If true, shows only a button as a file input */ buttonOnly: boolean; /** If true, no file list will be shown */ noFileList: boolean; /** An optional overwrite for the upload label */ label?: string; /** An optional overwrite for the preview button label */ buttonLabel?: string; /** The locale to render the component in. */ lang: string; /** A string that defines the file types the file dropzone should accept. Defaults to '*' */ accept: string; /** An optional maximum size of a file that will be considered valid. */ maxFileSize?: number; /** The maximum amount of files that are allowed. */ maxFiles: number; /** Indicates if multiple files can be uploaded */ multiple: boolean; /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */ helpText: string; private addFile; private handleFiles; private onDragLeave; private onDragOver; private onDrop; private handleBrowseFileClick; private handleFileInputChange; private handleFileRemove; private handleInvalid; firstUpdated(): void; /** Gets the associated form, if one exists. */ getForm(): HTMLFormElement | null; /** Gets the validity state object */ get validity(): ValidityState; /** Gets the validation message */ get validationMessage(): string; /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity(): boolean; /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */ checkValidity(): boolean; /** Sets a custom validation message. Pass an empty string to restore validity. */ setCustomValidity(message: string): void; get dragDroplabel(): string; handleDisabledChange(): void; render(): import("lit-html").TemplateResult<1>; }