@po-ui/ng-components 19.37.0 → 19.38.0

package/lib/components/po-chart/enums/po-chart-type.enum.d.ts

@@ -38,5 +38,9 @@ export declare enum PoChartType {
      * - É possível demonstrar um dado percentual simples em conjunto com uma descrição resumida em seu interior;
      * - Para um demonstrativo mais elaborado, consegue-se definir alcances em cores, um breve texto descritivo e um ponteiro indicando o valor desejado.
      */
-    Gauge = "gauge"
+    Gauge = "gauge",
+    /**
+     * Tipo de gráfico utilizado para visualizar e comparar o desempenho de diferentes itens em múltiplas categorias.
+     */
+    Radar = "radar"
 }

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

@@ -1,11 +1,11 @@
-export * from './enums/po-chart-type.enum';
 export * from './enums/po-chart-label-format.enum';
-export * from './interfaces/po-chart-serie.interface';
+export * from './enums/po-chart-type.enum';
 export * from './interfaces/po-chart-serie-data-label.interface';
-export * from './interfaces/po-chart-options.interface';
-export * from './interfaces/po-chart-literals.interface';
 export * from './interfaces/po-chart-literals-default.interface';
 export * from './interfaces/po-chart-header-options.interface';
 export * from './interfaces/po-chart-axis-options.interface';
+export * from './interfaces/po-chart-literals.interface';
+export * from './interfaces/po-chart-options.interface';
+export * from './interfaces/po-chart-serie.interface';
 export * from './po-chart.component';
 export * from './po-chart.module';

package/lib/components/po-chart/interfaces/po-chart-indicator-options.interface.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @usedBy PoChartComponent
+ *
+ * @description
+ *
+ * Interface para configurações dos indicadores do gráfico `radar`.
+ */
+export interface PoChartIndicatorOptions {
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Cor do texto do indicator.
+     * Recomendamos avaliar o contraste da cor definida para garantir melhor acessibilidade.
+     *
+     * > Nome da cor, hexadecimal ou RGB.
+     */
+    color?: string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Nome do indicator.
+     */
+    name?: string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Valor máximo do indicator.
+     *
+     * A propriedade `max` não impede que a série contenha valores superiores ao máximo definido.
+     * Caso isso ocorra, os valores poderão extrapolar os limites do gráfico.
+     */
+    max?: number;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Valor mínimo do indicator, com valor padrão de 0.
+     *
+     * A propriedade `min` não impede que a série contenha valores inferiores ao mínimo definido.
+     * Caso isso ocorra, os valores serão apresentados ao centro do gráfico.
+     */
+    min?: number;
+}

package/lib/components/po-chart/interfaces/po-chart-options.interface.d.ts

