@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.
- package/fesm2022/po-ui-ng-components.mjs +440 -94
- package/fesm2022/po-ui-ng-components.mjs.map +1 -1
- package/lib/components/po-chart/enums/po-chart-type.enum.d.ts +5 -1
- package/lib/components/po-chart/index.d.ts +4 -4
- package/lib/components/po-chart/interfaces/po-chart-indicator-options.interface.d.ts +50 -0
- package/lib/components/po-chart/interfaces/po-chart-options.interface.d.ts +17 -1
- package/lib/components/po-chart/interfaces/po-chart-radar-options.interface.d.ts +38 -0
- package/lib/components/po-chart/interfaces/po-chart-serie-data-label.interface.d.ts +1 -2
- package/lib/components/po-chart/interfaces/po-chart-serie.interface.d.ts +15 -5
- package/lib/components/po-chart/po-chart-base.component.d.ts +22 -9
- package/lib/components/po-chart/po-chart-grid-utils.d.ts +45 -0
- package/lib/components/po-chart/po-chart.component.d.ts +7 -0
- package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts +33 -6
- package/lib/components/po-field/po-input/po-input-base.component.d.ts +15 -3
- package/lib/components/po-field/po-number/po-number.component.d.ts +11 -0
- package/lib/components/po-icon/po-icon.component.d.ts +3 -1
- package/lib/components/po-listbox/po-item-list/po-item-list-base.component.d.ts +9 -1
- package/lib/components/po-listbox/po-listbox.component.d.ts +2 -1
- package/lib/components/po-popup/po-popup-action.interface.d.ts +1 -0
- package/lib/components/po-popup/po-popup-base.component.d.ts +2 -1
- package/lib/components/po-popup/po-popup.component.d.ts +4 -2
- package/lib/components/po-tag/po-tag-base.component.d.ts +2 -1
- package/lib/components/po-tag/po-tag.component.d.ts +0 -2
- package/lib/utils/util.d.ts +12 -0
- package/package.json +4 -4
- package/po-ui-ng-components-19.38.0.tgz +0 -0
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-update/v14/index.js +1 -1
- package/schematics/ng-update/v15/index.js +1 -1
- package/schematics/ng-update/v16/index.js +1 -1
- package/schematics/ng-update/v17/index.js +1 -1
- package/schematics/ng-update/v18/index.js +2 -2
- package/schematics/ng-update/v19/index.js +2 -2
- package/schematics/ng-update/v2/index.js +1 -1
- package/schematics/ng-update/v3/index.js +1 -1
- package/schematics/ng-update/v4/index.js +1 -1
- package/schematics/ng-update/v5/index.js +1 -1
- package/schematics/ng-update/v6/index.js +1 -1
- 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 './
|
|
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 `
|
|
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
|
|
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 `
|
|
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 `
|
|
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
|
-
/**
|
|
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
|
|
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 {
|
|
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
|
|
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
|
-
* >
|
|
101
|
+
* > Caso nenhum valor seja informado, será utilizado um hífen como categoria
|
|
102
|
+
* correspondente para cada série.
|
|
93
103
|
*
|
|
94
|
-
* >
|
|
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 `
|
|
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
|
|
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;
|
package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts
CHANGED
|
@@ -104,17 +104,44 @@ export interface PoDynamicFormField extends PoDynamicField {
|
|
|
104
104
|
/**
|
|
105
105
|
* Máscara para o campo.
|
|
106
106
|
*
|
|
107
|
-
* **
|
|
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
|
-
* **
|
|
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
|
-
* **
|
|
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
|
-
* **
|
|
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
|
-
* **
|
|
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
|
-
* **
|
|
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
|
-
*
|
|
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
|
-
* >
|
|
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;
|