@po-ui/ng-components 21.8.0 → 21.10.0

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

@@ -12,6 +12,7 @@ import { PoProgressBaseComponent } from './po-progress-base.component';
  * <example name="po-progress-labs" title="PO Progress Labs">
  *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.html"> </file>
  *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.ts"> </file>
+ *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-progress-publication" title="PO Progress - Publication">

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

@@ -19,12 +19,13 @@ import { PoSearchBaseComponent } from './po-search-base.component';
  * <example name="po-search-labs" title="PO Search Labs">
  *  <file name="sample-po-search-labs/sample-po-search-labs.component.html"> </file>
  *  <file name="sample-po-search-labs/sample-po-search-labs.component.ts"> </file>
- *  <file name="sample-po-search-labs/sample-po-search-labs.service.ts"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-search-find-people" title="PO Search Find People">
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.html"> </file>
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.ts"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.css"> </file>
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.service.ts"> </file>
  * </example>
  *
@@ -42,6 +43,7 @@ import { PoSearchBaseComponent } from './po-search-base.component';
  * <example name="po-search-execute" title="PO Search Form Fields with Execute">
  *  <file name="sample-po-search-execute/sample-po-search-execute.component.html"> </file>
  *  <file name="sample-po-search-execute/sample-po-search-execute.component.ts"> </file>
+ *  <file name="sample-po-search-execute/sample-po-search-execute.component.css"> </file>
  * </example>
  *
  * <example name="po-search-fields-locate" title="PO Search Form Fields with Locate">

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

@@ -20,6 +20,7 @@ import { PoStepperItem } from './po-stepper-item.interface';
  * <example name="po-stepper-sales" title="PO Stepper - Sales">
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.html"> </file>
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.ts"> </file>
+ *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.css"> </file>
  * </example>
  *
  * <example name="po-stepper-active" title="PO Stepper - Active">

package/lib/components/po-table/interfaces/po-table-column.interface.d.ts