@@ -8,6 +8,7 @@ import { PoChartHeaderOptions } from './po-chart-header-options.interface';
  * *Interface* para configurações dos elementos do gráfico.
  */
 export interface PoChartOptions {
+    [key: string]: any;
     /**
      * @optional
      *
@@ -42,11 +43,24 @@ export interface PoChartOptions {
      * Define se os pontos do gráfico serão preenchidos.
      * Quando true, os pontos são totalmente coloridos. Quando false, apenas a borda dos pontos será exibida, mantendo o interior transparente.
      *
-     * > Esta propriedade é utilizável para os gráficos dos tipos `Area` e `Line`.
+     * > Esta propriedade é utilizável para os gráficos dos tipos `Area`, `Line` e `Radar`.
+     * > Para o tipo `Radar`, o valor padrão é `true`.
      *
      * @default `false`
      */
     fillPoints?: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define se as séries terão sua área preenchida.
+     *
+     * > Esta propriedade tem precedência sobre a definição de `areaStyle` em cada série, `fillpoints` não funciona quando `areaStyle` está definido como `true`.
+     *
+     * @default `false`
+     */
+    areaStyle?: boolean;
     /**
      * @optional
      *
@@ -92,6 +106,8 @@ export interface PoChartOptions {
      * @description
      *
      * Define a exibição da legenda do gráfico. Valor padrão é `true`
+     *
+     * @default `true`
      */
     legend?: boolean;
     /**

package/lib/components/po-chart/interfaces/po-chart-radar-options.interface.d.ts

@@ -0,0 +1,38 @@
+import { PoChartIndicatorOptions } from './po-chart-indicator-options.interface';
+/**
+ * @usedBy PoChartComponent
+ *
+ * @description
+ *
+ * *Interface* para configurações do gráfico `radar`.
+ */
+export interface PoChartRadarOptions {
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define as configurações dos indicadores do gráfico, como nome, cor, valor mínimo e valor máximo.
+     */
+    indicator?: Array<PoChartIndicatorOptions>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o formato da grid, podendo ser exibida como polígono ou círculo.
+     *
+     * @default `polygon`
+     */
+    shape?: 'polygon' | 'circle';
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o efeito zebrado na grid.
+     *
+     * @default 'false'
+     */
+    splitArea?: boolean;
+}

package/lib/components/po-chart/interfaces/po-chart-serie-data-label.interface.d.ts

@@ -5,7 +5,6 @@
  *
  * Interface que define as propriedades de exibição dos rótulos das séries no `po-chart`.
  *
- * > Aplicável apenas para gráficos do tipo `line`.
  */
 export interface PoChartDataLabel {
     /**
@@ -19,7 +18,7 @@ export interface PoChartDataLabel {
      *   - O *tooltip* não será exibido.
      *   - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
      *
-     * > Disponível para os tipo de gráfico `PoChartType.Line`, `PoChartType.Area`, `PoChartType.Column` e `PoChartType.Bar`.
+     * > Disponível para os tipo de gráfico `PoChartType.Line`, `PoChartType.Area`, `PoChartType.Column`, `PoChartType.Bar e PoChartType.Radar`.
      */
     fixed?: boolean;
 }

package/lib/components/po-chart/interfaces/po-chart-serie.interface.d.ts

@@ -4,7 +4,7 @@ import { PoChartType } from '../enums/po-chart-type.enum';
  *
  * @description
  *
- * Interface das series dinâmicas do `po-chart` que possibilita desenhar gráficos dos tipos `area`, `bar`, `column`, `line`, `donut` e `pie`
+ * Interface das series dinâmicas do `po-chart` que possibilita desenhar gráficos dos tipos `area`, `bar`, `column`, `line`, `donut`, `pie` e `radar`
  */
 export interface PoChartSerie {
     /**
@@ -39,12 +39,22 @@ export interface PoChartSerie {
      *
      * Define a lista de valores para a série. Os tipos esperados são de acordo com o tipo de gráfico:
      * - Para gráficos dos tipos `donut` e `pie`, espera-se *number*;
-     * - Para gráficos dos tipos `area`, `bar`, `column` e `line`, espera-se um *array* de `data`.
+     * - Para gráficos dos tipos `area`, `bar`, `column`, `line` e `radar`, espera-se um *array* de `data`.
      *
      * > Se passado valor `null` em determinado item da lista, a iteração irá ignorá-lo.
      */
     data?: number | Array<number>;
-    /** Rótulo referência da série;. */
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define se a série terá sua área preenchida.
+     *
+     * > Propriedade válida para gráficos do tipo `Radar`, `fillpoints` não funciona quando `areaStyle` está definido como `true`.
+     */
+    areaStyle?: boolean;
+    /** Rótulo referência da série. */
     label?: string;
     /**
      * @optional
@@ -71,7 +81,8 @@ export interface PoChartSerie {
      * - `__texto__` → itálico (`<i>`).
      *
      * > Caso não seja informado um valor para o *tooltip*, será exibido da seguinte forma:
-     * - `donut`: `label`: valor proporcional ao total em porcentagem.
+     * - `donut`, `label`: valor proporcional ao total em porcentagem.
+     * - `radar`: nome da série, o nome do indicator e os valores correspondentes.
      * - `area`, `bar`, `column`, `line` e `pie`: `label`: `data`.
      *
      * ### Exemplos:
@@ -134,7 +145,6 @@ export interface PoChartSerie {
      * > Válido para gráfico do tipo `Column` e `Bar`. Essa propriedade é ignorada caso a propriedade `stacked` da interface `PoChartOptions` esteja como `true`.
      *
      * > Essa propriedade habilita a propriedade `p-data-label` por padrão, podendo ser desabilitada passando `[p-data-label]={ fixed: false }`.
-     *
      */
     stackGroupName?: string;
 }

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

@@ -1,10 +1,11 @@
 import { EventEmitter, OnInit } from '@angular/core';
-import { PoLanguageService } from '../../services/po-language/po-language.service';
-import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
+import { PoChartDataLabel } from '../po-chart/interfaces/po-chart-serie-data-label.interface';
 import { PoChartLiterals } from '../po-chart/interfaces/po-chart-literals.interface';
+import { PoChartRadarOptions } from './interfaces/po-chart-radar-options.interface';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoChartOptions } from '../po-chart/interfaces/po-chart-options.interface';
-import { PoChartDataLabel } from '../po-chart/interfaces/po-chart-serie-data-label.interface';
 import { PoChartSerie } from '../po-chart/interfaces/po-chart-serie.interface';
