@po-ui/ng-components 19.36.0 → 19.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/fesm2022/po-ui-ng-components.mjs +440 -94
  2. package/fesm2022/po-ui-ng-components.mjs.map +1 -1
  3. package/lib/components/po-chart/enums/po-chart-type.enum.d.ts +5 -1
  4. package/lib/components/po-chart/index.d.ts +4 -4
  5. package/lib/components/po-chart/interfaces/po-chart-indicator-options.interface.d.ts +50 -0
  6. package/lib/components/po-chart/interfaces/po-chart-options.interface.d.ts +17 -1
  7. package/lib/components/po-chart/interfaces/po-chart-radar-options.interface.d.ts +38 -0
  8. package/lib/components/po-chart/interfaces/po-chart-serie-data-label.interface.d.ts +1 -2
  9. package/lib/components/po-chart/interfaces/po-chart-serie.interface.d.ts +15 -5
  10. package/lib/components/po-chart/po-chart-base.component.d.ts +22 -9
  11. package/lib/components/po-chart/po-chart-grid-utils.d.ts +45 -0
  12. package/lib/components/po-chart/po-chart.component.d.ts +7 -0
  13. package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts +33 -6
  14. package/lib/components/po-field/po-input/po-input-base.component.d.ts +15 -3
  15. package/lib/components/po-field/po-number/po-number.component.d.ts +11 -0
  16. package/lib/components/po-icon/po-icon.component.d.ts +3 -1
  17. package/lib/components/po-listbox/po-item-list/po-item-list-base.component.d.ts +9 -1
  18. package/lib/components/po-listbox/po-listbox.component.d.ts +2 -1
  19. package/lib/components/po-popup/po-popup-action.interface.d.ts +1 -0
  20. package/lib/components/po-popup/po-popup-base.component.d.ts +2 -1
  21. package/lib/components/po-popup/po-popup.component.d.ts +4 -2
  22. package/lib/components/po-tag/po-tag-base.component.d.ts +2 -1
  23. package/lib/components/po-tag/po-tag.component.d.ts +0 -2
  24. package/lib/utils/util.d.ts +12 -0
  25. package/package.json +4 -4
  26. package/po-ui-ng-components-19.38.0.tgz +0 -0
  27. package/schematics/ng-add/index.js +1 -1
  28. package/schematics/ng-update/v14/index.js +1 -1
  29. package/schematics/ng-update/v15/index.js +1 -1
  30. package/schematics/ng-update/v16/index.js +1 -1
  31. package/schematics/ng-update/v17/index.js +1 -1
  32. package/schematics/ng-update/v18/index.js +2 -2
  33. package/schematics/ng-update/v19/index.js +2 -2
  34. package/schematics/ng-update/v2/index.js +1 -1
  35. package/schematics/ng-update/v3/index.js +1 -1
  36. package/schematics/ng-update/v4/index.js +1 -1
  37. package/schematics/ng-update/v5/index.js +1 -1
  38. package/schematics/ng-update/v6/index.js +1 -1
  39. package/po-ui-ng-components-19.36.0.tgz +0 -0
@@ -38,5 +38,9 @@ export declare enum PoChartType {
38
38
  * - É possível demonstrar um dado percentual simples em conjunto com uma descrição resumida em seu interior;
39
39
  * - Para um demonstrativo mais elaborado, consegue-se definir alcances em cores, um breve texto descritivo e um ponteiro indicando o valor desejado.
40
40
  */
41
- Gauge = "gauge"
41
+ Gauge = "gauge",
42
+ /**
43
+ * Tipo de gráfico utilizado para visualizar e comparar o desempenho de diferentes itens em múltiplas categorias.
44
+ */
45
+ Radar = "radar"
42
46
  }
@@ -1,11 +1,11 @@
1
- export * from './enums/po-chart-type.enum';
2
1
  export * from './enums/po-chart-label-format.enum';