@@ -57,6 +57,16 @@ export interface PoTableColumn {
      * - <span class="dot po-color-11"></span> `color-11`
      * - <span class="dot po-color-12"></span> `color-12`
      *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
      * > Existe a possibilidade de informar uma função que retorne um dos valores aceitos, serão passados
      * por parâmetro a linha e a coluna atual, por exemplo:
      *
@@ -136,8 +146,8 @@ export interface PoTableColumn {
      *
      * ```
      * { property: 'flightStatus', label: 'Status', type: 'label', width:'100px', labels: [
-     *  { value: 'confirmed', color: 'color-11', label: 'Confirmado', tooltip: 'Flight Status' },
-     *  { value: 'delayed', color: 'color-08', label: 'Atrasado', tooltip: 'Flight Status' }
+     *  { value: 'confirmed', color: 'caption-tag-13', label: 'Confirmado', tooltip: 'Flight Status' },
+     *  { value: 'delayed', color: 'caption-tag-08', label: 'Atrasado', tooltip: 'Flight Status' }
      * }
      * ```
      *
@@ -173,8 +183,8 @@ export interface PoTableColumn {
      *
      * ```
      * { property: 'flightStatus', label: 'Status', color: 'subtitle', width:'100px', subtitles: [
-     *  { value: 'confirmed', color: 'color-11', label: 'Confirmado', content: '1' },
-     *  { value: 'delayed', color: 'color-08', label: 'Atrasado', content: '2' }
+     *  { value: 'confirmed', color: 'caption-tag-13', label: 'Confirmado', content: '1' },
+     *  { value: 'delayed', color: 'caption-tag-08', label: 'Atrasado', content: '2' }
      * }
      * ```
      * Nesse exemplo a coluna escolhida para legenda é 'flightStatus', se o valor dessa coluna for 'confirmed', o texto da legenda será

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

@@ -343,6 +343,28 @@ export declare abstract class PoTableBaseComponent implements OnChanges, OnDestr
      * Por exemplo: ["idCard", "name", "hireStatus", "age"].
      */
     changeVisibleColumns: EventEmitter<string[]>;
+    /**
+     * @optional
+     *
+     * @description
+     * Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas.
+     *
+     * O componente envia como parâmetro um array de string com as propriedades das colunas fixas.
+     * Por exemplo: ["name", "age"].
+     *
+     * > Incompatível com `p-hide-action-fixed-columns`. Quando esta propriedade estiver ativa, o evento não será disparado.
+     *
+     * @example
+     *
+     * ```html
+     * <po-table
+     *   [p-columns]="columns"
+     *   [p-items]="items"
+     *   (p-change-fixed-columns)="onFixedColumnsChange($event)">
+     * </po-table>
+     * ```
+     */
+    changeFixedColumns: import("@angular/core").OutputEmitterRef<string[]>;
     /**
      * @optional
      *

package/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.d.ts

@@ -32,6 +32,16 @@ export interface PoTableColumnIcon {
      * - <span class="dot po-color-11"></span> `color-11`
      * - <span class="dot po-color-12"></span> `color-12`
      *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
      */
     color?: string | Function;
     /** Função que deve retornar um booleano para habilitar ou desabilitar o ícone e sua ação. */

package/lib/components/po-table/po-table-column-label/po-table-column-label.interface.d.ts

@@ -28,6 +28,24 @@ export interface PoTableColumnLabel {
      * - <span class="dot po-color-10"></span> `color-10`
      * - <span class="dot po-color-11"></span> `color-11`
      * - <span class="dot po-color-12"></span> `color-12`
+     *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
+     * Exemplo de uso:
+     * ```
+     * { property: 'status', type: 'label', labels: [
+     *   { value: 'ativo', color: 'caption-tag-13', label: 'Ativo' },
+     *   { value: 'pendente', color: 'caption-tag-08', label: 'Pendente' }
+     * ]}
+     * ```
      */
     color?: string;
     /**
@@ -57,6 +75,9 @@ export interface PoTableColumnLabel {
      * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
+     *
+     * > **Atenção:** As cores da paleta **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`) não são aceitas nesta propriedade,
+     * pois possuem cor de texto fixa definida via token CSS.
      */
     textColor?: string;
     /**

package/lib/components/po-table/po-table-column-manager/po-table-column-manager.component.d.ts

@@ -32,6 +32,7 @@ export declare class PoTableColumnManagerComponent implements OnChanges, OnDestr
     lastVisibleColumnsSelected: Array<PoTableColumn>;
     visibleColumnsChange: EventEmitter<PoTableColumn[]>;
     changeVisibleColumns: EventEmitter<string[]>;
+    changeFixedColumns: import("@angular/core").OutputEmitterRef<string[]>;
     initialColumns: EventEmitter<string[]>;
     hideActionFixedColumns: boolean;
     literals: any;

package/lib/components/po-table/po-table-subtitle-footer/po-table-subtitle-column.interface.d.ts

@@ -31,6 +31,16 @@ export interface PoTableSubtitleColumn {
      * - <span class="dot po-color-11"></span> `color-11`
      * - <span class="dot po-color-12"></span> `color-12`
      *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
      * @default `color-01`
      */
     color?: string;

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

@@ -240,6 +240,7 @@ export declare class PoTableComponent extends PoTableBaseComponent implements Af
     isShowRowTemplate(row: any, index: number): boolean;
     onClickLink(event: any, row: any, column: PoTableColumn): void;
     onChangeVisibleColumns(columns: Array<string>): void;
+    onChangeFixedColumns(columns: Array<string>): void;
     onColumnRestoreManager(value: Array<string>): void;
     onVisibleColumnsChange(columns: Array<PoTableColumn>): void;
     tooltipMouseEnter(event: any, column?: PoTableColumn, row?: any): any;

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

@@ -157,8 +157,24 @@ export declare class PoTagBaseComponent {
      *   - <span class="dot po-color-11"></span> `color-11`
      *   - <span class="dot po-color-12"></span> `color-12`
      *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
+     * Exemplo de uso:
+     * ```
+     * <po-tag p-color="caption-tag-15" p-value="Status"></po-tag>
+     * ```
+     *
      * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background;
-     * - O componente ajusta automaticamente a cor do texto para garantir legibilidade, escolhendo dinamicamente entre texto claro ou escuro conforme o contraste necessário.
+     * - Para as cores legacy (`color-01` a `color-12`) e cores customizadas, o componente ajusta automaticamente a cor do texto para garantir legibilidade.
+     * - Para as cores **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`), a cor do texto é fixa e definida via token CSS, não sendo possível alterá-la via `p-text-color`.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
      */
@@ -191,6 +207,9 @@ export declare class PoTagBaseComponent {
      * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
+     *
+     * > **Atenção:** As cores da paleta **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`) não são aceitas nesta propriedade,
+     * pois possuem cor de texto fixa definida via token CSS.
      */
     set textColor(value: string);
     get textColor(): string;

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

@@ -14,12 +14,18 @@ import { PoTagBaseComponent } from './po-tag-base.component';
  * <example name="po-tag-labs" title="PO Tag Labs">
  *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.html"> </file>
  *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.ts"> </file>
+ *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-tag-bank-account" title="PO Tag - Bank Account">
  *  <file name="sample-po-tag-bank-account/sample-po-tag-bank-account.component.html"> </file>
  *  <file name="sample-po-tag-bank-account/sample-po-tag-bank-account.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-tag-caption-tag-colors" title="PO Tag - Caption Tag Colors">
+ *  <file name="sample-po-tag-caption-tag-colors/sample-po-tag-caption-tag-colors.component.html"> </file>
+ *  <file name="sample-po-tag-caption-tag-colors/sample-po-tag-caption-tag-colors.component.ts"> </file>
+ * </example>
  */
 export declare class PoTagComponent extends PoTagBaseComponent implements OnInit {
     private readonly el;
@@ -30,6 +36,7 @@ export declare class PoTagComponent extends PoTagBaseComponent implements OnInit
     constructor();
     ngOnInit(): void;
     get iconFromType(): PoTagIcon;
+    get isCaptionTag(): boolean;
     get tagColor(): string;
     get tagOrientation(): boolean;
     onClick(event?: string): void;

package/lib/components/po-timer/enums/po-timer-format.enum.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @usedBy PoTimerComponent
+ *
+ * @description
+ *
+ * Enum para definição do formato de exibição do timer.
+ */
+export declare enum PoTimerFormat {
+    /** Formato de 24 horas (0-23). */
+    Format24 = "24",
+    /** Formato de 12 horas (1-12) com indicador AM/PM. */
+    Format12 = "12"
+}

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

@@ -0,0 +1,4 @@
+export * from './po-timer.component';
+export * from './po-timer-base.component';
+export * from './po-timer.module';
+export * from './enums/po-timer-format.enum';

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

@@ -0,0 +1,255 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { PoTimerFormat } from './enums/po-timer-format.enum';
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * O `po-timer` é um componente de seleção de horário que apresenta colunas de horas, minutos e, opcionalmente, segundos
+ * para que a pessoa usuária escolha um horário de forma intuitiva.
+ *
+ * O componente é recomendado para cenários onde é necessário selecionar um horário específico, podendo ser utilizado
+ * de forma independente ou integrado ao `po-timepicker` como painel flutuante de seleção.
+ *
+ * O valor de saída segue o formato ISO 8601 para horários (`HH:mm` ou `HH:mm:ss`).
+ *
+ * **Importante:**
+ * - Horários fora do intervalo (`p-min-time` / `p-max-time`) aparecem desabilitados sem alterar o *model*.
+ *
+ * #### Boas práticas
+ *
+ * - Utilize o formato de 24 horas quando o contexto for profissional ou técnico (ex: agendamentos, logs).
+ * - Utilize o formato de 12 horas (AM/PM) quando o público-alvo estiver habituado a esse padrão.
+ * - Defina intervalos de minutos adequados ao contexto: intervalos de 5 minutos para agendamentos gerais,
+ *   intervalos de 15 minutos para reuniões, ou intervalos de 1 minuto para precisão.
+ * - Configure limites mínimo e máximo para impedir seleção de horários inválidos no contexto da aplicação.
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo
+ * proprietário do conteúdo. São elas:
+ *
+ * - Navegação por teclado: O componente permite interação via tecla Tab entre as colunas e navegação nas células
+ *   por meio das setas direcionais (Arrow Up/Down).
+ * - Foco visual: A área de foco possui espessura de pelo menos 2 pixels CSS e não é sobreposta por outros elementos da tela,
+ *   garantindo visibilidade para usuários que utilizam teclado.
+ *   [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
+ * - Leitores de tela: Cada coluna e célula possui atributos ARIA para correta leitura por leitores de tela
+ *   como NVDA e VoiceOver.
+ *
+ * #### 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                      |
+ * |--------------------------------|------------------------------------------------------|-----------------------------------|
+ * | **Base**                       |                                                      |                                   |
+ * | `--background`                 | Cor de fundo                                         | `var(--color-neutral-light-00)`   |
+ * | `--border-color`               | Cor da borda                                         | `var(--color-neutral-light-20)`   |
+ * | `--border-radius`              | Raio da borda                                        | `var(--border-radius-md)`         |
+ * | `--border-width`               | Largura da borda                                     | `var(--border-width-sm)`          |
+ * | `--shadow`                     | Contém o valor da sombra do elemento                 | `var(--shadow-md)`                |
+ * | **Display**                    |                                                      |                                   |
+ * | `--color-display`              | Cor da fonte do display                              | `var(--color-brand-01-base)`      |
+ * | `--font-weight-display`        | Peso da fonte do display                             | `var(--font-weight-bold)`         |
+ * | `--border-radius-display`      | Raio da borda do display                             | `var(--border-radius-md)`         |
+ * | **Hover**                      |                                                      |                                   |
+ * | `--color-hover-display`        | Cor da fonte do display ao passar o mouse           | `var(--color-brand-01-darkest)`   |
+ * | `--background-hover-display`   | Cor de fundo do display ao passar o mouse           | `var(--color-brand-01-lighter)`   |
+ * | **Focus**                      |                                                      |                                   |
+ * | `--outline-color-focused-display` | Cor do outline do estado de focus                 | `var(--color-brand-01-darkest)`   |
+ * | **Pressed**                    |                                                      |                                   |
+ * | `--background-pressed-display` | Cor de fundo do display ao pressionar               | `var(--color-brand-01-light)`     |
+ * | **Disabled**                   |                                                      |                                   |
+ * | `--color-disabled-display`     | Cor da fonte do display desabilitado                 | `var(--color-neutral-light-30)`   |
+ * | **Transitions**                |                                                      |                                   |
+ * | `--transition-duration`        | Duração da transição do display                      | `var(--duration-extra-fast)`      |
+ * | `--transition-property`        | Atributo da transição do display                     | `all`                             |
+ * | `--transition-timing`          | Tipo de transição do display                         | `var(--timing-standart)`          |
+ */
+export declare class PoTimerBaseComponent implements ControlValueAccessor {
+    protected languageService: PoLanguageService;
+    private _format;
+    private _locale;
+    private _maxTime;
+    private _minTime;
+    private _minuteInterval;
+    private _secondInterval;
+    private _showSeconds;
+    private _size?;
+    private _initialSize;
+    private readonly shortLanguage;
+    protected onChangePropagate: (value: string) => void;
+    protected onTouched: () => void;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao selecionar um horário.
+     * Retorna uma `string` no formato ISO 8601 (`HH:mm` ou `HH:mm:ss`).
+     */
+    change: EventEmitter<string>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define um valor inicial para o componente no formato ISO 8601 (`HH:mm` ou `HH:mm:ss`).
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o formato de exibição do timer.
+     *
+     * Valores válidos:
+     * - `24`: formato de 24 horas (padrão)
+     * - `12`: formato de 12 horas com indicador AM/PM
+     *
+     * @default `24`
+     */
+    set format(value: PoTimerFormat);
+    get format(): PoTimerFormat;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Idioma do componente.
+     *
+     * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*.
+     */
+    set locale(locale: string);
+    get locale(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o horário máximo permitido para seleção.
+     * Horários posteriores ao limite ficam desabilitados.
+     *
+     * Formato aceito: `HH:mm` ou `HH:mm:ss`.
+     */
+    set maxTime(value: string);
+    get maxTime(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o horário mínimo permitido para seleção.
+     * Horários anteriores ao limite ficam desabilitados.
+     *
+     * Formato aceito: `HH:mm` ou `HH:mm:ss`.
+     */
+    set minTime(value: string);
+    get minTime(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o intervalo entre os minutos exibidos no painel.
+     *
+     * @default `5`
+     */
+    set minuteInterval(value: number);
+    get minuteInterval(): number;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o intervalo entre os segundos exibidos no painel.
+     * Utilizado apenas quando `p-show-seconds` está ativo.
+     *
+     * @default `1`
+     */
+    set secondInterval(value: number);
+    get secondInterval(): number;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Exibe a coluna de segundos no painel de seleção.
+     *
+     * @default `false`
+     */
+    set showSeconds(value: boolean);
+    get showSeconds(): boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente.
+     *
+     * > 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;
+    literals: {
+        hours: string;
+        minutes: string;
+        seconds: string;
+    };
+    hours: Array<number>;
+    minutes: Array<number>;
+    seconds: Array<number>;
+    selectedHour: number;
+    selectedMinute: number;
+    selectedSecond: number;
+    period: string;
+    constructor(languageService: PoLanguageService);
+    get is12HourFormat(): boolean;
+    protected onThemeChange(): void;
+    /** Gera a lista de horas disponíveis de acordo com o formato. */
+    protected generateHours(): void;
+    /** Gera a lista de minutos de acordo com o intervalo configurado. */
+    protected generateMinutes(): void;
+    /** Gera a lista de segundos de acordo com o intervalo configurado. */
+    protected generateSeconds(): void;
+    /** Formata um número com dois dígitos. */
+    protected formatValue(value: number): string;
+    /** Verifica se uma hora está desabilitada com base nos limites min/max. */
+    protected isHourDisabled(hour: number): boolean;
+    /** Verifica se um minuto está desabilitado com base nos limites min/max e hora selecionada. */
+    protected isMinuteDisabled(minute: number): boolean;
+    /** Verifica se um segundo está desabilitado com base nos limites min/max, hora e minuto selecionados. */
+    protected isSecondDisabled(second: number): boolean;
+    protected isMinuteAllowedForHour(hour: number, minute: number): boolean;
+    protected isSecondAllowed(hour: number, minute: number, second: number): boolean;
+    /** Gera o valor ISO 8601 com base na seleção atual. */
+    protected buildTimeValue(): string;
+    /** Define o horário a partir de uma string ISO. */
+    setTimeFromString(time: string): void;
+    /** Converte hora 24h para formato de exibicao 12h com periodo. */
+    private convertTo12HourDisplay;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_isDisabled: boolean): void;
+    protected emitChange(): void;
+    protected callOnTouched(): void;
+    private updateModel;
+    /** Converte hora no formato atual para formato de 24 horas. */
+    protected convertTo24Hour(hour: number): number;
+    /** Extrai componente do tempo (hora, minuto ou segundo) de uma string. */
+    protected parseTimeComponent(time: string, component: 'hour' | 'minute' | 'second'): number;
+    private applySizeBasedOnA11y;
+    private isValidTimeString;
+    private setLiterals;
+}

package/lib/components/po-timer/po-timer-scroll.helper.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @docsPrivate
+ *
+ * Helper com funcoes puras de matematica e layout para o infinity scroll
+ * do po-timer. Nenhuma dessas funcoes acessa estado do componente — recebem
+ * e devolvem apenas valores, facilitando testes unitarios isolados.
+ */
+export declare class PoTimerScrollHelper {
+    /**
+     * Normaliza o offset para o intervalo [sectionHeight, 2 * sectionHeight).
+     *
+     * Matematica:
+     *   mod = ((offset - sH) % sH + sH) % sH  →  resultado em [0, sH)
+     *   retorno = mod + sH                     →  resultado em [sH, 2*sH)
+     *
+     * Funciona para qualquer valor de offset (positivo, negativo, multiplos).
+     */
+    static wrapOffset(offset: number, sectionHeight: number): number;
+    /**
+     * Calcula o passo (em px) por item, incluindo o gap entre itens.
+     *
+     * Para N itens num flex-column com altura H, gap G e padding P:
+     *   scrollHeight = N*H + (N-1)*G + 2*P
+     *   passo = H + G = (scrollHeight - 2*P + G) / N
+     */
+    static getCellStep(itemsEl: HTMLElement, displayCount: number): number;
+    /**
+     * Calcula o indice no displayArray do item visivel no topo a partir do offset.
+     * Usa Math.round para snap ao item mais proximo.
+     */
+    static computeTopDisplayIndex(offset: number, step: number, displayLength: number): number;
+    /**
+     * Repete o array fonte o numero necessario de vezes para manter
+     * o infinity scroll com pelo menos INFINITY_SCROLL_MIN_ITEMS itens.
+     *
+     * Quando o array fonte tem menos de 6 itens, retorna uma copia simples
+     * (sem repeticao), pois o infinity scroll nao e utilizado.
+     */
+    static repeatArray(source: Array<number>): Array<number>;
+}