+import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
 import { PoPopupAction } from '../po-popup';
 import * as i0 from "@angular/core";
 /**
@@ -60,6 +61,9 @@ import * as i0 from "@angular/core";
  * | `--color-base-gauge`                     | Cor da base do gráfico `Gauge`                                          | `var(--color-neutral-light-20)`                   |
  * | `--color-gauge-pointer-color`            | Cor do ponteiro do gráfico `Gauge`                                      | `var(--color-neutral-dark-70)`                    |
  * | `--color-chart-line-point-fill`          | Cor de dentro do círculo dos gráficos `Line` e `Area`                   | `var(--color-neutral-light-00)`                   |
+ * | `--border-color-radar`                   | Cor do eixo da grid do gráfico `Radar`                                  | `var(--color-neutral-light-30)`                   |
+ * | `--color-background-zebra`               | Cor das áreas alternadas (efeito zebrado) da grid do gráfico `Radar`    | `var(--color-neutral-light-10)`                   |
+ * | `--color-background-line`                | Cor das áreas entre as faixas zebradas da grade do `Radar`              | `none`                                            |
  * | **Wrapper (.po-chart-container-gauge)**  |                                                                         |                                                   |
  * | `--background-color-container-gauge`     | Cor de background do container do gauge                                 | `var(--color-neutral-light-00)`                   |
  */
@@ -87,13 +91,20 @@ export declare abstract class PoChartBaseComponent implements OnInit {
      *
      * @description
      *
-     * Define os nomes das categorias que serão plotadas no eixo X do gráfico caso seja do tipo `bar`, ou então nos eixos Y do grid de gráficos dos tipos `area`, `columnn` e `line`.
+     * Define os valores utilizados na construção das categorias do gráfico.
+     *
+     * Para gráficos dos tipos *bar*, *area*, *column* e *line*, representa os nomes das categorias exibidas no eixo.
+     *
+     * Para gráficos do tipo *radar*, representa a configuração dos indicadores, formato (shape), áreas de divisão (splitArea)
+     * e demais opções específicas do gráfico `Radar`.
      *
-     * > Gráficos do tipo `bar` dimensionam a área do gráfico de acordo com a largura do maior texto de categorias. No entanto, é uma boa prática optar por palavras curtas para que a leitura do gráfico não seja prejudicada.
+     * > Caso nenhum valor seja informado, será utilizado um hífen como categoria
+     *   correspondente para cada série.
      *
-     * > Caso não seja especificado um valor para a categoria, será plotado um hífen na categoria referente a cada série.
+     * > Gráficos do tipo bar dimensionam sua área considerando a largura do maior texto
+     *   da categoria, sendo recomendável utilizar rótulos curtos para facilitar a leitura.
      */
-    categories?: Array<string>;
+    categories?: Array<string> | PoChartRadarOptions;
     /**
      * @optional
      *
@@ -110,7 +121,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
      * Objeto com as configurações usadas no `po-chart`.
      *
      * É possível, por exemplo, definir as configurações de exibição das legendas,
-     * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column` e `bar` da seguinte forma:
+     * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column`, `bar` e `radar` da seguinte forma:
      *
      * ```
      *  chartOptions: PoChartOptions = {
@@ -137,7 +148,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
      * - Os marcadores (*bullets*) terão seu estilo ajustado.
      * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
      *
-     * > Disponível apenas para gráficos do tipo `line`.
+     * > Disponível para gráficos do tipo `line` e `radar`.
      *
      * #### Exemplo de utilização:
      * ```typescript
@@ -216,6 +227,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
      *
      * O evento emitirá o seguinte parâmetro:
      * - *donut* e *pie*: um objeto contendo a categoria e valor da série.
+     * - *radar*: um objeto contendo o nome da série e os valores.
      * - *area*, *line*, *column* e *bar*: um objeto contendo o nome da série, valor e categoria do eixo do gráfico.
      */
     seriesClick: EventEmitter<any>;
@@ -228,6 +240,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
      *
      * O evento emitirá o seguinte parâmetro de acordo com o tipo de gráfico:
      * - *donut* e *pie*: um objeto contendo a categoria e valor da série.
+     * - *radar*: um objeto contendo o nome da série e os valores.
      * - *area*, *line*, *column* e *bar*: um objeto contendo a categoria, valor da série e categoria do eixo do gráfico.
      */
     seriesHover: EventEmitter<any>;

package/lib/components/po-chart/po-chart-grid-utils.d.ts

@@ -22,4 +22,49 @@ export declare class PoChartGridUtils {
     private hasTopLegendOrNoZoom;
     private hasBottomLegendWithZoom;
     private getPaddingTopGrid;
+    private isRadarOptions;
+    convertRadarConfig(indicators: Array<string>): {
+        shape: string;
+        splitArea: boolean;
+        indicator: {
+            name: string;
+        }[];
+    };
+    setListTypeRadar(): {
+        shape: string;
+        radius: string;
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+                width: number;
+            };
+        };
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+        indicator: {
+            name: any;
+            max: any;
+            min: any;
+            color: any;
+        }[];
+    };
+    setSerieTypeRadar(serie: any, tokenBorderWidthMd: number, color: string): any;
+    setTooltipRadar(params: any): void;
+    buildRadarTooltip(params: any): string;
+    finalizeSerieTypeRadar(seriesUpdated: any): {
+        type: string;
+        data: any;
+    }[];
 }

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

