@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/upload/upload.js

@@ -0,0 +1,1314 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { dispatchNativeFormEvent, redispatchNativeEvent } from "../../shared/utils/event";
+import { getFormValidationState, isFormControlDisabled, safeSetFormValue, syncNativeFormValidity, } from "../../shared/utils/form";
+import { formatBytes } from "../../shared/utils/format-bytes";
+import { generateUniqueId } from "../../shared/utils/id";
+import { setPartAttributes } from "../../shared/utils/parts";
+import { hasAssignedSlotContent } from "../../shared/utils/slot";
+import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+/**
+ * ## Design System
+ *
+ * @category Formulários
+ * @status stable
+ * @slot default - Texto personalizado para o botão de upload. Se não fornecido, será exibido "Selecione o arquivo" como texto padrão.
+ *                 Use este slot para personalizar o texto do botão de acordo com o contexto do upload, por exemplo: "Anexar documentos",
+ *                 "Enviar imagens", etc.
+ * @slot upload-list - Permite customizar a área de listagem de arquivos. Se utilizado, substitui a lista padrão gerada pelo componente.
+ * @slot label - Rótulo customizado do upload. Quando utilizado, a prop `label` é ignorada.
+ * @slot helper - Texto auxiliar exibido abaixo da superfície de seleção.
+ * @slot feedback - Mensagem de validação, normalmente um `br-message`.
+ * @slot loading - Conteúdo exibido enquanto o handler fornecido pela aplicação envia um arquivo.
+ *
+ * @part container - Wrapper principal do upload.
+ * @part label - Rótulo do campo de upload.
+ * @part input - Elemento input de arquivo.
+ * @part button - Botão de seleção de arquivo.
+ * @part helper - Texto auxiliar do upload.
+ * @part remove-button - Botão de remoção de arquivo.
+ * @part file-list - Lista de arquivos selecionados.
+ * @part feedback - Contêiner da mensagem de validação.
+ * @part loading - Estado e progresso do envio assíncrono.
+ */
+export class Upload {
+    constructor() {
+        this.fileKeys = new WeakMap();
+        this.fileKeySequence = 0;
+        /**
+         * Cache dos arquivos combinados para renderização unificada (evita recálculos desnecessários).
+         */
+        this.allFilesCached = [];
+        /**
+         * Arquivo único quando a seleção não é múltipla.
+         */
+        this.file = null;
+        /**
+         * Evento emitido quando um arquivo é selecionado.
+         * Este estado armazena os arquivos que foram selecionados pelo usuário.
+         */
+        this.filesSelected = null;
+        this.formDisabled = false;
+        this.hasFeedbackSlot = false;
+        this.dragging = false;
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.isValidating = false;
+        this.uploading = false;
+        this.uploadError = '';
+        /**
+         * Estado interno para armazenar os arquivos processados da prop uploadFiles.
+         */
+        this.parsedUploadFiles = [];
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Tipos de arquivo permitidos (ex.: 'image/*').
+         */
+        this.accept = '';
+        /**
+         * Rótulo exibido acima do botão de upload.
+         */
+        this.label = 'Envio de arquivo';
+        /**
+         * Lista de arquivos já enviados (para edição ou pré-visualização).
+         * Pode ser uma string JSON ou um array de objetos IUploadFile.
+         */
+        /** @deprecated Use `existingFiles`. */
+        this.uploadFiles = [];
+        /**
+         * Desabilita a interação com o componente.
+         *
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o input de upload é obrigatório antes que o formulário possa ser enviado.
+         */
+        this.required = false;
+        /**
+         * Indica se o componente permite a seleção de múltiplos arquivos.
+         * Quando definido como `true`, o usuário pode selecionar mais de um arquivo para upload.
+         */
+        this.multiple = false;
+        /** Quantidade mínima de arquivos, incluindo arquivos já enviados. */
+        this.minFiles = 0;
+        /** Quantidade máxima de arquivos. Zero significa sem limite. */
+        this.maxFiles = 0;
+        /** Tamanho máximo permitido para cada arquivo, em bytes. Zero significa sem limite. */
+        this.maxFileSize = 0;
+        /** Lista de arquivos selecionados, equivalente a `HTMLInputElement.files`. */
+        this.files = null;
+        this.validationRunId = 0;
+        this.initialUploadFiles = [];
+        this.handleInputChange = (event) => {
+            if (this.isDisabled()) {
+                return;
+            }
+            const target = event.target;
+            const selectedFiles = this.onInputChange(target.files);
+            void this.uploadSelectedFiles(selectedFiles);
+            if (!this.uploadHandler)
+                void this.validate();
+            event.stopPropagation();
+        };
+        this.handleNativeInput = (event) => event.stopPropagation();
+        this.handleNativeCancel = (event) => redispatchNativeEvent(this.el, event);
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    formResetCallback() {
+        this.cancelPendingUpload();
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.validationRunId++;
+        this.filesSelected = null;
+        this.files = null;
+        this.file = null;
+        this.parsedUploadFiles = [...this.initialUploadFiles];
+        this.uploadError = '';
+        this.updateAllFilesCached();
+        if (this.nativeInput) {
+            this.nativeInput.value = '';
+            this.nativeInput.setCustomValidity('');
+        }
+        this.syncFormState();
+    }
+    formStateRestoreCallback(_state) {
+        this.cancelPendingUpload();
+        this.customValidationMessage = '';
+        this.filesSelected = null;
+        this.files = null;
+        this.file = null;
+        this.uploadError = '';
+        this.updateAllFilesCached();
+        if (this.nativeInput) {
+            this.nativeInput.value = '';
+            this.nativeInput.setCustomValidity('');
+        }
+        this.syncFormState();
+    }
+    filesHandler(newValue) {
+        if (newValue !== this.filesSelected)
+            this.filesSelected = newValue;
+        if (this.nativeInput && newValue) {
+            try {
+                this.nativeInput.files = newValue;
+            }
+            catch {
+                // FileList só pode ser atribuído quando aceito pela implementação do navegador.
+            }
+        }
+        this.syncFormState();
+    }
+    uploadFilesHandler(newValue) {
+        if (this.existingFiles !== undefined)
+            return;
+        this.parseExistingFiles(newValue);
+    }
+    existingFilesHandler(newValue) {
+        this.parseExistingFiles(newValue ?? this.uploadFiles);
+    }
+    parseExistingFiles(newValue) {
+        if (!newValue || (typeof newValue === 'string' && newValue.trim() === '')) {
+            this.parsedUploadFiles = [];
+            this.updateAllFilesCached();
+            return;
+        }
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                this.parsedUploadFiles = Array.isArray(parsed) ? parsed : [];
+            }
+            catch (e) {
+                console.error('Erro ao fazer parse de uploadFiles:', e);
+                this.parsedUploadFiles = [];
+            }
+        }
+        else if (Array.isArray(newValue)) {
+            this.parsedUploadFiles = [...newValue];
+        }
+        else {
+            this.parsedUploadFiles = [];
+        }
+        this.updateAllFilesCached();
+    }
+    filesSelectedHandler() {
+        this.updateAllFilesCached();
+    }
+    componentWillLoad() {
+        this.filesSelected = this.files;
+        this.parseExistingFiles(this.existingFiles ?? this.uploadFiles);
+        this.initialUploadFiles = [...this.parsedUploadFiles];
+        this.syncFormState();
+    }
+    componentDidLoad() {
+        this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+        this.updateValidity();
+    }
+    componentDidUpdate() {
+        this.updateValidity();
+    }
+    disconnectedCallback() {
+        this.cancelPendingUpload();
+    }
+    /**
+     * Retorna `true` se o valor do componente for válido, caso contrário `false`.
+     * Se o componente for inválido, dispara um evento 'invalid'.
+     */
+    async checkValidity() {
+        return this.elementInternals?.checkValidity?.() ?? true;
+    }
+    /**
+     * Retorna `true` se o valor do componente for válido, caso contrário `false`.
+     * Se for inválido, exibe a mensagem de erro padrão do navegador.
+     */
+    async reportValidity() {
+        return this.elementInternals?.reportValidity?.() ?? true;
+    }
+    /**
+     * Define uma mensagem de validação customizada para o upload.
+     * Se a mensagem for uma string vazia, o erro customizado é limpo.
+     */
+    async setCustomValidity(message) {
+        this.customValidationMessage = message;
+        this.updateValidity();
+    }
+    /** Executa o validator do upload e retorna se a lista atual é válida. */
+    async validate() {
+        const validator = resolveFormValidator(this.validator);
+        if (!validator || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        this.updateValidity();
+        this.brUploadValidationChange.emit({ validating: true, valid: null, message: null });
+        const files = this.allFilesCached.map((entry) => entry.file).filter((file) => file instanceof File);
+        const message = await runFormValidator(validator, files);
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        this.updateValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brUploadValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    /** Cancela o envio atual iniciado pelo `uploadHandler`. */
+    async cancelUpload() {
+        this.cancelPendingUpload();
+    }
+    updateAllFilesCached() {
+        const newFiles = this.filesSelected ? Array.from(this.filesSelected) : [];
+        const existingFiles = this.parsedUploadFiles || [];
+        const allFilesCached = [
+            ...existingFiles.map((f) => ({ file: f, isNew: false })),
+            ...newFiles.map((f) => ({ file: f, isNew: true })),
+        ];
+        const isSameCache = allFilesCached.length === this.allFilesCached.length &&
+            allFilesCached.every((entry, index) => {
+                const currentEntry = this.allFilesCached[index];
+                return currentEntry?.file === entry.file && currentEntry.isNew === entry.isNew;
+            });
+        if (!isSameCache) {
+            this.allFilesCached = allFilesCached;
+        }
+    }
+    emitFilesChange() {
+        this.files = this.filesSelected;
+        this.selectedFilesChange.emit(this.filesSelected);
+        dispatchNativeFormEvent(this.el, 'input');
+        dispatchNativeFormEvent(this.el, 'change');
+    }
+    syncFormState() {
+        safeSetFormValue(this.elementInternals, this.getFileDataForForm());
+        this.updateValidity();
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled) || this.uploading;
+    }
+    cancelPendingUpload() {
+        this.uploadController?.abort();
+        this.uploadController = undefined;
+        this.uploading = false;
+    }
+    async uploadSelectedFiles(files) {
+        if (!this.uploadHandler || files.length === 0 || !(await this.validate()))
+            return;
+        const controller = new AbortController();
+        this.uploadController?.abort();
+        this.uploadController = controller;
+        this.uploading = true;
+        this.uploadError = '';
+        let currentFile = files[0];
+        try {
+            for (const file of files) {
+                if (controller.signal.aborted)
+                    return;
+                currentFile = file;
+                this.brUploadStart.emit({ file });
+                await this.uploadHandler({
+                    file,
+                    signal: controller.signal,
+                    onProgress: (progress) => {
+                        if (controller.signal.aborted)
+                            return;
+                        const normalizedProgress = Math.min(100, Math.max(0, Number(progress) || 0));
+                        this.brUploadProgress.emit({ file, progress: normalizedProgress });
+                    },
+                });
+                if (controller.signal.aborted)
+                    return;
+                this.brUploadSuccess.emit({ file });
+            }
+        }
+        catch {
+            if (controller.signal.aborted)
+                return;
+            this.uploadError = `Não foi possível enviar ${currentFile.name}.`;
+            this.brUploadError.emit({ file: currentFile, message: this.uploadError });
+        }
+        finally {
+            if (this.uploadController === controller) {
+                this.uploadController = undefined;
+                this.uploading = false;
+            }
+        }
+    }
+    getFileDataForForm() {
+        if (!this.filesSelected || this.filesSelected.length === 0 || !this.name) {
+            return null;
+        }
+        const formData = new FormData();
+        Array.from(this.filesSelected).forEach((file) => {
+            formData.append(this.name, file);
+        });
+        return formData;
+    }
+    updateValidity() {
+        if (!this.nativeInput)
+            return;
+        const files = this.allFilesCached.map((entry) => entry.file);
+        const minimum = Math.max(this.required ? 1 : 0, this.minFiles);
+        const countMessage = minimum > 0 && files.length < minimum
+            ? `Selecione pelo menos ${minimum} arquivo(s).`
+            : this.maxFiles > 0 && files.length > this.maxFiles
+                ? `Selecione no máximo ${this.maxFiles} arquivo(s).`
+                : '';
+        const oversized = this.maxFileSize > 0 && files.some((file) => (file.size ?? 0) > this.maxFileSize);
+        const rejectedType = files.some((file) => file instanceof File && !this.isAcceptedFile(file));
+        const domainMessage = oversized
+            ? `Cada arquivo deve ter no máximo ${formatBytes(this.maxFileSize)}.`
+            : rejectedType
+                ? 'O tipo de um ou mais arquivos não é permitido.'
+                : countMessage;
+        this.nativeInput.setCustomValidity(this.customValidationMessage || this.validatorMessage || domainMessage);
+        syncNativeFormValidity(this.elementInternals, this.nativeInput);
+    }
+    isAcceptedFile(file) {
+        const rules = this.accept
+            .split(',')
+            .map((rule) => rule.trim().toLowerCase())
+            .filter(Boolean);
+        if (rules.length === 0)
+            return true;
+        const fileName = file.name.toLowerCase();
+        const mime = file.type.toLowerCase();
+        return rules.some((rule) => {
+            if (rule.startsWith('.'))
+                return fileName.endsWith(rule);
+            if (rule.endsWith('/*'))
+                return mime.startsWith(rule.slice(0, -1));
+            return mime === rule;
+        });
+    }
+    getCssClassMap() {
+        return {
+            'br-upload': true,
+            [this.feedbackState ?? this.state]: true,
+            dragging: this.dragging,
+        };
+    }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: método trata remoção em múltiplos cenários (FileList nativo, fallback e arquivos externos).
+    handleRemoveFileSelection(file) {
+        // Se for um objeto File nativo (novo upload)
+        if (file instanceof File) {
+            const newArrayFilter = Array.from(this.filesSelected).filter((f) => f !== file);
+            if (typeof DataTransfer !== 'undefined') {
+                const dataTransfer = new DataTransfer();
+                newArrayFilter.forEach((f) => {
+                    dataTransfer.items.add(f);
+                });
+                this.filesSelected = dataTransfer.files;
+                if (this.nativeInput) {
+                    this.nativeInput.files = dataTransfer.files;
+                    if (newArrayFilter.length === 0) {
+                        this.nativeInput.value = '';
+                    }
+                }
+            }
+            else {
+                this.filesSelected = newArrayFilter;
+                if (this.nativeInput && newArrayFilter.length === 0) {
+                    this.nativeInput.value = '';
+                }
+            }
+            this.emitFilesChange();
+            this.syncFormState();
+        }
+        // Se for um arquivo vindo de uploadFiles (externo)
+        else {
+            this.brRemove.emit(file);
+            this.brUploadRemove.emit(file);
+        }
+    }
+    renderFilesUploaded() {
+        return this.allFilesCached.map(({ file, isNew }) => {
+            const size = isNew
+                ? formatBytes(file.size)
+                : file.size !== undefined
+                    ? formatBytes(file.size)
+                    : '';
+            return (h("br-item", { key: this.getFileKey(file), "data-no-selection": true, density: "small" }, h("span", { class: "content text-primary-default" }, file.name), h("span", { slot: "end", class: "support" }, h("span", null, size), h("br-button", { ref: (el) => setPartAttributes(el, 'remove-button', 'button: remove-button-inner'), shape: "circle", type: "button", disabled: this.uploading, "prop:ariaLabel": `Remover arquivo ${file.name}`, onClick: () => this.handleRemoveFileSelection(file) }, h("br-icon", { iconName: "fa-solid:trash", width: "12", height: "12", "aria-hidden": "true" })))));
+        });
+    }
+    getFileKey(file) {
+        let key = this.fileKeys.get(file);
+        if (!key) {
+            key = `upload-file-${++this.fileKeySequence}`;
+            this.fileKeys.set(file, key);
+        }
+        return key;
+    }
+    onInputChange(files) {
+        if (files.length === 0) {
+            return [];
+        }
+        if (this.multiple) {
+            const currentFiles = this.filesSelected && this.filesSelected.length > 0 ? Array.from(this.filesSelected) : [];
+            const newFiles = Array.from(files);
+            const existingNames = new Set(currentFiles.map((f) => f.name));
+            const filesToAdd = newFiles.filter((f) => !existingNames.has(f.name));
+            if (typeof DataTransfer !== 'undefined') {
+                const dataTransfer = new DataTransfer();
+                currentFiles.forEach((file) => {
+                    dataTransfer.items.add(file);
+                });
+                filesToAdd.forEach((file) => {
+                    dataTransfer.items.add(file);
+                });
+                this.filesSelected = dataTransfer.files;
+            }
+            else {
+                this.filesSelected = [...currentFiles, ...filesToAdd];
+            }
+            this.emitFilesChange();
+            this.syncFormState();
+            return filesToAdd;
+        }
+        else {
+            if (files.length > 1) {
+                console.error('VOCÊ SÓ PODE ENVIAR UM ARQUIVO POR VEZ');
+                return [];
+            }
+            this.filesSelected = files;
+        }
+        this.emitFilesChange();
+        this.syncFormState();
+        return Array.from(files);
+    }
+    // Método antigo não é mais necessário pois usamos formatBytes diretamente no render
+    // private _calculateFileSize(files: FileList) { ... }
+    handleDrop(event) {
+        event.preventDefault();
+        this.dragging = false;
+        if (this.isDisabled()) {
+            return;
+        }
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            const selectedFiles = this.onInputChange(files);
+            void this.uploadSelectedFiles(selectedFiles);
+        }
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+    }
+    handleDragEnter(event) {
+        event.preventDefault();
+        if (!this.isDisabled())
+            this.dragging = true;
+    }
+    handleDragLeave(event) {
+        event.preventDefault();
+        this.dragging = false;
+    }
+    handleFileSelection() {
+        if (!this.isDisabled() && this.nativeInput) {
+            this.nativeInput.click();
+        }
+    }
+    renderUploadStatus() {
+        if (!this.uploading)
+            return null;
+        return (h("div", { part: "loading", class: "upload-loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { size: "small", label: "Carregando...", labelPosition: "right" }))));
+    }
+    renderUploadError() {
+        return this.uploadError ? (h("div", { role: "alert", class: "upload-error" }, this.uploadError)) : null;
+    }
+    renderFeedback() {
+        const message = this.customValidationMessage || this.validatorMessage;
+        return (h("div", { id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !message }, h("slot", { name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && message ? h("br-message", { state: "danger", message: message }) : null));
+    }
+    render() {
+        const hasFiles = (this.filesSelected && this.filesSelected.length > 0) ||
+            (this.parsedUploadFiles && this.parsedUploadFiles.length > 0);
+        return (h(Host, { key: 'b2354be16c7963909ce2939d1bd24e99475cc6ef', "aria-busy": this.uploading || this.isValidating ? 'true' : null }, h("div", { key: '78808e8f2c3eacce3deb6542ab5e2d9d60bd7e7e', class: this.getCssClassMap(), id: this.customId, part: "container" }, h("label", { key: '5881d7133d9118d3c9e1637932adfac7e58fb3b5', id: `label-${this.customId}`, class: "upload-label", htmlFor: `single-file-${this.customId}`, part: "label" }, h("span", { key: '7e1c9a04a4f88c06007c2d16ee2df1a7d0ca1956' }, h("slot", { key: '1043fac29600fdf581bf8a6fde3928a4b9140bdd', name: "label" }, this.label))), h("input", { key: 'acc7aeb2294edb18ff1495ae335f71420f5f55d5', ref: (el) => {
+                this.nativeInput = el;
+                el.addEventListener('input', this.handleNativeInput);
+            }, class: "upload-input", id: `single-file-${this.customId}`, type: "file", onChange: this.handleInputChange, onCancel: this.handleNativeCancel, multiple: this.multiple, disabled: this.isDisabled(), required: this.required, accept: this.accept, capture: this.capture, "aria-labelledby": `label-${this.customId}`, "aria-busy": this.uploading || this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                ? `${this.customId}-feedback`
+                : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
+                ? `${this.customId}-feedback`
+                : null, part: "input" }), h("button", { key: 'd52437779c26e2e41a8fa944325385dca9fab5db', class: "upload-button", type: "button", disabled: this.isDisabled(), onClick: () => this.handleFileSelection(), onDragEnter: (event) => this.handleDragEnter(event), onDragLeave: (event) => this.handleDragLeave(event), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event), "aria-describedby": `label-${this.customId}`, part: "button" }, h("br-icon", { key: '5b9514f5bfdfa32c5bbf73443f215454d669a71e', iconName: "fa-solid:upload", width: "20", height: "20", "aria-hidden": "true" }), h("slot", { key: '00684193f001d54a684261a9dca1e5c35ba2bcba' }, h("span", { key: 'af97d6116a296ae574b5de7c0e26c78a783983b4' }, "Selecione o arquivo"))), h("div", { key: '9db7490ea790b63348952dffc52dc67dd8c54a82', class: "upload-help", part: "helper" }, h("slot", { key: 'f831bae068bae343d40067922c07431fce1e2295', name: "helper" }, this.multiple ? 'Clique ou arraste os arquivos para cima do componente Upload.' : null)), this.renderUploadStatus(), h("slot", { key: 'e6cae25855b7e30f797d51aae53448fc8be7cbf5', name: "upload-list" }, hasFiles && (h("br-list", { key: '90c912ba21f3dff6f9c28cf53886414aa0582c4a', id: `${this.customId}-list-files`, class: "upload-list", listRole: "list", density: "small", part: "file-list" }, this.renderFilesUploaded())))), this.renderUploadError(), this.renderFeedback()));
+    }
+    static get is() { return "br-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do campo enviado no formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipos de arquivo permitidos (ex.: 'image/*')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "''"
+            },
+            "capture": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'' | 'user' | 'environment'",
+                    "resolved": "\"\" | \"environment\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sugere a c\u00E2mera usada na captura de imagem ou v\u00EDdeo.\nO navegador pode ignorar a prefer\u00EAncia conforme dispositivo e permiss\u00F5es."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "capture"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo exibido acima do bot\u00E3o de upload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Envio de arquivo'"
+            },
+            "uploadFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | IUploadFile[]",
+                    "resolved": "IUploadFile[] | string",
+                    "references": {
+                        "IUploadFile": {
+                            "location": "import",
+                            "path": "../../shared/utils/interfaces",
+                            "id": "src/shared/utils/interfaces.ts::IUploadFile",
+                            "referenceLocation": "IUploadFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `existingFiles`."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "upload-files",
+                "defaultValue": "[]"
+            },
+            "existingFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | IUploadFile[]",
+                    "resolved": "IUploadFile[] | string",
+                    "references": {
+                        "IUploadFile": {
+                            "location": "import",
+                            "path": "../../shared/utils/interfaces",
+                            "id": "src/shared/utils/interfaces.ts::IUploadFile",
+                            "referenceLocation": "IUploadFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Arquivos j\u00E1 existentes. Quando informada, tem preced\u00EAncia sobre `uploadFiles`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "existing-files"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita a intera\u00E7\u00E3o com o componente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o input de upload \u00E9 obrigat\u00F3rio antes que o formul\u00E1rio possa ser enviado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrFeedbackState",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BrFeedbackState": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrFeedbackState",
+                            "referenceLocation": "BrFeedbackState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado visual: 'info', 'warning', 'danger' ou 'success'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state"
+            },
+            "feedbackState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrFeedbackState",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BrFeedbackState": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrFeedbackState",
+                            "referenceLocation": "BrFeedbackState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de feedback can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `state`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "feedback-state"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o componente permite a sele\u00E7\u00E3o de m\u00FAltiplos arquivos.\nQuando definido como `true`, o usu\u00E1rio pode selecionar mais de um arquivo para upload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "minFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade m\u00EDnima de arquivos, incluindo arquivos j\u00E1 enviados."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-files",
+                "defaultValue": "0"
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade m\u00E1xima de arquivos. Zero significa sem limite."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-files",
+                "defaultValue": "0"
+            },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho m\u00E1ximo permitido para cada arquivo, em bytes. Zero significa sem limite."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-file-size",
+                "defaultValue": "0"
+            },
+            "validator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadValidator",
+                    "resolved": "(value: File[]) => string | Promise<string>",
+                    "references": {
+                        "UploadValidator": {
+                            "location": "import",
+                            "path": "./upload.types",
+                            "id": "src/components/upload/upload.types.ts::UploadValidator",
+                            "referenceLocation": "UploadValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada \u00E0 lista de arquivos selecionados.\nO componente valida `File[]`, mas n\u00E3o envia arquivos nem interpreta a\nresposta do servidor."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "uploadHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadHandler",
+                    "resolved": "(context: UploadHandlerContext) => Promise<void>",
+                    "references": {
+                        "UploadHandler": {
+                            "location": "import",
+                            "path": "./upload.types",
+                            "id": "src/components/upload/upload.types.ts::UploadHandler",
+                            "referenceLocation": "UploadHandler"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fun\u00E7\u00E3o ass\u00EDncrona opcional fornecida pela aplica\u00E7\u00E3o para enviar cada arquivo.\n\nO componente fornece o arquivo, um `AbortSignal` e uma fun\u00E7\u00E3o de progresso,\nmas n\u00E3o conhece endpoint, autentica\u00E7\u00E3o nem formato de resposta."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "files": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "FileList | null",
+                    "resolved": "FileList",
+                    "references": {
+                        "FileList": {
+                            "location": "global",
+                            "id": "global::FileList"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de arquivos selecionados, equivalente a `HTMLInputElement.files`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "allFilesCached": {},
+            "file": {},
+            "filesSelected": {},
+            "formDisabled": {},
+            "hasFeedbackSlot": {},
+            "dragging": {},
+            "customValidationMessage": {},
+            "validatorMessage": {},
+            "isValidating": {},
+            "uploading": {},
+            "uploadError": {},
+            "parsedUploadFiles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedFilesChange",
+                "name": "selectedFilesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `input`/`change` e leia `event.target.files`."
+                        }],
+                    "text": "Emitido quando a lista de arquivos selecionados muda."
+                },
+                "complexType": {
+                    "original": "FileList",
+                    "resolved": "FileList",
+                    "references": {
+                        "FileList": {
+                            "location": "global",
+                            "id": "global::FileList"
+                        }
+                    }
+                }
+            }, {
+                "method": "brRemove",
+                "name": "brRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brUploadRemove`."
+                        }],
+                    "text": "Evento emitido quando um arquivo da lista `uploadFiles` (externos) \u00E9 removido pelo usu\u00E1rio.\nO objeto emitido cont\u00E9m os dados do arquivo removido."
+                },
+                "complexType": {
+                    "original": "IUploadFile",
+                    "resolved": "IUploadFile",
+                    "references": {
+                        "IUploadFile": {
+                            "location": "import",
+                            "path": "../../shared/utils/interfaces",
+                            "id": "src/shared/utils/interfaces.ts::IUploadFile",
+                            "referenceLocation": "IUploadFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "brUploadRemove",
+                "name": "brUploadRemove",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando um arquivo existente \u00E9 removido."
+                },
+                "complexType": {
+                    "original": "IUploadFile",
+                    "resolved": "IUploadFile",
+                    "references": {
+                        "IUploadFile": {
+                            "location": "import",
+                            "path": "../../shared/utils/interfaces",
+                            "id": "src/shared/utils/interfaces.ts::IUploadFile",
+                            "referenceLocation": "IUploadFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "brUploadCancel",
+                "name": "brUploadCancel",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o usu\u00E1rio fecha a caixa de sele\u00E7\u00E3o de arquivos sem escolher nada."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brUploadValidationChange",
+                "name": "brUploadValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao iniciar e concluir a valida\u00E7\u00E3o customizada.\nO `detail` cont\u00E9m `validating`, `valid` e `message`."
+                },
+                "complexType": {
+                    "original": "FormValidationChangeDetail",
+                    "resolved": "FormValidationChangeDetail",
+                    "references": {
+                        "FormValidationChangeDetail": {
+                            "location": "import",
+                            "path": "../../shared/utils/validator",
+                            "id": "src/shared/utils/validator.ts::FormValidationChangeDetail",
+                            "referenceLocation": "FormValidationChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brUploadStart",
+                "name": "brUploadStart",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido antes de o `uploadHandler` processar um arquivo."
+                },
+                "complexType": {
+                    "original": "UploadFileDetail",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "UploadFileDetail": {
+                            "location": "import",
+                            "path": "./upload.types",
+                            "id": "src/components/upload/upload.types.ts::UploadFileDetail",
+                            "referenceLocation": "UploadFileDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brUploadProgress",
+                "name": "brUploadProgress",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o `uploadHandler` informa o progresso de um arquivo."
+                },
+                "complexType": {
+                    "original": "UploadProgressDetail",
+                    "resolved": "UploadFileDetail & { progress: number; }",
+                    "references": {
+                        "UploadProgressDetail": {
+                            "location": "import",
+                            "path": "./upload.types",
+                            "id": "src/components/upload/upload.types.ts::UploadProgressDetail",
+                            "referenceLocation": "UploadProgressDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brUploadSuccess",
+                "name": "brUploadSuccess",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o `uploadHandler` conclui um arquivo."
+                },
+                "complexType": {
+                    "original": "UploadFileDetail",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "UploadFileDetail": {
+                            "location": "import",
+                            "path": "./upload.types",
+                            "id": "src/components/upload/upload.types.ts::UploadFileDetail",
+                            "referenceLocation": "UploadFileDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brUploadError",
+                "name": "brUploadError",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o `uploadHandler` falha ao enviar um arquivo."
+                },
+                "complexType": {
+                    "original": "UploadErrorDetail",
+                    "resolved": "UploadFileDetail & { message: string; }",
+                    "references": {
+                        "UploadErrorDetail": {
+                            "location": "import",
+                            "path": "./upload.types",
+                            "id": "src/components/upload/upload.types.ts::UploadErrorDetail",
+                            "referenceLocation": "UploadErrorDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna `true` se o valor do componente for v\u00E1lido, caso contr\u00E1rio `false`.\nSe o componente for inv\u00E1lido, dispara um evento 'invalid'.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna `true` se o valor do componente for v\u00E1lido, caso contr\u00E1rio `false`.\nSe for inv\u00E1lido, exibe a mensagem de erro padr\u00E3o do navegador.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define uma mensagem de valida\u00E7\u00E3o customizada para o upload.\nSe a mensagem for uma string vazia, o erro customizado \u00E9 limpo.",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Executa o validator do upload e retorna se a lista atual \u00E9 v\u00E1lida.",
+                    "tags": []
+                }
+            },
+            "getValidationState": {
+                "complexType": {
+                    "signature": "() => Promise<FormValidationState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormValidationState": {
+                            "location": "import",
+                            "path": "../../shared/utils/form",
+                            "id": "src/shared/utils/form.ts::FormValidationState",
+                            "referenceLocation": "FormValidationState"
+                        }
+                    },
+                    "return": "Promise<FormValidationState>"
+                },
+                "docs": {
+                    "text": "Retorna um snapshot serializ\u00E1vel da Constraint Validation API.",
+                    "tags": []
+                }
+            },
+            "cancelUpload": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cancela o envio atual iniciado pelo `uploadHandler`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "files",
+                "methodName": "filesHandler"
+            }, {
+                "propName": "uploadFiles",
+                "methodName": "uploadFilesHandler"
+            }, {
+                "propName": "existingFiles",
+                "methodName": "existingFilesHandler"
+            }, {
+                "propName": "filesSelected",
+                "methodName": "filesSelectedHandler"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}