import { ChangeDetectorRef, EventEmitter } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { PoLanguageService } from '../../../services/po-language/po-language.service'; import { PoModalAction } from '../../po-modal'; import { PoProgressAction } from '../../po-progress'; import { PoUploadFileRestrictions } from './interfaces/po-upload-file-restriction.interface'; import { PoUploadLiterals } from './interfaces/po-upload-literals.interface'; import { PoUploadFile } from './po-upload-file'; import { PoUploadService } from './po-upload.service'; import { PoHelperOptions } from '../../po-helper'; export declare const poUploadLiteralsDefault: { en: PoUploadLiterals; es: PoUploadLiterals; pt: PoUploadLiterals; ru: PoUploadLiterals; }; /** * @description * * O componente `po-upload` permite que o usuário envie arquivo(s) ao servidor e acompanhe o progresso. * Este componente também possibilita algumas configurações como: * – Envio de diretórios, onde ele acessa o diretório selecionado assim como seus sub-diretórios; * - Múltipla seleção, onde o usuário pode enviar mais de um arquivo ao servidor. * - Auto envio, onde o arquivo é enviado imediatamente após a seleção do usuário, não necessitando que o usuário * clique em enviar. * - Restrições de formatos de arquivo e tamanho. * - Função de sucesso que será disparada quando os arquivos forem enviados com sucesso. * - Função de erro que será disparada quando houver erro no envio dos arquivos. * - Permite habilitar uma área onde os arquivos podem ser arrastados. * * #### Tokens customizáveis * * É possível alterar o estilo do componente usando os seguintes tokens (CSS): * * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization). * * | Propriedade | Descrição | Valor Padrão | * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------| * | **FIELD CONTAINER** | | | * | `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` | * | `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` | * | **TEXT SUPPORT** | | | * | `--font-family-text-support` | Família tipográfica usada no texto de suporte | `var(--font-family-theme)` | * | `--text-color-text-support` | Cor da fonte no texto de suporte | `var(--color-neutral-dark-90)` | * | **UPLOAD CONTENT** | | | * | `--background-color-content`   | Cor de fundo | `var(--color-neutral-light-10)` | * | `--border-color-content` | Cor da borda | `var(--color-neutral-light-20)` | * | `--border-radius-content` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` | * | `--text-color-file-name` | Cor do texto do nome do arquivo | `var(--color-neutral-dark-90)` | * | `--font-family-file-name` | Família tipográfica usada no texto do arquivo | `var(--font-family-theme)` | * | `--text-color-info-bar` | Cor do texto de informação | `var(--color-neutral-mid-60)` | * | `--font-family-info-bar` | Família tipográfica usada no texto de informação | `var(--font-family-theme)` | * | **ERROR STATE** | | | * | `--background-color-content-error` | Cor de fundo do container de erro | `var(--color-neutral-light-00)` | * | `--border-color-content-error` | Cor da borda do container de erro | `var(--color-feedback-negative-base)` | * | `--text-color-error` | Cor do texto do container de erro | `var(--color-feedback-negative-dark)` | * | `--color-icon-error` | Cor do ícone no estado de erro | `var(--color-feedback-negative-base)` | * | `--font-family-error` | Família tipográfica usada no texto de erro | `var(--font-family-theme)` | * | **UPLOADED STATE** | | | * | `--background-color-content-uploaded` | Cor de fundo do container com status de enviado | `var(--color-neutral-light-00)` | * | `--border-color-content-uploaded` | Cor da borda do container com status de enviado | `var(--color-neutral-light-20)` | * | **INTERACTIVE STATE** | | | * | `--text-color-file-name-interactive` | Cor do texto do nome do arquivo quando interativo | `var(--color-action-default)` | * | **THUMBNAIL** | | | * | `--color-icon-thumbnail` | Cor do ícone na thumbnail | `var(--color-action-default)` | * | `--border-width-thumbnail` | Tamanho da fonte na thumbnail | `var(--border-width-sm)` | * | `--border-radius-thumbnail` | Contém o valor do raio dos cantos na thumbnail | `var(--border-radius-md)` | * | `--background-color-thumbnail` | Cor de fundo na thumbnail | `var(--color-neutral-light-05)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | */ export declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Validator { protected uploadService: PoUploadService; protected cd: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper`) será incluído no body da página e não dentro do componente. Essa * opção pode ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o * posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. * * > Esta propriedade funciona somente se a propriedade `p-drag-drop` estiver habilitada. * * @default `320` */ dragDropHeight: number; /** Rótulo do campo. */ label?: string; /** * @optional * * @description * Define se o título do campo será exibido de forma compacta. * * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por: * - `po-label` * - `p-requirement (showRequired)` * - `po-helper` * * Ou seja, todos os elementos relacionados ao título do campo * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam * a seguir o comportamento de layout compacto. * * Também é possível definir esse comportamento de forma global, * uma única vez, na folha de estilo geral da aplicação, por meio * da customização dos tokens CSS: * * - `--field-container-title-justify` * - `--field-container-title-flex` * * Exemplo: * * ``` * :root { * --field-container-title-justify: flex-start; * --field-container-title-flex: 0 1 auto; * } * ``` * * Dessa forma, o layout compacto passa a ser o padrão da aplicação, * sem a necessidade de definir a propriedade individualmente em cada campo. * * @default `false` */ compactLabel: import("@angular/core").InputSignalWithTransform; /** Texto de apoio para o campo. */ help?: string; /** URL que deve ser feita a requisição com os arquivos selecionados. */ url: string; /** Define o valor do atributo `name` do componente. */ name: string; /** * @optional * * @description * * Define se o envio do arquivo será automático ao selecionar o mesmo. * * > Esta propriedade funciona somente se a propriedade `p-url` tiver um valor atribuído. * * @default `false` */ autoUpload?: boolean; /** * @optional * * @description * * Desabilita botão de remover o(s) arquivo(s) selecionado(s). * * @default `false` */ disabledRemoveFile: boolean; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a pré-visualização de imagens ao anexá-las. * * > Propriedade funciona apenas em arquivos de formato de imagem (`.png`, `.jpg`, `.jpeg` e `.gif`). * Será ignorada em outros tipos de arquivo. * * @default `true` */ showThumbnail: boolean; /** Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. */ headers: { [name: string]: string | Array; }; /** * @optional * * @description * * Define se a propriedade `p-url` é obrigatória. * * Caso a propriedade seja definida como `false`: * - o botão de "Selecionar arquivo" ficará habilitado mesmo sem a propriedade `p-url` definida. * - o botão "Iniciar envio" ficará oculto até que a propriedade `p-url` seja definida. * * > Se utilizada com a propriedade `p-auto-upload` definida como `true` será necessário definir a propriedade `p-url`. * * @default `true` */ requiredUrl: boolean; /** * @optional * * @description * * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: import("@angular/core").InputSignal; /** * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: import("@angular/core").InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito * de cada barra de progresso associada aos arquivos enviados ou em envio. * * A ação deve implementar a interface **PoProgressAction**, permitindo configurar propriedades como: * - `label`: Texto do botão. * - `icon`: Ícone a ser exibido no botão. * - `type`: Tipo de botão (ex.: `danger` ou `default`). * - `disabled`: Indica se o botão deve estar desabilitado. * - `visible`: Indica se o botão deve estar visível. * * **Exemplo de uso:** * * ```html * * * ``` * * ```typescript * customAction: PoProgressAction = { * label: 'Baixar', * icon: 'an an-download', * type: 'default', * visible: true * }; * * onCustomActionClick(file: PoUploadFile) { * console.log(`Ação personalizada clicada para o arquivo: ${file.name}`); * } * ``` */ customAction?: PoProgressAction; /** * @optional * * @description * * Define uma ou duas ações personalizadas do modal de pré-visualização, adicionando um botão ou dois botões no canto inferior direito * do modal. * * A ação deve implementar a interface **PoModalAction**, permitindo configurar propriedades como: * - `label`: Texto do botão. * - `action`: Ícone a ser exibido no botão. * - `danger`: Define a propriedade `p-danger` do botão. * - `disabled`: Indica se o botão deve estar desabilitado. * - `visible`: Indica se o botão deve estar visível. * * **Exemplo de uso:** * * ```html * * ``` * * ```typescript * customActions: Array = [ * { label: 'Confirmar', action: this.confirmModal.bind(this) }, * { label: 'Cancelar', action: this.closeModal.bind(this) } *]; * * ``` */ customModalActions?: Array; /** * @optional * * @description * * Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. * * O evento retorna o arquivo associado à barra de progresso onde a ação foi clicada, * permitindo executar operações específicas para aquele arquivo. * * **Exemplo de uso:** * * ```html * * * ``` * * ```typescript * customAction: PoProgressAction = { * label: 'Baixar', * icon: 'an an-download', * type: 'default', * visible: true * }; * * onCustomActionClick(file: PoUploadFile) { * console.log(`Ação personalizada clicada para o arquivo: ${file.name}`); * // Lógica para download do arquivo * this.downloadFile(file); * } * * downloadFile(file: PoUploadFile) { * // Exemplo de download * console.log(`Iniciando o download do arquivo: ${file.name}`); * } * ``` */ customActionClick: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Função que será executada no momento de realizar o envio do arquivo, * onde será possível adicionar informações ao parâmetro que será enviado na requisição. * É passado por parâmetro um objeto com o arquivo e as propriedades data e extraFormData, * que serão enviadas em conjunto com o arquivo na requisição, por exemplo: * * > data, nesta propriedade pode ser informado algum dado * ``` * event.data = {id: 'id do usuário'}; * ``` * > extraFormData, nesta propriedade pode ser informado algum dado solicitado pela API * > que não possa estar no objeto `data`, assim o conteúdo sará extraído do objeto e * > enviado como parâmetro * ``` * event.extraFormData = {id: 'id do usuário'}; * ``` */ onUpload: EventEmitter; /** * @optional * * @description * * Evento será disparado ao clicar no ícone de fechar. * > Por parâmetro será passado o objeto do arquivo. */ onCancel: EventEmitter; /** * @optional * * @description * * Evento será disparado ao abrir o modal de pré-visualização. * > Por parâmetro será passado o objeto do arquivo. */ onOpenModalPreview: EventEmitter; /** * @optional * * @description * * Evento será disparado ao clicar no ícone de remover. * > Por parâmetro será passado o objeto do arquivo. */ onRemove: EventEmitter; /** * @optional * * @description * * Evento será disparado quando ocorrer algum erro no envio do arquivo. * > Por parâmetro será passado o objeto do retorno que é do tipo `HttpErrorResponse`. */ onError: EventEmitter; /** * @optional * * @description * * Evento será disparado quando o envio do arquivo for realizado com sucesso. * > Por parâmetro será passado o objeto do retorno que é do tipo `HttpResponse`. */ onSuccess: EventEmitter; /** * @optional * * @description * * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da *tag* `form`. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` * */ ngModelChange: EventEmitter; allowedExtensions: string; currentFiles: Array; canHandleDirectory: boolean; displayAdditionalHelp: boolean; onModelChange: any; protected extensionNotAllowed: number; protected quantityNotAllowed: number; protected sizeNotAllowed: number; protected onModelTouched: any; private _directory?; private _disabled?; private _dragDrop?; private _fileRestrictions?; private _formField?; private _hideRestrictionsInfo?; private _hideSelectButton?; private _hideSendButton?; private _isMultiple?; private _literals?; private _loading; private _required?; private _size?; private _initialSize?; private readonly language; private validatorChange; /** * @optional * * @description * * Permite a seleção de diretórios contendo um ou mais arquivos para envio. * * > A habilitação desta propriedade se restringe apenas à seleção de diretórios. * * > Definição não suportada pelo browser **Internet Explorer**, todavia será possível a seleção de arquivos padrão. * * @default `false` */ set directory(value: boolean); get directory(): boolean; /** * @optional * * @description * * Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos * automaticamente. * * > Recomendamos utilizar apenas um `po-upload` com esta funcionalidade por tela. * * @default `false` */ set dragDrop(value: boolean); get dragDrop(): boolean; /** * @optional * * @description * * Oculta visualmente as informações de restrições para o upload. * * @default `false` */ set hideRestrictionsInfo(value: boolean); get hideRestrictionsInfo(): boolean; /** * @optional * * @description * * Omite o botão de seleção de arquivos. * * > Caso o valor definido seja `true`, caberá ao desenvolvedor a responsabilidade * pela chamada do método `selectFiles()` para seleção de arquivos. * * @default `false` */ set hideSelectButton(value: boolean); get hideSelectButton(): boolean; /** * @optional * * @description * * Omite o botão de envio de arquivos. * * > Caso o valor definido seja `true`, caberá ao desenvolvedor a responsabilidade * pela chamada do método `sendFiles()` para envio do(s) arquivo(s) selecionado(s). * * @default `false` */ set hideSendButton(value: boolean); get hideSendButton(): boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-upload`. * * Existem duas maneiras de customizar o componente: * * - passando um objeto implementando a interface `PoUploadLiterals` com todas as literais disponíveis; * - passando apenas as literais que deseja customizar: * ``` * const customLiterals: PoUploadLiterals = { * folders: 'Pastas', * selectFile: 'Buscar arquivo', * startSending: 'Enviar' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente: * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do *browser* (pt, en, es, ru). */ set literals(value: PoUploadLiterals); get literals(): PoUploadLiterals; /** * @optional * * @description * * Objeto que segue a definição da interface `PoUploadFileRestrictions`, * que possibilita definir tamanho máximo/mínimo e extensão dos arquivos permitidos. */ set fileRestrictions(restrictions: PoUploadFileRestrictions); get fileRestrictions(): PoUploadFileRestrictions; /** * @optional * * @description * * Nome do campo de formulário que será enviado para o serviço informado na propriedade `p-url`. * * @default `files` */ set formField(value: string); get formField(): string; /** * @optional * * @description * * Indica que o campo será desabilitado. */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no botão `Selecionar arquivo`, à esquerda do texto, sinalizando que uma operação está em andamento. * * > Incompatível com `p-drag-drop` e `p-hide-select-button`, pois o estado de loading depende da exibição do botão `Selecionar arquivo`. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Define se pode selecionar mais de um arquivo. * * > Se utilizada a `p-directory`, habilita-se automaticamente esta propriedade. */ set isMultiple(value: boolean); get isMultiple(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho e as ações do componente: * - `small`: altura do button como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do button como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; constructor(uploadService: PoUploadService, languageService: PoLanguageService, cd: ChangeDetectorRef); protected onThemeChange(): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(model: any): void; protected isExceededFileLimit(currentFilesLength: number): boolean; protected parseFiles(files: Array): Array; protected validateModel(model: any): void; private checkRestrictions; private existsFileSameName; private getUploadService; private insertFileInFiles; private isAllowedExtension; private setAllowedExtensions; private initRestrictions; private updateExistsFileInFiles; private applySizeBasedOnA11y; abstract sendFeedback(file?: any): void; abstract setDirectoryAttribute(value: boolean): any; }