@@ -41,6 +41,11 @@ import * as i0 from "@angular/core";
  *  <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.html"> </file>
  *  <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-chart-technology-skill" title="PO Chart - Radar">
+ *  <file name="sample-po-chart-technology-skill/sample-po-chart-technology-skill.component.html"> </file>
+ *  <file name="sample-po-chart-technology-skill/sample-po-chart-technology-skill.component.ts"> </file>
+ * </example>
  */
 export declare class PoChartComponent extends PoChartBaseComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
     el: ElementRef<any>;
@@ -56,6 +61,7 @@ export declare class PoChartComponent extends PoChartBaseComponent implements On
     originalRadiusGauge: any;
     chartMarginTop: string;
     isTypeBar: boolean;
+    isTypeRadar: boolean;
     boundaryGap: boolean;
     listTypePieDonut: Array<any>;
     itemsTypeDonut: Array<any>;
@@ -119,6 +125,7 @@ export declare class PoChartComponent extends PoChartBaseComponent implements On
     private setTableProperties;
     private setTablePropertiesTypeBar;
     private setTablePropertiesTypeGauge;
+    private setTablePropertiesTypeRadar;
     private setTableColumns;
     private downloadCsv;
     private exportImage;

package/lib/components/po-field/po-input/po-input-base.component.d.ts

@@ -170,6 +170,16 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
      * @default `false`
      */
     errorLimit: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value: boolean);
