@po-ui/ng-components 21.11.0 → 21.13.0

package/lib/components/po-page/po-page-content/po-page-content.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
 import { PoPageContentBaseComponent } from './po-page-content-base.component';
 /**
  * @docsPrivate
@@ -6,15 +6,21 @@ import { PoPageContentBaseComponent } from './po-page-content-base.component';
  * @docsExtends PoPageContentBaseComponent
  */
 export declare class PoPageContentComponent extends PoPageContentBaseComponent implements AfterViewInit, OnDestroy {
-    renderer: Renderer2;
+    private readonly renderer;
+    private readonly elementRef;
+    private readonly ngZone;
     contentOpacity: number;
     height: string;
-    overflowY: string;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /**
+     * Recalcula a altura do po-page-content.
+     * Chamado internamente pelo po-page-default quando inputs que afetam
+     * o tamanho do header mudam (title, subtitle, breadcrumb, headerType, theme).
+     */
     recalculateHeaderSize(): void;
-    setHeightContent(poPageHeader: HTMLElement): void;
+    private setHeightContent;
     private initializeListeners;
     private removeListeners;
 }

package/lib/components/po-page/po-page-default/enums/po-page-actions-layout.enum.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @usedBy PoPageDefaultComponent
+ *
+ * @description
+ *
+ * Define os layouts de exibição das ações no cabeçalho do `po-page-default`.
+ *
+ * > Compatível com todos os valores de `PoPageHeaderType`.
+ */
+export declare enum PoPageActionsLayout {
+    /**
+     * Exibe as ações como botões (até 3 em desktop e 2 em mobile), agrupando as demais no *dropdown*.
+     *
+     * Quando `PoPageAction.kind` não é definido, a primeira ação recebe o estilo `primary`
+     * e as demais recebem `secondary`.
+     */
+    default = "default",
+    /**
+     * Agrupa todas as ações exclusivamente dentro do menu *dropdown*.
+     */
+    dropdown = "dropdown",
+    /**
+     * Exibe a primeira ação como botão e agrupa as demais no *dropdown*.
+     */
+    mixed = "mixed"
+}

package/lib/components/po-page/po-page-default/enums/po-page-header-type.enum.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @usedBy PoPageDefaultComponent
+ *
+ * @description
+ *
+ * Define os tipos de cabeçalho disponíveis no `po-page-default`.
+ */
+export declare enum PoPageHeaderType {
+    /**
+     * Layout padrão com suporte a `p-breadcrumb`.
+     */
+    primary = "primary",
+    /**
+     * Exibe um botão de retorno ao lado do título.
+     *
+     * > Incompatível com `p-breadcrumb`.
+     */
+    secondary = "secondary",
+    /**
+     * Layout simplificado sem botão de retorno.
+     *
+     * > Incompatível com `p-breadcrumb`.
+     */
+    tertiary = "tertiary"
+}

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

@@ -2,6 +2,8 @@ import { PoLanguageService } from './../../../services/po-language/po-language.s
 import { PoBreadcrumb } from '../../po-breadcrumb/po-breadcrumb.interface';
 import { PoPageAction } from '../interfaces/po-page-action.interface';
 import { PoPageContentComponent } from '../po-page-content/po-page-content.component';
