@po-ui/ng-components 19.30.0 → 19.32.0

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

@@ -364,15 +364,15 @@ export interface PoDynamicFormField extends PoDynamicField {
     placeholder?: string;
     /**
      * Define a localidade a ser utilizada no componente.
-     * Por padrão o valor será configurado segundo a o módulo [`I18n`](documentation/po-i18n)
+     * Por padrão o valor será configurado segundo o módulo [`I18n`](documentation/po-i18n)
      *
      * Exemplo de utilização:
-     * ``
+     * ```
      * [
      *   { property: 'birthday', locale: 'en', type: 'date' },
      *   { property: 'wage', locale: 'ru', type: 'currency' }
      * ];
-     * ``
+     * ```
      *
      * > Para ver quais linguagens suportadas acesse [`I18n`](documentation/po-i18n)
      * > A propriedade será repassada para os componentes que suportam a mesma.
@@ -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-field.module.d.ts

@@ -51,10 +51,11 @@ import * as i49 from "../po-icon/po-icon.module";
 import * as i50 from "./po-checkbox/po-checkbox.module";
 import * as i51 from "./po-radio/po-radio.module";
 import * as i52 from "../po-label/po-label.module";
-import * as i53 from "../po-listbox/po-listbox.module";
-import * as i54 from "./po-switch/po-switch.module";
-import * as i55 from "../po-tag/po-tag.module";
-import * as i56 from "../po-helper/po-helper.module";
+import * as i53 from "../po-link/po-link.module";
+import * as i54 from "../po-listbox/po-listbox.module";
+import * as i55 from "./po-switch/po-switch.module";
+import * as i56 from "../po-tag/po-tag.module";
+import * as i57 from "../po-helper/po-helper.module";
 /**
  * @description
  *
@@ -67,6 +68,6 @@ import * as i56 from "../po-helper/po-helper.module";
  */
 export declare class PoFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoFieldModule, [typeof i1.PoComboComponent, typeof i2.PoComboOptionTemplateDirective, typeof i3.PoMultiselectOptionTemplateDirective, typeof i4.PoDecimalComponent, typeof i5.PoDatepickerRangeComponent, typeof i6.PoEmailComponent, typeof i7.PoInputComponent, typeof i8.PoLoginComponent, typeof i9.PoLookupComponent, typeof i10.PoLookupModalComponent, typeof i11.PoMultiselectComponent, typeof i12.PoMultiselectDropdownComponent, typeof i13.PoNumberComponent, typeof i14.PoPasswordComponent, typeof i15.PoRichTextBodyComponent, typeof i16.PoRichTextComponent, typeof i17.PoRichTextImageModalComponent, typeof i18.PoRichTextLinkModalComponent, typeof i19.PoRichTextToolbarComponent, typeof i20.PoSelectComponent, typeof i21.PoTextareaComponent, typeof i22.PoUploadComponent, typeof i23.PoUploadDragDropComponent, typeof i24.PoUploadDragDropDirective, typeof i25.PoUploadDragDropAreaOverlayComponent, typeof i26.PoUploadDragDropAreaComponent, typeof i27.PoUploadFileRestrictionsComponent, typeof i28.PoUrlComponent], [typeof i29.CommonModule, typeof i30.FormsModule, typeof i30.FormsModule, typeof i31.OverlayModule, typeof i32.PoButtonGroupModule, typeof i33.PoButtonModule, typeof i34.PoCleanModule, typeof i35.PoCalendarModule, typeof i36.PoCheckboxGroupModule, typeof i37.PoRadioGroupModule, typeof i38.PoContainerModule, typeof i39.PoDatepickerModule, typeof i40.PoDisclaimerGroupModule, typeof i41.PoDisclaimerModule, typeof i42.PoFieldContainerModule, typeof i43.PoLoadingModule, typeof i44.PoModalModule, typeof i45.PoProgressModule, typeof i46.PoServicesModule, typeof i47.PoTableModule, typeof i48.PoTooltipModule, typeof i49.PoIconModule, typeof i50.PoCheckboxModule, typeof i51.PoRadioModule, typeof i52.PoLabelModule, typeof i53.PoListBoxModule, typeof i54.PoSwitchModule, typeof i55.PoTagModule, typeof i56.PoHelperModule], [typeof i36.PoCheckboxGroupModule, typeof i37.PoRadioGroupModule, typeof i34.PoCleanModule, typeof i39.PoDatepickerModule, typeof i1.PoComboComponent, typeof i2.PoComboOptionTemplateDirective, typeof i3.PoMultiselectOptionTemplateDirective, typeof i4.PoDecimalComponent, typeof i5.PoDatepickerRangeComponent, typeof i6.PoEmailComponent, typeof i42.PoFieldContainerModule, typeof i7.PoInputComponent, typeof i8.PoLoginComponent, typeof i9.PoLookupComponent, typeof i10.PoLookupModalComponent, typeof i11.PoMultiselectComponent, typeof i13.PoNumberComponent, typeof i14.PoPasswordComponent, typeof i16.PoRichTextComponent, typeof i20.PoSelectComponent, typeof i21.PoTextareaComponent, typeof i22.PoUploadComponent, typeof i28.PoUrlComponent, typeof i50.PoCheckboxModule, typeof i51.PoRadioModule, typeof i52.PoLabelModule, typeof i54.PoSwitchModule, typeof i55.PoTagModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoFieldModule, [typeof i1.PoComboComponent, typeof i2.PoComboOptionTemplateDirective, typeof i3.PoMultiselectOptionTemplateDirective, typeof i4.PoDecimalComponent, typeof i5.PoDatepickerRangeComponent, typeof i6.PoEmailComponent, typeof i7.PoInputComponent, typeof i8.PoLoginComponent, typeof i9.PoLookupComponent, typeof i10.PoLookupModalComponent, typeof i11.PoMultiselectComponent, typeof i12.PoMultiselectDropdownComponent, typeof i13.PoNumberComponent, typeof i14.PoPasswordComponent, typeof i15.PoRichTextBodyComponent, typeof i16.PoRichTextComponent, typeof i17.PoRichTextImageModalComponent, typeof i18.PoRichTextLinkModalComponent, typeof i19.PoRichTextToolbarComponent, typeof i20.PoSelectComponent, typeof i21.PoTextareaComponent, typeof i22.PoUploadComponent, typeof i23.PoUploadDragDropComponent, typeof i24.PoUploadDragDropDirective, typeof i25.PoUploadDragDropAreaOverlayComponent, typeof i26.PoUploadDragDropAreaComponent, typeof i27.PoUploadFileRestrictionsComponent, typeof i28.PoUrlComponent], [typeof i29.CommonModule, typeof i30.FormsModule, typeof i30.FormsModule, typeof i31.OverlayModule, typeof i32.PoButtonGroupModule, typeof i33.PoButtonModule, typeof i34.PoCleanModule, typeof i35.PoCalendarModule, typeof i36.PoCheckboxGroupModule, typeof i37.PoRadioGroupModule, typeof i38.PoContainerModule, typeof i39.PoDatepickerModule, typeof i40.PoDisclaimerGroupModule, typeof i41.PoDisclaimerModule, typeof i42.PoFieldContainerModule, typeof i43.PoLoadingModule, typeof i44.PoModalModule, typeof i45.PoProgressModule, typeof i46.PoServicesModule, typeof i47.PoTableModule, typeof i48.PoTooltipModule, typeof i49.PoIconModule, typeof i50.PoCheckboxModule, typeof i51.PoRadioModule, typeof i52.PoLabelModule, typeof i53.PoLinkModule, typeof i54.PoListBoxModule, typeof i55.PoSwitchModule, typeof i56.PoTagModule, typeof i57.PoHelperModule], [typeof i36.PoCheckboxGroupModule, typeof i37.PoRadioGroupModule, typeof i34.PoCleanModule, typeof i39.PoDatepickerModule, typeof i1.PoComboComponent, typeof i2.PoComboOptionTemplateDirective, typeof i3.PoMultiselectOptionTemplateDirective, typeof i4.PoDecimalComponent, typeof i5.PoDatepickerRangeComponent, typeof i6.PoEmailComponent, typeof i42.PoFieldContainerModule, typeof i7.PoInputComponent, typeof i8.PoLoginComponent, typeof i9.PoLookupComponent, typeof i10.PoLookupModalComponent, typeof i11.PoMultiselectComponent, typeof i13.PoNumberComponent, typeof i14.PoPasswordComponent, typeof i16.PoRichTextComponent, typeof i20.PoSelectComponent, typeof i21.PoTextareaComponent, typeof i22.PoUploadComponent, typeof i28.PoUrlComponent, typeof i50.PoCheckboxModule, typeof i51.PoRadioModule, typeof i52.PoLabelModule, typeof i55.PoSwitchModule, typeof i56.PoTagModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoFieldModule>;
 }

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';
@@ -27,6 +28,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;
@@ -129,6 +168,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>;
@@ -227,6 +279,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
      *
@@ -297,6 +381,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
      *
@@ -548,10 +659,10 @@ 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;
     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;

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';
@@ -34,14 +35,20 @@ import * as i0 from "@angular/core";
  *   <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]: {
@@ -54,6 +61,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;
@@ -63,7 +76,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;
@@ -93,10 +107,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;
@@ -142,11 +161,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/lib/components/po-table/interfaces/po-table-column.interface.d.ts

@@ -90,16 +90,16 @@ export interface PoTableColumn {
      */
     disabled?: Function;
     /**
-     * Formato de exibição do valor da coluna:
-     * - Formato para moeda (currency). Exemplos: 'BRL', 'USD'.
-     * - Formato para data (date): aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy),
-     * caso não seja informado um formato o mesmo será 'dd/MM/yyyy'. Exemplos: 'dd/MM/yyyy', 'dd-MM-yy', 'mm/dd/yyyy'.
-     * - Formato para horário (time): aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e
-     *  milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será
-     * 'HH:mm:ss'. Exemplos: 'HH:mm', 'HH:mm:ss.ffffff', 'HH:mm:ss.ff', 'mm:ss.fff'.
-     * - Formato para números (number): aceita um valor seguindo o padrão [**DecimalPipe**](https://angular.io/api/common/DecimalPipe)
-     *  para formatação, e caso não seja informado, o número será exibido na sua forma original. Exemplo:
-     *   - Com o valor de entrada: `50` e a valor para formatação: `'1.2-5'` o resultado será: `50.00`
+     * Formato de exibição do valor da coluna.
+     *
+     * | Formatação | Type da Coluna  | Descrição | Exemplos |
+     * |------------|-----------------|-----------|----------|
+     * | Monetário  | `currency`      | Formato para valores monetários. Informe o código da moeda (ISO 4217). | `'BRL'`, `'USD'`, `'EUR'`, `'RUB'` |
+     * | Data       | `date`          | Aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy), caso não seja informado um formato o mesmo será 'dd/MM/yyyy' | `'dd/MM/yyyy'`, `'dd-MM-yy'`, `'mm/dd/yyyy'` |
+     * | Hora       | `time`          | Aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será 'HH:mm:ss' | `'HH:mm'`, `'HH:mm:ss.ffffff'`, `'HH:mm:ss.ff'`, `'mm:ss.fff'` |
+     * | Número     | `number`        | Aceita um valor seguindo o padrão [**DecimalPipe**](https://angular.dev/api/common/DecimalPipe) para formatação, e caso não seja informado, o número será exibido na sua forma original. | `'1.2-5'` (ex.: `50` → `50.00`) |
+     *
+     * Observação: caso não seja informado um formato, o valor será exibido em sua forma original.
      */
     format?: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "19.30.0",
+  "version": "19.32.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~19.0.3",
-    "@po-ui/style": "19.30.0",
-    "@po-ui/ng-schematics": "19.30.0",
+    "@po-ui/style": "19.32.0",
+    "@po-ui/ng-schematics": "19.32.0",
     "echarts": "^5.6.0",
     "tslib": "^2.6.2"
   },
@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^19",
     "@angular/router": "^19",
     "@angular-devkit/schematics": "^19",
-    "@po-ui/style": "19.30.0",
+    "@po-ui/style": "19.32.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', '19.30.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.32.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)('19.30.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.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)('19.30.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v16/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)('19.30.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v17/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)('19.30.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

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

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.30.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('19.30.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

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

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.30.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('19.30.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

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

@@ -10,7 +10,7 @@ const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV2() {
     return (0, schematics_1.chain)([
-        updatePackageJson('19.30.0', changes_1.dependeciesChanges),
+        updatePackageJson('19.32.0', changes_1.dependeciesChanges),
         (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
         (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
         createUpgradeRule(),

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

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV3() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.30.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

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

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 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)('19.30.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

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

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 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)('19.30.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v6/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)('19.30.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {