@po-ui/ng-components 20.5.0 → 20.7.0

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

@@ -1,9 +1,11 @@
-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';
+import { PoHelperComponent } from '../../po-helper';
 /**
  * @docsExtends PoUploadBaseComponent
  *
@@ -33,14 +35,21 @@ 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;
+    helperEl?: PoHelperComponent;
     id: string;
     infoByUploadStatus: {
         [key: string]: {
@@ -53,6 +62,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 +77,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;
@@ -88,30 +104,27 @@ export declare class PoUploadComponent extends PoUploadBaseComponent implements
     getAdditionalHelpTooltip(): string;
     hasAnyFileUploading(files: Array<PoUploadFile>): boolean;
     isAllowCancelEvent(status: PoUploadStatus): status is PoUploadStatus.Uploading | PoUploadStatus.Error | PoUploadStatus.None;
-    onBlur(): void;
     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;
     /**
-     * Método que exibe `p-additionalHelpTooltip` ou executa a ação definida em `p-additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
      *
-     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco e com label visível.
-     * ```
-     * <po-upload
-     *  #upload
-     *  ...
-     *  p-additional-help-tooltip="Mensagem de ajuda complementar"
-     *  (p-keydown)="onKeyDown($event, upload)"
-     * ></po-upload>
-     * ```
+     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
+     *
      * ```
      * //Exemplo com p-label e p-helper
      * <po-upload
@@ -141,11 +154,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-field/po-url/po-url.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, OnDestroy } from '@angular/core';
+import { AfterViewInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { PoInputGeneric } from '../po-input-generic/po-input-generic';
 /**
@@ -26,7 +26,7 @@ import { PoInputGeneric } from '../po-input-generic/po-input-generic';
  * </example>
  *
  */