+import { PoPageActionsLayout } from './enums/po-page-actions-layout.enum';
+import { PoPageHeaderType } from './enums/po-page-header-type.enum';
 import { PoPageDefaultLiterals } from './po-page-default-literals.interface';
 export declare const poPageDefaultLiteralsDefault: {
     en: PoPageDefaultLiterals;
@@ -9,45 +11,78 @@ export declare const poPageDefaultLiteralsDefault: {
     pt: PoPageDefaultLiterals;
     ru: PoPageDefaultLiterals;
 };
+export declare const backNavigationAriaLabels: {
+    en: string;
+    es: string;
+    pt: string;
+    ru: string;
+};
 /**
  * @description
  *
- * O componente `po-page-default` é utilizado como o container principal para as telas sem um template definido.
+ * O `po-page-default` é utilizado como container principal para telas sem um template definido.
+ *
+ * Oferece suporte a cabeçalhos dinâmicos via `p-page-header-type`, navegação por *breadcrumb*
+ * e gerenciamento de ações com agrupamento responsivo via `p-page-actions-layout`.
  *
  * #### 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)` |
+ * | Propriedade                                        | Descrição                                   | Valor Padrão                          |
+ * |----------------------------------------------------|---------------------------------------------|---------------------------------------|
+ * | **Página (po-page-default)**                       |                                             |                                       |
+ * | `--background`                                     | Background da página (header e body)        | `var(--color-page-background-color-page)` |
+ * | **Header (po-page-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)`                   |
+ * | **Header (po-page-header .po-page-header-title)**  |                                             |                                       |
+ * | `--font-family`                                    | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content (po-page-content)**                      |                                             |                                       |
+ * | `--padding-content`                                | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 export declare abstract class PoPageDefaultBaseComponent {
     poPageContent: PoPageContentComponent;
-    /** Objeto com propriedades do breadcrumb. */
-    breadcrumb?: PoBreadcrumb;
     visibleActions: Array<PoPageAction>;
     protected language: string;
     private _actions?;
+    private _breadcrumb?;
     private _componentsSize?;
     private _initialComponentsSize?;
     private _literals;
+    private _pageActionsLayout;
+    private _pageHeaderType;
+    private _subtitle;
     private _title;
     /**
      * @optional
      *
      * @description
      *
-     * Nesta propriedade deve ser definido um array de objetos que implementam a interface `PoPageAction`.
+     * Define a lista de ações que serão exibidas no cabeçalho da página.
+     *
+     * Recebe um array de objetos que implementam a interface `PoPageAction`.
+     *
+     * > O comportamento de exibição pode ser customizado através da propriedade `p-page-actions-layout`.
+     *
+     * @default `[]`
      */
     set actions(actions: Array<PoPageAction>);
     get actions(): Array<PoPageAction>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o sistema de navegação que indica o caminho da página atual na hierarquia da aplicação.
+     *
+     * Recebe um objeto que implementa a interface `PoBreadcrumb`.
+     *
+     * > Compatível com o cabeçalho (`p-page-header-type`) do tipo `primary`.
+     */
+    set breadcrumb(value: PoBreadcrumb);
+    get breadcrumb(): PoBreadcrumb;
     /**
      * @optional
      *
@@ -69,37 +104,62 @@ export declare abstract class PoPageDefaultBaseComponent {
      *
      * @description
      *
-     * Objeto com as literais usadas no `po-page-default`.
+     * Permite a customização das literais utilizadas no componente.
      *
-     * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis:
+     * Para customizar, basta passar um objeto parcial ou completo que implemente a interface `PoPageDefaultLiterals`.
      *
-     * ```
-     *  const customLiterals: PoPageDefaultLiterals = {
-     *    otherActions: 'Mais ações'
-     *  };
-     * ```
-     *
-     * Ou passando apenas as literais que deseja customizar:
+     * Exemplo de uso:
      *
+     * ```html
+     * <po-page-default [p-literals]="customLiterals"></po-page-default>
      * ```
-     *  const customLiterals: PoPageDefaultLiterals = {
-     *    otherActions: 'Ações da página'
-     *  };
-     * ```
-     *
-     * E para carregar as literais customizadas, basta apenas passar o objeto para o componente.
      *
-     * ```
-     * <po-page-default
-     *   [p-literals]="customLiterals">
-     * </po-page-default>
+     * ```typescript
+     * const customLiterals: PoPageDefaultLiterals = {
+     *   otherActions: 'Mais opções'
+     * };
      * ```
      *
-     * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*.
+     * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou navegador.
      */
     set literals(value: PoPageDefaultLiterals);
     get literals(): PoPageDefaultLiterals;
-    /** Título da página. */
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o layout de exibição das ações no cabeçalho.
+     *
+     * Aceita valores do enum `PoPageActionsLayout`.
+     *
+     * > Em telas reduzidas (< 480px) as ações fora do *dropdown* que possuam a propriedade `PoPageAction.icon` definida
+     * exibirão apenas o ícone.
+     *
+     * @default `default`
+     */
+    set pageActionsLayout(value: string | PoPageActionsLayout);
+    get pageActionsLayout(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo de cabeçalho da página.
+     *
+     * Aceita valores do enum `PoPageHeaderType`.
+     *
+     * @default `primary`
+     */
+    set pageHeaderType(value: string | PoPageHeaderType);
+    get pageHeaderType(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o título principal da página.
+     */
     set title(title: string);
     get title(): string;
     /**
@@ -107,9 +167,22 @@ export declare abstract class PoPageDefaultBaseComponent {
      *
      * @description
      *
-     * Subtitulo do Header da página
+     * Define um texto de apoio ou informações adicionais logo abaixo do título principal.
+     *
+     * > Requer que`p-title` esteja definido.
+     */
+    set subtitle(value: string);
+    get subtitle(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao clicar no botão voltar exibido no cabeçalho.
+     *
+     * > Botão exibido apenas quando a propriedade `p-page-header-type` está configurada como `secondary`.
      */
-    subtitle: string;
+    back: import("@angular/core").OutputEmitterRef<void>;
     constructor(languageService: PoLanguageService);
     protected onThemeChange(): void;
     private applySizeBasedOnA11y;

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, OnChanges, SimpleChange } from '@angular/core';
+import { AfterContentInit, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
 import { PoPageAction } from '../interfaces/po-page-action.interface';
 import { PoPageDefaultBaseComponent } from './po-page-default-base.component';
 /**
@@ -23,24 +23,30 @@ import { PoPageDefaultBaseComponent } from './po-page-default-base.component';
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.service.ts"> </file>
  * </example>
  */
-export declare class PoPageDefaultComponent extends PoPageDefaultBaseComponent implements AfterContentInit, OnChanges {
+export declare class PoPageDefaultComponent extends PoPageDefaultBaseComponent implements AfterContentInit, OnChanges, OnDestroy {
     private readonly renderer;
     private readonly router;
+    readonly backIcon: string;
+    readonly backNavigationLabel: string;
     limitPrimaryActions: number;
     dropdownActions: Array<PoPageAction>;
     isMobile: boolean;
     private readonly maxWidthMobile;
+    private _primaryKindUsed;
+    private resizeUnlisten;
     constructor();
     ngAfterContentInit(): void;
     ngOnChanges(changes: {
         [propName: string]: SimpleChange;
     }): void;
+    ngOnDestroy(): void;
     actionIsDisabled(action: any): any;
     actionIsVisible(action: any): any;
     callAction(item: PoPageAction): void;
     hasPageHeader(): boolean;
     setDropdownActions(): void;
     getVisibleActions(): PoPageAction[];
+    getActionKind(action: PoPageAction, fallback: string): string;
     private onResize;
     private setIsMobile;
 }

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

@@ -14,6 +14,8 @@ export declare class PoPageHeaderBaseComponent {
     size: string;
     /** Subtítulo da página. */
     subtitle: string;
+    /** Define o tipo de header: `primary`, `secondary` ou `tertiary`. */
+    type: string;
     private _breadcrumb;
     /** Objeto com propriedades do breadcrumb. */
     set breadcrumb(value: PoBreadcrumb);

package/lib/components/po-page/po-page.module.d.ts

@@ -1,7 +1,8 @@
 /**
  * @description
- * Módulo dos componentes po-page-default, po-page-detail, po-page-edit,
- * po-page-list e po-page-slide.
+ *
+ * Módulo responsável pelos componentes de estrutura de página: `po-page-default`, `po-page-detail`,
+ * `po-page-edit`, `po-page-list` e `po-page-slide`.
  */
 export declare class PoPageModule {
 }

package/lib/components/po-popup/po-popup-action.interface.d.ts

@@ -16,115 +16,90 @@ export interface PoPopupAction {
      */
     label: string;
     /**
+     * @optional
+     *
      * @description
      *
      * Ação que será executada, sendo possível passar o nome ou a referência da função.
      *
      * No componente `po-dropdown`, a action também pode ser executada para o agrupador de subitens.
      *
-     * > Para que a função seja executada no contexto do elemento filho o mesmo deve ser passado utilizando *bind*.
-     *
-     * Exemplo: `action: this.myFunction.bind(this)`
+     * > Para que a função seja executada no contexto do componente, utilize *bind*:
+     * `action: this.myFunction.bind(this)`
      */
     action?: Function;
     /**
+     * @optional
+     *
      * @description
      *
-     * Define um ícone que será exibido ao lado esquerdo do rótulo.
+     * Ícone exibido ao lado esquerdo do rótulo.
      *
-     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
-     * ```
-     * <po-component
-     *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
-     * </po-component>
-     * ```
+     * Aceita ícones da [Biblioteca de ícones](https://po-ui.io/icons), fontes externas (ex: Font Awesome)
+     * ou um `TemplateRef` para ícones customizados.
      *
-     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
-     * ```
-     * <po-component
-     *  [p-property]="[{ label: 'FA ICON', icon: 'fa fa-icon-podcast' }]">
-     * </po-component>
      * ```
-     *
-     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
-     * component.html:
-     * ```
-     * <ng-template #iconTemplate>
-     *   <ion-icon name="heart"></ion-icon>
-     * </ng-template>
-     *
-     * <po-component [p-property]="myProperty"></po-component>
-     * ```
-     * component.ts:
-     * ```
-     * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef<void>;
-     *
-     * myProperty = [
-     *  {
-     *    label: 'FA ICON',
-     *    icon: this.iconTemplate
-     *  }
-     * ];
+     * { label: 'Ação', icon: 'an an-newspaper' }
      * ```
      */
     icon?: string | TemplateRef<void>;
     /**
+     * @optional
+     *
      * @description
      *
      * Atribui uma linha separadora acima do item.
-     *
-     * */
+     */
     separator?: boolean;
     /**
-     * @description
+     * @optional
      *
-     * Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado.
-     *
-     * Também é possível informar diretamente um valor booleano que vai habilitar ou desabilitar a ação para todos os registros.
+     * @description
      *
+     * Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano.
      */
     disabled?: boolean | Function;
     /**
+     * @optional
+     *
      * @description
      *
-     * Define a cor do item, sendo `default` o padrão.
+     * Define a cor do item.
      *
      * Valores válidos:
      *  - `default`
-     *  - `danger` - indicado para ações exclusivas (excluir, sair).
+     *  - `danger`
      */
     type?: string;
     /**
+     * @optional
+     *
      * @description
      *
-     * URL utilizada para redirecionamento das páginas.
+     * URL para redirecionamento. Aceita rotas internas e links externos.
      *
-     * No componente `po-dropdown`, a url também pode ser configurada para o agrupador de subitens.
-     * Entretanto, quando a `url` é informada em um agrupador, o clique **não abrirá os subitens**, pois o item será
-     * tratado como um link e o redirecionamento terá prioridade sobre a exibição da lista.
+     * No componente `po-dropdown`, quando informada em um agrupador com `subItems`, o clique
+     * redireciona ao invés de abrir os subitens.
      *
+     * > Quando informada, tem prioridade sobre a propriedade `action`.
      */
     url?: string;
     /**
+     * @optional
+     *
      * @description
      *
      * Define se a ação está selecionada.
-     *
      */
     selected?: boolean;
     /**
-     * @description
-     *
-     * Define se a ação será visível.
+     * @optional
      *
-     * > Caso o valor não seja especificado a ação será visível.
-     *
-     * Opções para tornar a ação visível ou não:
-     *
-     *  - Função que deve retornar um booleano.
+     * @description
      *
-     *  - Informar diretamente um valor booleano.
+     * Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano.
      *
+     * @default `true`
      */
     visible?: boolean | Function;
     $id?: string;

package/lib/components/po-progress/enums/po-progress-shape.enum.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @usedBy PoProgressComponent
+ *
+ * @description
+ *
+ * Enum `PoProgressShape` para definir o formato visual do componente de progresso.
+ */
+export declare enum PoProgressShape {
+    /** Formato barra de progresso (padrão). */
+    bar = "bar",
+    /** Formato circular de progresso. */
+    circle = "circle"
+}

package/lib/components/po-progress/enums/po-progress-status.enum.d.ts

@@ -3,7 +3,7 @@
  *
  * @description
  *
- * *Enum* `PoProgressStatus` para os status de barra de progresso.
+ * Enum `PoProgressStatus` para os status de barra de progresso.
  */
 export declare enum PoProgressStatus {
     /** Define o status `default` para a barra de progresso. */

package/lib/components/po-progress/index.d.ts

@@ -1,3 +1,4 @@
+export * from './enums/po-progress-shape.enum';
 export * from './enums/po-progress-status.enum';
 export * from './enums/po-progress-size.enum';
 export * from './interfaces/';

package/lib/components/po-progress/po-progress-bar/po-progress-bar.component.d.ts

@@ -1,4 +1,5 @@
 export declare class PoProgressBarComponent {
+    ariaLabel?: string;
     indeterminate: boolean;
     value: number;
     get valueScale(): string;