+    get loading(): boolean;
     /**
      * @optional
      *
@@ -292,6 +302,7 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
     protected onTouched: any;
     protected passedWriteValue: boolean;
     protected validatorChange: any;
+    private _loading;
     private _maxlength?;
     private _minlength?;
     private _noAutocomplete?;
@@ -492,6 +503,7 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
     writeValue(value: any): void;
     protected validateModel(): void;
     protected isAdditionalHelpEventTriggered(): boolean;
+    mapSizeToIcon(size: string): string;
     private validatePatternOnWriteValue;
     /**
      * Função que atribui foco ao componente.
@@ -517,7 +529,7 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
     };
     abstract getScreenValue(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoInputBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoInputBaseComponent, never, never, { "additionalHelpEventTrigger": { "alias": "additionalHelpEventTrigger"; "required": false; }; "additionalHelpTooltip": { "alias": "p-additional-help-tooltip"; "required": false; }; "appendBox": { "alias": "p-append-in-body"; "required": false; }; "autoFocus": { "alias": "p-auto-focus"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "emitAllChanges": { "alias": "p-emit-all-changes"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "help": { "alias": "p-help"; "required": false; }; "name": { "alias": "name"; "required": false; }; "errorAsyncProperties": { "alias": "p-error-async-properties"; "required": false; }; "errorPattern": { "alias": "p-error-pattern"; "required": false; }; "errorLimit": { "alias": "p-error-limit"; "required": false; }; "optional": { "alias": "p-optional"; "required": false; }; "showErrorMessageRequired": { "alias": "p-required-field-error-message"; "required": false; }; "upperCase": { "alias": "p-upper-case"; "required": false; }; "maskNoLengthValidation": { "alias": "p-mask-no-length-validation"; "required": false; }; "noAutocomplete": { "alias": "p-no-autocomplete"; "required": false; }; "placeholder": { "alias": "p-placeholder"; "required": false; }; "setDisabled": { "alias": "p-disabled"; "required": false; }; "setReadonly": { "alias": "p-readonly"; "required": false; }; "setRequired": { "alias": "p-required"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "showRequired": { "alias": "p-show-required"; "required": false; }; "setClean": { "alias": "p-clean"; "required": false; }; "setPattern": { "alias": "p-pattern"; "required": false; }; "maxlength": { "alias": "p-maxlength"; "required": false; }; "minlength": { "alias": "p-minlength"; "required": false; }; "setMask": { "alias": "p-mask"; "required": false; }; "setMaskFormatModel": { "alias": "p-mask-format-model"; "required": false; }; "poHelperComponent": { "alias": "p-helper"; "required": false; "isSignal": true; }; "labelTextWrap": { "alias": "p-label-text-wrap"; "required": false; "isSignal": true; }; }, { "additionalHelp": "p-additional-help"; "blur": "p-blur"; "enter": "p-enter"; "change": "p-change"; "changeModel": "p-change-model"; "keydown": "p-keydown"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoInputBaseComponent, never, never, { "additionalHelpEventTrigger": { "alias": "additionalHelpEventTrigger"; "required": false; }; "additionalHelpTooltip": { "alias": "p-additional-help-tooltip"; "required": false; }; "appendBox": { "alias": "p-append-in-body"; "required": false; }; "autoFocus": { "alias": "p-auto-focus"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "emitAllChanges": { "alias": "p-emit-all-changes"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "help": { "alias": "p-help"; "required": false; }; "name": { "alias": "name"; "required": false; }; "errorAsyncProperties": { "alias": "p-error-async-properties"; "required": false; }; "errorPattern": { "alias": "p-error-pattern"; "required": false; }; "errorLimit": { "alias": "p-error-limit"; "required": false; }; "loading": { "alias": "p-loading"; "required": false; }; "optional": { "alias": "p-optional"; "required": false; }; "showErrorMessageRequired": { "alias": "p-required-field-error-message"; "required": false; }; "upperCase": { "alias": "p-upper-case"; "required": false; }; "maskNoLengthValidation": { "alias": "p-mask-no-length-validation"; "required": false; }; "noAutocomplete": { "alias": "p-no-autocomplete"; "required": false; }; "placeholder": { "alias": "p-placeholder"; "required": false; }; "setDisabled": { "alias": "p-disabled"; "required": false; }; "setReadonly": { "alias": "p-readonly"; "required": false; }; "setRequired": { "alias": "p-required"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "showRequired": { "alias": "p-show-required"; "required": false; }; "setClean": { "alias": "p-clean"; "required": false; }; "setPattern": { "alias": "p-pattern"; "required": false; }; "maxlength": { "alias": "p-maxlength"; "required": false; }; "minlength": { "alias": "p-minlength"; "required": false; }; "setMask": { "alias": "p-mask"; "required": false; }; "setMaskFormatModel": { "alias": "p-mask-format-model"; "required": false; }; "poHelperComponent": { "alias": "p-helper"; "required": false; "isSignal": true; }; "labelTextWrap": { "alias": "p-label-text-wrap"; "required": false; "isSignal": true; }; }, { "additionalHelp": "p-additional-help"; "blur": "p-blur"; "enter": "p-enter"; "change": "p-change"; "changeModel": "p-change-model"; "keydown": "p-keydown"; }, never, never, true, never>;
     static ngAcceptInputType_appendBox: any;
     static ngAcceptInputType_autoFocus: any;
     static ngAcceptInputType_emitAllChanges: any;

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

@@ -1,4 +1,4 @@
-import { TemplateRef } from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * @docsPrivate
@@ -10,9 +10,11 @@ import * as i0 from "@angular/core";
  * Permite a exibição de ícones.
  */
 export declare class PoIconComponent {
+    iconElement: ElementRef;
     class: string;
     private _icon;
     private _iconToken;
+    hostPIcon: string | null;
     constructor(value: {
         [key: string]: string;
     });

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

@@ -77,6 +77,14 @@ export declare class PoItemListBaseComponent {
      * Define um ícone que será exibido ao lado esquerdo do rótulo.
      */
     icon: string | TemplateRef<void>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define se deve ser exibido o ícone indicando subnível.
+     */
+    iconArrowRight: string;
     iconPosition: 'left' | 'right';
     /**
      * @optional
@@ -108,7 +116,7 @@ export declare class PoItemListBaseComponent {
     keysLabel?: Array<string>;
     protected emitActiveTabs(tab: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoItemListBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoItemListBaseComponent, never, never, { "type": { "alias": "p-type"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; }; "item": { "alias": "p-item"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "value": { "alias": "p-value"; "required": false; }; "danger": { "alias": "p-danger"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "selected": { "alias": "p-selected"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "iconPosition": { "alias": "p-icon-position"; "required": false; }; "checkboxValue": { "alias": "p-checkbox-value"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "templateContext": { "alias": "p-template-context"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "tabHide": { "alias": "p-tab-hide"; "required": false; }; "activeTabs": { "alias": "p-active-tabs"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; }, { "clickItem": "p-click-item"; "checkboxItem": "p-selectcheckbox-item"; "comboItem": "p-selectcombo-item"; "tabsItem": "p-emit-item-tabs"; "activatedTab": "p-activated-tabs"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoItemListBaseComponent, never, never, { "type": { "alias": "p-type"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; }; "item": { "alias": "p-item"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "value": { "alias": "p-value"; "required": false; }; "danger": { "alias": "p-danger"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "selected": { "alias": "p-selected"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "iconArrowRight": { "alias": "p-icon-arrow-right"; "required": false; }; "iconPosition": { "alias": "p-icon-position"; "required": false; }; "checkboxValue": { "alias": "p-checkbox-value"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "templateContext": { "alias": "p-template-context"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "tabHide": { "alias": "p-tab-hide"; "required": false; }; "activeTabs": { "alias": "p-active-tabs"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; }, { "clickItem": "p-click-item"; "checkboxItem": "p-selectcheckbox-item"; "comboItem": "p-selectcombo-item"; "tabsItem": "p-emit-item-tabs"; "activatedTab": "p-activated-tabs"; }, never, never, true, never>;
     static ngAcceptInputType_danger: any;
     static ngAcceptInputType_selected: any;
     static ngAcceptInputType_separator: any;

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

@@ -29,7 +29,8 @@ export declare class PoListBoxComponent extends PoListBoxBaseComponent implement
     ngOnDestroy(): void;
     openGroup(group: PoDropdownAction, event?: MouseEvent | KeyboardEvent): void;
     goBack(event: MouseEvent | KeyboardEvent): void;
-    onKeydownGoBack(event: KeyboardEvent): void;
+    onKeydownGoBack(event: KeyboardEvent, currentGroup?: PoDropdownAction): void;
+    protected onKeydownTemplate(event: KeyboardEvent): void;
     onSelectItem(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: MouseEvent | KeyboardEvent): void | Promise<boolean>;
     onSelectAllCheckboxKeyDown(event: KeyboardEvent): void;
     onKeyDown(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: KeyboardEvent): void;

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

@@ -128,4 +128,5 @@ export interface PoPopupAction {
      */
     visible?: boolean | Function;
     $id?: string;
+    $subItemTemplate?: TemplateRef<any>;
 }

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

@@ -77,6 +77,7 @@ export declare class PoPopupBaseComponent {
     private _size?;
     private _target;
     listboxSubitems: boolean;
+    templateIcon: boolean;
     /** Lista de ações que serão exibidas no componente. */
     set actions(value: Array<PoPopupAction>);
     get actions(): Array<PoPopupAction>;
@@ -208,5 +209,5 @@ export declare class PoPopupBaseComponent {
     closeEvent: EventEmitter<any>;
     clickItem: EventEmitter<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoPopupBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopupBaseComponent, never, never, { "listboxSubitems": { "alias": "p-listbox-subitems"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "isCornerAlign": { "alias": "p-is-corner-align"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "customPositions": { "alias": "p-custom-positions"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; }, { "closeEvent": "p-close"; "clickItem": "p-click-item"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopupBaseComponent, never, never, { "listboxSubitems": { "alias": "p-listbox-subitems"; "required": false; }; "templateIcon": { "alias": "p-template-icon"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "isCornerAlign": { "alias": "p-is-corner-align"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "customPositions": { "alias": "p-custom-positions"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; }, { "closeEvent": "p-close"; "clickItem": "p-click-item"; }, never, never, true, never>;
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { PoListBoxComponent } from '../po-listbox';
 import { PoPopupAction } from './po-popup-action.interface';
 import { PoPopupBaseComponent } from './po-popup-base.component';
@@ -25,7 +25,8 @@ import * as i0 from "@angular/core";
  * </example>
  *
  */
-export declare class PoPopupComponent extends PoPopupBaseComponent {
+export declare class PoPopupComponent extends PoPopupBaseComponent implements AfterViewInit {
+    id: string;
     private renderer;
     private router;
     private poControlPosition;
@@ -33,6 +34,7 @@ export declare class PoPopupComponent extends PoPopupBaseComponent {
     popupRef: ElementRef;
     listbox: ElementRef;
     poListBoxRef: PoListBoxComponent;
+    ngAfterViewInit(): void;
     /**
      * Fecha o componente *popup*.
      *

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

@@ -158,7 +158,8 @@ export declare class PoTagBaseComponent {
      *   - <span class="dot po-color-11"></span> `color-11`
      *   - <span class="dot po-color-12"></span> `color-12`
      *
-     * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background.
+     * - 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.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
      */

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

@@ -38,10 +38,8 @@ export declare class PoTagComponent extends PoTagBaseComponent implements OnInit
     onKeyPressed(event: any): void;
     styleTag(): {
         'background-color': any;
-        color: string;
     } | {
         'background-color'?: undefined;
-        color?: undefined;
     };
     getWidthTag(): boolean;
     setAriaLabel(): string;

package/lib/utils/util.d.ts

@@ -302,3 +302,15 @@ export declare function updateTooltip(isTooltipActive: boolean, labelElement: El
  * @returns O elemento que deve ser medido para verificar se está com ellipsis.
  */
 export declare function getMeasurableEl(labelElement: ElementRef<HTMLElement>): Element;
+/**
+ * Retorna a cor do texto baseada no tema atual.
+ * @param type Tipo de cor do texto, pode ser 'lightest' ou 'darkest'.
+ * @returns Valor da cor no formato definido pela propriedade customizada CSS (por exemplo, '#ffffff', 'rgb(255,255,255)').
+ */
+export declare function getTextColor(type: 'lightest' | 'darkest'): string;
+/**
+ * Retorna a cor do texto baseada na cor de fundo informada.
+ * @param backgroundColor Cor de fundo em formato 'rgb(r,g,b)' ou 'rgba(r,g,b,a)'.
+ * @returns Valor da cor do texto (por exemplo, '#ffffff', 'rgb(255,255,255)') baseado no brilho percebido da cor de fundo usando a fórmula do espaço de cor YIQ.
+ */
+export declare function getTextColorFromBackgroundColor(backgroundColor: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "19.37.0",
+  "version": "19.38.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~19.0.3",
-    "@po-ui/style": "19.37.0",
-    "@po-ui/ng-schematics": "19.37.0",
+    "@po-ui/style": "19.38.0",
+    "@po-ui/ng-schematics": "19.38.0",
     "echarts": "^5.6.0",
     "tslib": "^2.6.2"
   },
@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^19",
     "@angular/router": "^19",
     "@angular-devkit/schematics": "^19",
-    "@po-ui/style": "19.37.0",
+    "@po-ui/style": "19.38.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 }
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.37.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.38.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };