import type { CSSResultGroup, TemplateResult } from 'lit'; import DSAAlert from '../alert/alert'; import DSAErrorText from '../error-text/error-text'; import DSAIcon from '../icon/icon'; import type { ShoelaceFormControl } from '../../internal/shoelace-element'; import { ShoelaceElement } from '../../internal/shoelace-element'; import { HasSlotController } from '../../internal/slot'; /** * @summary File upload allows users to select and send one or more files. * @documentation https://dsa.service-public-autonomie.fr/latest/librairie-webcomponents/televersement-de-fichier/televersement-de-fichier-s-file-upload/web-d298Q6qE * * @dependency dsa-error-text * * @slot - The files options. Must be `` elements. * @slot label - The file-upload's label. Alternatively, you can use the `label` attribute. * @slot button-label - The file-upload's button label. Alternatively, you can use the `button-label` attribute. If both are left empty, a predefined label will be displayed. * @slot description - The file-upload's description. Alternatively, you can use the `description` attribute. * @slot help-text - Text that describes how to use the file-upload. Alternatively, you can use the `help-text` attribute. * @event dsa-focus - Emitted when the control gains focus. * @event dsa-blur - Emitted when the control loses focus. * @event {{ files: File[] }} dsa-file-upload - Emitted when a file is selected. It can be multiple files if multiple or directory are set to `true`. * @event dsa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. */ export default class DSAFileUpload extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup; static dependencies: { 'dsa-icon': typeof DSAIcon; 'dsa-error-text': typeof DSAErrorText; 'dsa-alert': typeof DSAAlert; }; private readonly formControlController; protected readonly hasSlotController: HasSlotController; private readonly localize; private storedFiles; private acceptedTypesCache; fileUploadInput: HTMLInputElement; fileUploadButton: HTMLButtonElement; dropzone: HTMLDivElement; private internalError; /** The file-upload's size. */ size: 'small' | 'medium' | 'large'; /** The file-upload's label. If you need to display HTML, use the `label` slot instead. */ label: string; /** Type of interface : button only or additional drop zone */ type: 'button' | 'drop'; /** The file-upload's button label. If you need to display HTML, use the `button-label` slot instead. If both are left empty, a predefined label will be displayed. */ buttonLabel: string; /** The file-upload's description. If you need to display HTML, use the `description` slot instead. */ description: string; /** The file-upload's help text. If you need to display HTML, use the `help-text` slot instead. */ helpText: string; /** Disables the file-upload control. */ disabled: boolean; /** The file-upload's required attribute. */ required: boolean; /** The file types the file input should accept, separated by commas. */ accept: string; /** `true` if this drop container should accept more than one files at once. */ multiple: boolean; /** * When used with `multiple`, keeps previously selected files and appends newly selected files. * * By default, each new selection replaces the previous one (native input behavior). */ appendFiles: boolean; /** Indicates whether the file-upload should be in error state */ error: boolean; /** When set to true, this attribute allows users to select and upload the contents of an entire directory, including all files and subdirectories within it. Each file will retain its relative path information, accessible via the webkitRelativePath property. Please note that support for this attribute varies from browser to browser, use with caution. */ directory: boolean; /** The name of the element, submitted as a name/file(s) pair with form data. */ name: string; /** The current value of the file upload element. If a file is uploaded, it will contain a fake path to it, but cannot be used to retreive the file. It can however be used to reset the element files.*/ value: string; /** The default value of the form control. Primarily used for resetting the form control. */ defaultValue: string; /** The error message or messages that are shown when “error” is set to “true”. To display several * messages, they must be separated by a pipe character, e.g. "Error 1|Error 2|Error 3”. */ errorMessage: string | string[]; fileSizeLimit?: number; /** Gets the validity state object */ get validity(): ValidityState; /** Gets the validation message */ get validationMessage(): string; /** Gets the validity state object */ get files(): FileList | null; /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */ checkValidity(): boolean; /** Gets the associated form, if one exists. */ getForm(): HTMLFormElement | null; /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity(): boolean; /** Sets a custom validation message. Pass an empty string to restore validity. */ setCustomValidity(message: string): void; /** Remove a previously selected file */ removeFile(index: number): void; connectedCallback(): void; firstUpdated(): void; private handleClick; private handleInvalid; private getAllFileElements; private updateFileItemsSize; private syncInputFilesFromStore; private handleDefaultSlotChange; private handleBlur; private handleFocus; private addFiles; private isAcceptedFileType; private isAcceptedFileSize; private filterValidFiles; private handleChange; private handleDrop; private handleDropzoneDragover; private handleDropzoneDragleave; private handleInternalErrorHide; private getDescriptionIds; handleAcceptChange(): void; handleSizeChange(): void; /** Synchronizes the native input if the element gets reset */ handleValueChange(): void; /** Sets focus on the control. */ focus(options?: FocusOptions): void; /** Removes focus from the control. */ blur(): void; private renderButtonAndInput; render(): TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'dsa-file-upload': DSAFileUpload; } }