-export declare class PoUrlComponent extends PoInputGeneric implements AfterViewInit, OnDestroy {
+export declare class PoUrlComponent extends PoInputGeneric implements AfterViewInit, OnDestroy, OnChanges {
     id: string;
     icon: string;
     type: string;
@@ -36,6 +36,7 @@ export declare class PoUrlComponent extends PoInputGeneric implements AfterViewI
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     extraValidation(c: AbstractControl): {
         [key: string]: any;
     };

package/lib/components/po-helper/po-helper-base.component.d.ts

@@ -105,5 +105,16 @@ export declare class PoHelperBaseComponent {
      * @default `false`
      */
     disabled: import("@angular/core").InputSignal<boolean>;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define que o popover será inserido no body da página em vez do elemento definido em `p-target`. Essa opção pode
+     * ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o posicionamento
+     * correto do conteúdo próximo ao elemento.
+     */
+    appendBox: import("@angular/core").InputSignal<boolean>;
     private transformHelper;
 }

package/lib/components/po-helper/po-helper.component.d.ts

@@ -40,6 +40,7 @@ export declare class PoHelperComponent extends PoHelperBaseComponent implements
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     openHelperPopover(): void;
+    helperIsVisible(): boolean;
     closeHelperPopover(): void;
     emitClick(event: MouseEvent): void;
     onKeyDown(event: KeyboardEvent): void;

package/lib/components/po-info/po-info-base.component.d.ts

@@ -15,6 +15,7 @@ export declare class PoInfoBaseComponent {
     readonly poInfoOrientation: typeof PoInfoOrientation;
     private _labelSize;
     private _orientation;
+    private _size?;
     /**
      * @optional
      *
@@ -43,4 +44,18 @@ export declare class PoInfoBaseComponent {
      */
     set orientation(value: PoInfoOrientation);
     get orientation(): PoInfoOrientation;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente entre `small` ou `medium`.
+     *
+     * > 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;
 }

package/lib/components/po-loading/po-loading-base.component.d.ts

@@ -15,7 +15,7 @@ export declare const poLoadingLiteralsDefault: {
  * ou aguardando a resposta de alguma requisição.
  */
 export declare class PoLoadingBaseComponent {
-    private languageService;
+    protected languageService: PoLanguageService;
     private _text?;
     private _size?;
     /**
@@ -25,14 +25,17 @@ export declare class PoLoadingBaseComponent {
     get text(): string;
     /**
      * Define o tamanho do ícone.
-     *
-     * @default `lg`
-     *
      * Valores válidos:
      *  - `xs`: 16px
      *  - `sm`: 24px
      *  - `md`: 32px
      *  - `lg`: 80px
+     *
+     * > Em nível de acessibilidade **AA**, caso o valor de `p-size` não seja definido, o valor padrão será `sm`
+     * > quando o valor padrão dos componentes for configurado como `small` no
+     * > [serviço de tema](https://po-ui.io/documentation/po-theme).
+     *
+     * @default `lg`
      */
     set size(value: string);
     get size(): string;

package/lib/components/po-page/po-page-default/po-page-default-base.component.d.ts

@@ -18,14 +18,15 @@ export declare const poPageDefaultLiteralsDefault: {
  *
  * > 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                                    |
- * |----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
- * | **Default Values**                     |                                                       |                                                 |
- * | `--padding`                            | Espaçamento do componente                             | `var(--spacing-xs) var(--spacing-md)`           |
- * | `--gap`                                | Gap entre o header e o conteúdo                       | `var(--spacing-md)`                             |
- * | `--padding-top-header`                 | Espaçamento do topo do header                         | `var(--color-neutral-light-30)`                 |
- * | `--gap-actions`                        | Gap entre os botões de action                         | `var(--spacing-xs)`                             |
- * | `--padding-content`                    | Espaçamento do conteúdo                               | `var(--spacing-xs) var(--spacing-sm)`           |
+ * | Propriedade         | Descrição                                   | Valor Padrão                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 export declare abstract class PoPageDefaultBaseComponent {
     poPageContent: PoPageContentComponent;

package/lib/components/po-page/po-page-detail/po-page-detail-base.component.d.ts

@@ -14,6 +14,20 @@ export declare const poPageDetailLiteralsDefault: {
  *
  * O componente **po-page-detail** é utilizado como container principal para a tela de
  * detalhamento de um registro, tendo a possibilidade de usar as ações de "Voltar", "Editar" e "Remover".
+ *
+ * #### Tokens customizáveis
+ *
+ * > 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                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 export declare class PoPageDetailBaseComponent {
     poPageContent: PoPageContentComponent;

package/lib/components/po-page/po-page-edit/po-page-edit-base.component.d.ts

@@ -18,6 +18,20 @@ export declare const poPageEditLiteralsDefault: {
  * Os botões "Salvar" e "Salvar e Novo" podem ser habilitados/desabilitados utilizando a propriedade `p-disable-submit`.
  * Esta propriedade pode ser utilizada para desabilitar os botões caso exista um formulário inválido na página ou alguma
  * regra de negócio não tenha sido atendida.
+ *
+ * #### Tokens customizáveis
+ *
+ * > 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                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 export declare class PoPageEditBaseComponent {
     poPageContent: PoPageContentComponent;

package/lib/components/po-page/po-page-header/po-page-header-base.component.d.ts

@@ -10,6 +10,8 @@ import { PoBreadcrumb } from '../../po-breadcrumb/po-breadcrumb.interface';
 export declare class PoPageHeaderBaseComponent {
     /** Título da página. */
     title: string;
+    /** Define o tamanho dos componentes no header. */
+    size: string;
     /** Subtítulo da página. */
     subtitle: string;
     private _breadcrumb;

package/lib/components/po-page/po-page-list/po-page-list-base.component.d.ts

@@ -23,6 +23,20 @@ export declare const poPageListLiteralsDefault: {
  *
  * Para facilitar a manipulação e visualização dos filtros aplicados, é possível também utilizar o componente
  * [`po-disclaimer-group`](/documentation/po-disclaimer-group).
+ *
+ * #### Tokens customizáveis
+ *
+ * > 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                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 export declare abstract class PoPageListBaseComponent {
     poPageContent: PoPageContentComponent;

package/lib/components/po-popover/po-popover-base.component.d.ts

@@ -140,4 +140,16 @@ export declare class PoPopoverBaseComponent {
      */
     set trigger(value: string);
     get trigger(): string;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Permite a inclusão de classes CSS customizadas ao componente.
+     *
+     * Exemplo: `p-custom-classes="minha-classe-1 minha-classe-2"`.
+     *
+     */
+    customClasses: import("@angular/core").InputSignal<string>;
 }

package/lib/components/po-popover/po-popover.component.d.ts

@@ -31,7 +31,10 @@ export declare class PoPopoverComponent extends PoPopoverBaseComponent implement
     timeoutResize: any;
     targetElement: any;
     afterViewInitWasCalled: boolean;
+    private keydownTargetListener?;
+    private keydownPopoverListener?;
     eventListenerFunction: () => void;
+    private readonly tabbableSelector;
     constructor(renderer: Renderer2, poControlPosition: PoControlPositionService, cd: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -49,4 +52,12 @@ export declare class PoPopoverComponent extends PoPopoverBaseComponent implement
     private initEventListenerFunction;
     private removeListeners;
     private setElementsControlPosition;
+    private focusOnTarget;
+    private focusOnFirstFocusable;
+    private attachPopoverKeydown;
+    private isVisible;
+    private getTabbablesIn;
+    private getDocumentTabbables;
+    private focusNextAfterTarget;
+    private focusPrevBeforeTarget;
 }

package/lib/components/po-search/po-search-base.component.d.ts

@@ -328,6 +328,22 @@ export declare class PoSearchBaseComponent {
      * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
      */
     filteredItemsChange: EventEmitter<any[]>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento emitido quando o campo de entrada (input) recebe foco.
+     */
+    focusEvent: EventEmitter<any>;
+    /**
+     * @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<KeyboardEvent>;
     /**
      * @optional
      *

package/lib/components/po-search/po-search.component.d.ts

@@ -123,7 +123,7 @@ export declare class PoSearchComponent extends PoSearchBaseComponent implements
     getInputValue(): any;
     createDropdownFilterSelect(): void;
     isSelected(filterOption: PoSearchFilterSelect): boolean;
-    changeFilterSelect(filterOption: PoSearchFilterSelect): void;
+    changeFilterSelect(filterOption: PoSearchFilterSelect, focus?: boolean): void;
     handlerFooterActionListbox(): void;
     private openListboxFooterAction;
     private handlerPlaceholderListbox;

package/lib/components/po-table/enums/po-table-spacing.enum.d.ts

@@ -5,7 +5,7 @@
  * Tipos de espaçamento interno (padding) das células (**p-spacing**) do po-table.
  */
 export declare enum PoTableColumnSpacing {
-    /** Espaçamento extra pequeno: 0.25rem (vertical) x 1rem (horizontal). */
+    /** Espaçamento extra pequeno: 0.25rem (vertical) x 0.5rem (horizontal). */
     ExtraSmall = "extraSmall",
     /** Espaçamento pequeno: 0.5rem (vertical) x 1rem (horizontal). */
     Small = "small",

package/lib/components/po-tag/po-tag-base.component.d.ts

@@ -41,6 +41,7 @@ export declare const PoTagLiteralsDefault: {
  * | `--font-size`                          | Tamanho da fonte                                      | `var(--font-size-sm)`                           |
  * | `--line-height`                        | Tamanho da label                                      | `var(---line-height-sm)`                        |
  * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento    | `var(--border-radius-pill)`                     |
+ * | `--gap`                                | Espaçamento entre o label e o value                   | `var(--spacing-xs)`                             |
  * | **Neutral**                            |                                                       |                                                 |
  * | `--color-neutral`                      | Cor principal no estado neutral                       | `var(--color-neutral-light-10)`                 |
  * | `--text-color-positive`                | Cor do texto no estado neutral                        | `var(--color-neutral-dark-80)`                  |

package/lib/enums/po-density-mode.enum.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Define o nível de densidade (espaçamento) aplicado em componentes agrupadores. Pode ser ajustado conforme a
+ * preferência do usuário ou requisitos de acessibilidade.
+ */
+export declare enum PoDensityMode {
+    /** Define espaçamentos mais compactos entre os elementos. */
+    Small = "small",
+    /** Define espaçamentos mais amplos e confortáveis. */
+    Medium = "medium"
+}

package/lib/enums/po-field-size.enum.d.ts

@@ -3,11 +3,13 @@
  *
  * @description
  *
- * Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
+ * Define o tamanho padrão utilizado em componentes interativos. Este enum também é usado pelo serviço de tema para
+ * definir a preferência global de tamanho dos componentes. Por padrão, os componentes utilizam o tamanho `medium` por
+ * ser mais acessível (conforme diretrizes WCAG nível AAA).
+ *
+ * > O tamanho `small` está disponível apenas em contextos com acessibilidade AA.
  */
 export declare enum PoFieldSize {
-    /** Define a altura do input como 32px. */
     Small = "small",
-    /** Define a altura do input como 44px. */
     Medium = "medium"
 }

package/lib/services/po-theme/helpers/accessibilities/po-theme-density.constant.d.ts

@@ -0,0 +1,12 @@
+export declare const poThemeDensity: {
+    small: {
+        '--default-spacing-0': string;
+        '--default-spacing-xs': string;
+        '--default-spacing-sm': string;
+        '--default-spacing-md': string;
+        '--default-spacing-lg': string;
+        '--default-spacing-xl': string;
+        '--default-line-height-xs': string;
+        '--default-spacing-squish-xs': string;
+    };
+};

package/lib/services/po-theme/po-theme.module.d.ts

@@ -1,5 +1,5 @@
 /**
- * Módulo responsável por fornecer serviços relacionados ao tema PO.
+ * Módulo do serviço PoThemeService.
  */
 export declare class PoThemeModule {
 }

package/lib/services/po-theme/po-theme.service.d.ts

@@ -1,15 +1,25 @@
 import { RendererFactory2 } from '@angular/core';
+import { PoDensityMode } from '../../enums/po-density-mode.enum';
 import { PoThemeA11yEnum } from './enum/po-theme-a11y.enum';
 import { PoThemeTypeEnum } from './enum/po-theme-type.enum';
 import { PoTheme, PoThemeActive } from './interfaces/po-theme.interface';
 /**
  * @description
  *
- * O `PoThemeService` possibilita a personalização das cores do tema padrão do `PO-UI`, permitindo a alteração dos valores das variáveis de estilo usadas no CSS padrão.
+ * O serviço `PoThemeService` permite customizar as cores do tema padrão do `PO-UI` e definir o nível de acessibilidade
+ * mais adequado ao projeto.
  *
- * > Para saber mais sobre como customizar o tema padrão verifique o item [Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
+ * O nível **AAA** (padrão) garante maior contraste, áreas clicáveis amplas e espaçamentos maiores entre os elementos,
+ * enquanto o nível **AA** mantém a conformidade com as diretrizes de acessibilidade, mas com proporções mais equilibradas
+ * e contornos mais sutis.
  *
- * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
+ * O serviço também possibilita configurar a **densidade de espaçamentos**, permitindo ajustar o espaço entre e dentro dos
+ * componentes. Essa configuração pode ser utilizada com qualquer nível de acessibilidade.
+ *
+ * > Observação: a customização das cores de `feedback` não é recomendada por motivos de acessibilidade e usabilidade.
+ *
+ * > Para saber mais sobre como customizar o tema padrão, consulte o item
+ * [Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
  */
 /**
  * @example
@@ -38,7 +48,8 @@ export declare class PoThemeService {
      * @param {PoTheme} themeConfig - Configuração de tema a ser aplicada ao componente.
      * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema, podendo ser 'light' (claro) ou 'dark' (escuro). O tema claro é o padrão.
      * @param {PoThemeA11yEnum} [a11yLevel=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade dos componentes, podendo ser AA ou AAA. Padrão é AAA.
-     * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no localStorage para persistência. `true` para salvar, `false` para não salvar.
+     * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no
+     * localStorage para persistência. Por padrão é `true`, ou seja, a preferência será salva automaticamente.
      */
     setTheme(themeConfig: PoTheme, themeType?: PoThemeTypeEnum, a11yLevel?: PoThemeA11yEnum, persistPreference?: boolean): void;
     private setDataDefaultSizeHTML;
@@ -49,18 +60,35 @@ export declare class PoThemeService {
      */
     getA11yLevel(): PoThemeA11yEnum;
     /**
-     * Define o tamanho `small` como padrão para componentes de formulário que não possuem um tamanho definido.
-     * Essa configuração é aplicada globalmente apenas quando o nível de acessibilidade for `AA`.
-     * Caso contrário, o tamanho padrão será `medium`.
+     * Define o tamanho `small` como padrão para componentes de formulário que não possuem um tamanho definido. Essa
+     * configuração é aplicada globalmente apenas quando o nível de acessibilidade for `AA`. O valor definido é salvo no
+     * `localStorage` sob a chave `po-default-size`.
      *
      * > Para garantir que o tamanho `small` seja aplicado corretamente a todos os componentes, recomendamos
      * definir esta configuração **junto com o nível de acessibilidade `AA` na inicialização da aplicação**.
      * Se for aplicada em tempo de execução, será necessário recarregar a aplicação (`reload`)
      * para que os estilos sejam aplicados corretamente.
+     * > Para ajustar a densidade visual dos componentes agrupadores (como pages, container, etc.), utilize também
+     * o método `setDensityMode` conforme necessário.
      *
      * @param {boolean} enable Habilita ou desabilita o tamanho `small` globalmente.
      */
     setA11yDefaultSizeSmall(enable: boolean): boolean;
+    /**
+     * Retorna o modo de adensamento dos componentes agrupadores.
+     * Se não estiver configurado, retorna `medium` como padrão.
+     * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`.
+     */
+    getDensityMode(): PoDensityMode;
+    /**
+     * Aplica o modo de adensamento compacto (`small`) ou espaçoso (`medium`) para os componentes agrupadores,
+     * independentemente do nível de acessibilidade. O valor definido é salvo no `localStorage` sob a chave
+     * `po-density-mode`.
+     *
+     * @param {'small' | 'medium'} mode Define o modo de densidade: `small` para compacto, `medium` para espaçoso.
+     * O valor padrão é `medium`.
+     */
+    setDensityMode(mode: string): void;
     /**
      * @docsPrivate
      * Retorna a preferência global de tamanho dos componentes.
@@ -142,11 +170,10 @@ export declare class PoThemeService {
     private applyThemeStyles;
     private changeThemeType;
     /**
-     * Persiste e define o tema do aplicativo com base nos dados armazenados.
-     *
-     * Este método recupera os dados do tema armazenados e os aplica ao aplicativo.
+     * Restaura e aplica as preferências visuais do usuário para o tema da aplicação, garantindo que essas preferências
+     * sejam persistidas no `localStorage` para uso em recarregamentos futuros.
      *
-     * @returns {PoTheme} Recupera o tema armazenado.
+     * @returns {PoTheme} O tema atualmente aplicado.
      */
     persistThemeActive(): PoTheme;
     private formatTheme;
@@ -168,6 +195,7 @@ export declare class PoThemeService {
     cleanThemeActive(persistPreference?: boolean): void;
     private getActiveTypeFromTheme;
     private getActiveA11yFromTheme;
+    private isValidA11yLevel;
     /**
      * @docsPrivate
      *

package/lib/utils/util.d.ts

@@ -1,6 +1,7 @@
-import { PoThemeService } from '../services/po-theme/po-theme.service';
-import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
+import { PoDensityMode } from '../enums/po-density-mode.enum';
 import { ElementRef } from '@angular/core';
+import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
+import { PoThemeService } from '../services/po-theme/po-theme.service';
 /**
  * Converte e formata os bytes em formato mais legível para o usuário.
  *
@@ -273,6 +274,12 @@ export declare function getA11yDefaultSize(): string;
  * @returns {PoThemeA11yEnum} O nível de acessibilidade, que pode ser `AA` ou `AAA`.
  */
 export declare function getA11yLevel(): PoThemeA11yEnum;
+/**
+ * Retorna o modo de adensamento dos componentes agrupadores.
+ * Se não estiver configurado, retorna `medium` como padrão.
+ * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`.
+ */
+export declare function getDensityMode(): PoDensityMode;
 /**
  * Realiza a tradução das propriedades de ajuda dos componentes.
  * Type do Helper default é 'help' e size 'medium'.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "20.5.0",
+  "version": "20.7.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.7.0",
+    "@po-ui/ng-schematics": "20.7.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.7.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.7.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };