@po-ui/ng-components 20.5.0 → 20.6.0

package/index.d.ts

@@ -18576,6 +18576,20 @@ interface PoUploadLiterals {
     errorOccurred?: string;
     /** Texto a ser exibido quando o envio do arquivo for realizado com sucesso. */
     sentWithSuccess?: string;
+    /** Texto a ser exibido no container de informação quando o estado for de sucesso. */
+    doneText?: string;
+    /** Texto a ser exibido no container de informação quando o estado for enviando. */
+    uploadingText?: string;
+    /** Texto de Tente novamente ao ocorrer erro ao enviar. */
+    tryAgain?: string;
+    /** Texto do leitor de tela ao focar no ícone de fechar. */
+    close?: string;
+    /** Título do modal de pré-visualizar. */
+    preview?: string;
+    /** Texto do leitor da miniatura da imagem. */
+    thumbnail?: string;
+    /** Texto do botão padrão do modal de pré-visualizar. */
+    continue?: string;
 }
 
 declare enum PoUploadStatus {
@@ -18594,6 +18608,12 @@ declare class PoUploadFile {
     size: number;
     displayName?: string;
     percent?: number;
+    sizeNotAllowed?: boolean;
+    extensionNotAllowed?: boolean;
+    hideDoneContent?: boolean;
+    errorMessage?: string;
+    thumbnailUrl?: string;
+    imageError?: boolean;
     constructor(file: any);
     private getExtension;
     private generateUUID;
@@ -18648,6 +18668,44 @@ declare class PoUploadService extends PoUploadBaseService {
  *  - 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                                      |
+ * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **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)`                       |
  */
 declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Validator {
     protected uploadService: PoUploadService;
@@ -18750,6 +18808,19 @@ declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Va
      * @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<string>;
@@ -18848,6 +18919,38 @@ declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Va
      * ```
      */
     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
+     * <po-upload
+     *  [p-custom-modal-actions]="customActions"
+     * </po-upload>
+     * ```
+     *
+     * ```typescript
+     * customActions:  Array<PoModalAction> = [
+     *  { label: 'Confirmar', action: this.confirmModal.bind(this) },
+     *  { label: 'Cancelar', action: this.closeModal.bind(this) }
+     *];
+     *
+     * ```
+     */
+    customModalActions?: Array<PoModalAction>;
     /**
      * @optional
      *
@@ -18918,6 +19021,33 @@ declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Va
      * ```
      */
     onUpload: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao clicar no ícone de fechar.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onCancel: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao abrir o modal de pré-visualização.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onOpenModalPreview: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao clicar no ícone de remover.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onRemove: EventEmitter<any>;
     /**
      * @optional
      *
@@ -19169,10 +19299,10 @@ declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Va
     private setAllowedExtensions;
     private initRestrictions;
     private updateExistsFileInFiles;
-    abstract sendFeedback(): void;
+    abstract sendFeedback(file?: any): void;
     abstract setDirectoryAttribute(value: boolean): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoUploadBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoUploadBaseComponent, never, never, { "additionalHelpEventTrigger": { "alias": "additionalHelpEventTrigger"; "required": false; }; "additionalHelpTooltip": { "alias": "p-additional-help-tooltip"; "required": false; }; "appendBox": { "alias": "p-append-in-body"; "required": false; }; "autoFocus": { "alias": "p-auto-focus"; "required": false; }; "dragDropHeight": { "alias": "p-drag-drop-height"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "help": { "alias": "p-help"; "required": false; }; "url": { "alias": "p-url"; "required": false; }; "name": { "alias": "name"; "required": false; }; "autoUpload": { "alias": "p-auto-upload"; "required": false; }; "disabledRemoveFile": { "alias": "p-disabled-remove-file"; "required": false; }; "optional": { "alias": "p-optional"; "required": false; }; "headers": { "alias": "p-headers"; "required": false; }; "requiredUrl": { "alias": "p-required-url"; "required": false; }; "poHelperComponent": { "alias": "p-helper"; "required": false; "isSignal": true; }; "labelTextWrap": { "alias": "p-label-text-wrap"; "required": false; "isSignal": true; }; "customAction": { "alias": "p-custom-action"; "required": false; }; "directory": { "alias": "p-directory"; "required": false; }; "dragDrop": { "alias": "p-drag-drop"; "required": false; }; "hideRestrictionsInfo": { "alias": "p-hide-restrictions-info"; "required": false; }; "hideSelectButton": { "alias": "p-hide-select-button"; "required": false; }; "hideSendButton": { "alias": "p-hide-send-button"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "fileRestrictions": { "alias": "p-restrictions"; "required": false; }; "formField": { "alias": "p-form-field"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "isMultiple": { "alias": "p-multiple"; "required": false; }; "required": { "alias": "p-required"; "required": false; }; "showRequired": { "alias": "p-show-required"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; }, { "additionalHelp": "p-additional-help"; "customActionClick": "p-custom-action-click"; "keydown": "p-keydown"; "onUpload": "p-upload"; "onError": "p-error"; "onSuccess": "p-success"; "ngModelChange": "ngModelChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoUploadBaseComponent, never, never, { "additionalHelpEventTrigger": { "alias": "additionalHelpEventTrigger"; "required": false; }; "additionalHelpTooltip": { "alias": "p-additional-help-tooltip"; "required": false; }; "appendBox": { "alias": "p-append-in-body"; "required": false; }; "autoFocus": { "alias": "p-auto-focus"; "required": false; }; "dragDropHeight": { "alias": "p-drag-drop-height"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "help": { "alias": "p-help"; "required": false; }; "url": { "alias": "p-url"; "required": false; }; "name": { "alias": "name"; "required": false; }; "autoUpload": { "alias": "p-auto-upload"; "required": false; }; "disabledRemoveFile": { "alias": "p-disabled-remove-file"; "required": false; }; "optional": { "alias": "p-optional"; "required": false; }; "showThumbnail": { "alias": "p-show-thumbnail"; "required": false; }; "headers": { "alias": "p-headers"; "required": false; }; "requiredUrl": { "alias": "p-required-url"; "required": false; }; "poHelperComponent": { "alias": "p-helper"; "required": false; "isSignal": true; }; "labelTextWrap": { "alias": "p-label-text-wrap"; "required": false; "isSignal": true; }; "customAction": { "alias": "p-custom-action"; "required": false; }; "customModalActions": { "alias": "p-custom-modal-actions"; "required": false; }; "directory": { "alias": "p-directory"; "required": false; }; "dragDrop": { "alias": "p-drag-drop"; "required": false; }; "hideRestrictionsInfo": { "alias": "p-hide-restrictions-info"; "required": false; }; "hideSelectButton": { "alias": "p-hide-select-button"; "required": false; }; "hideSendButton": { "alias": "p-hide-send-button"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "fileRestrictions": { "alias": "p-restrictions"; "required": false; }; "formField": { "alias": "p-form-field"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "isMultiple": { "alias": "p-multiple"; "required": false; }; "required": { "alias": "p-required"; "required": false; }; "showRequired": { "alias": "p-show-required"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; }, { "additionalHelp": "p-additional-help"; "customActionClick": "p-custom-action-click"; "keydown": "p-keydown"; "onUpload": "p-upload"; "onCancel": "p-cancel"; "onOpenModalPreview": "p-open-modal-preview"; "onRemove": "p-remove"; "onError": "p-error"; "onSuccess": "p-success"; "ngModelChange": "ngModelChange"; }, never, never, true, never>;
     static ngAcceptInputType_appendBox: any;
     static ngAcceptInputType_autoFocus: any;
     static ngAcceptInputType_disabledRemoveFile: any;
@@ -19208,14 +19338,20 @@ declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Va
  *   <file name="sample-po-upload-download/sample-po-upload-download.component.html"> </file>
  *   <file name="sample-po-upload-download/sample-po-upload-download.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-upload-preview" title="PO Upload - with Preview">
+ *   <file name="sample-po-upload-preview/sample-po-upload-preview.component.html"> </file>
+ *   <file name="sample-po-upload-preview/sample-po-upload-preview.component.ts"> </file>
+ * </example>
  */
-declare class PoUploadComponent extends PoUploadBaseComponent implements AfterViewInit {
+declare class PoUploadComponent extends PoUploadBaseComponent implements AfterViewInit, OnChanges {
     renderer: Renderer2;
     private i18nPipe;
     private notification;
     private inputFile;
     private poUploadDragDropComponent;
     uploadButton: PoButtonComponent;
+    modalComponent: PoModalComponent;
     id: string;
     infoByUploadStatus: {
         [key: string]: {
@@ -19228,6 +19364,12 @@ declare class PoUploadComponent extends PoUploadBaseComponent implements AfterVi
         2: PoProgressStatus;
     };
     private calledByCleanInputValue;
+    protected modalPrimaryAction: PoModalAction;
+    protected modalSecondaryAction: PoModalAction;
+    protected errorMessage: string;
+    protected tooltipTitle: string;
+    protected modalImageUrl: string;
+    protected errorModalImage: boolean;
     constructor();
     get displayDragDrop(): boolean;
     get displaySendButton(): boolean;
@@ -19237,7 +19379,8 @@ declare class PoUploadComponent extends PoUploadBaseComponent implements AfterVi
     get hasFileNotUploaded(): boolean;
     get isDisabled(): boolean;
     get maxFiles(): number;
-    cancel(file: PoUploadFile): void;
+    cancel(file: PoUploadFile, keydown?: KeyboardEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     /** Método responsável por **limpar** o(s) arquivo(s) selecionado(s). */
     clear(): void;
@@ -19267,10 +19410,15 @@ declare class PoUploadComponent extends PoUploadBaseComponent implements AfterVi
     onFileChange(event: any): void;
     onFileChangeDragDrop(files: any): void;
     onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Método responsável por fechar o modal.
+     */
+    closeModal(): void;
+    openModal(file: PoUploadFile, keydown?: KeyboardEvent): void;
     removeFile(file: any): void;
     /** Método responsável por **abrir** a janela para seleção de arquivo(s). */
     selectFiles(): void;
-    sendFeedback(): void;
+    sendFeedback(file?: any): void;
     /** Método responsável por **enviar** o(s) arquivo(s) selecionado(s). */
     sendFiles(): void;
     setDirectoryAttribute(canHandleDirectory: boolean): void;
@@ -19316,11 +19464,16 @@ declare class PoUploadComponent extends PoUploadBaseComponent implements AfterVi
         hideAdditionalHelp: boolean;
         helperSettings?: any;
     };
+    protected actionIsDisabled(action: any): any;
+    protected isActionVisible(action: any): boolean;
+    protected onImageError(file: any): void;
+    protected showTooltipText(e: MouseEvent, text: string): void;
     private cleanInputValue;
     private isAdditionalHelpEventTriggered;
     private isUploadButtonFocused;
     private responseHandler;
     private setPipeArguments;
+    private setPrimaryActionModal;
     private stopUploadHandler;
     private updateFiles;
     private updateModel;
@@ -20965,7 +21118,7 @@ declare class PoServicesModule {
  */
 declare class PoFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoFieldModule, [typeof PoComboComponent, typeof PoComboOptionTemplateDirective, typeof PoMultiselectOptionTemplateDirective, typeof PoDecimalComponent, typeof PoDatepickerRangeComponent, typeof PoEmailComponent, typeof PoInputComponent, typeof PoLoginComponent, typeof PoLookupComponent, typeof PoLookupModalComponent, typeof PoMultiselectComponent, typeof PoMultiselectDropdownComponent, typeof PoNumberComponent, typeof PoPasswordComponent, typeof PoRichTextBodyComponent, typeof PoRichTextComponent, typeof PoRichTextImageModalComponent, typeof PoRichTextLinkModalComponent, typeof PoRichTextToolbarComponent, typeof PoSelectComponent, typeof PoTextareaComponent, typeof PoUploadComponent, typeof PoUploadDragDropComponent, typeof PoUploadDragDropDirective, typeof PoUploadDragDropAreaOverlayComponent, typeof PoUploadDragDropAreaComponent, typeof PoUploadFileRestrictionsComponent, typeof PoUrlComponent], [typeof i2.CommonModule, typeof i3$1.FormsModule, typeof i3$1.FormsModule, typeof i3.OverlayModule, typeof PoButtonGroupModule, typeof PoButtonModule, typeof PoCleanModule, typeof PoCalendarModule, typeof PoCheckboxGroupModule, typeof PoRadioGroupModule, typeof PoContainerModule, typeof PoDatepickerModule, typeof PoDisclaimerGroupModule, typeof PoDisclaimerModule, typeof PoFieldContainerModule, typeof PoLoadingModule, typeof PoModalModule, typeof PoProgressModule, typeof PoServicesModule, typeof PoTableModule, typeof PoTooltipModule, typeof PoIconModule, typeof PoCheckboxModule, typeof PoRadioModule, typeof PoLabelModule, typeof PoListBoxModule, typeof PoSwitchModule, typeof PoTagModule, typeof PoHelperModule], [typeof PoCheckboxGroupModule, typeof PoRadioGroupModule, typeof PoCleanModule, typeof PoDatepickerModule, typeof PoComboComponent, typeof PoComboOptionTemplateDirective, typeof PoMultiselectOptionTemplateDirective, typeof PoDecimalComponent, typeof PoDatepickerRangeComponent, typeof PoEmailComponent, typeof PoFieldContainerModule, typeof PoInputComponent, typeof PoLoginComponent, typeof PoLookupComponent, typeof PoLookupModalComponent, typeof PoMultiselectComponent, typeof PoNumberComponent, typeof PoPasswordComponent, typeof PoRichTextComponent, typeof PoSelectComponent, typeof PoTextareaComponent, typeof PoUploadComponent, typeof PoUrlComponent, typeof PoCheckboxModule, typeof PoRadioModule, typeof PoLabelModule, typeof PoSwitchModule, typeof PoTagModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoFieldModule, [typeof PoComboComponent, typeof PoComboOptionTemplateDirective, typeof PoMultiselectOptionTemplateDirective, typeof PoDecimalComponent, typeof PoDatepickerRangeComponent, typeof PoEmailComponent, typeof PoInputComponent, typeof PoLoginComponent, typeof PoLookupComponent, typeof PoLookupModalComponent, typeof PoMultiselectComponent, typeof PoMultiselectDropdownComponent, typeof PoNumberComponent, typeof PoPasswordComponent, typeof PoRichTextBodyComponent, typeof PoRichTextComponent, typeof PoRichTextImageModalComponent, typeof PoRichTextLinkModalComponent, typeof PoRichTextToolbarComponent, typeof PoSelectComponent, typeof PoTextareaComponent, typeof PoUploadComponent, typeof PoUploadDragDropComponent, typeof PoUploadDragDropDirective, typeof PoUploadDragDropAreaOverlayComponent, typeof PoUploadDragDropAreaComponent, typeof PoUploadFileRestrictionsComponent, typeof PoUrlComponent], [typeof i2.CommonModule, typeof i3$1.FormsModule, typeof i3$1.FormsModule, typeof i3.OverlayModule, typeof PoButtonGroupModule, typeof PoButtonModule, typeof PoCleanModule, typeof PoCalendarModule, typeof PoCheckboxGroupModule, typeof PoRadioGroupModule, typeof PoContainerModule, typeof PoDatepickerModule, typeof PoDisclaimerGroupModule, typeof PoDisclaimerModule, typeof PoFieldContainerModule, typeof PoLoadingModule, typeof PoModalModule, typeof PoProgressModule, typeof PoServicesModule, typeof PoTableModule, typeof PoTooltipModule, typeof PoIconModule, typeof PoCheckboxModule, typeof PoRadioModule, typeof PoLabelModule, typeof PoLinkModule, typeof PoListBoxModule, typeof PoSwitchModule, typeof PoTagModule, typeof PoHelperModule], [typeof PoCheckboxGroupModule, typeof PoRadioGroupModule, typeof PoCleanModule, typeof PoDatepickerModule, typeof PoComboComponent, typeof PoComboOptionTemplateDirective, typeof PoMultiselectOptionTemplateDirective, typeof PoDecimalComponent, typeof PoDatepickerRangeComponent, typeof PoEmailComponent, typeof PoFieldContainerModule, typeof PoInputComponent, typeof PoLoginComponent, typeof PoLookupComponent, typeof PoLookupModalComponent, typeof PoMultiselectComponent, typeof PoNumberComponent, typeof PoPasswordComponent, typeof PoRichTextComponent, typeof PoSelectComponent, typeof PoTextareaComponent, typeof PoUploadComponent, typeof PoUrlComponent, typeof PoCheckboxModule, typeof PoRadioModule, typeof PoLabelModule, typeof PoSwitchModule, typeof PoTagModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoFieldModule>;
 }
 
@@ -21844,6 +21997,14 @@ interface PoDynamicFormField extends PoDynamicField {
      * - Não possuir `p-help` e/ou `p-label`.
      */
     showRequired?: boolean;
+    /**
+     * Exibe a pré-visualização de imagens ao anexá-las.
+     *
+     * > Propriedade funciona apenas em arquivos de formato de imagem (`.png`, `.jpg`, `.jpeg` e `.gif`).
+     *
+     * **Componente compatível**: `po-upload`
+     */
+    showThumbnail?: boolean;
     /**
      * 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.

package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts

@@ -646,6 +646,14 @@ export interface PoDynamicFormField extends PoDynamicField {
      * - Não possuir `p-help` e/ou `p-label`.
      */
     showRequired?: boolean;
+    /**
+     * Exibe a pré-visualização de imagens ao anexá-las.
+     *
+     * > Propriedade funciona apenas em arquivos de formato de imagem (`.png`, `.jpg`, `.jpeg` e `.gif`).
+     *
+     * **Componente compatível**: `po-upload`
+     */
+    showThumbnail?: boolean;
     /**
      * 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.

package/lib/components/po-field/po-upload/interfaces/po-upload-literals.interface.d.ts

@@ -42,4 +42,18 @@ export interface PoUploadLiterals {
     errorOccurred?: string;
     /** Texto a ser exibido quando o envio do arquivo for realizado com sucesso. */
     sentWithSuccess?: string;
+    /** Texto a ser exibido no container de informação quando o estado for de sucesso. */
+    doneText?: string;
+    /** Texto a ser exibido no container de informação quando o estado for enviando. */
+    uploadingText?: string;
+    /** Texto de Tente novamente ao ocorrer erro ao enviar. */
+    tryAgain?: string;
+    /** Texto do leitor de tela ao focar no ícone de fechar. */
+    close?: string;
+    /** Título do modal de pré-visualizar. */
+    preview?: string;
+    /** Texto do leitor da miniatura da imagem. */
+    thumbnail?: string;
+    /** Texto do botão padrão do modal de pré-visualizar. */
+    continue?: string;
 }

package/lib/components/po-field/po-upload/po-upload-base.component.d.ts

@@ -1,6 +1,7 @@
 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';
@@ -26,6 +27,44 @@ export declare const poUploadLiteralsDefault: {
  *  - 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                                      |
+ * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **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;
@@ -128,6 +167,19 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
      * @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<string>;
@@ -226,6 +278,38 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
      * ```
      */
     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
+     * <po-upload
+     *  [p-custom-modal-actions]="customActions"
+     * </po-upload>
+     * ```
+     *
+     * ```typescript
+     * customActions:  Array<PoModalAction> = [
+     *  { label: 'Confirmar', action: this.confirmModal.bind(this) },
+     *  { label: 'Cancelar', action: this.closeModal.bind(this) }
+     *];
+     *
+     * ```
+     */
+    customModalActions?: Array<PoModalAction>;
     /**
      * @optional
      *
@@ -296,6 +380,33 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
      * ```
      */
     onUpload: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao clicar no ícone de fechar.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onCancel: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao abrir o modal de pré-visualização.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onOpenModalPreview: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao clicar no ícone de remover.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onRemove: EventEmitter<any>;
     /**
      * @optional
      *
@@ -547,6 +658,6 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
     private setAllowedExtensions;
     private initRestrictions;
     private updateExistsFileInFiles;
-    abstract sendFeedback(): void;
+    abstract sendFeedback(file?: any): void;
     abstract setDirectoryAttribute(value: boolean): any;
 }

package/lib/components/po-field/po-upload/po-upload-file.d.ts

@@ -8,6 +8,12 @@ export declare class PoUploadFile {
     size: number;
     displayName?: string;
     percent?: number;
+    sizeNotAllowed?: boolean;
+    extensionNotAllowed?: boolean;
+    hideDoneContent?: boolean;
+    errorMessage?: string;
+    thumbnailUrl?: string;
+    imageError?: boolean;
     constructor(file: any);
     private getExtension;
     private generateUUID;

package/lib/components/po-field/po-upload/po-upload.component.d.ts

@@ -1,6 +1,7 @@
-import { AfterViewInit, Renderer2 } from '@angular/core';
+import { AfterViewInit, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 import { PoProgressStatus } from '../../po-progress/enums/po-progress-status.enum';
 import { PoButtonComponent } from './../../po-button/po-button.component';
+import { PoModalAction, PoModalComponent } from '../../po-modal';
 import { PoUploadBaseComponent } from './po-upload-base.component';
 import { PoUploadFile } from './po-upload-file';
 import { PoUploadStatus } from './po-upload-status.enum';
@@ -33,14 +34,20 @@ import { PoUploadStatus } from './po-upload-status.enum';
  *   <file name="sample-po-upload-download/sample-po-upload-download.component.html"> </file>
  *   <file name="sample-po-upload-download/sample-po-upload-download.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-upload-preview" title="PO Upload - with Preview">
+ *   <file name="sample-po-upload-preview/sample-po-upload-preview.component.html"> </file>
+ *   <file name="sample-po-upload-preview/sample-po-upload-preview.component.ts"> </file>
+ * </example>
  */
-export declare class PoUploadComponent extends PoUploadBaseComponent implements AfterViewInit {
+export declare class PoUploadComponent extends PoUploadBaseComponent implements AfterViewInit, OnChanges {
     renderer: Renderer2;
     private i18nPipe;
     private notification;
     private inputFile;
     private poUploadDragDropComponent;
     uploadButton: PoButtonComponent;
+    modalComponent: PoModalComponent;
     id: string;
     infoByUploadStatus: {
         [key: string]: {
@@ -53,6 +60,12 @@ export declare class PoUploadComponent extends PoUploadBaseComponent implements
         2: PoProgressStatus;
     };
     private calledByCleanInputValue;
+    protected modalPrimaryAction: PoModalAction;
+    protected modalSecondaryAction: PoModalAction;
+    protected errorMessage: string;
+    protected tooltipTitle: string;
+    protected modalImageUrl: string;
+    protected errorModalImage: boolean;
     constructor();
     get displayDragDrop(): boolean;
     get displaySendButton(): boolean;
@@ -62,7 +75,8 @@ export declare class PoUploadComponent extends PoUploadBaseComponent implements
     get hasFileNotUploaded(): boolean;
     get isDisabled(): boolean;
     get maxFiles(): number;
-    cancel(file: PoUploadFile): void;
+    cancel(file: PoUploadFile, keydown?: KeyboardEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     /** Método responsável por **limpar** o(s) arquivo(s) selecionado(s). */
     clear(): void;
@@ -92,10 +106,15 @@ export declare class PoUploadComponent extends PoUploadBaseComponent implements
     onFileChange(event: any): void;
     onFileChangeDragDrop(files: any): void;
     onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Método responsável por fechar o modal.
+     */
+    closeModal(): void;
+    openModal(file: PoUploadFile, keydown?: KeyboardEvent): void;
     removeFile(file: any): void;
     /** Método responsável por **abrir** a janela para seleção de arquivo(s). */
     selectFiles(): void;
-    sendFeedback(): void;
+    sendFeedback(file?: any): void;
     /** Método responsável por **enviar** o(s) arquivo(s) selecionado(s). */
     sendFiles(): void;
     setDirectoryAttribute(canHandleDirectory: boolean): void;
@@ -141,11 +160,16 @@ export declare class PoUploadComponent extends PoUploadBaseComponent implements
         hideAdditionalHelp: boolean;
         helperSettings?: any;
     };
+    protected actionIsDisabled(action: any): any;
+    protected isActionVisible(action: any): boolean;
+    protected onImageError(file: any): void;
+    protected showTooltipText(e: MouseEvent, text: string): void;
     private cleanInputValue;
     private isAdditionalHelpEventTriggered;
     private isUploadButtonFocused;
     private responseHandler;
     private setPipeArguments;
+    private setPrimaryActionModal;
     private stopUploadHandler;
     private updateFiles;
     private updateModel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "20.5.0",
+  "version": "20.6.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~20.0.3",
-    "@po-ui/style": "20.5.0",
-    "@po-ui/ng-schematics": "20.5.0",
+    "@po-ui/style": "20.6.0",
+    "@po-ui/ng-schematics": "20.6.0",
     "echarts": "^5.6.0",
     "tslib": "^2.3.0"
   },
@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^20",
     "@angular/router": "^20",
     "@angular-devkit/schematics": "^20",
-    "@po-ui/style": "20.5.0",
+    "@po-ui/style": "20.6.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 }
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '20.5.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '20.6.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };

package/schematics/ng-update/v14/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('20.5.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('20.6.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v15/index.js

@@ -11,7 +11,7 @@ const changes_1 = require("./changes");
 const httpClientModuleName = 'HttpClientModule';
 const httpClientModuleSourcePath = '@angular/common/http';
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('20.5.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('20.6.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {