@po-ui/ng-components 21.9.0 → 21.10.0

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

@@ -18,6 +18,7 @@ import { PoAvatarBaseComponent } from './po-avatar-base.component';
  * <example name="po-avatar-business-card" title="PO Avatar - Business Card" >
  *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.html"> </file>
  *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.ts"> </file>
+ *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.css"> </file>
  * </example>
  */
 export declare class PoAvatarComponent extends PoAvatarBaseComponent implements OnInit {

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

@@ -45,6 +45,21 @@ export declare class PoBadgeBaseComponent {
      *   - <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-badge p-color="caption-tag-13" p-value="5"></po-badge>
+     * ```
+     *
      * @default `color-07`
      */
     set color(value: string);

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

@@ -17,6 +17,7 @@ import { PoContainerBaseComponent } from './po-container-base.component';
  * <example name="po-container-dashboard" title="PO Container - Dashboard">
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.html"> </file>
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.ts"> </file>
+ *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.css"> </file>
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.service.ts"> </file>
  * </example>
  */

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

@@ -25,6 +25,7 @@ import { PoHelperComponent } from '../../po-helper';
  * <example name="po-combo-scheduling" title="PO Combo - Scheduling">
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.html"> </file>
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.ts"> </file>
+ *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.css"> </file>
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.service.ts"> </file>
  * </example>
  *

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

@@ -33,6 +33,7 @@ import { PoHelperComponent } from '../../po-helper';
  * <example name="po-multiselect-template" title="PO Multiselect - Template">
  *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.html"> </file>
  *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.ts"> </file>
+ *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.css"> </file>
  * </example>
  *
  * <example name="po-multiselect-heroes" title="PO Multiselect - Heroes - using API">

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

@@ -22,6 +22,7 @@ import { PoHelperComponent, PoHelperOptions } from '../../po-helper';
  * <example name="po-select-customer-registration" title="PO Select - Customer registration">
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.html"> </file>
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.ts"> </file>
+ *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.css"> </file>
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.service.ts"> </file>
  * </example>
  *

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

@@ -9,11 +9,13 @@ import { PoLoadingOverlayBaseComponent } from './po-loading-overlay-base.compone
  * <example name="po-loading-overlay-basic" title="PO Loading Overlay Basic">
  *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.html"> </file>
  *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.ts"> </file>
+ *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.css"> </file>
  * </example>
  *
  * <example name="po-loading-overlay-labs" title="PO Loading Overlay Labs">
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.html"> </file>
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.ts"> </file>
+ *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-loading-overlay-connection-test" title="PO Loading Overlay - Connection Test">

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

@@ -76,11 +76,13 @@ import { PoMenuItem } from './po-menu-item.interface';
  * <example name="po-menu-labs" title="PO Menu Labs">
  *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.html"> </file>
  *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.ts"> </file>
+ *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-menu-human-resources" title="PO Menu - Human Resources">
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.html"> </file>
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts"> </file>
+ *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.css"> </file>
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.service.ts"> </file>
  * </example>
  */

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

@@ -19,6 +19,7 @@ import { PoPageDefaultBaseComponent } from './po-page-default-base.component';
  * <example name="po-page-default-dashboard" title="PO Page Default - Dashboard">
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.html"> </file>
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts"> </file>
+ *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.css"> </file>
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.service.ts"> </file>
  * </example>
  */

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

@@ -16,11 +16,13 @@ import { PoPopupBaseComponent } from './po-popup-base.component';
  * <example name="po-popup-labs" title="PO Popup - Labs">
  *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.html"> </file>
  *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.ts"> </file>
+ *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-popup-email" title="PO Popup Email">
  *   <file name="sample-po-popup-email/sample-po-popup-email.component.html"> </file>
  *   <file name="sample-po-popup-email/sample-po-popup-email.component.ts"> </file>
+ *   <file name="sample-po-popup-email/sample-po-popup-email.component.css"> </file>
  * </example>
  *
  */

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,11 +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.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>
  *
@@ -41,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-widget/po-widget.component.d.ts

@@ -16,11 +16,13 @@ import { PoWidgetBaseComponent } from './po-widget-base.component';
  * <example name="po-widget-labs" title="PO Widget Labs">
  *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.html"> </file>
  *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.ts"> </file>
+ *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-widget-finance-dashboard" title="PO Widget - Finance dashboard">
  *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.html"> </file>
  *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.ts"> </file>
+ *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.css"> </file>
  * </example>
  *
  * <example name="po-widget-card" title="PO Widget - Card">

package/lib/enums/po-caption-tag-color.enum.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Enum que define as 35 Caption Tag Colors disponíveis para uso nos componentes.
+ *
+ * Estas cores são organizadas em 7 famílias (tag-01 a tag-07), cada uma com 5 variantes
+ * (lighter, light, base, dark, darker), totalizando 35 cores.
+ */
+export declare enum PoCaptionTagColorEnum {
+    CaptionTag01 = "caption-tag-01",
+    CaptionTag02 = "caption-tag-02",
+    CaptionTag03 = "caption-tag-03",
+    CaptionTag04 = "caption-tag-04",
+    CaptionTag05 = "caption-tag-05",
+    CaptionTag06 = "caption-tag-06",
+    CaptionTag07 = "caption-tag-07",
+    CaptionTag08 = "caption-tag-08",
+    CaptionTag09 = "caption-tag-09",
+    CaptionTag10 = "caption-tag-10",
+    CaptionTag11 = "caption-tag-11",
+    CaptionTag12 = "caption-tag-12",
+    CaptionTag13 = "caption-tag-13",
+    CaptionTag14 = "caption-tag-14",
+    CaptionTag15 = "caption-tag-15",
+    CaptionTag16 = "caption-tag-16",
+    CaptionTag17 = "caption-tag-17",
+    CaptionTag18 = "caption-tag-18",
+    CaptionTag19 = "caption-tag-19",
+    CaptionTag20 = "caption-tag-20",
+    CaptionTag21 = "caption-tag-21",
+    CaptionTag22 = "caption-tag-22",
+    CaptionTag23 = "caption-tag-23",
+    CaptionTag24 = "caption-tag-24",
+    CaptionTag25 = "caption-tag-25",
+    CaptionTag26 = "caption-tag-26",
+    CaptionTag27 = "caption-tag-27",
+    CaptionTag28 = "caption-tag-28",
+    CaptionTag29 = "caption-tag-29",
+    CaptionTag30 = "caption-tag-30",
+    CaptionTag31 = "caption-tag-31",
+    CaptionTag32 = "caption-tag-32",
+    CaptionTag33 = "caption-tag-33",
+    CaptionTag34 = "caption-tag-34",
+    CaptionTag35 = "caption-tag-35"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "21.9.0",
+  "version": "21.10.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~21.0.3",
-    "@po-ui/style": "21.9.0",
-    "@po-ui/ng-schematics": "21.9.0",
+    "@po-ui/style": "21.10.0",
+    "@po-ui/ng-schematics": "21.10.0",
     "echarts": "^5.6.0",
     "tslib": "^2.6.2"
   },
@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^21",
     "@angular/router": "^21",
     "@angular-devkit/schematics": "^21",
-    "@po-ui/style": "21.9.0",
+    "@po-ui/style": "21.10.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', '21.9.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.10.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)('21.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.10.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)('21.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.10.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)('21.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.10.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)('21.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.10.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)('21.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.10.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.9.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.10.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)('21.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.10.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.9.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.10.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('21.9.0', changes_1.dependeciesChanges),
+        updatePackageJson('21.10.0', changes_1.dependeciesChanges),
         (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
         (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
         createUpgradeRule(),