3
- export * from './interfaces/po-chart-serie.interface';
2
+ export * from './enums/po-chart-type.enum';
4
3
  export * from './interfaces/po-chart-serie-data-label.interface';
5
- export * from './interfaces/po-chart-options.interface';
6
- export * from './interfaces/po-chart-literals.interface';
7
4
  export * from './interfaces/po-chart-literals-default.interface';
8
5
  export * from './interfaces/po-chart-header-options.interface';
9
6
  export * from './interfaces/po-chart-axis-options.interface';
7
+ export * from './interfaces/po-chart-literals.interface';
8
+ export * from './interfaces/po-chart-options.interface';
9
+ export * from './interfaces/po-chart-serie.interface';
10
10
  export * from './po-chart.component';
11
11
  export * from './po-chart.module';
@@ -0,0 +1,50 @@
1
+ /**
2
+ * @usedBy PoChartComponent
3
+ *
4
+ * @description
5
+ *
6
+ * Interface para configurações dos indicadores do gráfico `radar`.
7
+ */
8
+ export interface PoChartIndicatorOptions {
9
+ /**
10
+ * @optional
11
+ *
12
+ * @description
13
+ *
14
+ * Cor do texto do indicator.
15
+ * Recomendamos avaliar o contraste da cor definida para garantir melhor acessibilidade.
16
+ *
17
+ * > Nome da cor, hexadecimal ou RGB.
18
+ */
19
+ color?: string;
20
+ /**
21
+ * @optional
22
+ *
23
+ * @description
24
+ *
25
+ * Nome do indicator.
26
+ */
27
+ name?: string;
28
+ /**
29
+ * @optional
30
+ *
31
+ * @description
32
+ *
33
+ * Valor máximo do indicator.
34
+ *
35
+ * A propriedade `max` não impede que a série contenha valores superiores ao máximo definido.
36
+ * Caso isso ocorra, os valores poderão extrapolar os limites do gráfico.
37
+ */
38
+ max?: number;
39
+ /**
40
+ * @optional
41
+ *
42
+ * @description
43
+ *
44
+ * Valor mínimo do indicator, com valor padrão de 0.
45
+ *
46
+ * A propriedade `min` não impede que a série contenha valores inferiores ao mínimo definido.
47
+ * Caso isso ocorra, os valores serão apresentados ao centro do gráfico.
48
+ */
49
+ min?: number;
50
+ }
@@ -8,6 +8,7 @@ import { PoChartHeaderOptions } from './po-chart-header-options.interface';
8
8
  * *Interface* para configurações dos elementos do gráfico.
9
9
  */
10
10
  export interface PoChartOptions {
11
+ [key: string]: any;
11
12
  /**
12
13
  * @optional
13
14
  *
@@ -42,11 +43,24 @@ export interface PoChartOptions {
42
43
  * Define se os pontos do gráfico serão preenchidos.
43
44
  * Quando true, os pontos são totalmente coloridos. Quando false, apenas a borda dos pontos será exibida, mantendo o interior transparente.
44
45
  *
45
- * > Esta propriedade é utilizável para os gráficos dos tipos `Area` e `Line`.
46
+ * > Esta propriedade é utilizável para os gráficos dos tipos `Area`, `Line` e `Radar`.
47
+ * > Para o tipo `Radar`, o valor padrão é `true`.
46
48
  *
47
49
  * @default `false`
48
50
  */
49
51
  fillPoints?: boolean;
52
+ /**
53
+ * @optional
54
+ *
55
+ * @description
56
+ *
57
+ * Define se as séries terão sua área preenchida.
58
+ *
59
+ * > 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`.
60
+ *
61
+ * @default `false`
62
+ */
63
+ areaStyle?: boolean;
50
64
  /**
51
65
  * @optional
52
66
  *
@@ -92,6 +106,8 @@ export interface PoChartOptions {
92
106
  * @description
93
107
  *
94
108
  * Define a exibição da legenda do gráfico. Valor padrão é `true`
109
+ *
110
+ * @default `true`
95
111
  */
96
112
  legend?: boolean;
97
113
  /**
@@ -0,0 +1,38 @@
1
+ import { PoChartIndicatorOptions } from './po-chart-indicator-options.interface';
2
+ /**
3
+ * @usedBy PoChartComponent
4
+ *
5
+ * @description
6
+ *
7
+ * *Interface* para configurações do gráfico `radar`.
8
+ */
9
+ export interface PoChartRadarOptions {
10
+ /**
11
+ * @optional
12
+ *
13
+ * @description
14
+ *
15
+ * Define as configurações dos indicadores do gráfico, como nome, cor, valor mínimo e valor máximo.
16
+ */
17
+ indicator?: Array<PoChartIndicatorOptions>;
18
+ /**
19
+ * @optional
20
+ *
21
+ * @description
22
+ *
23
+ * Define o formato da grid, podendo ser exibida como polígono ou círculo.
24
+ *
25
+ * @default `polygon`
26
+ */
27
+ shape?: 'polygon' | 'circle';
28
+ /**
29
+ * @optional
30
+ *
31
+ * @description
32
+ *
33
+ * Define o efeito zebrado na grid.
34
+ *
35
+ * @default 'false'
36
+ */
37
+ splitArea?: boolean;
38
+ }
@@ -5,7 +5,6 @@
5
5
  *
6
6
  * Interface que define as propriedades de exibição dos rótulos das séries no `po-chart`.
7
7
  *
8
- * > Aplicável apenas para gráficos do tipo `line`.
9
8
  */
10
9
  export interface PoChartDataLabel {
11
10
  /**
@@ -19,7 +18,7 @@ export interface PoChartDataLabel {
19
18
  * - O *tooltip* não será exibido.
20
19
  * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
21
20
  *
22
- * > Disponível para os tipo de gráfico `PoChartType.Line`, `PoChartType.Area`, `PoChartType.Column` e `PoChartType.Bar`.
21
+ * > Disponível para os tipo de gráfico `PoChartType.Line`, `PoChartType.Area`, `PoChartType.Column`, `PoChartType.Bar e PoChartType.Radar`.
23
22
  */
24
23
  fixed?: boolean;
25
24
  }
@@ -4,7 +4,7 @@ import { PoChartType } from '../enums/po-chart-type.enum';
4
4
  *
5
5
  * @description
6
6
  *
7
- * Interface das series dinâmicas do `po-chart` que possibilita desenhar gráficos dos tipos `area`, `bar`, `column`, `line`, `donut` e `pie`
7
+ * Interface das series dinâmicas do `po-chart` que possibilita desenhar gráficos dos tipos `area`, `bar`, `column`, `line`, `donut`, `pie` e `radar`
8
8
  */
9
9
  export interface PoChartSerie {
10
10
  /**
@@ -39,12 +39,22 @@ export interface PoChartSerie {
39
39
  *
40
40
  * Define a lista de valores para a série. Os tipos esperados são de acordo com o tipo de gráfico:
41
41
  * - Para gráficos dos tipos `donut` e `pie`, espera-se *number*;
42
- * - Para gráficos dos tipos `area`, `bar`, `column` e `line`, espera-se um *array* de `data`.
42
+ * - Para gráficos dos tipos `area`, `bar`, `column`, `line` e `radar`, espera-se um *array* de `data`.
43
43
  *
44
44
  * > Se passado valor `null` em determinado item da lista, a iteração irá ignorá-lo.
45
45
  */
46
46
  data?: number | Array<number>;
47
- /** Rótulo referência da série;. */
47
+ /**
48
+ * @optional
49
+ *
50
+ * @description
51
+ *
52
+ * Define se a série terá sua área preenchida.
53
+ *
54
+ * > Propriedade válida para gráficos do tipo `Radar`, `fillpoints` não funciona quando `areaStyle` está definido como `true`.
55
+ */
56
+ areaStyle?: boolean;
57
+ /** Rótulo referência da série. */
48
58
  label?: string;
49
59
  /**
50
60
  * @optional
@@ -71,7 +81,8 @@ export interface PoChartSerie {
71
81
  * - `__texto__` → itálico (`<i>`).
72
82
  *
73
83
  * > Caso não seja informado um valor para o *tooltip*, será exibido da seguinte forma:
74
- * - `donut`: `label`: valor proporcional ao total em porcentagem.
84
+ * - `donut`, `label`: valor proporcional ao total em porcentagem.
85
+ * - `radar`: nome da série, o nome do indicator e os valores correspondentes.
75
86
  * - `area`, `bar`, `column`, `line` e `pie`: `label`: `data`.
76
87
  *
77
88
  * ### Exemplos:
@@ -134,7 +145,6 @@ export interface PoChartSerie {
134
145
  * > Válido para gráfico do tipo `Column` e `Bar`. Essa propriedade é ignorada caso a propriedade `stacked` da interface `PoChartOptions` esteja como `true`.
135
146
  *
136
147
  * > Essa propriedade habilita a propriedade `p-data-label` por padrão, podendo ser desabilitada passando `[p-data-label]={ fixed: false }`.
137
- *
138
148
  */
139
149
  stackGroupName?: string;
140
150
  }
@@ -1,10 +1,11 @@
1
1
  import { EventEmitter, OnInit } from '@angular/core';
2
- import { PoLanguageService } from '../../services/po-language/po-language.service';
3
- import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
2
+ import { PoChartDataLabel } from '../po-chart/interfaces/po-chart-serie-data-label.interface';
4
3
  import { PoChartLiterals } from '../po-chart/interfaces/po-chart-literals.interface';
4
+ import { PoChartRadarOptions } from './interfaces/po-chart-radar-options.interface';
5
+ import { PoLanguageService } from '../../services/po-language/po-language.service';
5
6
  import { PoChartOptions } from '../po-chart/interfaces/po-chart-options.interface';
6
- import { PoChartDataLabel } from '../po-chart/interfaces/po-chart-serie-data-label.interface';
7
7
  import { PoChartSerie } from '../po-chart/interfaces/po-chart-serie.interface';
8
+ import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
8
9
  import { PoPopupAction } from '../po-popup';
9
10
  import * as i0 from "@angular/core";
10
11
  /**
@@ -60,6 +61,9 @@ import * as i0 from "@angular/core";
60
61
  * | `--color-base-gauge` | Cor da base do gráfico `Gauge` | `var(--color-neutral-light-20)` |
61
62
  * | `--color-gauge-pointer-color` | Cor do ponteiro do gráfico `Gauge` | `var(--color-neutral-dark-70)` |
62
63
  * | `--color-chart-line-point-fill` | Cor de dentro do círculo dos gráficos `Line` e `Area` | `var(--color-neutral-light-00)` |
64
+ * | `--border-color-radar` | Cor do eixo da grid do gráfico `Radar` | `var(--color-neutral-light-30)` |
65
+ * | `--color-background-zebra` | Cor das áreas alternadas (efeito zebrado) da grid do gráfico `Radar` | `var(--color-neutral-light-10)` |
66
+ * | `--color-background-line` | Cor das áreas entre as faixas zebradas da grade do `Radar` | `none` |
63
67
  * | **Wrapper (.po-chart-container-gauge)** | | |
64
68
  * | `--background-color-container-gauge` | Cor de background do container do gauge | `var(--color-neutral-light-00)` |
65
69
  */
@@ -87,13 +91,20 @@ export declare abstract class PoChartBaseComponent implements OnInit {
87
91
  *
88
92
  * @description
89
93
  *
90
- * 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`.
94
+ * Define os valores utilizados na construção das categorias do gráfico.
95
+ *
96
+ * Para gráficos dos tipos *bar*, *area*, *column* e *line*, representa os nomes das categorias exibidas no eixo.
97
+ *
98
+ * Para gráficos do tipo *radar*, representa a configuração dos indicadores, formato (shape), áreas de divisão (splitArea)
99
+ * e demais opções específicas do gráfico `Radar`.
91
100
  *
92
- * > 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.
101
+ * > Caso nenhum valor seja informado, será utilizado um hífen como categoria
102
+ * correspondente para cada série.
93
103
  *
94
- * > Caso não seja especificado um valor para a categoria, será plotado um hífen na categoria referente a cada série.
104
+ * > Gráficos do tipo bar dimensionam sua área considerando a largura do maior texto
105
+ * da categoria, sendo recomendável utilizar rótulos curtos para facilitar a leitura.
95
106
  */
96
- categories?: Array<string>;
107
+ categories?: Array<string> | PoChartRadarOptions;
97
108
  /**
98
109
  * @optional
99
110
  *
@@ -110,7 +121,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
110
121
  * Objeto com as configurações usadas no `po-chart`.
111
122
  *
112
123
  * É possível, por exemplo, definir as configurações de exibição das legendas,
113
- * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column` e `bar` da seguinte forma:
124
+ * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column`, `bar` e `radar` da seguinte forma:
114
125
  *
115
126
  * ```
116
127
  * chartOptions: PoChartOptions = {
@@ -137,7 +148,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
137
148
  * - Os marcadores (*bullets*) terão seu estilo ajustado.
138
149
  * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
139
150
  *
140
- * > Disponível apenas para gráficos do tipo `line`.
151
+ * > Disponível para gráficos do tipo `line` e `radar`.
141
152
  *
142
153
  * #### Exemplo de utilização:
143
154
  * ```typescript
@@ -216,6 +227,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
216
227
  *
217
228
  * O evento emitirá o seguinte parâmetro:
218
229
  * - *donut* e *pie*: um objeto contendo a categoria e valor da série.
230
+ * - *radar*: um objeto contendo o nome da série e os valores.
219
231
  * - *area*, *line*, *column* e *bar*: um objeto contendo o nome da série, valor e categoria do eixo do gráfico.
220
232
  */
221
233
  seriesClick: EventEmitter<any>;
@@ -228,6 +240,7 @@ export declare abstract class PoChartBaseComponent implements OnInit {
228
240
  *
229
241
  * O evento emitirá o seguinte parâmetro de acordo com o tipo de gráfico:
230
242
  * - *donut* e *pie*: um objeto contendo a categoria e valor da série.
243
+ * - *radar*: um objeto contendo o nome da série e os valores.
231
244
  * - *area*, *line*, *column* e *bar*: um objeto contendo a categoria, valor da série e categoria do eixo do gráfico.
232
245
  */
233
246
  seriesHover: EventEmitter<any>;
@@ -22,4 +22,49 @@ export declare class PoChartGridUtils {
22
22
  private hasTopLegendOrNoZoom;
23
23
  private hasBottomLegendWithZoom;
24
24
  private getPaddingTopGrid;
25
+ private isRadarOptions;
26
+ convertRadarConfig(indicators: Array<string>): {
27
+ shape: string;
28
+ splitArea: boolean;
29
+ indicator: {
30
+ name: string;
31
+ }[];
32
+ };
33
+ setListTypeRadar(): {
34
+ shape: string;
35
+ radius: string;
36
+ splitLine: {
37
+ show: boolean;
38
+ lineStyle: {
39
+ color: string[];
40
+ width: number;
41
+ };
42
+ };
43
+ axisLine: {
44
+ show: boolean;
45
+ lineStyle: {
46
+ color: string;
47
+ width: number;
48
+ };
49
+ };
50
+ splitArea: {
51
+ show: boolean;
52
+ areaStyle: {
53
+ color: string[];
54
+ };
55
+ };
56
+ indicator: {
57
+ name: any;
58
+ max: any;
59
+ min: any;
60
+ color: any;
61
+ }[];
62
+ };
63
+ setSerieTypeRadar(serie: any, tokenBorderWidthMd: number, color: string): any;
64
+ setTooltipRadar(params: any): void;
65
+ buildRadarTooltip(params: any): string;
66
+ finalizeSerieTypeRadar(seriesUpdated: any): {
67
+ type: string;
68
+ data: any;
69
+ }[];
25
70
  }
@@ -41,6 +41,11 @@ import * as i0 from "@angular/core";
41
41
  * <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.html"> </file>
42
42
  * <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.ts"> </file>
43
43
  * </example>
44
+ *
45
+ * <example name="po-chart-technology-skill" title="PO Chart - Radar">
46
+ * <file name="sample-po-chart-technology-skill/sample-po-chart-technology-skill.component.html"> </file>
47
+ * <file name="sample-po-chart-technology-skill/sample-po-chart-technology-skill.component.ts"> </file>
48
+ * </example>
44
49
  */
45
50
  export declare class PoChartComponent extends PoChartBaseComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
46
51
  el: ElementRef<any>;
@@ -56,6 +61,7 @@ export declare class PoChartComponent extends PoChartBaseComponent implements On
56
61
  originalRadiusGauge: any;
57
62
  chartMarginTop: string;
58
63
  isTypeBar: boolean;
64
+ isTypeRadar: boolean;
59
65
  boundaryGap: boolean;
60
66
  listTypePieDonut: Array<any>;
61
67
  itemsTypeDonut: Array<any>;
@@ -119,6 +125,7 @@ export declare class PoChartComponent extends PoChartBaseComponent implements On
119
125
  private setTableProperties;
120
126
  private setTablePropertiesTypeBar;
121
127
  private setTablePropertiesTypeGauge;
128
+ private setTablePropertiesTypeRadar;
122
129
  private setTableColumns;
123
130
  private downloadCsv;
124
131
  private exportImage;
@@ -104,17 +104,44 @@ export interface PoDynamicFormField extends PoDynamicField {
104
104
  /**
105
105
  * Máscara para o campo.
106
106
  *
107
- * **Componentes compatíveis:** `po-input`.
107
+ * **Componente compatível:** `po-input`.
108
108
  * > também é atribuído ao utilizar a propriedade `type: time`.
109
109
  */
110
110
  mask?: string;
111
111
  /**
112
112
  * Define que o valor do componente será conforme especificado na mascára. O valor padrão é `false`.
113
113
  *
114
- * **Componentes compatíveis:** `po-input`.
114
+ * **Componente compatível:** `po-input`.
115
115
  * > também é atribuído ao utilizar a propriedade `type: time`.
116
116
  * */
117
117
  maskFormatModel?: boolean;
118
+ /**
119
+ * Controla como o componente aplica as validações de comprimento mínimo (`minLength`) e máximo (`maxLength`) quando há uma máscara (`p-mask`) definida.
120
+ *
121
+ * - Quando `true`, apenas os caracteres alfanuméricos serão contabilizados para a validação dos comprimentos.
122
+ * - Quando `false`, todos os caracteres, incluindo os especiais da máscara, serão considerados na validação.
123
+ *
124
+ * **Componentes compatíveis:** `po-input`, `po-decimal`.
125
+ *
126
+ * > Esta propriedade é ignorada quando utilizada em conjunto com `p-mask-format-model`.
127
+ *
128
+ * Exemplo:
129
+ * ```
130
+ * fields:Array<PoDynamicFormField> = [
131
+ * {
132
+ * property: 'CNPJ maskNoLengthValidation TRUE',
133
+ * required: true,
134
+ * showRequired: true,
135
+ * mask: '99.999.999/9999-99',
136
+ * pattern: '([0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9])',
137
+ * maskNoLengthValidation: true,
138
+ * maxLength: 14,
139
+ * minLength: 0
140
+ * }
141
+ * ```
142
+ * - Entrada: `11.111.111/1111-11` → Validação será aplicada somente aos números, ignorando os caracteres especiais.
143
+ */
144
+ maskNoLengthValidation?: boolean;
118
145
  /** Define o ícone que será exibido no início do campo.
119
146
  * > Esta propriedade só pode ser utilizado nos campos:
120
147
  * - Input;
@@ -397,7 +424,7 @@ export interface PoDynamicFormField extends PoDynamicField {
397
424
  /**
398
425
  * Permite a seleção de múltiplos itens.
399
426
  *
400
- * **Componente compatível:** `po-lookup`, `po-upload`
427
+ * **Componentes compatíveis:** `po-lookup`, `po-upload`
401
428
  */
402
429
  multiple?: boolean;
403
430
  /** Se verdadeiro, o campo receberá um botão para ser limpo.
@@ -464,7 +491,7 @@ export interface PoDynamicFormField extends PoDynamicField {
464
491
  * Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`.
465
492
  * > Quando utilizar a propriedade p-filter-service esta propriedade será ignorada.
466
493
  *
467
- * **Componentes compatíveis:** `po-multiselect`.
494
+ * **Componente compatível:** `po-multiselect`.
468
495
  */
469
496
  filterMode?: PoMultiselectFilterMode;
470
497
  /**
@@ -546,7 +573,7 @@ export interface PoDynamicFormField extends PoDynamicField {
546
573
  * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas.
547
574
  * Por exemplo: ["idCard", "name", "hireStatus", "age"].
548
575
  *
549
- * **Componentes compatíveis**: `po-lookup`
576
+ * **Componente compatível**: `po-lookup`
550
577
  */
551
578
  changeVisibleColumns?: Function;
552
579
  /**
@@ -555,7 +582,7 @@ export interface PoDynamicFormField extends PoDynamicField {
555
582
  * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente.
556
583
  * Por exemplo: ["idCard", "name", "hireStatus", "age"].
557
584
  *
558
- * **Componentes compatíveis**: `po-lookup`
585
+ * **Componente compatível**: `po-lookup`
559
586
  */
560
587
  columnRestoreManager?: Function;
561
588
  /**
@@ -170,6 +170,16 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
170
170
  * @default `false`
171
171
  */
172
172
  errorLimit: boolean;
173
+ /**
174
+ * @optional
175
+ *
176
+ * @description
177
+ * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
178
+ *
179
+ * @default `false`
180
+ */
181
+ set loading(value: boolean);
182
+ get loading(): boolean;
173
183
  /**
174
184
  * @optional
175
185
  *
@@ -207,12 +217,12 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
207
217
  /**
208
218
  * @description
209
219
  *
210
- * Define se os caracteres especiais da máscara devem ser ignorados ao validar os comprimentos mínimo (`minLength`) e máximo (`maxLength`) do campo.
220
+ * Controla como o componente aplica as validações de comprimento mínimo (`minLength`) e máximo (`maxLength`) quando há uma máscara (`p-mask`) definida.
211
221
  *
212
222
  * - Quando `true`, apenas os caracteres alfanuméricos serão contabilizados para a validação dos comprimentos.
213
223
  * - Quando `false`, todos os caracteres, incluindo os especiais da máscara, serão considerados na validação.
214
224
  *
215
- * > Será ignorado essa propriedade , caso esteja utilizando junto com a propriedade `p-mask-format-model`.
225
+ * > Esta propriedade é ignorada quando utilizada em conjunto com `p-mask-format-model`.
216
226
  *
217
227
  * Exemplo:
218
228
  * ```
@@ -292,6 +302,7 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
292
302
  protected onTouched: any;
293
303
  protected passedWriteValue: boolean;
294
304
  protected validatorChange: any;
305
+ private _loading;
295
306
  private _maxlength?;
296
307
  private _minlength?;
297
308
  private _noAutocomplete?;
@@ -492,6 +503,7 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
492
503
  writeValue(value: any): void;
493
504
  protected validateModel(): void;
494
505
  protected isAdditionalHelpEventTriggered(): boolean;
506
+ mapSizeToIcon(size: string): string;
495
507
  private validatePatternOnWriteValue;
496
508
  /**
497
509
  * Função que atribui foco ao componente.
@@ -517,7 +529,7 @@ export declare abstract class PoInputBaseComponent implements ControlValueAccess
517
529
  };
518
530
  abstract getScreenValue(): string;
519
531
  static ɵfac: i0.ɵɵFactoryDeclaration<PoInputBaseComponent, never>;
520
- 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>;
532
+ 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>;
521
533
  static ngAcceptInputType_appendBox: any;
522
534
  static ngAcceptInputType_autoFocus: any;
523
535
  static ngAcceptInputType_emitAllChanges: any;
@@ -29,6 +29,17 @@ import * as i0 from "@angular/core";
29
29
  * </example>
30
30
  */
31
31
  export declare class PoNumberComponent extends PoNumberBaseComponent implements AfterViewInit, OnChanges {
32
+ /**
33
+ * @optional
34
+ *
35
+ * @description
36
+ *
37
+ * Indica uma máscara para o campo, porém é incompatível com o `po-number`.
38
+ * > **Componentes compatíveis:** `po-input`,`po-decimal`.
39
+ *
40
+ * @override
41
+ */
42
+ mask?: string;
32
43
  /**
33
44
  * @optional
34
45
  *
@@ -1,4 +1,4 @@
1
- import { TemplateRef } from '@angular/core';
1
+ import { ElementRef, TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  /**
4
4
  * @docsPrivate
@@ -10,9 +10,11 @@ import * as i0 from "@angular/core";
10
10
  * Permite a exibição de ícones.
11
11
  */
12
12
  export declare class PoIconComponent {
13
+ iconElement: ElementRef;
13
14
  class: string;
14
15
  private _icon;
15
16
  private _iconToken;
17
+ hostPIcon: string | null;
16
18
  constructor(value: {
17
19
  [key: string]: string;
18
20
  });
@@ -77,6 +77,14 @@ export declare class PoItemListBaseComponent {
77
77
  * Define um ícone que será exibido ao lado esquerdo do rótulo.
78
78
  */
79
79
  icon: string | TemplateRef<void>;
80
+ /**
81
+ * @optional
82
+ *
83
+ * @description
84
+ *
85
+ * Define se deve ser exibido o ícone indicando subnível.
86
+ */
87
+ iconArrowRight: string;
80
88
  iconPosition: 'left' | 'right';
81
89
  /**
82
90
  * @optional
@@ -108,7 +116,7 @@ export declare class PoItemListBaseComponent {
108
116
  keysLabel?: Array<string>;
109
117
  protected emitActiveTabs(tab: any): void;
110
118
  static ɵfac: i0.ɵɵFactoryDeclaration<PoItemListBaseComponent, never>;
111
- 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>;
119
+ 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>;
112
120
  static ngAcceptInputType_danger: any;
113
121
  static ngAcceptInputType_selected: any;
114
122
  static ngAcceptInputType_separator: any;
@@ -29,7 +29,8 @@ export declare class PoListBoxComponent extends PoListBoxBaseComponent implement
29
29
  ngOnDestroy(): void;
30
30
  openGroup(group: PoDropdownAction, event?: MouseEvent | KeyboardEvent): void;
31
31
  goBack(event: MouseEvent | KeyboardEvent): void;
32
- onKeydownGoBack(event: KeyboardEvent): void;
32
+ onKeydownGoBack(event: KeyboardEvent, currentGroup?: PoDropdownAction): void;
33
+ protected onKeydownTemplate(event: KeyboardEvent): void;
33
34
  onSelectItem(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: MouseEvent | KeyboardEvent): void | Promise<boolean>;
34
35
  onSelectAllCheckboxKeyDown(event: KeyboardEvent): void;
35
36
  onKeyDown(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: KeyboardEvent): void;
@@ -128,4 +128,5 @@ export interface PoPopupAction {
128
128
  */
129
129
  visible?: boolean | Function;
130
130
  $id?: string;
131
+ $subItemTemplate?: TemplateRef<any>;
131
132
  }