# PO UI - Documentação Completa
> Gerado automaticamente a partir do código-fonte. Versão atual em https://po-ui.io/llms.txt
---
# PoComboOptionTemplateDirective
**Seletor:** `[p-combo-option-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-combo-option-template]
Esta diretiva permite personalizar o conteúdo dos itens exibidos na lista de opções do componente.
> Quando utilizada em dispositivos *mobile* será exibido o componente nativo.
Para personalizar o conteúdo de cada item da lista deve-se utilizar a diretiva `p-combo-option-template` com `ng-template`
dentro da *tag* `po-combo`.
Para obter a referência do item atual utilize `let-option`, com isso você terá acesso aos valores e poderá personalizar sua exibição.
Esta diretiva compõe-se de dois meios para uso, de forma explícita tal como em *syntax sugar*. Veja a seguir ambos, respectivamente:
```
...
...
```
```
...
...
```
Para o caso de personalização de opções com agrupamentos, deve-se seguir a mesma orientação acima. Porém, cabe ao desenvolvedor
a responsabilidade de estilização dos elementos da lista, tais como título e links dos grupos. Abaixo há um exemplo de aplicação:
```
...
...
```
---
# PoJobSchedulerParametersTemplateDirective
**Seletor:** `[p-job-scheduler-parameters-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-job-scheduler-parameters-template]
Esta diretiva permite personalizar o conteúdo da uma ou várias etapa(s) de parametrização do componente de PoPageJobScheduler.
Para repassar as alterações realizadas no componente customizado ao model do PoPageJobScheduler, deve
ser atualizado os valores através da propriedade p-execution-parameter. Dessa forma as alterações serão adicionadas ao
atributo executionParameter do objeto de envio a Api.
É possível também controlar a permissão de avançar, fazendo uso da propriedade p-disable-advance.
```
...
...
...
...
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `disabledAdvance` | `'p-disable-advance'` | `boolean` | sim | false
| Determina se deve desabilitar o botão de avançar para a próxima etapa |
| `executionParameter` | `'p-execution-parameter'` | `object` | sim | - | Objeto que deve conter as alterações feitas pelo componente de template que serão repassadas dentro do atributo |
| `title` | `'p-label-step'` | `string` | sim | - | Determina o label do step |
---
# PoJobSchedulerSummaryTemplateDirective
**Seletor:** `[p-job-scheduler-summary-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-job-scheduler-summary-template]
Esta diretiva permite personalizar o conteúdo de resumo das informações de parâmetro na etapa de conclusão do componente de PoPageJobScheduler.
Essa funcionalidade costuma ser útil em casos onde a propriedade parameters não tem valor e mesmo assim é necessário exibir
as informações de resumo na etapa de conclusão.
```
...
...
...
```
---
# PoListViewContentTemplateDirective
**Seletor:** `[p-list-view-content-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-list-view-content-template]
Esta diretiva permite que sejam apresentadas informações essenciais de cada item.
Deve-se utilizar como parâmetro a referência do item e/ou índice, sendo por padrão o item.
- Item: `item` determina o item da linha corrente.
- Índice: `index` determina o índice da linha corrente.
Esta diretiva pode ser usada de duas formas: explícita ou *syntax sugar*. Veja a seguir ambos, respectivamente:
```
...
...
```
```
...
...
```
A diretiva **p-list-view-content-template**, possibilita também alterar o título dos itens. Para isto,
é necessário atribuir a referência da função que faz a alteração, à propriedade `p-title`,
a mesma deve retornar um valor do tipo *string*. Veja o exemplo a seguir:
```
...
@Component({
selector: 'app-root',
template: `
...
...
`
})
export class AppComponent {
public items = [{
code: 1200,
product: 'Rice',
customer: 'Supermarket 1',
}, {
code: 1355,
product: 'Bean',
customer: 'Supermarket 2'
}];
customTitle(item) {
return `${item.code} - ${item.product}`;
}
}
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `title` | `'p-title'` | `(item) => string` | sim | - | Função que deve retornar um valor do tipo `string`, que será utilizado como o título de cada item da lista. |
---
# PoListViewDetailTemplateDirective
**Seletor:** `[p-list-view-detail-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-list-view-detail-template]
Esta diretiva permite que sejam apresentadas informações adicionais de cada item, construindo um
botão `Exibir detalhes` abaixo do conteúdo principal do item.
Deve-se utilizar como parâmetro a referência do item e/ou índice, sendo por padrão o item.
- Item: `item` determina o item da linha corrente.
- Índice: `index` determina o índice da linha corrente.
Esta diretiva pode ser usada de duas formas: explícita ou *syntax sugar*. Veja a seguir ambos, respectivamente:
```
...
...
```
```
...
...
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `showDetail` | `'p-show-detail'` | `(item) => boolean` | sim | - | Função que deve retornar um valor do tipo `boolean`, que será utilizado como a validação para que o detalhe de item |
---
# PoMenuHeaderTemplateDirective
**Seletor:** `[p-menu-header-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-menu-header-template]
Esta diretiva permite adicionar um conteúdo personalizado entre a logo e o campo de filtro do cabeçalho do
[`po-menu`](/documentation/po-menu).
Para personalizar o conteúdo do cabeçalho deve-se utilizar a diretiva `p-menu-header-template` dentro da *tag* do
[`po-menu`](/documentation/po-menu). Podendo ser utilizada de duas formas:
Com `ng-template`
```
...
...
...
```
ou com *syntax sugar*
```
...
...
...
```
> Quando o menu estiver colapsado ou tela for _mobile_ o conteúdo personalizado não será exibido.
---
# PoMultiselectOptionTemplateDirective
**Seletor:** `[p-multiselect-option-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-multiselect-option-template]
Esta diretiva permite personalizar o conteúdo dos itens exibidos na lista de opções do componente.
Para personalizar o conteúdo de cada item da lista deve-se utilizar a diretiva `p-multiselect-option-template` com `ng-template`
dentro da *tag* `po-multiselect`, o seu array de `p-options` repassado para com componente deve conter a propriedade `value` e `label`.
Para obter a referência do item atual utilize `let-option`, com isso você terá acesso aos valores e poderá personalizar sua exibição.
Exemplo de uso:
```
...
...
```
---
# PoSlideContentTemplateDirective
**Seletor:** `[p-slide-content-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-slide-content-template]
Esta diretiva permite a customização de um slide.
Deve-se utilizar como parâmetro a referência do item e/ou índice, sendo por padrão o item.
- Item: `item` determina o item do slide corrente.
- Índice: `index` determina o índice do slide corrente.
Esta diretiva pode ser usada de duas formas: explícita ou *syntax sugar*. Veja a seguir ambos, respectivamente:
```
...
...
```
```
...
...
```
---
# PoTableCellTemplateDirective
**Seletor:** `[p-table-cell-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-table-cell-template]
Esta diretiva permite que seja possível alterar o conteúdo das células de uma coluna, para que os valores possam ser exibidos
de acordo com a necessidade do usuário.
Em seu uso, deve-se apenas adicionar a diretiva **p-table-cell-template** à tag `ng-template`.
Retorno:
- `column`: conteúdo da coluna corrente.
- `row`: conteúdo da linha corrente
Modo de uso:
```
...
CANCELADA
clique aqui FINALIZADA
ABERTA
Conteúdo do status 2
Conteúdo do status 3
...
```
> No exemplo acima, o usuário tem como retorno `row` e a `column` corrente, neste caso ele tem total liberdade para manipular os objetos.
Abaixo, a declaração dos dados de entrada do PO-TABLE para o uso da directiva.
```
...
export class AppComponent {
items = [{
code: 1200,
product: 'Rice',
status: 'CANCELED',
status2: '',
status3: ''
},{
code: 1355,
product: 'Bean',
status: 'FINISHED',
status2: '',
status3: ''
}];
columns = [
{ property: 'code', label: 'ID' },
{ property: 'product', label: 'PRODUTO' },
{ property: 'status', label: 'STATUS', type: 'cellTemplate' },
{ property: 'status2', label: 'STATUS 2', type: 'cellTemplate' },
{ property: 'status3', label: 'STATUS 3', type: 'cellTemplate' }
];
}
...
```
> Observação: Sempre adicionar o **type** da coluna que deseja manipular com a directiva como `cellTemplate`
---
# PoTableColumnTemplateDirective
**Seletor:** `[p-table-column-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-table-column-template]
Esta diretiva permite que seja possível alterar o conteúdo das células de uma coluna, para que os valores possam ser exibidos
de acordo com a necessidade do usuário.
Em seu uso, deve-se utilizar como parâmetro de entrada o input [p-property], o qual é responsável por informar ao PO-TABLE qual a coluna que
será adicionado o conteúdo do template.
Retorno:
- value: valor referente ao conteúdo da linha corrente.
Modo de uso:
```html
...
...
```
> No exemplo acima, todas as células correspondentes a coluna `status` terão o conteúdo alterado para `${value} `,
sendo que `value` refere-se ao conteúdo da linha.
```html
...
...
```
> Agora, neste exemplo, com o valor da linha corrente retornado (value), é feito uma validação para
definir o template exato para adicionar a uma específica célula.
Abaixo, a declaração dos dados de entrada do PO-TABLE para o uso da directiva.
```typescript
...
export class AppComponent {
targetProperty= 'status';
items = [{
code: 1200,
product: 'Rice',
status: 'CANCELED'
},{
code: 1355,
product: 'Bean',
status: 'FINISHED'
}];
columns = [
{ property: 'code', label: 'ID' },
{ property: 'product', label: 'PRODUTO' },
{ property: 'status', label: 'STATUS', type: 'columnTemplate' }
];
}
...
```
> Observação: Sempre adicionar o **type** da coluna que deseja manipular com a directiva como `columnTemplate`
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `targetProperty` | `'p-property'` | `string` | sim | - | Variável responsável por armazenar a property da coluna da tabela que será adicionado o template. |
---
# PoTableRowTemplateDirective
**Seletor:** `[p-table-row-template]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-table-row-template]
Esta diretiva permite que seja apresentada informações adicionais a respeito de uma determinada linha de
dados, de forma que possam ser exibidas e ocultadas através do botão de acionamento.
> Quando utilizada, sobrepõe as funcionalidade básicas do *master-detail*.
Em seu uso, deve-se utilizar como parâmetro a referência da _linha_ e/ou _índice_, sendo por padrão linha. Caso não seja declarado,
o componente não exibirá conteúdo.
- Linha: `row` determina o item da linha corrente.
- Índice: `rowIndex` determina o índice da linha corrente.
Esta diretiva compõe-se de dois meios para uso, de forma explícita tal como em *syntax sugar*. Veja a seguir ambos, respectivamente:
```
...
...
```
```
...
...
```
A diretiva **p-table-row-template**, possibilita também que determinada linha apresente ou não seu _template_. Para isto,
é necessário atribuir a referência da função que faz esta verificação, à propriedade `p-table-row-template-show`,
a mesma deve retornar um valor do tipo *boolean*. Veja o exemplo a seguir:
```
...
@Component({
selector: 'app-root',
templateUrl: `
...
...
`
})
export class AppComponent {
public dataTable = [{
code: 1200,
product: 'Rice',
costumer: 'Supermarket 1',
quantity: 3,
status: 'delivered',
license_plate: 'MDJD9191',
batch_product: 18041822,
driver: 'José Oliveira'
}, {
code: 1355,
product: 'Bean',
costumer: 'Supermarket 2',
quantity: 1,
status: 'transport',
license_plate: 'XXA5454',
batch_product: 18041821,
driver: 'Francisco Pereira'
}];
isUndelivered(row, index: number) {
return row.status !== 'delivered';
}
}
```
> No exemplo acima, somente será disponibilizado os detalhes de informações nas linhas cujo o valor de `status`
não correspondam à *delivered*.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `poTableRowTemplateShow` | `'p-table-row-template-show'` | `(row: any, index: number) => boolean` | sim | `true` | Função que deve retornar um valor booleano, informando se apresentará o template da linha. |
| `tableRowTemplateArrowDirection` | `'p-table-row-template-arrow-direction'` | `PoTableRowTemplateArrowDirection` | sim | `'LEFT'` | Propriedade responsável por informar a posição do colapse que abrirá os detalhes da linha. |
---
# PoTooltipDirective
**Seletor:** `[p-tooltip]`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/[p-tooltip]
A diretiva po-tooltip deve ser utilizada para oferecer informações adicionais quando os usuários
passam o mouse ou realizam o foco sobre o elemento alvo ao qual ela está atribuída.
O conteúdo é formado por um pequeno texto que deve contribuir para uma tomada de decisão ou
orientação do usuário. A ativação dele pode estar em qualquer componente ou tag HTML.
Para textos maiores ou no caso de haver a necessidade de utilizar algum outro elemento como
conteúdo deve-se utilizar o [**po-popover**](https://po-ui.io/documentation/po-popover?view=doc).
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------------|------------------------------------------------------------------|--------------------------------------------------|
| **Default Values** | | |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--color` | Cor principal da tooltip | `var(--color-neutral-dark-80)` |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--text-color` | Cor do texto | `var(--color-neutral-light-00)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `appendInBody` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o po-tooltip será incluido no body e não dentro do elemento ao qual o tooltip foi especificado. |
| `hideArrow` | `'p-hide-arrow'` | `boolean` | sim | `false` | Controla a exibição da seta de indicação da tooltip. |
| `innerHtml` | `'p-inner-html'` | `boolean` | sim | `false` | Permite a renderização de conteúdo HTML dentro da tooltip. |
| `tooltip` | `'p-tooltip'` | `string` | não | - | Habilita e atribui um texto ao po-tooltip. |
| `tooltipPosition` | `'p-tooltip-position'` | `string` | sim | bottom | Define a posição que o po-tooltip abrirá em relação ao componente alvo. Sugere-se que seja |
---
# PoAccordionComponent
**Seletor:** `po-accordion`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-accordion
Componente utilizado para agrupar visualmente uma lista de conteúdos, mostrando-os individualmente
ao clicar no título de cada item.
Para utilizá-lo, é necessário envolver cada item no componente [`po-accordion-item`](/documentation/po-accordion-item),
como no exemplo abaixo:
```
Accordion 1
Accordion 2
```
e no typescript pode-se utilizar o `@ViewChild`:
```
@ViewChild(PoAccordionComponent, { static: true }) accordion: PoAccordionComponent;
ngAfterContentInit() {
// ou utilizar o método collapseAllItems();
this.accordion.expandAllItems();
}
```
O componente já faz o controle de abertura e fechamento dos itens automaticamente.
Caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript
acesse a [documentação do PoAccordionItem](/documentation/po-accordion-item).
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--color` | Cor principal do accordion | `var(--color-action-default)` |
| `--background-color` | Cor de background | `var(--color-neutral-light-00)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-focus)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-mid-60)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-10)` |
| **po-accordion-manager** | | |
| `--background-color` | Cor de background | `var(--color-neutral-mid-60)` |
| `--color` | Cor principal do accordion manager | `var(--color-neutral-light-10)` |
| `--font-family` | Família tipográfica usada | `var(--color-neutral-light-10)` |
| `--font-size` | Tamanho da fonte | `var(--color-neutral-light-10)` |
| `--font-weight` | Peso da fonte | `var(--color-neutral-light-10)` |
| **Pressed** | | |
| `--background-pressed` | Cor de background no estado de pressionado | `var(--color-brand-01-lighter)` |
| `--color-pressed` | Cor principal no estado de pressionado | `var(--color-action-pressed)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `allowExpandItems` | `'p-allow-expand-all-items'` | `boolean` | sim | `false` | Permite expandir mais de um `
Accordion 1
Accordion 2
```
e no typescript pode-se utilizar o `@ViewChild`:
```
@ViewChild(PoAccordionItemComponent, { static: true }) item1: PoAccordionItemComponent;
ngAfterContentInit() {
// ou utilizar o método collapse()
this.item1.expand();
}
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `disabledItem` | `'p-disabled'` | `boolean` | sim | `false` | Desabilita item. |
| `label` | `'p-label'` | `string` | não | - | Título do item. |
| `labelTag` | `'p-label-tag'` | `string` | sim | - | Label da Tag. |
| `typeTag` | `'p-type-tag'` | `PoTagType` | sim | `info` | Define o tipo da *tag* caso ela esteja sendo exibida. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `collapseEvent` | `'p-collapse'` | `EventEmitter` | Evento disparado ao retrair o item, seja manualmente ou programaticamente. |
| `expandEvent` | `'p-expand'` | `EventEmitter` | Evento disparado ao expandir o item, seja manualmente ou programaticamente. |
## Métodos
### `collapse()`
Método para colapsar o `po-accordion-item`.
### `expand()`
Método para expandir o `po-accordion-item`.
---
# PoAvatarComponent
**Seletor:** `po-avatar`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-avatar
O componente `po-avatar` é um container para imagens em miniatura, possui um formato redondo e cinco opções de
tamanho, pode ser utilizado para mostrar a foto do perfil de um usuário, entre outras possibilidades.
Além de poder ser utilizado separadamente, é possível usar o `po-avatar` juntamente com outros componentes e criar
layouts ricos e bem interessantes para os usuários, como por exemplo, uma lista de itens ou produtos.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `loading` | `'p-loading'` | `'eager' | 'lazy'` | sim | `eager` | Indica como o navegador deve carregar a imagem. |
| `size` | `'p-size'` | `string` | sim | `md` | Tamanho de exibição do componente. |
| `src` | `'p-src'` | `string` | não | - | Fonte da imagem que pode ser um caminho local (`./assets/images/logo-black-small.png`) |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `click` | `'p-click'` | `EventEmitter` | Evento disparado ao clicar na imagem do *avatar*. |
---
# PoBadgeComponent
**Seletor:** `po-badge`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-badge
Utilizado para exibir a quantidade de notificações.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `ariaLabel` | `'p-aria-label'` | `string` | não | - | Define um `aria-label` para o `po-badge` |
| `color` | `'p-color'` | `string` | sim | `color-07` | Determina a cor do `po-badge`. As maneiras de customizar as cores são: |
| `icon` | `'p-icon'` | `PoBadgeIcon` | sim | - | Ícone exibido no `po-badge`. |
| `showBorder` | `'p-show-border'` | `boolean` | não | - | Exibe uma borda para o `po-badge` |
| `size` | `'p-size'` | `PoBadgeSize` | não | `medium` | Define o tamanho do `po-badge` |
| `status` | `'p-status'` | `PoBadgeStatus` | não | - | Define o estado do `po-badge` |
| `value` | `'p-value'` | `number` | não | - | Número exibido no componente, caso o mesmo seja maior que 9 o valor exibido será 9+. |
---
# PoBreadcrumbComponent
**Seletor:** `po-breadcrumb`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-breadcrumb
Este componente gera uma estrutura de navegação que apresenta ao usuário a localização
da URL atual, exibindo as antecessoras conforme é realizado a navegação na aplicação.
Quando não houver espaçamento suficiente para exibi-lás, o componente se encarrega também
de agrupar as URLs antecessoras, gerando assim um ícone que permite a visualização em cascata.
Caso um endereço seja especificado na propriedade `p-favorite-service`, o componente permite ao usuário
favoritar a URL.
Havendo necessidade de incluir parâmetros na requisição do serviço,
o componente dispõe da propriedade `p-params-service` que recebe um objeto contendo as informações.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--color` | Cor principal do icone de lista | `var(--color-action-default)` |
| `--color-icon` | Cor do icone ">" | `var(--color-neutral-mid-60)` |
| `--color-current-page` | Cor do pagina atual | `var(--color-neutral-mid-60)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `favoriteService` | `'p-favorite-service'` | `string` | sim | - | Permite definir uma URL no componente `po-breadcrumb` para favoritar ou desfavoritar. |
| `items` | `'p-items'` | `PoBreadcrumbItem[]` | não | - | Lista de itens do _breadcrumb_. |
| `paramsService` | `'p-params-service'` | `object` | sim | - | Objeto que possibilita o envio de parâmetros adicionais à requisição. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente entre `small` ou `medium`. |
---
# PoButtonComponent
**Seletor:** `po-button`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button
O `po-button` permite que o usuário execute ações predefinidas pelo desenvolvedor.
Através dos tipos, é possível identificar a importância de cada ação.
#### Boas práticas
- Evite `labels` extensos que quebram o layout do `po-button`, use `labels` diretos, curtos e intuitivos.
- Utilize apenas um `po-button` configurado como `primary` por página.
- Para ações irreversíveis use sempre a propriedade `p-danger`.
#### Acessibilidade tratada no componente
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- Quando em foco, o botão é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/#keyboard-interaction-3)
- A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--line-height` | Tamanho da label | `var(--line-height-none)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-md)` |
| `--padding` | Preenchimento | `0 1em` | | --- |
| **Danger** | | |
| `--text-color-danger` | Cor do texto no estado danger | `var(--color-neutral-light-00)` |
| `--color-button-danger` | Cor do botão no estado danger | `var(--color-feedback-negative-dark)` |
| `--color-danger-hover` | Cor de hover no estado danger | `var(--color-feedback-negative-darker)` |
| `--color-danger-pressed` | Cor pressionada no estado danger | `var(--color-feedback-negative-darkest)` |
| `--background-danger-hover` | Cor de background de hover no estado danger | `var(--color-feedback-negative-lighter)` |
| `--border-color-danger-hover` | Cor da borda de hover no estado danger | `var(--color-feedback-negative-darkest)` |
| `--background-danger-pressed` | Cor de background pressionado no estado danger | `var(--color-feedback-negative-light)` |
| `--background-color-button-danger` | Cor de background do botão no estado danger | `var(--color-transparent)` |
| **Default Values** | | |
| `--text-color` | Cor do texto | `var(--color-neutral-light-00)` |
| `--color` | Cor principal do botão | `var(--color-action-default)` |
| `--background-color` | Cor de background | `var(--color-transparent)` |
| `--border-color` | Cor da borda | `var(--color-transparent)` |
| `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-none)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| `--border-color-hover` | Cor da borda no estado hover | `var(--color-brand-01-darkest)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Pressed** | | |
| `--color-pressed` | Cor principal no estado de pressionado | `var(--color-action-pressed)` |
| `--background-pressed` | Cor de background no estado de pressionado | `var(--color-brand-01-light)` |
| **Disabled** | | |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| `--background-color-disabled` | Cor de background no estado disabled | `var(--color-transparent)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `ariaLabel` | `p-aria-label` | `string` | sim | - | Define um `aria-label` para o `po-button`. |
| `danger` | `'p-danger'` | `boolean` | sim | - | Deve ser usado em ações irreversíveis que o usuário precisa ter cuidado ao executá-la, como a exclusão de um registro. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Desabilita o `po-button` e não permite que o usuário interaja com o mesmo. |
| `icon` | `p-icon` | `string | TemplateRef` | sim | - | Ícone exibido ao lado esquerdo do label do botão. |
| `kind` | `'p-kind'` | `string` | sim | `secondary` | Define o estilo visual do componente conforme valores especificados no enum `PoButtonKind`: |
| `label` | `p-label` | `string` | sim | - | Label do botão. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento à esquerda do _label_ do botão. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `tabindex` | `'p-tabindex'` | `number | string` | sim | - | Define o `tabindex` do elemento `` nativo interno. |
| `type` | `p-type` | `PoButtonType` | sim | `PoButtonType.Button` | Define o tipo do botão. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `click` | `'p-click'` | `EventEmitter` | Ação que será executada quando o usuário clicar sobre o `po-button`. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoButtonComponent } from '@po-ui/ng-components';
...
@ViewChild(PoButtonComponent, { static: true }) button: PoButtonComponent;
focusButton() {
this.button.focus();
}
```
---
# PoButtonBaseComponent
**Seletor:** `po-button-base`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-base
O `po-button` permite que o usuário execute ações predefinidas pelo desenvolvedor.
Através dos tipos, é possível identificar a importância de cada ação.
#### Boas práticas
- Evite `labels` extensos que quebram o layout do `po-button`, use `labels` diretos, curtos e intuitivos.
- Utilize apenas um `po-button` configurado como `primary` por página.
- Para ações irreversíveis use sempre a propriedade `p-danger`.
#### Acessibilidade tratada no componente
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- Quando em foco, o botão é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/#keyboard-interaction-3)
- A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--line-height` | Tamanho da label | `var(--line-height-none)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-md)` |
| `--padding` | Preenchimento | `0 1em` | | --- |
| **Danger** | | |
| `--text-color-danger` | Cor do texto no estado danger | `var(--color-neutral-light-00)` |
| `--color-button-danger` | Cor do botão no estado danger | `var(--color-feedback-negative-dark)` |
| `--color-danger-hover` | Cor de hover no estado danger | `var(--color-feedback-negative-darker)` |
| `--color-danger-pressed` | Cor pressionada no estado danger | `var(--color-feedback-negative-darkest)` |
| `--background-danger-hover` | Cor de background de hover no estado danger | `var(--color-feedback-negative-lighter)` |
| `--border-color-danger-hover` | Cor da borda de hover no estado danger | `var(--color-feedback-negative-darkest)` |
| `--background-danger-pressed` | Cor de background pressionado no estado danger | `var(--color-feedback-negative-light)` |
| `--background-color-button-danger` | Cor de background do botão no estado danger | `var(--color-transparent)` |
| **Default Values** | | |
| `--text-color` | Cor do texto | `var(--color-neutral-light-00)` |
| `--color` | Cor principal do botão | `var(--color-action-default)` |
| `--background-color` | Cor de background | `var(--color-transparent)` |
| `--border-color` | Cor da borda | `var(--color-transparent)` |
| `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-none)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| `--border-color-hover` | Cor da borda no estado hover | `var(--color-brand-01-darkest)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Pressed** | | |
| `--color-pressed` | Cor principal no estado de pressionado | `var(--color-action-pressed)` |
| `--background-pressed` | Cor de background no estado de pressionado | `var(--color-brand-01-light)` |
| **Disabled** | | |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| `--background-color-disabled` | Cor de background no estado disabled | `var(--color-transparent)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `ariaLabel` | `p-aria-label` | `string` | sim | - | Define um `aria-label` para o `po-button`. |
| `danger` | `'p-danger'` | `boolean` | sim | - | Deve ser usado em ações irreversíveis que o usuário precisa ter cuidado ao executá-la, como a exclusão de um registro. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Desabilita o `po-button` e não permite que o usuário interaja com o mesmo. |
| `icon` | `p-icon` | `string | TemplateRef` | sim | - | Ícone exibido ao lado esquerdo do label do botão. |
| `kind` | `'p-kind'` | `string` | sim | `secondary` | Define o estilo visual do componente conforme valores especificados no enum `PoButtonKind`: |
| `label` | `p-label` | `string` | sim | - | Label do botão. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento à esquerda do _label_ do botão. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `tabindex` | `'p-tabindex'` | `number | string` | sim | - | Define o `tabindex` do elemento `` nativo interno. |
| `type` | `p-type` | `PoButtonType` | sim | `PoButtonType.Button` | Define o tipo do botão. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `click` | `'p-click'` | `EventEmitter` | Ação que será executada quando o usuário clicar sobre o `po-button`. |
---
# PoButtonGroupComponent
**Seletor:** `po-button-group`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-group
O componente `po-button-group` é formado por um conjunto de botões distribuídos horizontalmente.
Cada botão do grupo é tratado de forma individual, recebendo assim um rótulo, uma ação bem como se deverá estar habilitado ou não.
Este componente além de servir como um agrupador de botões para ação, também permite que sejam utilizados
para seleções multiplas e únicas.
O grupo de botões deve ser utilizado para organizar as ações de maneira uniforme e transmitir a ideia de que os botões fazem
parte de um mesmo contexto.
#### Boas práticas
- Evite usar o `po-button-group` com apenas 1 ação, para isso utilize o `po-button`.
- Procure utilizar no máximo 3 ações para cada `po-button-group`.
> As recomendações do `po-button` também valem para o `po-button-group`.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--line-height` | Tamanho da label | `var(--line-height-none)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-md)` |
| `--padding` | Preenchimento | `0 1em` |
| `--text-color` | Cor do texto | `var(--color-neutral-light-00)` |
| `--color` | Cor principal do botão | `var(--color-action-default)` |
| `--background-color` | Cor de background | `var(--color-transparent)` |
| `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-none)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| `--border-color-hover` | Cor da borda no estado hover | `var(--color-brand-01-darkest)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Pressed** | | |
| `--color-pressed` | Cor principal no estado de pressionado | `var(--color-action-pressed)` |
| `--background-pressed` | Cor de background no estado de pressionado | `var(--color-brand-01-light)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| `--background-color-disabled` | Cor de background no estado disabled | `var(--color-transparent)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `buttons` | `p-buttons` | `Array` | não | - | Lista de botões. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `toggle` | `'p-toggle'` | `string` | sim | `none` | Define o modo de seleção dos botões no componente conforme valores especificados no enum `PoButtonGroupToggle`: |
---
# PoButtonGroupBaseComponent
**Seletor:** `po-button-group-base`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-group-base
O componente `po-button-group` é formado por um conjunto de botões distribuídos horizontalmente.
Cada botão do grupo é tratado de forma individual, recebendo assim um rótulo, uma ação bem como se deverá estar habilitado ou não.
Este componente além de servir como um agrupador de botões para ação, também permite que sejam utilizados
para seleções multiplas e únicas.
O grupo de botões deve ser utilizado para organizar as ações de maneira uniforme e transmitir a ideia de que os botões fazem
parte de um mesmo contexto.
#### Boas práticas
- Evite usar o `po-button-group` com apenas 1 ação, para isso utilize o `po-button`.
- Procure utilizar no máximo 3 ações para cada `po-button-group`.
> As recomendações do `po-button` também valem para o `po-button-group`.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--line-height` | Tamanho da label | `var(--line-height-none)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-md)` |
| `--padding` | Preenchimento | `0 1em` |
| `--text-color` | Cor do texto | `var(--color-neutral-light-00)` |
| `--color` | Cor principal do botão | `var(--color-action-default)` |
| `--background-color` | Cor de background | `var(--color-transparent)` |
| `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-none)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| `--border-color-hover` | Cor da borda no estado hover | `var(--color-brand-01-darkest)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Pressed** | | |
| `--color-pressed` | Cor principal no estado de pressionado | `var(--color-action-pressed)` |
| `--background-pressed` | Cor de background no estado de pressionado | `var(--color-brand-01-light)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| `--background-color-disabled` | Cor de background no estado disabled | `var(--color-transparent)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `buttons` | `p-buttons` | `Array` | não | - | Lista de botões. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `toggle` | `'p-toggle'` | `string` | sim | `none` | Define o modo de seleção dos botões no componente conforme valores especificados no enum `PoButtonGroupToggle`: |
---
# PoCalendarComponent
**Seletor:** `po-calendar`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-calendar
O `po-calendar` é um componente para seleção de datas que permite a navegação entre meses por meio das setas direcionais
e dos seletores de mês e ano exibidos no cabeçalho.
O componente é recomendado para casos de seleção de datas próximas ao tempo presente. Por padrão, apresenta os dados do
mês atual e apenas um mês por vez, podendo exibir uma data pré-estabelecida conforme o contexto.
Este componente pode receber os seguintes formatos de data:
| Formato | Exemplo |
|--------------------------|-----------------------------|
| `ISO 8601 (Data/Hora)` | `2017-11-28T00:00:00-02:00` |
| `ISO 8601 (Data)` | `2017-11-28` |
| `JavaScript Date Object` | `new Date(2017, 10, 28)` |
> O valor é tratado internamente como **yyyy-mm-dd**.
*Importante:**
- Datas fora do intervalo (`p-min-date` / `p-max-date`) aparecem desabilitadas sem alterar o *model*.
#### Boas práticas
- Evite datas distantes: O uso do calendário não é recomendado para datas muito distantes (como data de nascimento), pois
exige excesso de cliques. Nesses casos, prefira um campo de texto para digitação.
- Impeça seleções ilógicas: Utilize as propriedades de limite para impedir que o usuário selecione períodos inválidos (ex:
data de retorno anterior à de partida).
- Sinalize a disponibilidade: Para datas que não podem ser selecionadas devido a um contexto específico, mantenha-as
inativas por meio de opacidade e desabilite a opção de clique.
- Contexto claro: Certifique-se de que o mês e o ano estejam sempre visíveis no cabeçalho para orientar a pessoa usuária
durante a navegação.
#### Acessibilidade tratada no componente
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo
proprietário do conteúdo. São elas:
- Navegação por teclado: O componente permite interação via tecla Tab entre os controles do cabeçalho e navegação no grid
de dias por meio das setas direcionais.
- Foco visual: A área de foco possui espessura de pelo menos 2 pixels CSS e não é sobreposta por outros elementos da tela,
garantindo visibilidade para usuários que utilizam teclado. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------|------------------------------------------------------|-----------------------------------|
| **Default Values** | | |
| `--background` | Cor de fundo | `var(--color-neutral-light-00)` |
| `--border-color` | Cor da borda | `var(--color-neutral-light-20)` |
| `--border-radius` | Raio da borda | `var(--border-radius-md)` |
| `--border-width` | Largura da borda | `var(--border-width-sm)` |
| `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-md)` |
| **Weekly cells** | | |
| `--text-color-weekly` | Cor da fonte utilizada nas células semanais | `var(--color-neutral-dark-90)` |
| `--font-family` | Fonte utilizada nas células semanais | `var(--font-family-text)` |
| `--font-size` | Tamanho da fonte utilizada nas células semanais | `var(--font-size-sm)` |
| `--font-weight-weekly` | Peso da fonte utilizada nas células semanais | `var(--font-weight-bold)` |
| **Days cells** | | |
| `--font-weight-days` | Peso da fonte utilizada nas células de dias | `var(--font-weight-normal)` |
| `--text-color` | Cor da fonte utilizada nas células de dias | `var(--color-neutral-dark-90)` |
| `--border-radius-days` | Raio da borda | `var(--border-radius-md)` |
| `--border-width-days` | Largura da borda | `var(--border-width-sm)` |
| `--day-cell-transition-duration` | Duração da transição | `var(--duration-extra-fast)` |
| `--day-cell-transition-property` | Atributo da transição | `all` |
| `--day-cell-transition-timing` | Duração da transição com o tipo de transição | `var(--timing-standart)` |
| **Today** | | |
| `--font-weight-today` | Peso da fonte utilizada na célula de hoje | `var(--font-weight-bold)` |
| `--text-color-today` | Cor da fonte utilizada na célula de hoje | `var(--color-action-default)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Hover** | | |
| `--color-hover` | Cor de fundo das células ao passar o mouse | `var(--color-neutral-light-00)` |
| `--text-color-hover` | Cor da fonte utilizada nas células ao passar o mouse | `var(--color-action-hover)` |
| **Interval** | | |
| `--color-interval` | Cor de fundo das células de intervalo | `var(--color-brand-01-lighter)` |
| `--text-color-interval` | Cor da fonte utilizada nas células de intervalo | `var(--color-action-default)` |
| **Next Month** | | |
| `--text-color-next` | Cor da fonte utilizada nas células do próximo mês | `var(--color-action-default)` |
| **Disabled** | | |
| `--border-disabled` | Cor da borda das células desabilitadas | `var(--color-action-disabled)` |
| `--text-color-disabled` | Cor da fonte utilizada nas células desabilitadas | `var(--color-action-disabled)` |
| **Selected** | | |
| `--color-selected` | Cor de fundo das células selecionadas | `var(--color-neutral-light-00)` |
| `--text-color-selected` | Cor da fonte utilizada nas células selecionadas | `var(--color-action-default)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `locale` | `'p-locale'` | `string` | sim | - | Idioma do componente. |
| `maxDate` | `'p-max-date'` | `any` | sim | - | Define a data máxima permitida para seleção. As datas posteriores ao limite definido permanecem visíveis, mas ficam |
| `minDate` | `'p-min-date'` | `any` | sim | - | Define a data mínima para seleção. As datas anteriores ao limite permanecem visíveis, mas desabilitadas para clique. |
| `mode` | `'p-mode'` | `PoCalendarMode` | sim | - | Define o modo de exibição do calendário. |
| `rangePresetOptions` | `'p-range-preset-options'` | `Array` | sim | - | Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário em modo *range*. |
| `rangePresets` | `'p-range-presets'` | `boolean | Array` | sim | `false` | Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário em modo *range*. |
| `rangePresetsOrder` | `'p-range-presets-order'` | `'asc' | 'desc'` | sim | `asc` | Define a ordenação dos presets na lista. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar o valor do model. |
| `changeMonthYear` | `'p-change-month-year'` | `EventEmitter` | Evento disparado ao alterar o mês ou o ano no cabeçalho do calendário. |
---
# PoChartComponent
**Seletor:** `po-chart`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart
O `po-chart` é um componente para renderização de dados através de gráficos, com isso facilitando a compreensão e tornando a
visualização destes dados mais agradável.
Através de suas principais propriedades é possível definir atributos, tais como tipo de gráfico, altura, título, cores customizadas, opções para os eixos, entre outros.
O componente permite utilizar em conjunto séries do tipo linha e coluna.
Além disso, também é possível definir uma ação que será executada ao clicar em determinado elemento do gráfico
e outra que será executada ao passar o *mouse* sobre o elemento.
#### Guia de uso para Gráficos
> Veja nosso [guia de uso para gráficos](/guides/guide-charts) para auxiliar na construção do seu gráfico,
informando em qual caso utilizar, o que devemos evitar e boas práticas relacionada a cores.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|------------------------------------------|-------------------------------------------------------------------------|---------------------------------------------------|
| **Chart (po-chart)** | | |
| `--background-color-grid` | Cor de background dos gráficos | `var(--color-neutral-light-00)` |
| `--color-description-chart` | Cor da descrição dos gráficos | `var(--color-neutral-dark-70)` |
| `--font-family-description-chart` | Fonte da descrição dos gráficos | `var(--font-family-theme)` |
| `--font-size-description-chart` | Tamanho da fonte da descrição dos gráficos | `var(--font-size-sm)` |
| `--font-weight-description-chart` | Peso da fonte da descrição dos gráficos | `var(--font-weight-normal)` |
| **Header (po-chart .po-chart-header )** | | |
| `--background-color` | Cor de background do cabeçalho | `var(--color-neutral-light-00)` |
| `--color` | Cor da fonte do cabeçalho | `var(--color-neutral-dark-70)` |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size-title` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-size-icons` | Tamanho dos ícones | `var(--font-size-md)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| **Chart (po-chart .po-chart)** | | |
| `--color-grid` | Cor da linha dos gráficos que possuem eixo | `var(--color-neutral-light-20)` |
| `--font-family-grid` | Família tipográfica usada nos valores dos eixos | `var(--font-family-theme)` |
| `--font-size-grid` | Tamanho da fonte usada nos valores dos eixos | `var(--font-size-xs)` |
| `--font-weight-grid` | Peso da fonte usada nos valores dos eixos | `var(--font-weight-normal)` |
| `--color-legend` | Cor da fonte da legenda | `var(--color-neutral-dark-70)` |
| `--color-legend-scroll-icon-active` | Cor do ícone de scroll da legenda no estado ativo, pro tipo `scroll` | `var(--color-action-default)` |
| `--color-legend-scroll-icon-inactive` | Cor do ícone de scroll da legenda no estado inativo, pro tipo `scroll` | `var(--color-action-disabled)` |
| `--border-radius-bar` | Tamanho da borda nos graficos `Bar` e `Column` | `var(--border-radius-none)` |
| `--border-color` | Cor da borda do gráfico nos Gráficos `Donut` e `Pie` | `var(--color-neutral-light-00)` |
| `--color-hightlight-value` | Cor do valor de destaque nos Gráficos `Donut` e `Gauge` | `var(--color-neutral-dark-70)` |
| `--font-family-hightlight-value` | Família tipográfica do valor de destaque nos Gráficos `Donut` e `Gauge` | `var(--font-family-theme)` |
| `--font-weight-hightlight-value` | Peso da fonte do valor de destaque nos Gráficos `Donut` e `Gauge` | `var(--font-weight-bold)` |
| `--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)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `categories` | `'p-categories'` | `Array | PoChartRadarOptions` | sim | - | Define os valores utilizados na construção das categorias do gráfico. |
| `customActions` | `'p-custom-actions'` | `Array` | sim | - | Essa propriedade permite que o desenvolvedor adicione ações customizadas no popup do header, oferecendo mais flexibilidade e controle sobre as interações do componente. |
| `dataLabel` | `'p-data-label'` | `PoChartDataLabel` | sim | - | Permite configurar as propriedades de exibição dos rótulos das séries no gráfico. |
| `height` | `'p-height'` | `number` | sim | `400` | Define a altura do gráfico em px. |
| `literals` | `'p-literals'` | `PoChartLiterals` | sim | - | Objeto com as literais usadas no `po-chart`. |
| `options` | `'p-options'` | `PoChartOptions` | sim | - | Objeto com as configurações usadas no `po-chart`. |
| `series` | `'p-series'` | `Array` | não | - | Define os elementos do gráfico que serão criados dinamicamente. |
| `title` | `'p-title'` | `string` | sim | - | Define o título do gráfico. |
| `type` | `'p-type'` | `PoChartType` | sim | - | Define o tipo de gráfico. |
| `valueGaugeMultiple` | `'p-value-gauge-multiple'` | `number` | sim | - | Define o valor do gráfico do tipo `Gauge` quando utliza as propriedades `From` `To`. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `seriesClick` | `'p-series-click'` | `EventEmitter` | Evento executado quando o usuário clicar sobre um elemento do gráfico. |
| `seriesHover` | `'p-series-hover'` | `EventEmitter` | Evento executado quando o usuário passar o *mouse* sobre um elemento do gráfico. |
---
# PoCheckboxComponent
**Seletor:** `po-checkbox`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-checkbox
O componente `po-checkbox` exibe uma caixa de opção com um texto ao lado, na qual é possível marcar e desmarcar através tanto
no *click* do *mouse* quanto por meio da tecla *space* quando estiver com foco.
Cada opção poderá receber um estado de marcado, desmarcado, indeterminado/mixed e desabilitado, como também uma ação que será disparada quando
ocorrer mudanças do valor.
> O *model* deste componente aceitará valores igual à `true`, `false` ou `null` para quando for indeterminado/mixed.
*Acessibilidade tratada no componente:**
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- O componente foi desenvolvido utilizando controles padrões HTML para permitir a identificação do mesmo na interface por tecnologias assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
- A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
- A cor não deve ser o único meio para diferenciar o componente do seu estado marcado e desmarcado. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|--------------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--border-color` | Cor da borda | `var(--color-neutral-dark-70)` |
| `--color-unchecked` | Cor quando não selecionado | `var(--color-neutral-light-00)` |
| `--color-checked` | Cor quando selecionado | `var(--color-action-default)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--shadow-color-hover` | Cor da sombra no estado hover | `var(--color-brand-01-lighter)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-unchecked-disabled` | Cor pricipal quando não selecionado no estado disabled | `var(--color-action-disabled)` |
| `--color-checked-disabled` | Cor pricipal quando selecionado no estado disabled | `var(--color-neutral-dark-70)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper`) será incluído no body da página e não dentro do componente. Essa |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Define o estado do *checkbox* como desabilitado. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo |
| `label` | `'p-label'` | `string` | sim | - | Texto de exibição do *checkbox*. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `name` | `'name'` | `string` | não | - | Define o nome do *checkbox*. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho da caixa de seleção do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado quando o valor do *checkbox* for alterado. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `focus()`
Função que atribui foco ao *checkbox*.
Para utilizá-la é necessário capturar a referência do componente no DOM através do `ViewChild`, como por exemplo:
```
...
import { ViewChild } from '@angular/core';
import { PoCheckboxComponent } from '@po-ui/ng-components';
...
@ViewChild(PoCheckboxComponent, { static: true }) checkbox: PoCheckboxComponent;
focusCheckbox() {
this.checkbox.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
//Exemplo com label e p-helper
` | sim | - | Lista de sugestões usadas pelo autocomplete dentro do editor. |
| `theme` | `'p-theme'` | `string` | sim | `vs` | Define um tema para o editor. |
---
# PoComboComponent
**Seletor:** `po-combo`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-combo
O `po-combo` exibe uma lista de opções com fácil seleção e filtragem.
Além da exibição padrão, nele é possível listar as opões em agrupamentos.
É possível selecionar e navegar entre as opções da lista tanto através do *mouse* quanto do teclado. No teclado navegue com
as setas e pressione *Enter* na opção que desejar.
Com ele também é possível definir uma lista à partir da requisição de um serviço definido em `p-filter-service`.
Em `p-filter-mode`, o filtro poderá ser configurado para buscar opões que correspondam ao início, fim ou que contenha o valor digitado.
O `po-combo` guarda o último valor caso o usuário desista de uma busca, deixando o campo ou pressionando *Esc*. Caso seja digitado no
campo de busca a descrição completa de um item, então a seleção será automaticamente efetuada ao deixar o campo ou pressionando *Enter*.
Utilizando po-combo com serviço, é possivel digitar um valor no campo de entrada e pressionar a tecla 'tab' para que o componente
faça uma requisição à URL informada passando o valor digitado no campo. Se encontrado o valor, então o mesmo será selecionado, caso
não seja encontrado, então a lista de itens voltará para o estado inicial.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--text-color-placeholder` | Cor do texto no placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor principal do Combo | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-width-lg)` |
| `--min-width` | Largura mínima do combo | `150px` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Error** | | |
| `--color-error` | Cor principal no estado de erro | `var(--color-feedback-negative-base)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| **Suggestion** | | |
| `--text-color-suggestion` | Cor do texto no estado suggestion | `var(--color-neutral-mid-60)` |
| `--background-suggestion` | Cor do background no estado suggestion | `var(--color-brand-01-lightest)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `cache` | `'p-cache'` | `boolean` | sim | `true` | Define se o componente irá guardar o valor do model para evitar requisições repetidas. |
| `changeOnEnter` | `'p-change-on-enter'` | `boolean` | sim | `false` | Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada. |
| `clean` | `'p-clean'` | `boolean` | sim | - | Se verdadeiro, o campo receberá um botão para ser limpo. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `debounceTime` | `'p-debounce-time'` | `number` | sim | `400` | Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Indica que o campo será desabilitado. |
| `disabledInitFilter` | `'p-disabled-init-filter'` | `boolean` | sim | `false` | Desabilita o filtro inicial no serviço, que é executado no primeiro clique no campo. |
| `disabledTabFilter` | `'p-disabled-tab-filter'` | `boolean` | sim | `false` | Se verdadeiro, desabilitará a busca de um item via TAB. |
| `emitObjectValue` | `'p-emit-object-value'` | `boolean` | sim | `false` | Se verdadeiro, o evento `p-change` receberá como argumento o `PoComboOption` referente à opção selecionada. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem setada se o campo estiver vazio e for requerido. |
| `fieldLabel` | `'p-field-label'` | `string` | sim | `label` | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente |
| `fieldValue` | `'p-field-value'` | `string` | sim | `value` | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente |
| `filterMinlength` | `'p-filter-minlength'` | `number` | sim | `0` | Valor mínimo de caracteres para realizar o filtro no serviço. |
| `filterMode` | `'p-filter-mode'` | `PoComboFilterMode` | sim | `startsWith` | Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. |
| `filterParams` | `'p-filter-params'` | `any` | sim | - | Valor que será repassado como parâmetro para a URL ou aos métodos do serviço que implementam a interface *PoComboFilter*. |
| `filterService` | `'p-filter-service'` | `PoComboFilter | string` | sim | - | Nesta propriedade deve ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio para o campo. |
| `icon` | `'p-icon'` | `string | TemplateRef` | sim | - | Define o ícone que será exibido no início do campo. |
| `infiniteScroll` | `'p-infinite-scroll'` | `boolean` | sim | `false` | Se verdadeiro ativa a funcionalidade de scroll infinito para o combo, Ao chegar ao fim da tabela executará nova busca dos dados conforme paginação. |
| `infiniteScrollDistance` | `'p-infinite-scroll-distance'` | `number` | sim | - | Define o percentual necessário para disparar o evento `show-more`, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%. |
| `label` | `'p-label'` | `string` | sim | - | Label no componente. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `listboxControlPosition` | `'p-listbox-control-position'` | `'top' | 'bottom'` | sim | `bottom` | Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). |
| `literals` | `'p-literals'` | `PoComboLiterals` | sim | - | Objeto com as literais usadas no `po-combo`. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `name` | `'name'` | `string` | não | - | Nome do componente. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `options` | `'p-options'` | `Array` | não | - | Nesta propriedade define a lista de opções do `po-combo`. |
| `placeholder` | `'p-placeholder'` | `string` | não | - | Mensagem apresentada enquanto o campo estiver vazio. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `removeInitialFilter` | `'p-remove-initial-filter'` | `boolean` | sim | `false` | Define se o filtro inicial será removido no primeiro clique do campo. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `sort` | `'p-sort'` | `boolean` | não | - | Indica que a lista definida na propriedade p-options será ordenada pela descrição. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Deve ser informada uma função que será disparada quando houver alterações no ngModel. A função receberá como argumento o model modificado. |
| `inputChange` | `'p-input-change'` | `EventEmitter` | Deve ser informada uma função que será disparada quando houver alterações no Search input. A função receberá como argumento o input modificado. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `ngModelChange` | `'ngModelChange'` | `EventEmitter` | Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoComboComponent } from '@po-ui/ng-components';
...
@ViewChild(PoComboComponent, { static: true }) combo: PoComboComponent;
focusCombo() {
this.combo.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | não | - | Lista de itens para renderização. |
| `title` | `p-title` | `string` | não | - | Título principal do menu |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `itemSelected` | `p-item-selected` | `EventEmitter` | Evento emitido ao selecionar um item. Emite o item selecionado. |
---
# PoContextTabsComponent
**Seletor:** `po-context-tabs`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-context-tabs
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------|
| **Default Values** | | |
| `--background` | Cor de background | `var(--color-transparent)` |
| `--background-item-default` | Cor de background do item padrão | `var(--color-transparent)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--color` | Cor da fonte padrão | `var(--color-action-default)` |
| `--color-baseline` | Cor para box-shadow | `var(--color-neutral-light-20)` |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--margin-tabs-container-left` | Margem lateral esquerda do componente quando usado dentro de um `page-default` | `var(--spacing-md)` |
| `--margin-tabs-container-right` | Margem lateral direita do componente quando usado dentro de um `page-default` | `-16px` |
| `--padding-tabs-header` | Padding do valor lateral das abas | `var(--spacing-sm)` |
| `--margin-tabs-first-child` | Margem lateral da primeira aba | `var(--spacing-md)` |
| `--margin-tabs-last-child` | Margem lateral da ultima aba | `var(--spacing-md)` |
| **Disabled** | | |
| `--color-disabled` | Cor da fonte no estado disabilitado | `var(--color-action-disabled)` |
| `--background-item-disabled` | Cor de background do item desabilitado | `var(--color-neutral-light-10)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-darkest)` |
| `--background-item-hover` | Cor de background no estado de hover | `var(--color-brand-01-lightest)` |
| **Selected** | | |
| `--background-item-selected` | Cor de background do item selecionado | `var(--color-brand-01-lightest)` |
O componente `po-context-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
ideal para facilitar a organização de conteúdos.
O componente exibirá as abas enquanto houver espaço na tela, caso a aba ultrapasse o limite da tela a mesma será agrupada em um dropdown.
> As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão.
É possível realizar a navegação entre as abas através da tecla SETAS(direita e esquerda) do teclado.
Caso uma aba estiver desabilitada, não receberá foco de navegação.
#### Boas práticas
- Evite utilizar um `po-context-tabs` dentro de outro `po-context-tabs`;
- Evite utilizar uma quantidade excessiva de abas, pois irá gerar um *scroll* muito longo no `dropdown`;
- Evite `labels` extensos para as `tabs` pois podem quebrar seu *layout*, use `labels` diretas, curtas e intuitivas.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
## Métodos
### `setQuantityTabsButton()`
Função que atribui o número de tabs fora do dropdown.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoContextTabsComponent } from '@po-ui/ng-components';
...
@ViewChild('poContextTabs', { static: true }) poContextTabs: PoContextTabsComponent;
changeQuantityTabs() {
this.poContextTabs.setQuantityTabsButton(1); //Número de context-tabs
}
```
---
# PoDatepickerComponent
**Seletor:** `po-datepicker`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-datepicker
O `po-datepicker` é um componente específico para manipulação de datas permitindo a digitação e / ou seleção.
O formato de exibição da data, ou seja, o formato que é apresentado ao usuário é o dd/mm/yyyy,
mas podem ser definidos outros padrões (veja mais na propriedade `p-format`).
O idioma padrão do calendário será exibido de acordo com o navegador, caso tenha necessidade de alterar
use a propriedade `p-locale`.
O datepicker aceita três formatos de data: o E8601DZw (yyyy-mm-ddThh:mm:ss+|-hh:mm), o E8601DAw (yyyy-mm-dd) e o
Date padrão do Javascript.
> Por padrão, o formato de saída do *model* se ajustará conforme o formato de entrada. Se por acaso precisar controlar o valor de saída,
a propriedade `p-iso-format` provê esse controle independentemente do formato de entrada. Veja abaixo os formatos disponíveis:
- Formato de entrada e saída (E8601DZw) - `'2017-11-28T00:00:00-02:00'`;
- Formato de entrada e saída (E8601DAw) - `'2017-11-28'`;
- Formato de entrada (Date) - `new Date(2017, 10, 28)` e saída (E8601DAw) - `'2017-11-28'`;
*Importante:**
- Para utilizar datas com ano inferior a 100, verificar o comportamento do [`new Date`](https://www.w3schools.com/js/js_dates.asp)
e utilizar o método [`setFullYear`](https://www.w3schools.com/jsref/jsref_setfullyear.asp).
- Caso a data esteja inválida, o `model` receberá **'Data inválida'**.
- Caso o `input` esteja passando um `[(ngModel)]`, mas não tenha um `name`, então irá ocorrer um erro
do próprio Angular (`[ngModelOptions]="{standalone: true}"`).
Exemplo:
```
```
> Não esqueça de importar o `FormsModule` em seu módulo, tal como para utilizar o `input default`.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
Obs: Só é possível realizar alterações ao adicionar a classe `.po-input`
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|--------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor principal do texto do placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor principal do datepicker | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--padding` | Preenchimento | `0 0.5rem` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o `calendar` e/ou tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) serão incluídos no body da |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `errorAsync` | `'p-error-async'` | `(value) => Observable` | sim | - | Função executada para realizar a validação assíncrona personalizada. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorPattern` | `'p-error-pattern'` | `string` | sim | - | Mensagem apresentada quando a data for inválida ou fora do período. |
| `format` | `'p-format'` | `string` | sim | `dd/mm/yyyy` | Formato de exibição da data. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `isoFormat` | `'p-iso-format'` | `PoDatepickerIsoFormat` | sim | - | Padrão de formatação para saída do *model*, independentemente do formato de entrada. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maxDate` | `'p-max-date'` | `string | Date` | sim | - | Define uma data máxima para o `po-datepicker`. |
| `minDate` | `'p-min-date'` | `string | Date` | sim | - | Define uma data mínima para o `po-datepicker`. |
| `mode` | `'p-mode'` | `'month-year' | 'year'` | sim | - | Define o modo de operação do datepicker. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | - | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `yearRangeLimit` | `'p-year-range-limit'` | `number` | sim | 150 | Define o limite de anos exibidos nas variações `month-year` e `year`, |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `onblur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `onchange` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor do campo. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoDatepickerComponent } from '@po-ui/ng-components';
...
@ViewChild(PoDatepickerComponent, { static: true }) datepicker: PoDatepickerComponent;
focusDatepicker() {
this.datepicker.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário. |
| `rangePresets` | `'p-range-presets'` | `boolean | Array` | sim | `false` | Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário. |
| `rangePresetsOrder` | `'p-range-presets-order'` | `'asc' | 'desc'` | sim | `asc` | Define a ordenação dos presets na lista. |
| `readonly` | `'p-readonly'` | `boolean` | sim | `false` | Indica que o campo será somente leitura. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `startDate` | `'p-start-date'` | `string | Date` | sim | - | Data inicial. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `onChange` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor do campo. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoDatepickerRangeComponent } from '@po-ui/ng-components';
...
@ViewChild(PoDatepickerRangeComponent, { static: true }) datepickerRange: PoDatepickerRangeComponent;
focusDatepickerRange() {
this.datepickerRange.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
```
> Não esqueça de importar o `FormsModule` em seu módulo, tal como para utilizar o `input default`.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
Obs: Só é possível realizar alterações ao adicionar a classe `.po-input`
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|--------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor principal do texto do placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor principal do datetimepicker | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--padding` | Preenchimento | `0 0.5rem` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `appendBox` | `p-append-in-body` | `boolean` | sim | `false` | Define que o `calendar` e/ou tooltip serão incluídos no body da página e não dentro do componente. |
| `autoFocus` | `p-auto-focus` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `clean` | `p-clean` | `boolean | string` | sim | `false` | Habilita ação para limpar o campo. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `dateFormat` | `p-format-date` | `string` | sim | Determinado pelo locale | Define o formato de exibição da data. |
| `disabled` | `p-disabled` | `boolean | string` | sim | `false` | Desabilita o campo. |
| `errorLimit` | `p-error-limit` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorPattern` | `p-error-pattern` | `string` | sim | - | Mensagem apresentada quando a data/hora for inválida ou fora do período. |
| `help` | `p-help` | `string` | sim | - | Texto de apoio do campo. |
| `label` | `p-label` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. |
| `loading` | `p-loading` | `boolean | string` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo. |
| `localeInput` | `p-locale` | `string` | sim | - | Idioma do componente. |
| `maxDateInput` | `p-max-date` | `string | Date` | sim | - | Define uma data máxima para o `po-datetimepicker`. |
| `maxTime` | `p-max-time` | `string` | sim | - | Define o horário máximo permitido para seleção no timer. |
| `minDateInput` | `p-min-date` | `string | Date` | sim | - | Define uma data mínima para o `po-datetimepicker`. |
| `minTime` | `p-min-time` | `string` | sim | - | Define o horário mínimo permitido para seleção no timer. |
| `minuteInterval` | `p-minute-interval` | `number` | sim | `5` | Define o intervalo entre os minutos exibidos no painel do timer. |
| `name` | `name` | `string` | sim | - | Nome do componente. |
| `noAutocomplete` | `p-no-autocomplete` | `boolean | string` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `p-optional` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `p-placeholder` | `string` | sim | - | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper). |
| `readonly` | `p-readonly` | `boolean | string` | sim | `false` | Torna o componente somente leitura. |
| `required` | `p-required` | `boolean | string` | sim | `false` | Define que o campo será obrigatório. |
| `secondInterval` | `p-second-interval` | `number` | sim | `1` | Define o intervalo entre os segundos exibidos no painel do timer. |
| `showErrorMessageRequired` | `p-required-field-error-message` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `p-show-required` | `boolean` | sim | `false` | Define se a indicação de campo obrigatório será exibida. |
| `showSeconds` | `p-show-seconds` | `boolean` | sim | `false` | Exibe a coluna de segundos no painel de seleção do timer. |
| `size` | `p-size` | `string` | sim | `medium` | Define o tamanho do componente: |
| `timerFormat` | `p-format-time` | `PoTimerFormat` | sim | Determinado pelo locale | Define o formato de exibição do timer. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `onblur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo (blur). |
| `onchange` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor do campo. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `locale` | `'p-locale'` | `string` | sim | - | Informa o locale(país) para a formatação do valor. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `max` | `'p-max'` | `number` | sim | - | Valor máximo. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `min` | `'p-min'` | `number` | sim | - | Valor mínimo. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `thousandMaxlength` | `'p-thousand-maxlength'` | `number` | sim | `13` | Quantidade máxima de dígitos antes do separador decimal. |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | não | `[]` | Coleção de objetos que implementam a interface `PoDynamicFormField`, para definição dos campos que serão criados |
| `groupForm` | `'p-group-form'` | `boolean` | sim | - | Ao informar esta propriedade, o componente passará a utilizar o formulário pai para criar os `FormControl` |
| `load` | `'p-load'` | `string | Function` | sim | - | Função ou serviço que será executado na inicialização do componente. |
| `validate` | `'p-validate'` | `string | Function` | sim | - | Função ou serviço para validar as **mudanças do formulário**. |
| `validateFields` | `'p-validate-fields'` | `Array` | sim | - | Lista que define os campos que irão disparar o validate do form. |
| `validateOnInput` | `'p-validate-on-input'` | `boolean` | sim | - | Ao informar esta propriedade, o componente passará a emitir o valor a cada caractere digitado. |
| `value` | `'p-value'` | `any` | não | - | Objeto que será utilizado como valor para exibir as informações, será recuperado e preenchido através do atributo *property* |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `formOutput` | `'p-form'` | `EventEmitter` | Na inicialização do componente será repassado o objeto de formulário utilizado no componente, |
## Métodos
### `focus(property: string)`
Função que atribui foco ao campo desejado.
Para utilizá-la é necessário capturar a instância do `dynamic form`, como por exemplo:
``` html
= [
{ property: 'fieldOne' },
{ property: 'fieldTwo' }
];
fieldFocus() {
this.dynamicForm.focus('fieldTwo');
}
```
### `showAdditionalHelp(property: string)`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `keydown`.
```
import { PoDynamicModule } from '@po-ui/ng-components';
...
@ViewChild('dynamicForm', { static: true }) dynamicForm: PoDynamicFormComponent;
fields: Array = [
{
property: 'name',
...
help: 'Mensagem de ajuda.',
helper: 'Mensagem de ajuda complementar com o componente po-helper implementado.',
keydown: this.onKeyDown.bind(this, 'name')
},
]
onKeyDown(property: string, event: KeyboardEvent): void {
if (event.code === 'F9') {
this.dynamicForm.showAdditionalHelp(property);
}
}
```
---
# PoDynamicViewComponent
**Seletor:** `po-dynamic-view`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-view
Componente para listar dados dinamicamente a partir de uma lista de objetos.
> Por padrão esse componente cria `po-info` para exibição, é possível criar `po-tag` passando a propriedade { tag: true }.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes no template entre `small` ou `medium`. |
| `fields` | `'p-fields'` | `PoDynamicViewField[]` | sim | `[]` | Lista de objetos que implementam a interface `PoDynamicView`. |
| `load` | `'p-load'` | `string | Function` | sim | - | Possibilita executar uma função quando o componente é inicializado. |
| `showAllValue` | `'p-show-all-value'` | `boolean` | sim | `false` | Indica se exibirá todas as informações contidas dentro do objeto informado na propriedade `p-value`. |
| `textWrap` | `'p-text-wrap'` | `boolean` | sim | `false` | Permite a quebra de linha no texto do `p-value`, aplicando-a onde há `\n`. |
| `value` | `'p-value'` | `object` | não | - | Objeto que será utilizado para exibir as informações dinâmicas, o valor será recuperado através do atributo *property* |
---
# PoEmailComponent
**Seletor:** `po-email`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-email
Este é um componente baseado em input, com várias propriedades do input nativo e outras
propriedades extras como: máscara, pattern, mensagem de erro e etc.
Você deve informar a variável que contém o valor como [(ngModel)]="variavel", para que o
input receba o valor da variável e para que ela receba as alterações do valor (two-way-databinding).
A propriedade name é obrigatória para que o formulário e o model funcionem corretamente.
Importante:
- Caso o input tenha um [(ngModel)] sem o atributo name, ocorrerá um erro de angular.
Então você precisa informar o atributo name ou o atributo [ngModelOptions]="{standalone: true}".
Exemplo: [(ngModel)]="pessoa.nome" [ngModelOptions]="{standalone: true}".
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
Obs: Só é possível realizar alterações ao adicionar a classe `.po-input`
> Para correto alinhamento é recomendado o uso das classes de espaçamento do [Grid System](https://po-ui.io/guides/grid-system).
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor do texto placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor pincipal do input | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--padding` | Preenchimento | `0 0.5rem` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
O `po-email` é um input específico para receber E-mail, com o pattern já configurado.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `emitAllChanges` | `'p-emit-all-changes'` | `boolean` | sim | `false` | Sempre emite as alterações do model mesmo quando o valor atual for igual ao valor anterior. |
| `errorAsyncProperties` | `'p-error-async-properties'` | `ErrorAsyncProperties` | sim | - | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorPattern` | `'p-error-pattern'` | `string` | sim | - | Mensagem que será apresentada quando o `pattern` ou a máscara não for satisfeita. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `icon` | `'p-icon'` | `string | TemplateRef` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Definição para o alcance de cores. Ao adicionar pelo menos um item na lista, |
| `showFromToLegend` | `'p-show-from-to-legend'` | `boolean` | sim | `false` | Define a exibição dos valores de `from` - `to` entre parênteses caso haja definição de `p-ranges`. |
| `showPointer` | `'p-show-pointer'` | `boolean` | sim | `true` | Define a exibição do ponteiro caso haja definição de `p-ranges`. |
| `title` | `'p-title'` | `string` | sim | - | Define o título do gauge. |
| `value` | `'p-value'` | `number` | sim | - | Valor referente ao valor da série. Seu comportamento segue a seguintes regras: |
---
# PoGridComponent
**Seletor:** `po-grid`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-grid
> Componente em desenvolvimento, podendo haver BREAKING CHANGES nas próximas versões.
Componente grid.
Ações / atalhos:
- ARROW-UP: Navega para celula superior / Na ultima linha adiciona uma linha em branco no grid;
- ARROW-DOWN: Navega para celula inferior;
- ARROW-RIGHT: Navega para celula direita;
- ARROW-LEFT: Navega para celula esquerda;
- TAB: Navega para próxima celula;
- SHIFT+TAB: Navega para celula anterior;
- CTRL+DEL: Remove linha;
- DEL/BACKSPACE: Limpa celula;
- ENTER: Edita linha com valor atual/Confirma edição da celula;
- DOUBLE-CLICK: Edita linha com valor atual;
- ESC: Cancela edição da celula / Cancela inserção de linhas em branco;
- A..Z/0..9: Inicia edição com valor em branco.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `columns` | `'p-columns'` | `Array` | não | - | Colunas exibidas no grid. |
| `data` | `'p-data'` | `Array` | não | - | Lista com os dados que serão exibidos no grid. |
| `rowActions` | `'p-row-actions'` | `PoGridRowActions` | não | - | Ações disparadas quando uma linha do grid é manipulada. |
---
# PoHeaderComponent
**Seletor:** `po-header`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header
O componente `po-header` é um cabeçalho fixo que permite apresentar itens com ações, divididos em `p-brand`, `p-menu-items`, `p-actions-tools` e `p-header-user`.
- `p-brand`: Possibilita a inclusão de uma imagem e o titulo do header.
- `p-menu-items`: Possibilita a inclusão de uma lista de itens com ações ou links.
- `p-actions-tools`: Possibilita a inclusão de até 3 botões com ações.
- `p-header-user`: Possibilita a inclusão de uma imagem representando a marca e avatar.
O componente `po-header` pode ser usado de duas formas:
Com `po-menu` definido pelo usuário:
```
...
` | sim | - | Propriedade para configurar a seção de tools do `po-header` |
| `amountMore` | `'p-amount-more'` | `number` | sim | - | Número de itens dentro do botão de overflow. Caso a largura do header não suportar a quantidade de itens passadas, um botão com itens será criado. |
| `brand` | `'p-brand'` | `PoHeaderBrand | string` | sim | - | Propriedade para configurar a seção de brand do `po-header` |
| `filterMenu` | `'p-filter-menu'` | `boolean` | sim | - | Habilita campo para filtrar itens no menu |
| `headerTemplate` | `'p-header-template'` | `TemplateRef` | sim | - | Template customiado que será renderizado após os itens definidos na propriedade `p-menu-items` |
| `headerUser` | `'p-header-user'` | `PoHeaderUser` | sim | - | Propriedade para configurar a seção de headerUser do `po-header` |
| `hideButtonMenu` | `'p-hide-button-menu'` | `boolean` | sim | - | Esconde o botão de menu colapsado. |
| `literals` | `'p-literals'` | `PoHeaderLiterals` | sim | - | Objeto com a literal usada na propriedade `p-literals`. |
| `menuCollapse` | `'p-menus'` | `Array` | sim | - | Lista dos itens do menu. Se o valor estiver indefinido ou inválido, será inicializado como um array vazio. |
| `menuItems` | `'p-menu-items'` | `Array` | sim | - | Propriedade para configurar a seção de menu do `po-header`. |
| `sizeInput` | `p-size` | `string` | sim | `medium` | Define o tamanho do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `colapsedMenuEvent` | `'p-colapsed-menu'` | `EventEmitter` | Evento emitido ao clicar no botão para colapsar ou expandir menu. |
---
# PoHelperComponent
**Seletor:** `po-helper`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-helper
O componente `po-helper` exibe um ícone de ajuda ou informação ao lado de campos, botões ou outros elementos, permitindo ao usuário acessar conteúdos explicativos em um popover.
Principais funcionalidades:
- Exibe ícone de ajuda (`help`) ou informação (`info`) conforme configuração.
- Permite definir título, conteúdo e ações no popover via propriedade `p-helper`.
- Suporte a acessibilidade: navegação por teclado, atributos ARIA e leitura do conteúdo por leitores de tela.
- Controle do tamanho do componente via propriedade `p-size` (`small` ou `medium`).
- Permite customizar ações no rodapé do popover.
Exemplo de uso:
```html
` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
```
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|--------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor do texto no placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor principal do lookup | `var(--color-neutral-dark-70)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--color-clear` | Cor principal do icone clear | `var(--color-action-default)` |
| **Icon** | | |
| `--color-icon` | Cor principal do icone pesquisar | `var(--color-action-default)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| `--text-color-disabled` | Cor do texto quando campo está desabilitado | `var(--color-action-disabled)` |
| **Error** | | |
| `--color-error` | Cor de background no estado de requerido | `var(--color-feedback-negative-base)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `advancedFilters` | `'p-advanced-filters'` | `Array` | sim | - | Lista de objetos dos campos que serão criados na busca avançada. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `autoHeight` | `'p-auto-height'` | `boolean` | sim | `false` | Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo |
| `clean` | `'p-clean'` | `boolean` | não | - | Exibe um ícone que permite limpar o campo. |
| `columns` | `'p-columns'` | `Array` | sim | - | Lista das colunas da tabela. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `disabled` | `'p-disabled'` | `boolean` | sim | false | Indica que o campo será desabilitado. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem setada se o campo estiver vazio e for requerido. |
| `fieldFormat` | `'p-field-format'` | `((value) => string) | Array` | sim | - | Formato de exibição do campo. |
| `fieldLabel` | `'p-field-label'` | `string` | não | - | Indica a coluna que será utilizada como descrição do campo e como filtro dentro da janela. |
| `fieldValue` | `'p-field-value'` | `string` | não | - | Indica a coluna que será utilizada como valor do campo. |
| `filterParams` | `'p-filter-params'` | `any` | sim | - | Valor que será repassado como parâmetro para a URL ou aos métodos do serviço que implementam a interface `PoLookupFilter`. |
| `filterService` | `'p-filter-service'` | `string | PoLookupFilter` | não | - | Serviço responsável por buscar os dados da tabela na janela. Pode ser informado um serviço que implemente a interface |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `hideColumnsManager` | `'p-hide-columns-manager'` | `boolean` | sim | `false` | Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. |
| `infiniteScroll` | `'p-infinite-scroll'` | `boolean` | sim | `false` | Ativa a funcionalidade de scroll infinito para a tabela exibida no retorno da consulta. |
| `label` | `'p-label'` | `string` | sim | - | Label do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `literals` | `'p-literals'` | `PoLookupLiterals` | não | - | Objeto com as literais usadas no `po-lookup`. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `multiple` | `'p-multiple'` | `boolean` | sim | `false` | Permite a seleção de múltiplos itens. |
| `name` | `'name'` | `string` | não | - | Nome e Id do componente. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | não | - | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório seré exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `spacing` | `'p-spacing'` | `string` | sim | `medium` | Define o espaçamento interno das células, impactando diretamente na altura das linhas do table dentro do modal. Os |
| `textWrap` | `'p-text-wrap'` | `boolean` | sim | `false` | Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede |
| `virtualScroll` | `'p-virtual-scroll'` | `boolean` | sim | `true` | Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `change` | `'p-change'` | `EventEmitter` | Evento que será disparado ao alterar o model. |
| `changeVisibleColumns` | `'p-change-visible-columns'` | `EventEmitter` | Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. |
| `columnRestoreManager` | `'p-restore-column-manager'` | `EventEmitter` | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `onError` | `'p-error'` | `EventEmitter` | Evento será disparado quando ocorrer algum erro na requisição de busca do item. |
| `selected` | `'p-selected'` | `EventEmitter` | Evento será disparado quando ocorrer alguma seleção. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoLookupComponent } from '@po-ui/ng-components';
...
@ViewChild(PoLookupComponent, { static: true }) lookup: PoLookupComponent;
focusLookup() {
this.lookup.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Ícone exibido ao lado esquerdo do label do titúlo da modal. |
| `primaryAction` | `'p-primary-action'` | `PoModalAction` | sim | - | Deve ser definido um objeto que implementa a interface `PoModalAction` contendo a label e a função da primeira ação. |
| `secondaryAction` | `'p-secondary-action'` | `PoModalAction` | sim | - | Deve ser definido um objeto que implementa a interface `PoModalAction` contendo a label e a função da segunda ação. |
| `size` | `'p-size'` | `string` | não | - | Define o tamanho da modal. |
| `title` | `'p-title'` | `string` | não | - | Título da modal. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `closeModal` | `'p-close'` | `EventEmitter` | Evento disparado ao fechar o modal. |
## Métodos
### `close()`
Função para fechar a modal.
### `open()`
Função para abrir a modal.
---
# PoModalFooterComponent
**Seletor:** `po-modal-footer`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-modal-footer
O componente `po-modal-footer` pode ser utilizado para incluir os botões de ações no rodapé da [`PoModal`](/documentation/po-modal), bem como para dar liberdade ao desenvolvedor de incluir outros itens necessários.
> Como boa prática, deve-se observar a utilização de apenas um botão primário.
```
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `disabledAlign` | `'p-disabled-align'` | `boolean` | sim | false | Desabilita o alinhamento padrão, à direita, dos botões de ações que ficam no rodapé da [`PoModal`](/documentation/po-modal). |
---
# PoModalPasswordRecoveryComponent
**Seletor:** `po-modal-password-recovery`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-modal-password-recovery
O componente `po-modal-password-recovery` é utilizado como template para solicitação de troca de senha.
É composto por uma modal que possui três telas, cada uma com as seguintes características:
- A primeira possui campos para preenchimento de email ou número de telefone;
- Tela com campo para preenchimento de código SMS enviado para o número de telefone enviado;
- A terceira se trata de uma confirmação de envio de link para a caixa de email do usuário.
A propriedade `p-url-recovery` automatiza a rotina do componente e simplifica o processo
para recuperação de senha, bastando definir uma url para requisição dos recursos.
Seu detalhamento para uso pode ser visto logo abaixo em *propriedades*.
Caso julgue necessário, pode-se também definir manualmente a rotina do componente.
Para a modal de digitação de código SMS, é possível definir uma mensagem de erro
customizada com a propriedade `p-code-error` e há um link para
reenvio de código por SMS. Ao reenviar, o evento `p-code-submit` envia um objeto com o telefone do usuário e a quantidade
de vezes em que o usuário fez a solicitação de reenvio.
> É indicada a utilização da tela de digitação para envio de código SMS apenas
se a opção por envio SMS for disponibilizada para o usuário.
A modal de confirmação contém uma ação de reenvio e o evento `p-submit`
é quem passa o objeto contendo o email em conjunto com a quantidade de tentativas de reenvio.
> A tela de confirmação é indicada para quando o usuário solicitar a troca através do email.
> Os textos das modals são pré-definidos, imutáveis e são traduzidos de acordo com o idioma do *browser* (pt, en e es)
Para que as imagens sejam exibidas corretamente, é necessário incluir o caminho delas ao projeto. Para isso, edite
o *assets* no arquivo **angular.json** da aplicação na seguinte ordem:
```
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**\/*",
"input": "node_modules/@po-ui/style/images",
"output": "assets/images"
}
]
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `codeError` | `'p-code-error'` | `string` | sim | - | Definição de mensagem de erro customizada para quando o usuário passar um código SMS inválido ou errado. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no modal: |
| `contactEmail` | `'p-contact-email'` | `string` | sim | - | Definição do e-mail que é exibido na mensagem para contato de suporte. |
| `phoneMask` | `'p-phone-mask'` | `string` | sim | `(99) 99999-9999` | Definição da mascara do campo de telefone. |
| `type` | `'p-type'` | `PoModalPasswordRecoveryType` | sim | `PoModalPasswordRecoveryType.Email` | Define o tipo de recuperação de senha que será exibido. |
| `urlRecovery` | `'p-url-recovery'` | `string` | sim | - | Endpoint usado pelo template para requisição do recurso. Quando preenchido, |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `codeSubmit` | `'p-code-submit'` | `EventEmitter` | Ação contendo como parâmetro o código enviado por SMS e digitado pelo usuário. |
| `submit` | `'p-submit'` | `EventEmitter` | Ação contendo o email como parâmetro e que é executada quando o usuário clica sobres os botões de 'enviar' e 'reenviar' e-mail. |
## Métodos
### `completed()`
Acão para conclusão de processo e fechamento da modal. Indica-se sua utilização
para após o envio e validação do código SMS enviado pelo usuário.
> Nas modals em que há a ação de 'cancelar' dispensa-se o uso desta ação pois o componente já trata o fechamento da modal.
### `open()`
Abre a modal de preenchimento de email ou número de telefone para solicitação de troca de senha.
### `openConfirmation()`
Abre a modal de confirmação de envio de email.
### `openSmsCode()`
Abre a modal de preenchimento do código SMS enviado ao usuário.
---
# PoMultiselectComponent
**Seletor:** `po-multiselect`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-multiselect
O po-multiselect é um componente de múltipla seleção.
Este componente é recomendado para dar ao usuário a opção de selecionar vários itens em uma lista.
Quando a lista possuir poucos itens, deve-se dar preferência para o uso do po-checkbox-group, por ser mais simples
e mais rápido para a seleção do usuário.
Este componente também não deve ser utilizado em casos onde a seleção seja única. Nesses casos, deve-se utilizar o
po-select, po-combo ou po-radio-group.
Com ele também é possível definir uma lista à partir da requisição de um serviço definido em `p-filter-service`.
#### Boas práticas
- Caso a lista apresente menos de 5 itens, considere utilizar outro componente;
- Não utilize o multiselect caso o usuário possa selecionar apenas uma opção. Para esse caso, opte por utilizar po-radio ou po-select;
#### Acessibilidade tratada no componente
Algumas diretrizes de acessibilidade já são tratadas no componente internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- Quando em foco, o multiselect abre o listbox usando as teclas de Espaço ou Enter do teclado.
- Utilize as teclas Arrow Up [seta para cima] ou Arrow Down [seta para baixo] do teclado para navegar entre os itens do listbox.
- Utilize a tecla Esc do teclado para fechar o listbox.
- Quando um item estiver em foco, utilize as teclas Arrow Right [seta para direita] ou Arrow Left [seta para esquerda] do teclado para navegar entre eles.
- Quando em foco e havendo um item ou mais já selecionado, utilize a tecla Arrow Down [seta para baixo] do teclado para abrir o listbox.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor do texto do placeholder | `var(--color-action-disabled)` |
| `--color` | Cor principal do multiselect | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| **Error** | | |
| `--color-error` | Cor principal no estado error | `var(--color-feedback-negative-base)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `autoHeight` | `'p-auto-height'` | `boolean` | sim | `false` | Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `debounceTime` | `'p-debounce-time'` | `number` | sim | `400` | Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Indica que o campo será desabilitado. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem setada se o campo estiver vazio e for requerido. |
| `fieldLabel` | `'p-field-label'` | `string` | sim | `label` | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente |
| `fieldValue` | `'p-field-value'` | `string` | sim | `value` | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente |
| `filterMode` | `'p-filter-mode'` | `PoMultiselectFilterMode` | sim | `startsWith` | Define o modo de pesquisa utilizado no campo de busca, quando habilitado. |
| `filterService` | `'p-filter-service'` | `string | PoMultiselectFilter` | sim | - | Nesta propriedade pode ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de itens no componente. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio para o campo. |
| `hideSearch` | `'p-hide-search'` | `boolean` | sim | `false` | Esconde o campo de pesquisa existente dentro do dropdown do po-multiselect. |
| `hideSelectAll` | `'p-hide-select-all'` | `boolean` | sim | `false` | Indica se o campo "Selecionar todos" será escondido. |
| `label` | `'p-label'` | `string` | sim | - | Label no componente. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `listboxControlPosition` | `'p-listbox-control-position'` | `'top' | 'bottom'` | sim | `bottom` | Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). |
| `literals` | `'p-literals'` | `PoMultiselectLiterals` | sim | - | Objeto com as literais usadas no `po-multiselect`. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `name` | `'name'` | `string` | não | - | Nome do componente. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `options` | `'p-options'` | `Array` | não | - | Nesta propriedade deve ser definida uma lista de objetos que será exibida no multiselect. |
| `placeholder` | `'p-placeholder'` | `string` | sim | - | Mensagem apresentada enquanto o campo estiver vazio. |
| `placeholderSearch` | `'p-placeholder-search'` | `string` | sim | `Buscar` | Placeholder do campo de pesquisa. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `sort` | `'p-sort'` | `boolean` | sim | `false` | Indica que a lista definida na propriedade p-options será ordenada pelo label antes de ser apresentada no |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Pode ser informada uma função que será disparada quando houver alterações no ngModel. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoMultiselectComponent } from '@po-ui/ng-components';
...
@ViewChild(PoMultiselectComponent, { static: true }) multiselect: PoMultiselectComponent;
focusMultiselect() {
this.multiselect.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Define uma lista de ações apresentadas em ícones no lado direito do `po-navbar`. |
| `items` | `'p-items'` | `Array` | sim | - | Define uma lista de items do `po-navbar`. |
| `literals` | `'p-literals'` | `PoNavbarLiterals` | sim | - | Objeto com a literal usada na propriedade `p-literals`. |
| `logo` | `'p-logo'` | `string` | sim | - | Define a logo apresentada `po-navbar`. |
| `logoAlt` | `'p-logo-alt'` | `string` | sim | `Logomarca início` | Define o texto alternativo para a logomarca. |
| `shadow` | `'p-shadow'` | `boolean` | sim | `false` | Aplica uma sombra na parte inferior do `po-navbar`. |
---
# PoNumberComponent
**Seletor:** `po-number`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-number
Este é um componente baseado em input, com várias propriedades do input nativo e outras
propriedades extras como: máscara, pattern, mensagem de erro e etc.
Você deve informar a variável que contém o valor como [(ngModel)]="variavel", para que o
input receba o valor da variável e para que ela receba as alterações do valor (two-way-databinding).
A propriedade name é obrigatória para que o formulário e o model funcionem corretamente.
Importante:
- Caso o input tenha um [(ngModel)] sem o atributo name, ocorrerá um erro de angular.
Então você precisa informar o atributo name ou o atributo [ngModelOptions]="{standalone: true}".
Exemplo: [(ngModel)]="pessoa.nome" [ngModelOptions]="{standalone: true}".
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
Obs: Só é possível realizar alterações ao adicionar a classe `.po-input`
> Para correto alinhamento é recomendado o uso das classes de espaçamento do [Grid System](https://po-ui.io/guides/grid-system).
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor do texto placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor pincipal do input | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--padding` | Preenchimento | `0 0.5rem` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
O `po-number` é um input específico para receber apenas números.
É possível configurar um valor mínimo, máximo e um step com p-min, p-max e p-step,
respectivamente.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `emitAllChanges` | `'p-emit-all-changes'` | `boolean` | sim | `false` | Sempre emite as alterações do model mesmo quando o valor atual for igual ao valor anterior. |
| `errorAsyncProperties` | `'p-error-async-properties'` | `ErrorAsyncProperties` | sim | - | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorPattern` | `'p-error-pattern'` | `string` | sim | - | Mensagem que será apresentada quando o `pattern` ou a máscara não for satisfeita. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `icon` | `'p-icon'` | `string | TemplateRef` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `step` | `'p-step'` | `string` | sim | 1 | Intervalo. |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | `[]` | Define a lista de ações que serão exibidas no cabeçalho da página. |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Define o sistema de navegação que indica o caminho da página atual na hierarquia da aplicação. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `helper` | `p-helper` | `PoHelperOptions | string` | sim | `info` | Define o conteúdo do po-helper informativo exibido ao lado do subtítulo da página. |
| `literals` | `'p-literals'` | `PoPageDefaultLiterals` | sim | - | Permite a customização das literais utilizadas no componente. |
| `pageActionsLayout` | `'p-page-actions-layout'` | `string` | sim | `default` | Define o layout de exibição das ações no cabeçalho. |
| `pageHeaderType` | `'p-page-header-type'` | `string` | sim | `primary` | Define o tipo de cabeçalho da página. |
| `subtitle` | `'p-subtitle'` | `string` | sim | - | Define um texto de apoio ou informações adicionais logo abaixo do título principal. |
| `title` | `'p-title'` | `string` | sim | - | Define o título principal da página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `back` | `p-back` | `EventEmitter` | Evento disparado ao clicar no botão voltar exibido no cabeçalho. |
---
# PoPageDetailComponent
**Seletor:** `po-page-detail`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-detail
O componente **po-page-detail** é utilizado como container principal para a tela de
detalhamento de um registro, tendo a possibilidade de usar as ações de "Voltar", "Editar" e "Remover".
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | não | - | Objeto com propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `literals` | `'p-literals'` | `PoPageDetailLiterals` | sim | - | Objeto com as literais usadas no `po-page-detail`. |
| `subtitle` | `'p-subtitle'` | `string` | sim | - | Subtitulo do Header da página. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `back` | `'p-back'` | `EventEmitter` | Evento que será disparado ao clicar no botão de "Voltar". |
| `edit` | `'p-edit'` | `EventEmitter` | Evento que será disparado ao clicar no botão de "Editar". |
| `remove` | `'p-remove'` | `EventEmitter` | Evento que será disparado ao clicar no botão de "Remover". |
---
# PoPageDynamicDetailComponent
**Seletor:** `po-page-dynamic-detail`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail
O `po-page-dynamic-detail` é uma página que serve para exibir registros em detalhes,
o mesmo também suporta metadados conforme especificado na documentação.
### Utilização via rota
Ao utilizar as rotas para inicializar o template, o `page-dynamic-detail` disponibiliza propriedades que devem ser fornecidas no arquivo de configuração de rotas da aplicação, para
poder especificar o endpoint dos dados e dos metadados que serão carregados na inicialização.
Exemplo de utilização:
Arquivo de configuração de rotas da aplicação: `app-routing.module.ts`
```
const routes: Routes = [
{
path: 'people/:id',
component: PoPageDynamicDetailComponent,
data: {
serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get
serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post
}
},
{
path: 'home',
component: HomeExampleComponent
}
];
```
O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi
e depois irá buscar da rota definida na propriedade serviceLoadApi.
A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o
tipo do metadado esperado e a versão cacheada pelo browser.
> Caso o servidor retornar um erro ao recuperar os metadados, serão repassados os metadados salvos em cache,
se o cache não existir será disparada uma notificação.
O formato esperado na resposta da requisição está especificado na interface
[PoPageDynamicDetailMetadata](/documentation/po-page-dynamic-detail#po-page-dynamic-detail-metadata). Por exemplo:
```
{
version: 1,
title: 'Person Detail',
fields: [
{ property: 'id', key: true, disabled: true },
{ property: 'status' },
{ property: 'name' },
{ property: 'nickname' },
{ property: 'birthdate', label: 'Birth date' },
{ property: 'genre' },
{ property: 'city' },
{ property: 'country' }
]
}
```
> Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma:
```
GET {end-point}/metadata?type=detail&version={version}
```
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `actions` | `'p-actions'` | `PoPageDynamicDetailActions` | sim | - | Define as ações da página de acordo com a interface `PoPageDynamicDetailActions`. |
| `autoRouter` | `'p-auto-router'` | `boolean` | sim | false | Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso as ações |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto com propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `fields` | `'p-fields'` | `Array` | não | - | Lista dos campos exibidos na página. |
| `onLoad` | `'p-load'` | `string | (() => PoPageDynamicDetailOptions)` | não | - | Função ou serviço que será executado na inicialização do componente. |
| `serviceApi` | `'p-service-api'` | `string` | não | - | Endpoint usado pelo template para requisição do recurso que serão exibido. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
---
# PoPageDynamicEditComponent
**Seletor:** `po-page-dynamic-edit`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit
O `po-page-dynamic-edit` é uma página que pode servir para editar ou criar novos registros,
o mesmo também suporta metadados conforme especificado na documentação.
### Utilização via rota
Ao utilizar as rotas para inicializar o template, o `page-dynamic-edit` disponibiliza propriedades que devem ser fornecidas no arquivo de configuração de rotas da aplicação, para
poder especificar o endpoint dos dados e dos metadados que serão carregados na inicialização.
Exemplo de utilização:
Arquivo de configuração de rotas da aplicação: `app-routing.module.ts`
```
const routes: Routes = [
{
path: 'people',
component: PoPageDynamicEditComponent,
data: {
serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get
serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post
}
},
{
path: 'home',
component: HomeExampleComponent
}
];
```
O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi
e depois irá buscar da rota definida na propriedade serviceLoadApi.
A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o
tipo do metadado esperado e a versão cacheada pelo browser.
> Caso o servidor retornar um erro ao recuperar os metadados, serão repassados os metadados salvos em cache,
se o cache não existir será disparada uma notificação.
Para carregar com um recurso já existente, deve-se ser incluído um parâmetro na rota chamado `id`:
```
{
path: 'people/:id',
component: PoPageDynamicEditComponent,
data: {
serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados
serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados
}
}
```
A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o
tipo do metadado esperado e a versão cacheada pelo browser.
O formato esperado na resposta da requisição está especificado na interface
[PoPageDynamicEditMetadata](/documentation/po-page-dynamic-edit#po-page-dynamic-edit-metadata). Por exemplo:
```
{
version: 1,
title: 'Person edit',
fields: [
{ property: 'id', key: true, disabled: true },
{ property: 'status' },
{ property: 'name' },
{ property: 'nickname' },
{ property: 'birthdate', label: 'Birth date' },
{ property: 'genre' },
{ property: 'city' },
{ property: 'country' }
]
}
```
> Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma:
```
GET {end-point}/metadata?type=edit&version={version}
```
#### Tokens customizáveis
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `actions` | `'p-actions'` | `PoPageDynamicEditActions` | sim | - | Ações da página. |
| `autoRouter` | `'p-auto-router'` | `boolean` | sim | false | Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso as ações |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto com propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `fields` | `'p-fields'` | `Array` | não | - | Lista dos campos usados na tabela e busca avançada. |
| `literals` | `'p-literals'` | `PoPageDynamicEditLiterals` | sim | - | Objeto com as literais usadas no `po-page-dynamic-edit`. |
| `notificationType` | `'p-notification-type'` | `string` | sim | warning | Tipo da notificação. |
| `onLoad` | `'p-load'` | `string | (() => PoPageDynamicEditOptions)` | não | - | Função ou serviço que será executado na inicialização do componente. |
| `onLoadData` | `'p-load-data'` | `unknown` | sim | - | Função que será executada após ser realizada a busca dos dados. |
| `serviceApi` | `'p-service-api'` | `string` | não | - | Endpoint usado pelo template para requisição do recurso que será exibido para edição. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
## Métodos
### `showAdditionalHelp(property: string)`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `keydown`.
```
import { PoPageDynamicEditModule } from '@po-ui/ng-templates';
...
@ViewChild('dynamicEdit', { static: true }) dynamicEdit: PoPageDynamicEditComponent;
fields: Array = [
{
property: 'name',
...
help: 'Mensagem de ajuda.',
helper: 'Mensagem de ajuda complementar com o componente po-helper implementado.',
keydown: this.onKeyDown.bind(this, 'name')
},
]
onKeyDown(property: string, event: KeyboardEvent): void {
if (event.code === 'F9') {
this.dynamicEdit.showAdditionalHelp(property);
}
}
```
---
# PoPageDynamicSearchComponent
**Seletor:** `po-page-dynamic-search`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-search
Componente com as ações de pesquisa já definidas, bastando que o desenvolvedor implemente apenas a chamada para as APIs
e exiba as informações.
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `actions` | `'p-actions'` | `Array` | sim | - | Nesta propriedade deve ser definido um array de objetos que implementam a interface `PoPageAction`. |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto com propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `concatFilters` | `'p-concat-filters'` | `boolean` | sim | `false` | Permite a utilização da pesquisa rápida junto com a pesquisa avançada. |
| `filters` | `'p-filters'` | `Array` | sim | - | Lista dos campos usados na busca avançada. Caso o mesmo não seja passado a busca avançada não será exibida. |
| `hideCloseDisclaimers` | `'p-hide-close-disclaimers'` | `Array` | sim | - | Lista de filtros que terão a opção de fechar ocultada |
| `hideRemoveAllDisclaimer` | `'p-hide-remove-all-disclaimer'` | `boolean` | sim | `false` | Oculta o botão para remover todos os *disclaimers* do grupo. |
| `keepFilters` | `'p-keep-filters'` | `boolean` | sim | `false` | Mantém na busca avançada os valores preenchidos do último filtro realizado pelo usuário. |
| `literals` | `'p-literals'` | `PoPageDynamicSearchLiterals` | sim | - | Objeto com as literais usadas no `po-page-dynamic-search`. |
| `onLoad` | `'p-load'` | `string | (() => PoPageDynamicSearchOptions)` | não | - | Função ou serviço que será executado na inicialização do componente. |
| `quickSearchValue` | `'p-quick-search-value'` | `string` | sim | - | Valor padrão na busca rápida ao inicializar o componente |
| `quickSearchWidth` | `'p-quick-search-width'` | `number` | sim | - | Largura do campo de busca, utilizando o *Grid System*, |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
| `visibleFixedFilters` | `'p-visible-fixed-filters'` | `boolean` | sim | - | Controla a visibilidade dos filtros fixos na página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `advancedSearch` | `'p-advanced-search'` | `EventEmitter` | Evento disparado ao executar a pesquisa avançada, o mesmo irá repassar um objeto com os valores preenchidos no modal de pesquisa. |
| `changeDisclaimers` | `'p-change-disclaimers'` | `EventEmitter` | Evento disparado ao remover um ou todos os disclaimers pelo usuário. |
| `quickSearch` | `'p-quick-search'` | `EventEmitter` | Evento disparado ao realizar uma busca pelo campo de pesquisa rápida, o mesmo será chamado repassando o valor digitado. |
---
# PoPageDynamicTableComponent
**Seletor:** `po-page-dynamic-table`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table
O `po-page-dynamic-table` é uma página que exibe uma lista de registros em uma tabela baseado em uma lista de fields,
o mesmo também suporta metadados conforme especificado na documentação.
### Utilização via rota
Ao utilizar as rotas para inicializar o template, o `page-dynamic-table` disponibiliza propriedades que devem ser fornecidas no arquivo de configuração de rotas da aplicação, para
poder especificar o endpoint dos dados e dos metadados que serão carregados na inicialização.
Exemplo de utilização:
Arquivo de configuração de rotas da aplicação: `app-routing.module.ts`
```
const routes: Routes = [
{
path: 'people',
component: PoPageDynamicTableComponent,
data: {
serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get
serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post
}
},
{
path: 'home',
component: HomeExampleComponent
}
];
```
O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi
e depois irá buscar da rota definida na propriedade serviceLoadApi.
A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o
tipo do metadado esperado e a versão cacheada pelo browser.
> Caso o servidor retornar um erro ao recuperar os metadados, serão repassados os metadados salvos em cache,
se o cache não existir será disparada uma notificação.
O formato esperado na resposta da requisição está especificado na interface
[PoPageDynamicTableMetadata](/documentation/po-page-dynamic-table#po-page-dynamic-table-metadata). Por exemplo:
```
{
version: 1,
title: 'Person Table',
fields: [
{ property: 'id', key: true, disabled: true },
{ property: 'status' },
{ property: 'name' },
{ property: 'nickname' },
{ property: 'birthdate', label: 'Birth date' },
{ property: 'genre' },
{ property: 'city' },
{ property: 'country' }
],
keepFilters: true
}
```
> Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma:
```
GET {end-point}/metadata?type=list&version={version}
```
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `actionRight` | `'p-actions-right'` | `boolean` | sim | `false` | Define que a coluna de ações ficará no lado direito da tabela. |
| `actions` | `'p-actions'` | `PoPageDynamicTableActions` | sim | - | Ações da página e da tabela. |
| `autoRouter` | `'p-auto-router'` | `boolean` | sim | false | Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto com propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `concatFilters` | `'p-concat-filters'` | `boolean` | sim | `false` | Permite a utilização da pesquisa rápida junto com a pesquisa avançada. |
| `draggable` | `'p-draggable'` | `boolean` | sim | - | Habilita o modo drag and drop para as colunas da tabela. |
| `fields` | `'p-fields'` | `Array` | sim | - | Lista dos campos usados na tabela e busca avançada. |
| `height` | `'p-height'` | `number` | sim | - | Define a altura da tabela em *pixels* e fixa o cabeçalho. |
| `hideCloseDisclaimers` | `'p-hide-close-disclaimers'` | `Array` | sim | - | Lista de filtros que terão a opção de fechar ocultada |
| `hideColumnsManager` | `'p-hide-columns-manager'` | `boolean` | sim | `false` | Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. |
| `hideRemoveAllDisclaimer` | `'p-hide-remove-all-disclaimer'` | `boolean` | sim | `false` | Oculta o botão para remover todos os *disclaimers* do grupo. |
| `infiniteScroll` | `'p-infinite-scroll'` | `boolean` | sim | `false` | Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela e o botão "Carregar Mais" deixará de ser exibido. Ao chegar no fim da tabela |
| `keepFilters` | `'p-keep-filters'` | `boolean` | sim | `false` | Mantém na modal de `Busca Avançada` os valores preenchidos do último filtro realizado pelo usuário. |
| `onLoad` | `'p-load'` | `string | (() => PoPageDynamicTableOptions)` | não | - | Função ou serviço que será executado na inicialização do componente. |
| `pageCustomActions` | `'p-page-custom-actions'` | `Array` | sim | - | Lista de ações customizadas da página que serão incorporadas às ações |
| `quickSearchParam` | `'p-quick-search-param'` | `string` | sim | 'search' | Identificador do parâmetro enviado ao serviço ao realizar uma busca rápida. |
| `quickSearchValue` | `'p-quick-search-value'` | `string` | sim | - | Valor padrão na busca rápida ao inicializar o componente |
| `quickSearchWidth` | `'p-quick-search-width'` | `number` | sim | - | Largura do campo de busca, utilizando o *Grid System*, |
| `searchLiterals` | `'p-literals'` | `PoPageDynamicSearchLiterals` | sim | - | Objeto com as literais usadas no `po-page-dynamic-table`. |
| `serviceApi` | `'p-service-api'` | `string` | não | - | Endpoint usado pelo template para requisição dos recursos que serão exibidos. |
| `spacing` | `'p-spacing'` | `string` | sim | `medium` | Define o espaçamento interno das células, impactando diretamente na altura das linhas do table. Os valores |
| `tableCustomActions` | `'p-table-custom-actions'` | `Array` | sim | - | Lista de ações customizadas na tabela da página que serão incorporadas às ações |
| `textWrap` | `'p-text-wrap'` | `boolean` | sim | `false` | Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
| `virtualScroll` | `'p-virtual-scroll'` | `boolean` | sim | `true` | Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. |
| `visibleFixedFilters` | `'p-visible-fixed-filters'` | `boolean` | sim | - | Controla a visibilidade dos filtros fixos na página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `changeFixedColumns` | `p-change-fixed-columns` | `EventEmitter` | Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas. |
| `changeVisibleColumns` | `'p-change-visible-columns'` | `EventEmitter` | Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. |
| `columnRestoreManager` | `'p-restore-column-manager'` | `EventEmitter` | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `sortBy` | `'p-sort-by'` | `EventEmitter` | Evento executado ao ordenar colunas da tabela. |
## Métodos
### `updateDataTable(filter: RecordType)`
Função que realiza a atualização dos dados da tabela.
Para utilizá-la é necessário capturar a instância do `page dynamic table`, como por exemplo:
``` html
= [
{
label: 'Update',
action: this.updateTable.bind(this),
icon: 'an-arrows-clockwise'
}]
updateTable() {
this.dynamicTable.updateDataTable();
}
```
---
# PoPageEditComponent
**Seletor:** `po-page-edit`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-edit
O componente **po-page-edit** é utilizado como container principal para tela de edição ou adição de um
registro, tendo a possibilidade de usar as ações de "Salvar", "Salvar e Novo" e "Cancelar".
Os botões "Salvar" e "Salvar e Novo" podem ser habilitados/desabilitados utilizando a propriedade `p-disable-submit`.
Esta propriedade pode ser utilizada para desabilitar os botões caso exista um formulário inválido na página ou alguma
regra de negócio não tenha sido atendida.
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto com propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `disableSubmit` | `'p-disable-submit'` | `boolean` | sim | - | Desabilita botões de submissão (save e saveNew) |
| `literals` | `'p-literals'` | `PoPageEditLiterals` | sim | - | Objeto com as literais usadas no `po-page-edit`. |
| `subtitle` | `'p-subtitle'` | `string` | sim | - | Subtitulo do Header da página. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `cancel` | `'p-cancel'` | `EventEmitter` | Evento que será disparado ao clicar no botão de "Cancelar". |
| `save` | `'p-save'` | `EventEmitter` | Evento que será disparado ao clicar no botão de "Salvar". |
| `saveNew` | `'p-save-new'` | `EventEmitter` | Evento que será disparado ao clicar no botão de "Salvar e Novo". |
---
# PoPageJobSchedulerComponent
**Seletor:** `po-page-job-scheduler`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-job-scheduler
O `po-page-job-scheduler` é uma página para criação e atualização de agendamentos da execução de processos (Job Scheduler),
como por exemplo: a geração da folha de pagamento dos funcionários.
Para utilizar esta página, basta informar o serviço (endpoint) para consumo,
sem a necessidade de criar componentes e tratamentos dos dados.
Veja mais sobre os padrões utilizados nas requisições no [Guia de implementação de APIs](guides/api).
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `beforeSendAction` | `'p-before-send'` | `unknown` | sim | - | Função chamada após realizar a confirmação da execução no PoPageJobScheduler. |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto com as propriedades do breadcrumb. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `parameters` | `'p-parameters'` | `Array` | não | - | Parâmetros que serão utilizados para criação e edição dos agendamentos. |
| `serviceApi` | `'p-service-api'` | `string` | não | - | Endpoint usado pelo componente para busca dos processos e parâmetros que serão utilizados para criação e edição dos agendamentos. |
| `stepExecutionLast` | `'p-step-execution-last'` | `boolean` | sim | - | Define se o step `Agendamento` deve ser exibido como o último na sequência de steps |
| `stepperDefaultOrientation` | `'p-orientation'` | `PoStepperOrientation` | sim | - | Define a orientação de exibição do `po-stepper`. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `error` | `'p-error'` | `EventEmitter` | Evento disparado ao ocorrer um erro impossibilitando a conclusão do agendamento. |
| `success` | `'p-success'` | `EventEmitter` | Evento disparado ao concluir o processo de agendamento com sucesso. |
---
# PoPageListComponent
**Seletor:** `po-page-list`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-list
O componente `po-page-list` é utilizado como o container principal para as telas de listagem de dados,
podendo ser apresentado como lista ou tabela.
Este componente possibilita realizar filtro dos dados, no qual permite que seja atribuido uma função que será executada no momento
da filtragem. Este comportamento pode ser acionado tanto ao *click* do ícone [an-magnifying-glass](https://po-ui.io/icons)
quanto ao pressionar da tecla *ENTER* quando o foco estiver no campo de pesquisa.
Para facilitar a manipulação e visualização dos filtros aplicados, é possível também utilizar o componente
[`po-disclaimer-group`](/documentation/po-disclaimer-group).
#### Tokens customizáveis
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|---------------------|---------------------------------------------|---------------------------------------|
| **Header** | | |
| `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
| `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
| `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
| `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
| **Content** | | |
| `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `actions` | `'p-actions'` | `Array` | sim | - | Nesta propriedade deve ser definido um array de objetos que implementam a interface `PoPageAction`. |
| `breadcrumb` | `'p-breadcrumb'` | `PoBreadcrumb` | sim | - | Objeto que implementa as propriedades da interface `PoBreadcrumb`. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `disclaimerGroup` | `'p-disclaimer-group'` | `PoDisclaimerGroup` | sim | - | Objeto que implementa as propriedades da interface `PoDisclaimerGroup`. |
| `filter` | `'p-filter'` | `PoPageFilter` | não | - | Objeto que implementa as propriedades da interface `PoPageFilter`. |
| `literals` | `'p-literals'` | `PoPageListLiterals` | sim | - | Objeto com as literais usadas no `po-page-list`. |
| `quickSearchValue` | `'p-quick-search-value'` | `string` | sim | - | Valor padrão na busca rápida ao inicializar o componente |
| `subtitle` | `'p-subtitle'` | `string` | sim | - | Subtitulo do Header da página. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
## Métodos
### `clearInputSearch()`
Limpa o campo de pesquisa.
---
# PoPageLoginComponent
**Seletor:** `po-page-login`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-login
O componente `po-page-login` é utilizado como template para tela de login.
Com ele é possível definirmos valores para usuário, senha e definir ações para recuperação de senha e gravação de dados do usuário.
Também é possível inserir uma imagem em conjunto com um texto de destaque.
A propriedade `p-authentication-url` automatiza a rotina do componente e simplifica o processo para autenticação do usuário, bastando
definir uma url para requisição da autenticação. A flexibilidade e praticidade podem chegar a um nível em que o desenvolvimento
da aplicação no *client side* é desprovida de qualquer código-fonte relacionado à rotina de login de usuário.
Seu detalhamento para uso pode ser visto logo abaixo em *propriedades*.
Caso julgue necessário, pode-se também definir manualmente a rotina do componente.
Para que as imagens sejam exibidas corretamente, é necessário incluir o caminho delas ao projeto. Para isso, edite
o *assets* no arquivo **angular.json** da aplicação na seguinte ordem:
```
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**\/*",
"input": "node_modules/@po-ui/style/images",
"output": "assets/images"
}
]
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `authenticationType` | `'p-authentication-type'` | `PoPageLoginAuthenticationType` | sim | `PoPageLoginAuthenticationType.Basic` | Atributo que recebe o tipo de esquema da autenticação, sendo suportados apenas os valores `Basic` e `Bearer`. |
| `authenticationUrl` | `'p-authentication-url'` | `string` | sim | - | Endpoint usado pelo template para requisição do recurso. Quando preenchido, o método `p-login-submit` será ignorado e o |
| `background` | `'p-background'` | `string` | sim | - | O `p-background` permite inserir uma imagem de destaque ao lado direito do formulário de login, caso a propriedade |
| `blockedUrl` | `'p-blocked-url'` | `string` | sim | - | Caso o valor atribuído para `p-exceeded-attempts-warning` seja igual a 0(zero) e a aplicação tenha um link de bloqueio de usuário, |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `contactEmail` | `'p-contact-email'` | `string` | sim | - | Personaliza o e-mail que é exibido na mensagem de dica de login padrão para contato de suporte. |
| `customField` | `'p-custom-field'` | `string | PoPageLoginCustomField` | sim | - | Ao informar um valor do tipo `string`, o mesmo será aplicado como a chave do campo customizado e utilizará |
| `environment` | `'p-environment'` | `string` | sim | - | Adiciona uma `tag` abaixo do título que especifica o ambiente que o usuário está fazendo o login. |
| `exceededAttemptsWarning` | `'p-exceeded-attempts-warning'` | `number` | sim | `0` | Exibe um aviso de bloqueio de acordo com a quantidade restante de tentativas. |
| `hideLabelStatus` | `'p-hide-label-status'` | `boolean` | sim | `false` | Indica se o status do `model` do switch de lembrar o usuário será escondido visualmente. |
| `hidePasswordPeek` | `'p-hide-password-peek'` | `boolean` | sim | `false` | Permite esconder a função de espiar a senha digitada. |
| `hideRememberUser` | `'p-hide-remember-user'` | `boolean` | sim | `false` | Esconde a função "Lembrar usuário" do formulário de login. |
| `languagesList` | `'p-languages'` | `Array` | sim | - | Coleção de idiomas que o componente irá tratar e disponibilizará para o usuário escolher. |
| `literals` | `'p-literals'` | `PoPageLoginLiterals` | sim | - | Objeto com as literais usadas no `po-page-login`. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Habilita um estado de carregamento ao botão de *login*. |
| `login` | `'p-login'` | `string` | sim | - | Valor do modelo do campo de login. |
| `loginErrors` | `'p-login-errors'` | `string[]` | sim | - | Atributo que recebe uma lista de erros e exibe abaixo do campo de login. |
| `loginPattern` | `'p-login-pattern'` | `string` | sim | - | Expressão regular para validar o campo de login, caso a expressão não seja atentida, a literal `loginErrorPattern` |
| `logo` | `'p-logo'` | `string` | sim | - | Caminho para a logomarca localizada na parte superior. |
| `noAutocompleteLogin` | `'p-no-autocomplete-login'` | `boolean` | sim | `true` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `noAutocompletePassword` | `'p-no-autocomplete-password'` | `boolean` | sim | `true` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `passwordErrors` | `'p-password-errors'` | `string[]` | sim | - | Atributo que recebe uma lista de erros e exibe abaixo do campo de password. |
| `passwordPattern` | `'p-password-pattern'` | `string` | sim | - | Expressão regular para validar o campo de password, caso a expressão não seja atentida, a literal `passwordErrorPattern` |
| `productName` | `'p-product-name'` | `string` | sim | - | Texto customizado que fica entre a logo e a mensagem de boas-vindas. |
| `recovery` | `'p-recovery'` | `string | Function | PoPageLoginRecovery` | sim | - | Exibe um link abaixo do formulário de login para que os usuários da aplicação façam a recuperação dos dados de autenticação. |
| `registerUrl` | `'p-register-url'` | `string` | sim | - | Caso a aplicação tenha um link para novos cadastros, informe uma url externa ou uma rota válida, dessa |
| `secondaryLogo` | `'p-secondary-logo'` | `string` | sim | - | Caminho para a logomarca localizada no rodapé. |
| `support` | `'p-support'` | `string | Function` | sim | - | Exibe um botão para suporte. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `languageChange` | `'p-language-change'` | `EventEmitter` | Evento disparado quando o usuário alterar o idioma da página. |
| `loginChange` | `'p-login-change'` | `EventEmitter` | Evento disparado quando o usuário alterar o input do campo login. |
| `loginSubmit` | `'p-login-submit'` | `EventEmitter` | Evento disparado ao submeter o formulário de login (apertando `Enter` dentro dos campos ou pressionando o botão de confirmação). |
| `passwordChange` | `'p-password-change'` | `EventEmitter` | Evento disparado quando o usuário alterar o input do campo password. |
---
# PoPageSlideComponent
**Seletor:** `po-page-slide`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-slide
O componente `po-page-slide` é utilizado para incluir conteúdos secundários
adicionando controles e navegações adicionais, mas mantendo o usuário na
página principal.
Este componente é ativado a partir do método `#open()` e pode ser encerrado
através do botão que encontra-se no cabeçalho do mesmo ou através do método
`#close()`.
> Para o correto funcionamento do componente `po-page-slide`, deve ser
> importado o módulo `BrowserAnimationsModule` no módulo principal da sua
> aplicação.
Módulo da aplicação:
```
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PoModule } from '@po-ui/ng-components';
...
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
...
PoModule
],
declarations: [
AppComponent,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Em aplicações Standalone, utilize a seguinte configuração para o bootstrap:
```
import { bootstrapApplication } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, {
providers: [importProvidersFrom(BrowserAnimationsModule)]
}).catch(err => console.error(err));
```
Caso utilize componentes de field dentro do page-slide, recomenda-se o uso do [Grid System](https://po-ui.io/guides/grid-system).
No rodapé é possível utilizar o componente [`PoPageSlideFooter`](/documentation/po-page-slide-footer) para customização do template.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|------------------------------------------|-------------------------------------------------------------------|-------------------------------------------------------------------------------|
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--padding-header` | Espaçamento do header | `var(--spacing-md)` |
| `--padding-body` | Espaçamento do conteúdo | `var(--line-height-none)` |
| `--padding-footer` | Espaçamento do footer | `var(--spacing-sm) var(--spacing-md) var(--spacing-xl) var(--spacing-md)` |
| **Default Values** | | |
| `--color-overlay` | Cor do overlay | `var(--color-neutral-dark-80)` |
| `--opacity-overlay` | Cor da opacidade do overlay | `0.7` |
| `--background-color` | Cor de background | `var(--color-neutral-light-00)` |
| `--border-color` | Cor da borda | `var(--color-neutral-light-20)` |
| `--color-title` | Cor do titulo do header | `var(--color-neutral-dark-95)` |
| `--border-radius` | Radius da borda | `var(--border-radius-md) 0 0 var(--border-radius-md)` |
| `--transition-duration` | Duração da transição | `var(--duration-extra-fast)` |
| `--transition-timing` | Duração da transição com o tipo de transição | `var(--duration-extra-slow) var(--timing-standart)` |
| `--page-slide-width-sm` | Tamanho da largura do componente no tamanho `small` | `40%` |
| `--page-slide-width-md` | Tamanho da largura do componente no tamanho `medium` | `50%` |
| `--page-slide-width-lg` | Tamanho da largura do componente no tamanho `large` | `60%` |
| `--page-slide-width-xl` | Tamanho da largura do componente no tamanho `extra large` | `70%` |
| `--page-slide-min-width-auto` | Tamanho da largura mínima do componente no tamanho `auto` | `40%` |
| `--page-slide-max-width-auto` | Tamanho da largura máxima do componente no tamanho `auto` | `90%` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `clickOut` | `'p-click-out'` | `boolean` | sim | `false` | Define se permite o encerramento da página ao clicar fora da mesma. |
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `flexibleWidth` | `'p-flexible-width'` | `boolean` | sim | `false` | Permite a expansão dinâmica da largura do `po-page-slide` quando `p-size` for `auto` (automático). |
| `hideClose` | `'p-hide-close'` | `boolean` | sim | `false` | Oculta o botão de encerramento da página. |
| `size` | `'p-size'` | `string` | sim | `md` | Define o tamanho da página. |
| `subtitle` | `'p-subtitle'` | `string` | sim | - | Subtítulo da página. |
| `title` | `'p-title'` | `string` | não | - | Título da página. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `closePageSlide` | `'p-close'` | `EventEmitter` | Evento executado ao fechar o page slide. |
## Métodos
### `open()`
Ativa a visualização da página.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo
ser utilizado o `ViewChild` da seguinte forma:
```typescript
import { PoPageSlideComponent } from '@po/ng-components';
...
@ViewChild(PoPageSlideComponent, { static: true }) pageSlide: PoPageSlideComponent;
public openPage() {
this.pageSlide.open();
}
```
### `close()`
Encerra a visualização da página.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo
ser utilizado o `ViewChild` da seguinte forma:
```typescript
import { PoPageSlideComponent } from '@po-ui/ng-components';
...
@ViewChild(PoPageSlideComponent, { static: true }) pageSlide: PoPageSlideComponent;
public closePage() {
this.pageSlide.close();
}
```
---
# PoPageSlideFooterComponent
**Seletor:** `po-page-slide-footer`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-slide-footer
O componente `po-page-slide-footer` pode ser utilizado para incluir os botões de ações no rodapé da [`PoPageSlide`](/documentation/po-page-slide), bem como para dar liberdade ao desenvolvedor de incluir outros itens necessários.
> Como boa prática, deve-se observar a utilização de apenas um botão primário.
```
```
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `disabledAlign` | `'p-disabled-align'` | `boolean` | sim | false | Desabilita o alinhamento padrão, à direita, dos botões de ações que ficam no rodapé da [`PoPageSlide`](/documentation/po-page-slide). |
---
# PoPasswordComponent
**Seletor:** `po-password`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-password
Este é um componente baseado em input, com várias propriedades do input nativo e outras
propriedades extras como: máscara, pattern, mensagem de erro e etc.
Você deve informar a variável que contém o valor como [(ngModel)]="variavel", para que o
input receba o valor da variável e para que ela receba as alterações do valor (two-way-databinding).
A propriedade name é obrigatória para que o formulário e o model funcionem corretamente.
Importante:
- Caso o input tenha um [(ngModel)] sem o atributo name, ocorrerá um erro de angular.
Então você precisa informar o atributo name ou o atributo [ngModelOptions]="{standalone: true}".
Exemplo: [(ngModel)]="pessoa.nome" [ngModelOptions]="{standalone: true}".
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
Obs: Só é possível realizar alterações ao adicionar a classe `.po-input`
> Para correto alinhamento é recomendado o uso das classes de espaçamento do [Grid System](https://po-ui.io/guides/grid-system).
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor do texto placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor pincipal do input | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--padding` | Preenchimento | `0 0.5rem` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor principal no estado de focus | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` |
O `po-password` é um input específico para senhas. Já possui tipo, estilo e ícone predefinidos.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `emitAllChanges` | `'p-emit-all-changes'` | `boolean` | sim | `false` | Sempre emite as alterações do model mesmo quando o valor atual for igual ao valor anterior. |
| `errorAsyncProperties` | `'p-error-async-properties'` | `ErrorAsyncProperties` | sim | - | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorPattern` | `'p-error-pattern'` | `string` | sim | - | Mensagem que será apresentada quando o `pattern` ou a máscara não for satisfeita. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `hidePasswordPeek` | `'p-hide-password-peek'` | `boolean` | sim | `false` | Permite esconder a função de espiar a senha digitada. |
| `icon` | `'p-icon'` | `string | TemplateRef` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
Dev PO
dev.po@po-ui.com.br
```
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-sm)` |
| `--border-color` | Cor da borda | `var(--color-neutral-light-20)` |
| `--background` | Cor do background | `var(--color-neutral-light-00)` |
| `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-md)` |
| **po-popup po-item-list** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--line-height` | Tamanho da label | `var(--line-height-md)` |
| **Action** | | |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--color` | Cor principal do popup | `var(--color-action-default)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-darkest)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Pressed** | | |
| `--background-pressed` | Cor de background no estado de pressionado | `var(--color-brand-01-light)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` |
| **Selected** | | |
| `--font-weight-selected` | Peso da fonte no estado selecionado | `var(--font-weight-bold)` |
| `--background-selected` | Cor de background no estado selecionado | `var(--color-brand-01-lightest)` |
| **Option e check** | | |
| `--color-option` | Cor principa no estado Option/check | `var(--color-neutral-dark-90)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `actions` | `'p-actions'` | `PoPopupAction[]` | não | - | Lista de ações que serão exibidas no componente. |
| `customPositions` | `'p-custom-positions'` | `string[]` | sim | - | Define as posições e a sequência que o `po-popup` poderá rotacionar. A sequência será definida pela ordem passada |
| `hideArrow` | `'p-hide-arrow'` | `boolean` | sim | `false` | Oculta a seta do componente *popup*. |
| `position` | `'p-position'` | `string` | sim | `bottom-left` | Define a posição inicial que o `po-popup` abrirá em relação ao componente alvo. Sugere-se que seja |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário no template: |
| `target` | `'p-target'` | `any` | não | - | Para utilizar o `po-popup` deve-se colocar uma variável local no componente que disparará o evento |
## Métodos
### `close()`
Fecha o componente *popup*.
> Por padrão, este comportamento é acionado somente ao clicar fora do componente ou em determinada ação / url.
### `open()`
Abre o componente *popup*.
> É possível informar um parâmetro que será utilizado na execução da ação do item e na função de desabilitar.
### `toggle()`
Responsável por abrir e fechar o *popup*.
Quando disparado abrirá o *popup* e caso o mesmo já estiver aberto e possuir o mesmo `target` irá fecha-lo.
É possível informar um parâmetro que será utilizado na execução da ação do item e na função de desabilitar.
---
# PoProgressComponent
**Seletor:** `po-progress`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-progress
Componente de barra de progresso que possibilita exibir visualmente o progresso/carregamento de uma tarefa.
Este componente pode ser utilizado no *upload* de arquivos, uma atualização no sistema ou o processamento de uma imagem.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| **Error** | | |
| `--text-color-error` | Cor do texto no estado error | `var(--color-feedback-negative-dark)` |
| `--color-icon-error` | Cor do ícone no estado error | `var(--color-feedback-negative-dark)` |
| **po-progress-bar** | | |
| `--background-color-tray` | Cor do background | `var(--color-brand-01-lightest)` |
| `--background-color-indicator` | Cor do background do indicador | `var(--color-action-default)` |
| **po-progress-circle** | | |
| `--background-color-tray` | Cor do background | `var(--color-brand-01-lightest)` |
| `--background-color-indicator` | Cor do background do indicador | `var(--color-action-default)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `ariaLabel` | `'p-aria-label'` | `string` | sim | - | Define um nome acessível para o elemento com `role="progressbar"`. |
| `customAction` | `'p-custom-action'` | `PoProgressAction` | sim | - | Permite definir uma ação personalizada no componente `po-progress`, exibindo um botão no canto inferior direito |
| `disabledCancel` | `'p-disabled-cancel'` | `boolean` | sim | `false` | Desabilita botão de cancelamento na parte inferior da barra de progresso. |
| `indeterminate` | `'p-indeterminate'` | `boolean` | sim | `false` | Habilita o modo indeterminado na barra de progresso, que mostra uma animação fixa sem um valor estabelecido. |
| `info` | `'p-info'` | `string` | sim | - | Informação adicional que aparecerá abaixo da barra de progresso ao lado direito. |
| `infoIcon` | `'p-info-icon'` | `string | TemplateRef` | sim | - | Ícone que aparecerá ao lado do texto da propriedade `p-info`. |
| `radius` | `p-radius` | `number` | sim | `45` (automático) | Define o raio do círculo SVG em pixels. Permite ao usuário customizar o tamanho |
| `shape` | `p-shape` | `string` | sim | `bar` | Define o formato visual do componente de progresso. |
| `showPercentage` | `'p-show-percentage'` | `boolean` | sim | `false` | Ativa a exibição da porcentagem atual da barra de progresso. |
| `size` | `'p-size'` | `string` | sim | `large` | Define a expessura da barra de progresso. |
| `sizeActions` | `'p-size-actions'` | `string` | sim | `medium` | Define o tamanho das ações no componente com excessão da barra de progresso que pode ser ajustada através da propriedade `p-size`: |
| `status` | `'p-status'` | `PoProgressStatus` | sim | `PoProgressStatus.Default` | Status da barra de progresso que indicará visualmente ao usuário |
| `text` | `'p-text'` | `string` | sim | - | Texto principal que aparecerá abaixo da barra de progresso no lado esquerdo. |
| `value` | `'p-value'` | `number` | sim | `0` | Valor que representará o progresso. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `cancel` | `'p-cancel'` | `EventEmitter` | Evento que será disparado ao clicar no ícone de cancelamento ("x") na parte inferior da barra de progresso. |
| `customActionClick` | `'p-custom-action-click'` | `EventEmitter` | Evento emitido quando o botão definido em `p-custom-action` é clicado. Este evento retorna informações |
| `retry` | `'p-retry'` | `EventEmitter` | Evento que será disparado ao clicar no ícone de tentar novamente na parte inferior da barra de progresso. |
---
# PoRadioGroupComponent
**Seletor:** `po-radio-group`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-radio-group
O componente `po-radio-group` deve ser utilizado para disponibilizar múltiplas opções ao usuário, permitindo a ele que
selecione apenas uma delas. Seu uso é recomendado para um número pequeno de opções, caso contrário, recomenda-se o uso
do [**po-combo**](/documentation/po-combo) ou [**po-select**](/documentation/po-select).
Este não é um componente de multiseleção, se for este o caso, deve-se utilizar o
[**po-checkbox-group**](/documentation/po-checkbox-group).
> Ao passar um valor para o *model* que não esteja na lista de opções, o mesmo será definido como `undefined`.
#### Acessibilidade tratada no componente interno `po-radio`:
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- O componente foi desenvolvido utilizando controles padrões HTML para permitir a identificação do mesmo na interface por tecnologias assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
- A cor não deve ser o único meio para diferenciar o radio button normal do selecionado, por isso deve-se manter uma diferença visual entre os estados. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
- Quando em foco, o componente é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-3)
- A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [(WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
Conforme documentação em: https://doc.animaliads.io/docs/components/radio
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
Obs: No componente Radio Group, a customização ocorre principalmente nos elementos `po-radio` que compõem o grupo de opções.
Portanto, ao aplicar estilos customizados, é importante focar na customização dos elementos `po-radio` em vez do próprio `po-radio-group`.
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--border-color` | Cor da borda | `var(--color-neutral-dark-70)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--shadow-color-hover` | Cor da sombra no estado hover | `var(--color-brand-01-lighter)` |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-brand-01-darkest)` |
| **checked** | | |
| `--color-unchecked` | Cor quando não selecionado | `var(--color-neutral-light-00)` |
| `--color-checked` | Cor quando selecionado | `var(--color-action-default)` |
| **Disabled** | | |
| `--color-unchecked-disabled` | Cor pricipal quando não selecionado no estado disabled | `var(--color-neutral-light-30)` |
| `--color-checked-disabled` | Cor pricipal quando selecionado no estado disabled | `var(--color-neutral-dark-70)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `columns` | `'p-columns'` | `number` | sim | `2` | Define a quantidade de colunas para exibição das opções. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Indica que o campo será desabilitado. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem setada se o campo estiver vazio e for requerido. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `label` | `'p-label'` | `string` | sim | - | Label do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `name` | `'name'` | `string` | não | - | Nome das opções. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `options` | `'p-options'` | `PoRadioGroupOption[]` | não | - | Lista de opções que serão exibidas. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho dos radios do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `change` | `'p-change'` | `EventEmitter` | Evento ao alterar valor do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoRadioGroupComponent } from '@po-ui/ng-components';
...
@ViewChild(PoRadioGroupComponent, { static: true }) radio: PoRadioGroupComponent;
focusRadio() {
this.radio.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | `[]`
| Define as ações da barra de ferramentas do `PoRichTextComponent` que serão ocultadas. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `readonly` | `'p-readonly'` | `boolean` | sim | `false` | Indica que o campo será somente leitura. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao deixar o campo e que recebe como parâmetro o valor alterado. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao modificar valor do model e que recebe como parâmetro o valor alterado. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoRichTextComponent } from '@po-ui/ng-components';
...
@ViewChild(PoRichTextComponent, { static: true }) richText: PoRichTextComponent;
focusRichText() {
this.richText.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | não | - | Define os nomes das propriedades do objeto que serão utilizados para busca em `p-items`. Cada valor definido no |
| `filterSelect` | `'p-filter-select'` | `PoSearchFilterSelect[]` | não | - | Habilita um seletor de filtros à esquerda do campo, permitindo a aplicação de filtros agrupados na busca ou sobre |
| `filterType` | `'p-filter-type'` | `PoSearchFilterMode` | sim | `startsWith` | Define o modo de pesquisa utilizado no campo de busca. Os valores permitidos são definidos pelo enum |
| `icon` | `'p-icon'` | `string | TemplateRef` | sim | - | Permite customizar o ícone de busca que acompanha o campo. |
| `items` | `'p-items'` | `Array` | sim | - | Lista de itens que serão utilizados para pesquisa. |
| `keysLabel` | `'p-keys-label'` | `Array` | sim | - | Define os nomes das propriedades do objeto que serão exibidos como rótulos (labels) no `listbox` quando a propriedade |
| `literals` | `'p-literals'` | `PoSearchLiterals` | sim | - | Objeto com as literais usadas no `po-search`, permitindo personalizar os textos exibidos no componente. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `locateSummary` | `'p-locate-summary'` | `PoSearchLocateSummary` | sim | - | Define os valores do contador exibido ao usar a propriedade `p-search-type` do tipo `locate`, indicando a posição |
| `name` | `'name'` | `string` | sim | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `showListbox` | `'p-show-listbox'` | `boolean` | sim | `false` | Exibe uma lista (auto-complete) com as opções definidas em `p-filter-keys` ou `p-filter-select` enquanto realiza |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `type` | `'p-search-type'` | `searchMode` | sim | `action` | Determina a forma de realizar a pesquisa no componente. Valores aceitos: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `filter` | `'p-filter'` | `EventEmitter` | Pode ser informada uma função que será disparada quando houver alterações nos filtros. |
| `filteredItemsChange` | `'p-filtered-items-change'` | `EventEmitter` | Pode ser informada uma função que será disparada quando houver alterações no input. |
| `focusEvent` | `'p-focus'` | `EventEmitter` | Evento emitido quando o campo de entrada (input) recebe foco. |
| `footerAction` | `'p-footer-action-listbox'` | `EventEmitter` | Evento disparado ao clicar no botão de ação exibido no rodapé do `listbox`. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `listboxOnClick` | `'p-listbox-onclick'` | `EventEmitter` | Pode ser informada uma função que será disparada quando houver click no listbox. |
| `locateNext` | `'p-locate-next'` | `EventEmitter` | Evento disparado ao clicar no controle "Próximo resultado". |
| `locatePrevious` | `'p-locate-previous'` | `EventEmitter` | Evento disparado ao clicar no controle "Resultado anterior". |
---
# PoSearchAiComponent
**Seletor:** `po-search-ai`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai
O `po-search-ai` é um componente de **busca em linguagem natural** baseado em input.
Ele permite que o usuário digite uma consulta em texto livre (por exemplo,
"clientes de SP com saldo acima de R$ 500"*) e a converte, através de um provedor de IA,
em um filtro estruturado (normalmente OData) que pode ser aplicado por outro componente,
como o [`po-table`](/documentation/po-table).
> **Componente experimental:** o `po-search-ai` está em fase experimental. Sua API
> (propriedades, eventos e contrato com o backend) pode sofrer alterações
> entre versões. Utilize com cautela em ambientes de produção.
O componente é **agnóstico ao provedor de IA**. Toda a comunicação ocorre através do
endpoint informado em `p-url`, que recebe `{ query, columns }` e deve retornar
`{ filter, description, confidence }`. Isso garante que nenhuma chave de IA seja
exposta no client-side — a integração com a LLM é responsabilidade do backend (proxy).
Por herdar de `po-input`, o componente suporta as propriedades comuns de formulário
(label, help, helper, required, disabled, readonly, size, clean, loading, etc.) e
integra-se a formulários `template-driven` e `reactive`.
#### Endpoint de IA (backend)
O componente **não conversa diretamente com a LLM**. Você deve disponibilizar um endpoint
próprio (proxy) e informá-lo em `p-url`.
É nesse backend que devem ficar a chave de acesso da IA e as regras usadas para montar
o prompt. Essas informações nunca devem ficar expostas no client-side
O contrato é simples. O componente faz um `POST` enviando:
```json
{
"query": "funcionários de São Paulo com salário acima de 5000",
"columns": [
{ "property": "name", "label": "Nome", "type": "string" },
{ "property": "city", "label": "Cidade", "type": "string" },
{ "property": "salary", "label": "Salário", "type": "number" }
]
}
```
E o endpoint deve responder com:
```json
{
"filter": "city eq 'São Paulo' and salary gt 5000",
"description": "Funcionários de São Paulo com salário acima de 5000",
"confidence": 0.92
}
```
Onde `filter` é o filtro estruturado gerado pela IA (normalmente OData), `description` é um
resumo legível e `confidence` (`0.0` a `1.0`) indica o quão confiável foi a interpretação —
comparado com `p-min-confidence` para decidir entre os eventos `p-result` e `p-low-confidence`.
> **Exemplo de implementação:** o PO UI mantém um backend de referência, open source, que recebe
> esse contrato e o encaminha para um provedor de IA (Groq/Gemini).
> - Endpoint público: [`/v1/ai/filter`](https://po-sample-api.onrender.com/api#/ai)
> - Código-fonte: [po-sample-api/src/ai/ai.service.ts](https://github.com/po-ui/po-sample-api/blob/main/src/ai/ai.service.ts)
#### Estados de comportamento
- **Idle:** aguardando a digitação da consulta.
- **Loading:** consulta em andamento (ícone de carregamento ativo).
- **Aplicado:** após uma resposta bem-sucedida, exibe um feedback persistente de
"filtro aplicado via IA" enquanto a consulta estiver ativa, com opção de limpeza rápida.
- **Baixa confiança:** quando `confidence` for menor que `p-min-confidence`, emite
`p-low-confidence` e não aplica o filtro automaticamente.
- **Erro:** quando a chamada falha, emite `p-error`.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|-------------------------------|-----------------------------------------------------------------|------------------------------------|
| **Default** | | |
| `--font-family` | Família tipográfica do campo | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte do campo | `var(--font-size)` |
| `--text-color` | Cor do texto digitado | `var(--color-neutral-dark-90)` |
| `--text-color-placeholder` | Cor do texto do placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor da borda do campo | `var(--color-neutral-dark-70)` |
| `--background` | Cor de fundo do campo | `var(--color-neutral-light-05)` |
| `--border-radius` | Raio da borda do campo | `var(--border-radius-md)` |
| **Ícones e divisória** | | |
| `--color-icon-read` | Cor do ícone de busca por IA | `var(--color-neutral-dark-70)` |
| `--color-divider` | Cor da divisória vertical entre o campo e o botão de busca | `var(--color-neutral-mid-40)` |
| `--color-icon-processing` | Cor do ícone exibido enquanto a consulta está sendo processada | `var(--color-action-default)` |
| **Hover** | | |
| `--color-hover` | Cor da borda no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de fundo no estado hover | `var(--color-brand-01-lightest)` |
| **Focused** | | |
| `--color-focused` | Cor da borda no estado de foco | `var(--color-action-default)` |
| `--outline-color-focused` | Cor do outline no estado de foco | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor da borda no estado desabilitado | `var(--color-neutral-light-30)` |
| `--background-disabled` | Cor de fundo no estado desabilitado | `var(--color-neutral-light-20)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `columns` | `p-columns` | `Array` | sim | `[]` | Metadados das colunas/campos disponíveis para a busca por IA. Essas informações são |
| `literals` | `p-literals` | `PoSearchAiLiterals` | sim | - | Objeto com os literais usados no componente. Permite sobrescrever as mensagens padrão |
| `minConfidence` | `p-min-confidence` | `number` | sim | `0.5` | Nível mínimo de confiança (`0.0` a `1.0`) para que o resultado da IA seja considerado |
| `timeout` | `p-timeout` | `number` | sim | `10000` | Tempo máximo de espera (em milissegundos) pela resposta da IA antes de abortar a |
| `url` | `p-url` | `string` | sim | - | Endpoint (proxy) responsável por encaminhar a consulta para o provedor de IA. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `clearEvent` | `p-clear` | `EventEmitter` | Evento disparado quando o filtro aplicado via IA é limpo, seja pela ação do usuário |
| `error` | `p-error` | `EventEmitter` | Evento disparado quando a chamada à API de IA falha (erro HTTP, timeout, etc.). |
| `lowConfidence` | `p-low-confidence` | `EventEmitter` | Evento disparado quando a confiança da resposta da IA é menor que `p-min-confidence`. |
| `result` | `p-result` | `EventEmitter` | Evento disparado quando a IA retorna um resultado com confiança maior ou igual a |
## Métodos
### `search()`
Envia a consulta atual (valor do campo) para o endpoint de IA configurado em `p-url`.
Caso a consulta esteja vazia ou `p-url` não esteja definido, nada é feito.
O resultado é emitido via `p-result` (ou `p-low-confidence` quando a confiança for baixa)
e falhas são emitidas via `p-error`.
### `clearSearch()`
Limpa o filtro aplicado via IA, esvazia o campo e emite o evento `p-clear`.
### `onSearchKeydown(event: )`
Manipula a tecla pressionada no campo: dispara a busca ao pressionar `Enter`.
---
# PoSelectComponent
**Seletor:** `po-select`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-select
O componente po-select exibe uma lista de valores e permite que o usuário selecione um desses valores.
Os valores listados podem ser fixos ou dinâmicos de acordo com a necessidade do desenvolvedor, dando mais flexibilidade ao componente.
O po-select não permite que o usuário informe um valor diferente dos valores listados, isso garante a consistência da informação.
O po-select não permite que sejam passados valores duplicados, undefined e null para as opções, excluindo-os da lista.
> Ao passar um valor para o _model_ que não está na lista de opções, o mesmo será definido como `undefined`.
Também existe a possibilidade de utilizar um _template_ para a exibição dos itens da lista,
veja mais em **[p-combo-option-template](/documentation/po-combo-option-template)**.
> Obs: o template **[p-select-option-template](/documentation/po-select-option-template)** será depreciado na versão 14.x.x.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-empty` | Cor do placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor da borda | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` |
| `--padding-horizontal` | Preenchimento horizontal | `0.5em` |
| `--padding-vertical` | Preenchimento vertical | `0.7em` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` |
| `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| `--color-focused` | Cor da borda no estado de focus | `var(--color-action-default)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` |
| `--background-color-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Indica se o campo será desabilitado. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem setada se o campo estiver vazio e for requerido. |
| `fieldLabel` | `'p-field-label'` | `string` | sim | `label` | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente |
| `fieldValue` | `'p-field-value'` | `string` | sim | `value` | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente |
| `help` | `'p-help'` | `string` | não | - | Texto de apoio para o campo. |
| `label` | `'p-label'` | `string` | não | - | Rótulo exibido pelo componente. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `name` | `'name'` | `string` | não | - | Nome do componente. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `options` | `'p-options'` | `any[]` | não | - | Nesta propriedade deve ser definido uma coleção de objetos que implementam a interface `PoSelectOption`, |
| `placeholder` | `'p-placeholder'` | `string` | sim | - | Mensagem que aparecerá enquanto nenhuma opção estiver selecionada. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `readonly` | `'p-readonly'` | `boolean` | sim | `false` | Indica que o campo será somente para leitura. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `ngModelChange` | `'ngModelChange'` | `EventEmitter` | Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoSelectComponent } from '@po-ui/ng-components';
...
@ViewChild(PoSelectComponent, { static: true }) select: PoSelectComponent;
focusSelect() {
this.select.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
//Exemplo com p-label e p-helper
` | não | - | Array de imagens ou dados para o slide, pode ser de três formas: |
## Métodos
### `getCurrentSlideIndex()`
Método que retorna o index do slide atual
```
@ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent;
myFunction() {
let currentIndex = this.slideComponent.getCurrentSlideIndex();
}
```
### `next()`
Método para chamar o próximo slide.
```
@ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent;
myFunction() {
this.slideComponent.next();
}
```
### `previous()`
Método para chamar o slide anterior.
```
@ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent;
myFunction() {
this.slideComponent.previous();
}
```
---
# PoStepComponent
**Seletor:** `po-step`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-step
O componente `po-step` é utilizado para envolver e renderizar o conteúdo de um passo (*step*) do `po-stepper`, por exemplo:
```
```
A renderização do conteúdo envolvido na tela e o controle dos status são feitos automaticamente. No qual, o primeiro
`po-step` encontrado será colocado como ativo, o próximo fica com o status *default* e os demais ficam
desabilitados (*disabled*).
Ao clicar no `po-step` que está com o status *default*, o que está ativo ficará com o
status de concluído (*done*) e o próximo que estava desabilitado ficará com o status *default* e o restante permanecerá
com o status desabilitado.
> Ao utilizar o `po-step`, o componente `po-stepper` funcionará de forma sequencial, ou seja, não será possível
pular para outro `po-step` que esteja com o status igual a desabilitado (*disabled*).
Acesse a [documentação do `po-stepper`](/documentation/po-stepper) para ter mais informações sobre o seu funcionamento
e exemplos de uso.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `canActiveNextStep` | `'p-can-active-next-step'` | `((currentStep) => boolean) | ((currentStep) => Observable)` | sim | - | Função chamada quando o próximo *step* for clicado ou quando o método `PoStepperComponent.next()` for chamado. |
| `iconDefault` | `'p-icon-default'` | `string | TemplateRef` | sim | - | Define o ícone padrão do step em seu status *default*. |
| `label` | `'p-label'` | `string` | não | - | Título que será exibido descrevendo o passo (*step*). |
---
# PoStepperComponent
**Seletor:** `po-stepper`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-stepper
O `po-stepper` permite que um processo seja dividido em passos para que o usuário o realize
mais facilmente.
Existem duas formas de utilização:
1 - Usando o componente [**po-step**](/documentation/po-step) para renderizar e descrever os passos.
2 - Através da propriedade `p-steps` para descrever os passos do processo, sendo responsabilidade do desenvolvedor o controle
de renderização do que será exibido a cada *step* ativo.
Através de suas propriedades, é possível definir se sua orientação será horizontal ou vertical,
além da possibilidade de aumentar o tamanho dos *steps*.
Também é possível navegar entre os *steps* através do teclado utilizando a tecla *tab* e, para ativar o *step* em foco basta
pressionar a tecla *enter*. Além disso, é possível ativar a exibição de ícones no lugar de números nos *steps* através da
propriedade [`p-step-icons`](/documentation/po-stepper#stepIconsProperty).
#### Utilizando os métodos do componente:
Para acessar os métodos do componente é necessário ter a referência do mesmo.
Por exemplo, utilizando um [**ViewChild**](https://angular.io/api/core/ViewChild):
```
@ViewChild(PoStepperComponent) poStepperComponent: PoStepperComponent;
```
E para acessar o método:
```
poStepperComponent.next();
```
#### Boas práticas
- Evite `labels` extensos que quebram o layout do `po-stepper`, use `labels` diretos, curtos e intuitivos.
- Utilize apenas um `po-stepper` por página.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| **Label** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-normal)` |
| **Step - Done** | | |
| `--text-color` | Cor do texto no step concluído | `var(--color-neutral-dark-70)` |
| `--color-icon-done` | Cor do ícone no step concluído | `var(--color-neutral-dark-70)` |
| `--background-done` | Cor de fundo no step concluído | `var(--color-neutral-light-00)` |
| **Line - Done** | | |
| `--color-line-done` | Cor da linha no step concluído | `var(--color-neutral-mid-40)` |
| **Step - Current** | | |
| `--color-icon-current` | Cor do ícone no step atual | `var(--color-neutral-light-00)` |
| `--background-current` | Cor de fundo no step atual | `var(--color-action-default)` |
| `--font-weight-current` | Peso da fonte no step atual | `var(--font-weight-bold)` |
| **Step - Next** | | |
| `--font-size-circle` | Tamanho da fonte no círculo do próximo step | `var(--font-size-sm)` |
| `--color-next` | Cor do ícone no próximo step | `var(--color-action-disabled)` |
| `--text-color-next` | Cor do texto no próximo step | `var(--color-neutral-light-30)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `alignCenter` | `'p-align-center'` | `boolean` | sim | `true` | Define o alinhamento dos *steps* e *labels* no *stepper*, dependendo da orientação. |
| `disabledClick` | `'p-disable-click'` | `boolean` | sim | `false` | Desabilita o clique nos steps. |
| `iconActive` | `'p-step-icon-active'` | `string | TemplateRef` | sim | `po-icon-edit` | Permite definir o ícone do step no status ativo. |
| `iconDone` | `'p-step-icon-done'` | `string | TemplateRef` | sim | `po-icon-ok` | Permite definir o ícone do step no status concluído. |
| `orientation` | `'p-orientation'` | `PoStepperOrientation` | sim | `PoStepperOrientation.Horizontal` | Define a orientação de exibição do `po-stepper`. |
| `sequential` | `'p-sequential'` | `boolean` | sim | `true` | Define se o `po-stepper` será sequencial ou aleatório. |
| `step` | `'p-step'` | `number` | sim | `1` | Controla o passo atual do `po-stepper`. |
| `stepIcons` | `'p-step-icons'` | `boolean` | sim | `false` | Habilita a exibição de ícone ao invés de número no centro do círculo dos *steps*. |
| `stepSize` | `'p-step-size'` | `number` | sim | `24` | Define o tamanho dos *steps* em *pixels*, possibilitando um maior destaque. |
| `steps` | `'p-steps'` | `Array` | sim | - | Lista dos itens do stepper. Se o valor estiver indefinido ou inválido, será inicializado como um array vazio. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `onChangeStep` | `'p-change-step'` | `EventEmitter` | Ação que será executada quando o usuário mudar o passo do `po-stepper`. |
## Métodos
### `active(index: number)`
Altera o status do *step* para ativo.
> Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step).
### `first()`
Ativa o primeiro *step*.
> Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step).
### `next()`
Ativa o próximo *step*.
> Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step).
### `previous()`
Ativa o *step* anterior.
> Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step).
---
# PoSwitchComponent
**Seletor:** `po-switch`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-switch
O componente `po-switch` é um [checkbox](/documentation/po-checkbox-group) mais intuitivo, pois faz analogia a um interruptor.
Deve ser usado quando deseja-se transmitir a ideia de ligar / desligar uma funcionalidade específica.
Pode-se ligar ou desligar o switch utilizando a tecla de espaço ou o clique do mouse.
O texto exibido pode ser alterado de acordo com o valor setado aumentando as possibilidades de uso do componente,
portanto, recomenda-se informar textos que contextualizem seu uso para que facilite a compreensão do usuário.
> O componente não altera o valor incial informado no *model*, portanto indica-se inicializa-lo caso ter necessidade.
#### Boas práticas
- Evite `labels` extensos que quebram o layout do `po-switch`, use `labels` diretos, curtos e intuitivos.
#### Acessibilidade tratada no componente
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- Quando em foco, o switch é ativado usando a tecla de Espaço. [W3C WAI-ARIA 3.5 Switch - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/patterns/switch/#keyboard-interaction-19)
- A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Unchecked** | | |
| `--color-unchecked` | Cor principal no estado desmarcado | `var(--color-neutral-light-00)` |
| `--border-color` | Cor da borda | `var(--color-neutral-dark-70)` |
| `--track-unchecked` | Cor principal da faixa no estado desmarcado | `var(--color-neutral-light-20)` |
| **Checked** | | |
| `--color-checked` | Cor principal no estado selecionado | `var(--color-action-default)` |
| `--track-checked` | Cor da faixa no estado selecionado | `var(--color-brand-01-light)` |
| **Hover** | | |
| `--color-unchecked-hover` | Cor principal no estado hover desmarcado | `var(--color-action-pressed)` |
| `--color-checked-hover` | Cor principal no estado hover marcado | `var(--color-action-pressed)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-unchecked-disabled` | Cor principal do disabled no estado desmarcado | `var(--color-neutral-light-20)` |
| `--color-checked-disabled` | Cor principal do disabled no estado marcado | `var(--color-action-disabled)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Indica se o campo será desabilitado. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem de erro configurada quando o campo estiver desligado(off/false). |
| `formatModel` | `'p-format-model'` | `boolean` | sim | `false` | Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou |
| `help` | `'p-help'` | `string` | não | - | Texto de apoio para o campo. |
| `hideLabelStatus` | `'p-hide-label-status'` | `boolean` | sim | `false` | Indica se o status do `model` será escondido visualmente ao lado do switch. |
| `invalidValue` | `'p-invalid-value'` | `boolean` | sim | `false` | Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. |
| `label` | `'p-label'` | `string` | não | - | Rótulo exibido pelo componente. |
| `labelOff` | `'p-label-off'` | `string` | não | `false` | Texto exibido quando o valor do componente for `false`. |
| `labelOn` | `'p-label-on'` | `string` | não | `true` | Texto exibido quando o valor do componente for `true`. |
| `labelPosition` | `'p-label-position'` | `PoSwitchLabelPosition` | sim | - | Posição de exibição do rótulo que fica ao lado do switch. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento substituindo o switch para sinalizar que uma operação está em andamento. |
| `name` | `'name'` | `string` | não | - | Nome do componente. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Define as colunas que serão filtradas no campo de pesquisa. |
| `height` | `'p-height'` | `number` | sim | - | Define a altura da tabela em *pixels* e fixa o cabeçalho. |
| `hideActionFixedColumns` | `'p-hide-action-fixed-columns'` | `boolean` | sim | `false` | Permite que as ações para fixar uma coluna da tabela sejam escondidas. |
| `hideBatchActions` | `'p-hide-batch-actions'` | `boolean` | sim | `true` | Permite que as ações em lote, responsável por excluir e exibir a quantidade de itens, sejam escondidas. |
| `hideColumnsManager` | `'p-hide-columns-manager'` | `boolean` | sim | `false` | Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. |
| `hideDetail` | `'p-hide-detail'` | `boolean` | sim | `false` | Habilita a visualização da lista de detalhes de cada linha da coluna. |
| `hideSelectAll` | `'p-hide-select-all'` | `boolean` | não | `false` | Esconde o *checkbox* para seleção de todas as linhas. |
| `hideTableSearch` | `'p-hide-table-search'` | `boolean` | sim | `true` | Permite que o campo de pesquisa seja escondido. |
| `infiniteScroll` | `'p-infinite-scroll'` | `boolean` | sim | `false` | Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela e o botão "Carregar Mais" deixará de ser exibido. Ao chegar no fim da tabela |
| `infiniteScrollDistance` | `'p-infinite-scroll-distance'` | `number` | sim | - | Define o percentual necessário para disparar o evento `p-show-more`, que é responsável por carregar mais dados na tabela. Caso o valor informado seja maior que 100 ou menor |
| `items` | `'p-items'` | `any[]` | não | - | Lista de itens da tabela. |
| `literals` | `'p-literals'` | `PoTableLiterals` | sim | - | Objeto com as literais usadas no `po-table`. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Bloqueia a interação do usuário com os dados da _table_. |
| `loadingShowMore` | `'p-loading-show-more'` | `boolean` | sim | `false` | Permite que seja adicionado o estado de carregamento no botão "Carregar mais resultados". |
| `maxColumns` | `'p-max-columns'` | `number` | sim | - | Define uma quantidade máxima de colunas que serão exibidas na tabela. |
| `paramDeleteApi` | `'p-param-delete-api'` | `string` | sim | `id` | Adiciona o parâmetro a ser enviado para a requisição de DELETE. |
| `searchAiField` | `p-search-ai-field` | `PoTableSearchAiField` | sim | - | Configura a busca por linguagem natural integrada à tabela, substituindo o campo de busca padrão |
| `selectable` | `'p-selectable'` | `boolean` | sim | `false` | Permite a seleção de linhas na tabela e, caso a propriedade `p-single-select` esteja definida será possível |
| `selectableEntireLine` | `'p-selectable-entire-line'` | `boolean` | não | `true` | Permite selecionar um item da tabela clicando na linha. |
| `serviceApi` | `'p-service-api'` | `string` | sim | - | URL da API responsável por retornar os registros. |
| `serviceDeleteApi` | `'p-service-delete'` | `string` | sim | - | URL da API responsável por excluir os registros. |
| `showMoreDisabled` | `'p-show-more-disabled'` | `boolean` | não | `false` | Se verdadeiro, torna habilitado o botão "Carregar mais resultados". |
| `singleSelect` | `'p-single-select'` | `boolean` | não | - | Define que somente uma linha da tabela pode ser selecionada. |
| `sort` | `'p-sort'` | `boolean` | sim | `false` | Habilita em todas as colunas a opção de ordenação de dados. Caso a coluna seja do tipo 'data' ou 'dateTime' a |
| `spacing` | `'p-spacing'` | `string` | sim | `medium` | Define o espaçamento interno das células, impactando diretamente na altura das linhas do table. Os valores |
| `striped` | `'p-striped'` | `boolean` | não | `false` | Habilita ou desabilita o estilo listrado da tabela (`striped`). |
| `textWrap` | `'p-text-wrap'` | `boolean` | sim | `false` | Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede |
| `virtualScroll` | `'p-virtual-scroll'` | `boolean` | sim | `true` | Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `allSelected` | `'p-all-selected'` | `EventEmitter` | Evento executado quando todas as linhas são selecionadas por meio do *checkbox* que seleciona todas as linhas. |
| `allUnselected` | `'p-all-unselected'` | `EventEmitter` | Evento executado quando a seleção das linhas é desmarcada por meio do *checkbox* que seleciona todas as linhas. |
| `changeFixedColumns` | `p-change-fixed-columns` | `EventEmitter` | Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas. |
| `changeVisibleColumns` | `'p-change-visible-columns'` | `EventEmitter` | Evento disparado ao fechar o page slide do gerenciador de colunas após alterar as colunas visíveis. |
| `collapsed` | `'p-collapsed'` | `EventEmitter` | Evento executado ao colapsar uma linha do `po-table`. |
| `columnRestoreManager` | `'p-restore-column-manager'` | `EventEmitter` | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `eventDelete` | `'p-delete-items'` | `EventEmitter` | Evento executado após o método de exclusão ser finalizado. |
| `expanded` | `'p-expanded'` | `EventEmitter` | Evento executado ao expandir uma linha do `po-table`. |
| `searchAiError` | `'p-search-ai-error'` | `EventEmitter` | Evento emitido quando ocorre um erro na requisição ao endpoint de IA configurado em |
| `searchAiLowConfidence` | `'p-search-ai-low-confidence'` | `EventEmitter` | Evento emitido quando o `po-search-ai` retorna um resultado cuja confiança é inferior ao |
| `searchAiResult` | `'p-search-ai-result'` | `EventEmitter` | Evento emitido quando o `po-search-ai` retorna um resultado com confiança igual ou superior |
| `selected` | `'p-selected'` | `EventEmitter` | Evento executado ao selecionar uma linha do `po-table`. |
| `showMore` | `'p-show-more'` | `EventEmitter` | Recebe uma ação de clique para o botão "Carregar mais resultados", caso nenhuma ação for definida o mesmo |
| `sortBy` | `'p-sort-by'` | `EventEmitter` | Evento executado ao ordenar colunas da tabela. |
| `unselected` | `'p-unselected'` | `EventEmitter` | Evento executado ao desmarcar a seleção de uma linha do `po-table`. |
## Métodos
### `applyFilters(queryParams: RecordType)`
Método responsável por realizar busca no serviço de dados podendo informar filtros e com o retorno, atualiza a tabela.
Caso não seja informado parâmetro, nada será adicionado ao GET, conforme abaixo:
```
url + ?page=1&pageSize=10
```
> Obs: os parâmetros `page` e `pageSize` sempre serão chamados independente de ser enviados outros parâmetros.
Caso sejam informados os parâmetros `{ name: 'JOHN', age: '23' }`, todos serão adicionados ao GET, conforme abaixo:
```
url + ?page=1&pageSize=10&name=JOHN&age=23
```
### `applyFixedColumns()`
Verifica se columns possuem a propriedade width.
### `collapse(rowIndex: number)`
Método que colapsa uma linha com detalhe quando executada.
### `expand(rowIndex: number)`
Método que expande uma linha com detalhe quando executada.
### `getSelectedRows()`
Retorna as linhas do `po-table` que estão selecionadas.
### `getUnselectedRows()`
Retorna as linhas do `po-table` que não estão selecionadas.
### `unselectRows()`
Desmarca as linhas que estão selecionadas.
### `unselectRowItem()`
Desmarca uma linha que está selecionada.
### `selectRowItem()`
Seleciona uma linha do 'po-table'.
### `deleteItems()`
Método responsável pela exclusão de itens em lote.
Caso a tabela esteja executando a propriedade `p-service-delete`, será necessário excluir 1 item por vez.
Ao utilizar `p-service-delete` mas sem a propriedade `p-service-api`, será responsabilidade do usuário o tratamento
após a requisição DELETE ser executada.
Caso a tabela utilize `p-height` e esteja sem serviço, é necessário a reatribuição dos itens utilizando o evento `(p-delete-items)`, por exemplo:
```
```
### `updateSearchAIQuery(value: string, triggerSearch: boolean)`
Atualiza programaticamente o valor do campo de busca por IA (`po-search-ai`) integrado à tabela
via `p-search-ai-field`.
Útil quando a aplicação precisa preencher a busca a partir de uma ação externa (por exemplo, o
clique em um botão que sugere uma consulta pronta), opcionalmente disparando a busca em seguida.
> Só tem efeito quando a propriedade `p-search-ai-field` está configurada. Caso contrário, o método
> não executa nenhuma ação.
### `removeItem(item: TypeUnion)`
Método que remove um item da tabela.
### `updateItem(item: TypeUnion, updatedItem: RecordType)`
Método que atualiza um item da tabela.
---
# PoTabsComponent
**Seletor:** `po-tabs`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tabs
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------|
| **Default Values** | | |
| `--background` | Cor de background | `var(--color-transparent)` |
| `--background-item-default` | Cor de background do item padrão | `var(--color-transparent)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--color` | Cor da fonte padrão | `var(--color-action-default)` |
| `--color-baseline` | Cor para box-shadow | `var(--color-neutral-light-20)` |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--font-weight` | Peso da fonte | `var(--font-weight-bold)` |
| `--margin-tabs-container-left` | Margem lateral esquerda do componente quando usado dentro de um `page-default` | `var(--spacing-md)` |
| `--margin-tabs-container-right` | Margem lateral direita do componente quando usado dentro de um `page-default` | `-16px` |
| `--padding-tabs-header` | Padding do valor lateral das abas | `var(--spacing-sm)` |
| `--margin-tabs-first-child` | Margem lateral da primeira aba | `var(--spacing-md)` |
| `--margin-tabs-last-child` | Margem lateral da ultima aba | `var(--spacing-md)` |
| **Disabled** | | |
| `--color-disabled` | Cor da fonte no estado disabilitado | `var(--color-action-disabled)` |
| `--background-item-disabled` | Cor de background do item desabilitado | `var(--color-neutral-light-10)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Hover** | | |
| `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-darkest)` |
| `--background-item-hover` | Cor de background no estado de hover | `var(--color-brand-01-lightest)` |
| **Selected** | | |
| `--background-item-selected` | Cor de background do item selecionado | `var(--color-brand-01-lightest)` |
O componente `po-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
ideal para facilitar a organização de conteúdos.
O componente exibirá as abas enquanto houver espaço na tela, caso a aba ultrapasse o limite da tela a mesma será agrupada em um dropdown.
> As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão.
É possível realizar a navegação entre as abas através da tecla SETAS(direita e esquerda) do teclado.
Caso uma aba estiver desabilitada, não receberá foco de navegação.
#### Boas práticas
- Evite utilizar um `po-tabs` dentro de outro `po-tabs`;
- Evite utilizar uma quantidade excessiva de abas, pois irá gerar um *scroll* muito longo no `dropdown`;
- Evite `labels` extensos para as `tabs` pois podem quebrar seu *layout*, use `labels` diretas, curtas e intuitivas.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
## Métodos
### `setQuantityTabsButton()`
Função que atribui o número de tabs fora do dropdown.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoTabsComponent } from '@po-ui/ng-components';
...
@ViewChild('poTab', { static: true }) poTab: PoTabsComponent;
changeQuantityTabs() {
this.poTab.setQuantityTabsButton(1); //Número de tabs
}
```
### `activateTab(id: )`
Ativa a aba correspondente ao `id` informado.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoTabsComponent } from '@po-ui/ng-components';
...
@ViewChild('poTab', { static: true }) poTab: PoTabsComponent;
focusOnTab() {
this.poTab.activateTab('meu-id-da-aba');
}
```
---
# PoTagComponent
**Seletor:** `po-tag`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tag
Este componente permite exibir um valor em forma de um marcador colorido, sendo possível definir uma legenda e realizar customizações
na cor, iconografia e tipo.
Além disso, é possível definir uma ação que será executada tanto ao *click* quanto através das teclas *enter/space* enquanto navega
utilizando a tecla *tab*.
Seu uso é recomendado para informações que necessitem de destaque em forma de marcação.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-sm)` |
| `--line-height` | Tamanho da label | `var(---line-height-sm)` |
| `--border-radius` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-pill)` |
| `--gap` | Espaçamento entre o label e o value | `var(--spacing-xs)` |
| **Neutral** | | |
| `--color-neutral` | Cor principal no estado neutral | `var(--color-neutral-light-10)` |
| `--text-color-positive` | Cor do texto no estado neutral | `var(--color-neutral-dark-80)` |
| **Positive** | | |
| `--color-positive` | Cor principal no estado positive | `var(--color-feedback-positive-lightest)` |
| `--text-color-positive` | Cor do texto no estado positive | `var(--color-feedback-positive-dark)` |
| **Negative** | | |
| `--color-negative` | Cor principal no estado danger | `var(--color-feedback-negative-lightest)` |
| `--text-color-negative` | Cor do texto no estado danger | `var(--color-feedback-negative-darker)` |
| **Warning** | | |
| `--color-tag-warning` | Cor principal no estado warning | `var(--color-feedback-warning-lightest)` |
| `--text-color-warning` | Cor do texto no estado warning | `var(--color-feedback-warning-darkest)` |
| **Info** | | |
| `--color-info` | Cor principal no estado info | `var(--color-feedback-info-lightest)` |
| `--text-color-info` | Cor do texto no estado info | `var(--color-feedback-info-dark)` |
| **Removable** | | |
| `--color` | Cor principal quando removable | `var(--color-brand-01-lightest)` |
| `--border-color` | Cor de borda quando removable | `var(--color-brand-01-lighter)` |
| `--color-icon` | Cor do ícone quando removable | `var(--color-action-default)` |
| `--text-color` | Cor do texto quando removable | `var(--color-neutral-dark-80)` |
| `--color-hover` | Cor do hover no estado removable | `var(--color-brand-01-lighter)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
| **Disabled** | | |
| `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-20)` |
| `--border-color-disabled` | Cor da borda no estado disabled | `var(--color-action-disabled)` |
| `--color-icon-disabled` | Cor do icone no estado disabled | `var(--color-action-disabled)` |
| `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-mid-60)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `color` | `'p-color'` | `string` | sim | - | Determina a cor da tag. As maneiras de customizar as cores são: |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Desabilita o `po-tag` e não permite que o usuário interaja com o mesmo. |
| `icon` | `'p-icon'` | `string | boolean | TemplateRef` | sim | `false` | Define ou ativa um ícone que será exibido ao lado do valor da *tag*. |
| `label` | `'p-label'` | `string` | sim | - | Define uma legenda que será exibida acima ou ao lado da *tag*, de acordo com a `p-orientation`. |
| `literals` | `'p-literals'` | `PoTagLiterals` | sim | - | Objeto com as literais usadas no `po-tag`. |
| `orientation` | `'p-orientation'` | `PoTagOrientation` | sim | `vertical` | Define o *layout* de exibição. |
| `removable` | `'p-removable'` | `boolean` | sim | `false` | Habilita a opção de remover a tag |
| `textColor` | `'p-text-color'` | `string` | sim | - | Determina a cor do texto da tag. As maneiras de customizar as cores são: |
| `type` | `'p-type'` | `PoTagType` | sim | `info` | Define o tipo da *tag*. |
| `value` | `'p-value'` | `string` | não | - | Texto da tag. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `click` | `'p-click'` | `EventEmitter` | Ação que será executada ao clicar sobre o `po-tag` e que receberá como parâmetro um objeto contendo o seu valor e tipo. |
| `remove` | `'p-close'` | `EventEmitter` | Ação que sera executada quando clicar sobre o ícone de remover no `po-tag` |
---
# PoTextareaComponent
**Seletor:** `po-textarea`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-textarea
Este é um componente de entrada de dados que possibilita o preechimento com múltiplas linhas.
É recomendado para observações, detalhamentos e outras situações onde o usuário deva preencher com um texto.
Importante:
- A propriedade `name` é obrigatória para que o formulário e o `model` funcionem corretamente. Do contrário, ocorrerá um erro de
_Angular_, onde será necessário informar o atributo `name` ou o atributo `[ngModelOptions]="{standalone: true}"`, por exemplo:
```
```
#### Acessibilidade tratada no componente
Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas. São elas:
- O Text area foi desenvolvido com uso de controles padrões HTML, o que permite a identificação do mesmo na interface por tecnologias
assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
- O foco é visível e possui uma espessura superior a 2 pixels CSS, não ficando escondido por outros
elementos da tela. [WCAG 2.4.12: Focus Appearance)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
- A identificação do erro acontece também através da mudança de cor do campo, mas também de um ícone
junto da mensagem. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
| **Default Values** | | |
| `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
| `--font-size` | Tamanho da fonte | `var(--font-size-default)` |
| `--text-color-placeholder` | Cor do texto placeholder | `var(--color-neutral-light-30)` |
| `--color` | Cor pincipal do campo | `var(--color-neutral-dark-70)` |
| `--background` | Cor de background | `var(--color-neutral-light-05)` |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Indica que o campo será desabilitado. |
| `errorLimit` | `'p-error-limit'` | `boolean` | sim | `false` | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `fieldErrorMessage` | `'p-field-error-message'` | `string` | sim | - | Exibe a mensagem setada se o campo estiver vazio e for requerido. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio do campo. |
| `label` | `'p-label'` | `string` | sim | - | Label do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e Id do componente. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | não | - | Placeholder, mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `readonly` | `'p-readonly'` | `boolean` | sim | `false` | Indica que o campo será somente leitura. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `rows` | `'p-rows'` | `number` | sim | `3` | Indica a quantidade de linhas que serão exibidas. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoTextareaComponent } from '@po-ui/ng-components';
...
@ViewChild(PoTextareaComponent, { static: true }) textarea: PoTextareaComponent;
focusTextarea() {
this.textarea.focus();
}
```
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
//Exemplo com p-label e p-helper
` | sim | - | Define uma lista de ações que serão exibidas ao clicar no ícone declarado em `p-actions-icon`. |
| `actionsIcon` | `'p-actions-icon'` | `string | TemplateRef` | sim | `an-dots-three` | Define um [ícone](https://po-ui.io/icons) para a propriedade `p-actions`. |
| `notificationActions` | `'p-notification-actions'` | `Array` | sim | - | Lista de ações da notificação. |
| `notificationNumber` | `'p-notification-number'` | `number` | sim | - | Número de notificações. |
| `profile` | `'p-profile'` | `PoToolbarProfile` | sim | - | Define o objeto que será o cabeçalho da lista de ações com as informações do perfil. |
| `profileActions` | `'p-profile-actions'` | `Array` | sim | - | Define uma lista de ações que serão exibidas ao clicar no ícone do perfil. |
| `showNotification` | `'p-show-notification'` | `boolean` | sim | - | Se falso, oculta o ícone de notificações. |
| `title` | `'p-title'` | `string` | não | - | Título do *toolbar* e aplicação. |
---
# PoTreeViewComponent
**Seletor:** `po-tree-view`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tree-view
O componente fornece um modelo de visualização em árvore, possibilitando a visualização das informações de maneira
hierárquica, desta forma sendo possível utilizar até 4 níveis.
Nele é possível navegar entre os itens através da tecla *tab*, permitindo expandir ou colapsar o item em foco
por meio das teclas *enter* e *space*.
Além da navegação, o componente possibilita também a seleção dos itens do primeiro ao último nível, tanto de forma parcial como completa.
O componente também possui eventos disparados ao marcar/desmarcar e expandir/colapsar os itens.
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `componentsSize` | `'p-components-size'` | `string` | sim | `medium` | Define o tamanho dos componentes de formulário: |
| `inputedItems` | `'p-items'` | `Array` | não | - | Lista de itens do tipo `PoTreeViewItem` que será renderizada pelo componente. |
| `maxLevel` | `'p-max-level'` | `number` | sim | 4 | Define o máximo de níveis para o tree-view. |
| `selectable` | `'p-selectable'` | `boolean` | sim | false | Habilita uma caixa de seleção para selecionar e/ou desmarcar um item da lista. |
| `singleSelect` | `'p-single-select'` | `boolean` | sim | false | Habilita a seleção para item único atráves de po-radio. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `collapsed` | `'p-collapsed'` | `EventEmitter` | Ação que será disparada ao colapsar um item. |
| `expanded` | `'p-expanded'` | `EventEmitter` | Ação que será disparada ao expandir um item. |
| `selected` | `'p-selected'` | `EventEmitter` | Ação que será disparada ao selecionar um item. |
| `unselected` | `'p-unselected'` | `EventEmitter` | Ação que será disparada ao desfazer a seleção de um item. |
---
# PoUploadComponent
**Seletor:** `po-upload`
**Tipo:** Componente / Diretiva
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-upload
O componente `po-upload` permite que o usuário envie arquivo(s) ao servidor e acompanhe o progresso.
Este componente também possibilita algumas configurações como:
– Envio de diretórios, onde ele acessa o diretório selecionado assim como seus sub-diretórios;
- Múltipla seleção, onde o usuário pode enviar mais de um arquivo ao servidor.
- Auto envio, onde o arquivo é enviado imediatamente após a seleção do usuário, não necessitando que o usuário
clique em enviar.
- Restrições de formatos de arquivo e tamanho.
- Função de sucesso que será disparada quando os arquivos forem enviados com sucesso.
- Função de erro que será disparada quando houver erro no envio dos arquivos.
- Permite habilitar uma área onde os arquivos podem ser arrastados.
#### Tokens customizáveis
É possível alterar o estilo do componente usando os seguintes tokens (CSS):
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
| **FIELD CONTAINER** | | |
| `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
| `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
| **TEXT SUPPORT** | | |
| `--font-family-text-support` | Família tipográfica usada no texto de suporte | `var(--font-family-theme)` |
| `--text-color-text-support` | Cor da fonte no texto de suporte | `var(--color-neutral-dark-90)` |
| **UPLOAD CONTENT** | | |
| `--background-color-content` | Cor de fundo | `var(--color-neutral-light-10)` |
| `--border-color-content` | Cor da borda | `var(--color-neutral-light-20)` |
| `--border-radius-content` | Contém o valor do raio dos cantos do elemento | `var(--border-radius-md)` |
| `--text-color-file-name` | Cor do texto do nome do arquivo | `var(--color-neutral-dark-90)` |
| `--font-family-file-name` | Família tipográfica usada no texto do arquivo | `var(--font-family-theme)` |
| `--text-color-info-bar` | Cor do texto de informação | `var(--color-neutral-mid-60)` |
| `--font-family-info-bar` | Família tipográfica usada no texto de informação | `var(--font-family-theme)` |
| **ERROR STATE** | | |
| `--background-color-content-error` | Cor de fundo do container de erro | `var(--color-neutral-light-00)` |
| `--border-color-content-error` | Cor da borda do container de erro | `var(--color-feedback-negative-base)` |
| `--text-color-error` | Cor do texto do container de erro | `var(--color-feedback-negative-dark)` |
| `--color-icon-error` | Cor do ícone no estado de erro | `var(--color-feedback-negative-base)` |
| `--font-family-error` | Família tipográfica usada no texto de erro | `var(--font-family-theme)` |
| **UPLOADED STATE** | | |
| `--background-color-content-uploaded` | Cor de fundo do container com status de enviado | `var(--color-neutral-light-00)` |
| `--border-color-content-uploaded` | Cor da borda do container com status de enviado | `var(--color-neutral-light-20)` |
| **INTERACTIVE STATE** | | |
| `--text-color-file-name-interactive` | Cor do texto do nome do arquivo quando interativo | `var(--color-action-default)` |
| **THUMBNAIL** | | |
| `--color-icon-thumbnail` | Cor do ícone na thumbnail | `var(--color-action-default)` |
| `--border-width-thumbnail` | Tamanho da fonte na thumbnail | `var(--border-width-sm)` |
| `--border-radius-thumbnail` | Contém o valor do raio dos cantos na thumbnail | `var(--border-radius-md)` |
| `--background-color-thumbnail` | Cor de fundo na thumbnail | `var(--color-neutral-light-05)` |
| **Focused** | | |
| `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
## Inputs
| Propriedade | Alias | Tipo | Opcional | Padrão | Descrição |
|---|---|---|---|---|---|
| `additionalHelpTooltip` | `'p-additional-help-tooltip'` | `string` | sim | - | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `appendBox` | `'p-append-in-body'` | `boolean` | sim | `false` | Define que o popover (`p-helper`) será incluído no body da página e não dentro do componente. Essa |
| `autoFocus` | `'p-auto-focus'` | `boolean` | sim | `false` | Aplica foco no elemento ao ser iniciado. |
| `autoUpload` | `'p-auto-upload'` | `boolean` | sim | `false` | Define se o envio do arquivo será automático ao selecionar o mesmo. |
| `compactLabel` | `p-compact-label` | `boolean` | sim | `false` | Define se o título do campo será exibido de forma compacta. |
| `customAction` | `'p-custom-action'` | `PoProgressAction` | sim | - | Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito |
| `customModalActions` | `'p-custom-modal-actions'` | `Array` | sim | - | Define uma ou duas ações personalizadas do modal de pré-visualização, adicionando um botão ou dois botões no canto inferior direito |
| `directory` | `'p-directory'` | `boolean` | sim | `false` | Permite a seleção de diretórios contendo um ou mais arquivos para envio. |
| `disabled` | `'p-disabled'` | `boolean` | sim | - | Indica que o campo será desabilitado. |
| `disabledRemoveFile` | `'p-disabled-remove-file'` | `boolean` | sim | `false` | Desabilita botão de remover o(s) arquivo(s) selecionado(s). |
| `dragDrop` | `'p-drag-drop'` | `boolean` | sim | `false` | Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos |
| `dragDropHeight` | `'p-drag-drop-height'` | `number` | sim | `320` | Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. |
| `fileRestrictions` | `'p-restrictions'` | `PoUploadFileRestrictions` | sim | - | Objeto que segue a definição da interface `PoUploadFileRestrictions`, |
| `formField` | `'p-form-field'` | `string` | sim | `files` | Nome do campo de formulário que será enviado para o serviço informado na propriedade `p-url`. |
| `headers` | `'p-headers'` | `{
[name: string]: string | Array;
}` | não | - | Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. |
| `help` | `'p-help'` | `string` | sim | - | Texto de apoio para o campo. |
| `hideRestrictionsInfo` | `'p-hide-restrictions-info'` | `boolean` | sim | `false` | Oculta visualmente as informações de restrições para o upload. |
| `hideSelectButton` | `'p-hide-select-button'` | `boolean` | sim | `false` | Omite o botão de seleção de arquivos. |
| `hideSendButton` | `'p-hide-send-button'` | `boolean` | sim | `false` | Omite o botão de envio de arquivos. |
| `isMultiple` | `'p-multiple'` | `boolean` | sim | - | Define se pode selecionar mais de um arquivo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `literals` | `'p-literals'` | `PoUploadLiterals` | sim | - | Objeto com as literais usadas no `po-upload`. |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no botão `Selecionar arquivo`, à esquerda do texto, sinalizando que uma operação está em andamento. |
| `name` | `'name'` | `string` | não | - | Define o valor do atributo `name` do componente. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `required` | `'p-required'` | `boolean` | sim | `false` | Define que o campo será obrigatório. |
| `requiredUrl` | `'p-required-url'` | `boolean` | sim | `true` | Define se a propriedade `p-url` é obrigatória. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `showThumbnail` | `'p-show-thumbnail'` | `boolean` | sim | `true` | Exibe a pré-visualização de imagens ao anexá-las. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho e as ações do componente: |
| `url` | `'p-url'` | `string` | não | - | URL que deve ser feita a requisição com os arquivos selecionados. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `customActionClick` | `'p-custom-action-click'` | `EventEmitter` | Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
| `ngModelChange` | `'ngModelChange'` | `EventEmitter` | Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da *tag* `form`. |
| `onCancel` | `'p-cancel'` | `EventEmitter` | Evento será disparado ao clicar no ícone de fechar. |
| `onError` | `'p-error'` | `EventEmitter` | Evento será disparado quando ocorrer algum erro no envio do arquivo. |
| `onOpenModalPreview` | `'p-open-modal-preview'` | `EventEmitter` | Evento será disparado ao abrir o modal de pré-visualização. |
| `onRemove` | `'p-remove'` | `EventEmitter` | Evento será disparado ao clicar no ícone de remover. |
| `onSuccess` | `'p-success'` | `EventEmitter` | Evento será disparado quando o envio do arquivo for realizado com sucesso. |
| `onUpload` | `'p-upload'` | `EventEmitter` | Função que será executada no momento de realizar o envio do arquivo, |
## Métodos
### `clear()`
Método responsável por **limpar** o(s) arquivo(s) selecionado(s).
### `focus()`
Função que atribui foco ao componente.
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
```
import { PoUploadComponent } from '@po-ui/ng-components';
...
@ViewChild(PoUploadComponent, { static: true }) upload: PoUploadComponent;
focusUpload() {
this.upload.focus();
}
```
### `closeModal()`
Método responsável por fechar o modal.
### `selectFiles()`
Método responsável por **abrir** a janela para seleção de arquivo(s).
### `sendFiles()`
Método responsável por **enviar** o(s) arquivo(s) selecionado(s).
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
//Exemplo com p-label e p-helper
` | sim | - | Define o ícone que será exibido no início do campo. |
| `label` | `'p-label'` | `string` | sim | - | Rótulo do campo. |
| `labelTextWrap` | `p-label-text-wrap` | `boolean` | sim | `false` | Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede |
| `loading` | `'p-loading'` | `boolean` | sim | `false` | Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. |
| `maskNoLengthValidation` | `'p-mask-no-length-validation'` | `boolean` | não | `false` | 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. |
| `maxlength` | `'p-maxlength'` | `number` | sim | - | Indica a quantidade máxima de caracteres que o campo aceita. |
| `minlength` | `'p-minlength'` | `number` | sim | - | Indica a quantidade mínima de caracteres que o campo aceita. |
| `name` | `'name'` | `string` | não | - | Nome e identificador do campo. |
| `noAutocomplete` | `'p-no-autocomplete'` | `boolean` | sim | `false` | Define a propriedade nativa `autocomplete` do campo como `off`. |
| `optional` | `'p-optional'` | `boolean` | sim | `false` | Define se a indicação de campo opcional será exibida. |
| `placeholder` | `'p-placeholder'` | `string` | sim | '' | Mensagem que aparecerá enquanto o campo não estiver preenchido. |
| `poHelperComponent` | `p-helper` | `PoHelperOptions | string` | sim | - | Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. |
| `showErrorMessageRequired` | `'p-required-field-error-message'` | `boolean` | sim | `false` | Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. |
| `showRequired` | `'p-show-required'` | `boolean` | não | - | Define se a indicação de campo obrigatório será exibida. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho do componente: |
| `upperCase` | `'p-upper-case'` | `boolean` | não | - | Converte o conteúdo do campo em maiúsulo automaticamente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `additionalHelp` | `'p-additional-help'` | `EventEmitter` | Evento disparado ao clicar no ícone de ajuda adicional. |
| `blur` | `'p-blur'` | `EventEmitter` | Evento disparado ao sair do campo. |
| `change` | `'p-change'` | `EventEmitter` | Evento disparado ao alterar valor e deixar o campo. |
| `changeModel` | `'p-change-model'` | `EventEmitter` | Evento disparado ao alterar valor do model. |
| `enter` | `'p-enter'` | `EventEmitter` | Evento disparado ao entrar do campo. |
| `keydown` | `'p-keydown'` | `EventEmitter` | Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. |
## Métodos
### `showAdditionalHelp()`
Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
> Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
```
// Exemplo com p-label e p-helper
` | sim | - | Lista de ações exibidas no header do componente. |
| `avatar` | `p-avatar` | `PoWidgetAvatar` | sim | - | Define o avatar a ser exibido à esquerda no Widget. |
| `background` | `'p-background'` | `string` | sim | - | Define uma imagem de fundo. |
| `dangerPrimaryAction` | `'p-danger-primary-action'` | `false` | sim | `false` | Caso verdadeiro o botão da ação `p-primary-label` ativará o modo `danger`. |
| `dangerSecondaryAction` | `'p-danger-secondary-action'` | `false` | sim | `false` | Caso verdadeiro o botão da ação `p-secondary-label` ativará o modo `danger`. |
| `disabled` | `'p-disabled'` | `boolean` | sim | `false` | Desabilita o componente. |
| `height` | `'p-height'` | `number` | sim | - | Define a altura do componente. |
| `help` | `'p-help'` | `string` | sim | - | Link de ajuda incluído no menu de ações do header. |
| `kindPrimaryAction` | `'p-kind-primary-action'` | `string` | sim | `tertiary` | Define o estilo do botão da ação `p-primary-label`, conforme o enum `PoButtonKind`. |
| `kindSecondaryAction` | `'p-kind-secondary-action'` | `string` | sim | `tertiary` | Define o estilo do botão da ação `p-secondary-label`, conforme o enum `PoButtonKind`. |
| `noShadow` | `'p-no-shadow'` | `boolean` | sim | `true` | Desabilita a sombra do componente quando o mesmo for clicável. |
| `primary` | `'p-primary'` | `boolean` | sim | `false` | Opção para que o `po-widget` fique em destaque. |
| `primaryLabel` | `'p-primary-label'` | `string` | sim | - | Define o label e exibe a ação primária no footer do componente. |
| `secondaryLabel` | `'p-secondary-label'` | `string` | sim | - | Define o label e exibe a ação secundária no footer do componente. |
| `size` | `'p-size'` | `string` | sim | `medium` | Define o tamanho dos botões do componente: |
| `tagIcon` | `'p-tag-icon'` | `string | TemplateRef` | sim | - | Define o ícone exibido ao lado do label da `p-tag`. |
| `tagLabel` | `'p-tag'` | `string` | sim | - | Label da tag exibida no header. |
| `tagPosition` | `p-tag-position` | `string` | sim | `right` | Define o posicionamento da `po-tag` no cabeçalho do Widget: |
| `tagType` | `'p-tag-type'` | `PoTagType | string` | sim | `success` | Define o tipo da `p-tag`, conforme o enum **PoTagType**. |
| `title` | `'p-title'` | `string` | sim | - | Título do componente. |
## Outputs
| Evento | Alias | Tipo | Descrição |
|---|---|---|---|
| `click` | `'p-click'` | `EventEmitter` | Evento disparado quando o usuário clicar no componente. |
| `onDisabled` | `'p-on-disabled'` | `EventEmitter` | Evento disparado quando a propriedade `p-disabled` for alterada. |
| `primaryAction` | `'p-primary-action'` | `EventEmitter` | Evento disparado ao clicar na ação `p-primary-label`. |
| `secondaryAction` | `'p-secondary-action'` | `EventEmitter` | Evento disparado ao clicar na ação `p-secondary-label`. |
| `setting` | `'p-setting'` | `EventEmitter` | Evento disparado ao clicar em **Configurações** incluído no menu de ações do header. |
| `titleAction` | `'p-title-action'` | `EventEmitter` | Evento disparado ao clicar no título definido em `p-title`. |
---
# PoCodeEditorRegister
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-register
Wrapper para registro de sintaxes customizadas para o po-code-editor.
Para utilização do serviço de idiomas **PoCodeEditorRegister**,
deve-se importar o módulo PoCodeEditorModule mesmo já tendo importado
o módulo PoModule.
Na importação opcionalmente pode ser invocado o método **forRegister** informando um objeto para configuração.
Exemplo de configuração:
```
import { PoCodeEditorModule, PoCodeEditorRegisterable } from '@po-ui/ng-code-editor';
declare const monaco: any; // Importante para usar configurações com tipos definidos pelo Monaco
// A função `provideCompletionItems` precisa ser exportada para ser compatível com AOT.
export function provideCompletionItems() {
const suggestions = [{
label: 'terraform',
insertText: '#terraform language'
}, {
label: 'server',
insertText: 'server ${1:ip}'
}];
return { suggestions: suggestions };
}
const customEditor: PoCodeEditorRegisterable = {
language: 'terraform',
options: {
keywords: ['resource', 'provider', 'variable', 'output', 'module', 'true', 'false'],
operators: ['{', '}', '(', ')', '[', ']', '?', ':'],
symbols: /[=> As configurações para o registro de uma nova sintaxe no Monaco code editor podem ser encontradas em
> [**Monaco Editor**](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages).
---
# PoDialogService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dialog-service
O po-dialog é um serviço para exibição de caixas de diálogo, é possível customiza-los passando alguns parâmetros de acordo com a
necessidade do desenvolvedor.
## Métodos
### `confirm()`
Exibe um diálogo de confirmação, é possível definir ações para as opções de confirmação e cancelamento.
### `alert()`
Exibe um diálogo de alerta.
---
# PoHttpInterceptorService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-http-interceptor-service
O *interceptor* tem a finalidade de exibir notificações com mensagens na tela, baseado nas respostas das requisições HTTP.
Pode ser utilizado para dar feedback das ações do usuário como, por exemplo: erro de autorização, mensagens de regras de negócio,
atualizações de registros, erro quando o servidor estiver indisponível e entre outros.
## Configuração
Para o correto funcionamento do interceptor `po-http-interceptor`, deve ser importado o `BrowserAnimationsModule` na
aplicação. Além disso, é necessário configurar o `HttpClient` para utilizar os interceptors registrados via Dependency
Injection (DI) por meio da função `provideHttpClient(withInterceptorsFromDi())`.
### 1) NgModule
No módulo principal da aplicação (geralmente `AppModule`), importe o `BrowserAnimationsModule` e configure o `HttpClient`,
como no exemplo abaixo:
```
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { PoModule } from '@po-ui/ng-components';
...
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
...
PoModule
],
declarations: [
AppComponent,
...
],
providers: [
provideHttpClient(withInterceptorsFromDi()),
...
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Ao importar o módulo `PoModule` na aplicação, o `po-http-interceptor` é automaticamente configurado sem a necessidade
de qualquer configuração extra.
### 2) Standalone
No arquivo contendo a configuração da aplicação (geralmente `src/app/app.config.ts`), adicione os providers e configure o `HttpClient`,
como no exemplo abaixo:
```
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { PoHttpInterceptorModule } from '@po-ui/ng-components';
export const appConfig: ApplicationConfig = {
providers: [
...
provideAnimations(),
provideHttpClient(withInterceptorsFromDi()),
importProvidersFrom([
PoHttpInterceptorModule
]),
...
]
};
```
## Como usar
Ao realizar requisições utilize o `HttpClient`, conforme exemplo abaixo:
```
import { HttpClient } from '@angular/common/http';
...
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get('/api/users');
}
...
}
```
Para exibir as noticações é necessário informar a mensagem no retorno da requisição. A estrutura da mensagem
é feita com base no status da resposta, conforme será apresentado nos próximos tópicos.
### Estrutura das mensagens
#### Mensagens de sucesso `2xx`
Para exibir mensagens ao retornar uma lista ou um item, deve-se incluir a propriedade `_messages` no objeto de retorno.
Por exemplo:
```
{
"_messages": [
{
"type": "success" || "warning" || "error" || "information" (será exibido a `tag` apenas se esta propriedade possuir valor),
"code": "título ou código da mensagem",
"message": "texto da mensagem",
"detailedMessage": "detalhamento da mensagem"
}
]
}
```
#### Mensagens de erro `4xx` ou `5xx`
Ao retornar erro, o objeto não necessita ter `_messages`, deve-se retornar o objeto diretamente:
```
{
"code": "título ou código da mensagem",
"message": "texto da mensagem",
"detailedMessage": "detalhamento da mensagem"
}
```
Também é possível informar as seguintes propriedades:
- `helpUrl`: link para a documentação do erro;
- Caso for informado, será exibido uma ação de "Ajuda" na notificação, para isso não deverá ter a propriedade `detailedMessage`.
- `type`: É possível informar `error`, `warning` e `information`, sendo `error` o valor padrão.
- `details`: Uma lista de objetos de mensagem (recursiva) com mais detalhes sobre a mensagem principal.
- `detailTitle`: caso for informado, será apresentado como título dos detalhes substituindo o padrão `code - message`
> Veja o [Guia de implementação de APIs](guides/api) para mais detalhes sobre a estrutura das mensagens.
### Cabeçalho
É possível dispensar a notificação para o usuário utilizando no cabeçalho da requisição os parâmetros listados abaixo com o valor
igual a `true`:
- `X-PO-No-Message`: Não exibe notificações de erro e/ou sucesso.
- `X-PO-No-Error`: Não mostra notificações de erro com códigos `4xx` e `5xx`.
```
...
const headers = { 'X-PO-No-Message': 'true' };
this.http.get(`/customers/1`, { headers: headers });
...
```
> Após a validação no *interceptor*, os parâmetros serão removidos do cabeçalho da requisição.
---
# PoHttpRequestInterceptorService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-http-request-interceptor-service
O serviço PO Http Request Interceptor realiza a contabilização de requisições pendentes na aplicação.
Existe a possibilidade de não efetuar a contabilização das requisições pendentes, utilizando o parâmetro
`X-PO-No-Count-Pending-Requests`. Para isso deve ser informado no cabeçalho da requisição com o valor `'true'`,
por exemplo:
```
...
const headers = { 'X-PO-No-Count-Pending-Requests': 'true' };
this.http.get(`/customers/1`, { headers: headers });
...
```
Para obter a quantidade de requisições pendentes, deve inscrever-se no método `getCountPendingRequests` do
serviço `PoHttpRequestInterceptorService`, com isso, ao realizar requisições utilizando `HttpClient`,
será retornado a quantidade de requisições pendentes.
Também existe a possibildade de travar a tela e mostrar uma imagem de _loading_ durante o processamento de uma requisição
deve-se passar o parâmetro `X-PO-Screen-Lock` no cabeçalho da requisição com valor `'true'`.
por exemplo:
```
...
const headers = { 'X-PO-Screen-Lock': 'true' };
this.http.get(`/customers/1`, { headers: headers });
...
```
> Após a validação no interceptor, o parâmetro será removido do cabeçalho da requisição.
## Configuração
É necessário configurar o `HttpClient` para utilizar os interceptors registrados via Dependency Injection (DI)
por meio da função `provideHttpClient(withInterceptorsFromDi())`.
### 1) NgModule
```
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { PoModule } from '@po-ui/ng-components';
...
@NgModule({
imports: [
...
PoModule
],
declarations: [
AppComponent,
...
],
providers: [
provideHttpClient(withInterceptorsFromDi()),
...
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Ao importar o módulo `PoModule` na aplicação, o `po-http-request-interceptor` é automaticamente configurado sem a necessidade
de qualquer configuração extra.
### 2) Standalone
No arquivo contendo a configuração da aplicação (geralmente `src/app/app.config.ts`), adicione os providers e configure o `HttpClient`,
como no exemplo abaixo:
```
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { PoHttpRequestModule } from '@po-ui/ng-components';
export const appConfig: ApplicationConfig = {
providers: [
...
provideHttpClient(withInterceptorsFromDi()),
importProvidersFrom([
PoHttpRequestModule
]),
...
]
};
```
## Como usar
Segue abaixo um exemplo de uso:
```
import { HttpClient } from '@angular/common/http';
...
@Injectable({
providedIn: 'root'
})
export class CustomersService {
headers = { 'X-PO-No-Count-Pending-Requests': true, 'X-PO-Screen-Lock': 'true' }
pendingRequests: number = 0;
subscription: Subscription;
constructor(
private http: HttpClient,
private httpRequestInterceptor: PoHttpRequestInterceptorService) { }
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
ngOnInit(): void {
this.subscription = this.httpRequestInterceptor.getCountPendingRequests().subscribe(data => {
this.pendingRequests = data;
});
}
getCustomers() {
return this.http.get(`/customers/1`, { headers: headers });
}
...
}
```
---
# PoI18nService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-i18n-service
O serviço `PoI18nService` possibilita utilizar múltiplos idiomas e contextos na aplicação.
> Antes da utilização do serviço, é necessário realizar a
[importação e configuração do módulo `PoI18nModule`](/documentation/po-i18n#i18n-config).
*Utilização do serviço `PoI18nService`:**
Para utilizar o serviço basta importá-lo nos componentes que necessitarem de literais e fazer a injeção de
dependência no construtor:
```
import { PoI18nService } from '@po-ui/ng-components';
...
constructor(private poI18nService: PoI18nService) { }
...
```
Por fim realizar a busca pelas literais, inscrevendo-se no [Observable](https://angular.io/guide/observables) pelo
método `getLiterals()`.
> O método `getLiterals()` pode receber um objeto do tipo da interface `PoI18nLiterals` como parâmetro,
porém, nenhuma das propriedades são obrigatórias. Caso nenhum parâmetro seja passado, serão buscadas
todas as literais do contexto definido com padrão, no idioma definido como padrão.
## Alterações a partir da versão 19
A partir da versão 19, para evitar conflitos com bibliotecas de terceiros que também utilizam i18n,
é necessário passar explicitamente o contexto ao chamar `getLiterals`, garantindo a correta exibição das literais.
Caso `getLiterals` seja chamado sem parâmetros, o retorno pode vir das configurações da biblioteca de terceiros.
*Exemplo de chamada com contexto explícito:**
```typescript
poI18nService.getLiterals({ context: 'general' }).subscribe(literals => console.log(literals));
```
*Cenário de Contextos Iguais:**
Caso tanto a aplicação quanto uma biblioteca de terceiros utilizem o mesmo nome de contexto,
o PO UI fará um merge das literais, priorizando os valores definidos na aplicação cliente.
*Recomendações:**
- Sempre informar o contexto ao chamar `getLiterals` para evitar conflitos de literais.
- Caso a aplicação utilize `lazy loading`, utilizar `setLanguage()` para garantir a correta configuração de idioma.
Exemplos de requisição:
```
literals = {};
literalsEn = {};
literalsCrm = {};
constructor(private poI18nService: PoI18nService) {
poI18nService.getLiterals()
.subscribe((literals) => {
this.literals = literals;
});
poI18nService.getLiterals({context: 'crm', literals: ['add', 'remove']})
.subscribe((literals) => {
this.literalsCrm = literals;
});
poI18nService.getLiterals({language: 'en-us'})
.subscribe((literals) => {
this.literalsEn = literals;
});
}
```
Para apresentar as literais capturadas acima no HTML do componente, deve-se utilizar o
seguinte código:
{{ literals?.add }}
{{ literals?.remove }}
Caso as literais contenham variáveis que precisem ser substituídas, pode-se utilizar o *pipe* `poI18n`.
É possível informar propriedades do componente como `name` e `nickname` ou
informar o valor diretamente com "" ou número, conforme o exemplo abaixo:
{{ literals?.people | poI18n:[120] }}
{{ literals?.greeting | poI18n:[name, nickname] }}
{{ literals?.greeting | poI18n:["Brad", "Green"] }}
> É importante o uso do operador `?` (Elvis) para evitar erros enquanto as literais não forem carregadas.
### Teste unitário
Abaixo segue um exemplo de *setup* inicial de teste unitário do *AppComponent* que utiliza o `PoI18nService`:
> Atenção: não declarar o `PoI18nService` no providers do TestBed pois a biblioteca realiza a injeção de dependência de forma dinâmica.
> Se o serviço for declarado o teste não fará a injeção e o teste apresentará erros.
```
import { async, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { PoI18nModule } from '@po-ui/ng-components';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
const anotherPT = {
text: 'texto',
add: 'adicionar',
remove: 'remover'
};
const generalPT = {
text: 'texto',
add: 'adicionar',
remove: 'remover'
};
const config = {
default: {
language: 'pt-BR',
context: 'general',
cache: false
},
contexts: {
general: {
'pt-br': generalPT
},
another: {
'pt-br': anotherPT
}
}
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [
HttpClientTestingModule,
PoI18nModule.config(config)
]
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
```
## Métodos
### `getLanguage()`
Método que retorna o idioma padrão ativo.
A busca deste idioma pelo método será feita na seguinte ordem:
1 - o idioma que foi armazenado no *localStorage*, através do método [`setLanguage()`](documentation/po-i18n#setLanguage).
2 - o valor inserido no módulo do i18n através do parâmetro `config`, sendo o idioma inserido na propriedade
`language` da interface [`PoI18nConfigDefault`](documentation/po-i18n#poI18nConfigDefault).
3 - o idioma do navegador utilizado.
> Caso o idioma do navegador não seja suportado pelo PO (`pt`, `en`, `es` ou `ru`), será retornado valor `pt`.
### `getShortLanguage()`
Método que retorna o idioma padrão ativo, com somente a abreviação do idioma (duas primeiras letras).
Por exemplo: "pt" ou "es".
A busca deste idioma é baseada no método [**getLanguage()**](/documentation/po-i18n#get-language).
### `setLanguage(language: string, reload: boolean)`
Método para alterar o idioma padrão do módulo do i18n.
Ao utilizar este método, o idioma ficará gravado no armazenamento local do navegador, que será utilizado pelo
serviço do `i18n` para buscar as literais no idioma padrão.
---
# PoMediaQueryService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-media-query-service
O PoMediaQueryService é um serviço que atualiza dinamicamente regras de media query dentro de folhas de estilo do DOM.
Ele utiliza as regras de media queries que contêm tokens CSS (definidos como var(--nome-da-variavel)) e as replica, aplicando os novos valores fornecidos, facilitando a adaptação dos estilos com base nas condições das media queries.
Exemplo de uso:
Neste exemplo, estamos alterando os valores dos breakpoints para o grid system, que determina como o layout deve se comportar em diferentes larguras de tela. Utilizando o PoMediaQueryService, definimos os limites para três tamanhos de tela: pequeno (sm), médio (md), e grande (lg), e aplicamos esses valores dinamicamente para garantir que o layout responda adequadamente às mudanças no tamanho da janela.
Isso permite que o grid system do PO UI seja personalizado para se ajustar às necessidades do seu projeto.
```
import { PoMediaQueryService } from './po-media-query.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Definindo tokens personalizados para os breakpoints do grid system
constructor(private poMediaQueryService: PoMediaQueryService) {}
ngOnInit() {
const tokens: PoMediaQueryTokens = {
sm: {
gridSystemSmMaxWidth: '1024px' // Limite máximo para telas pequenas (até 1024px)
},
md: {
gridSystemMdMinWidth: '1025px', // Limite mínimo para telas médias (a partir de 1025px)
gridSystemMdMaxWidth: '1366px' // Limite máximo para telas médias (até 1366px)
},
lg: {
gridSystemLgMinWidth: '1367px', // Limite mínimo para telas grandes (a partir de 1367px)
gridSystemLgMaxWidth: '1465px' // Limite máximo para telas grandes (até 1465px)
},
xl: {
gridSystemXlMinWidth: '1466px' // Limite mínimo para telas extra grandes (a partir de 1466px)
}
};
// Atualiza os tokens de media queries com os novos valores
this.poMediaQueryService.updateTokens(tokens);
}
}
```
## Métodos
### `updateTokens(tokens: PoMediaQueryTokens)`
Método que replica as regras baseando-se pelos tokens de media query dentro das folhas de estilo do documento, permitindo a modificação dinâmica
dos valores CSS correspondentes aos tokens fornecidos.
---
# PoNetworkService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-network-service
O `PoNetworkService` é utilizado para verificar o status e o tipo da conexão de rede do dispositivo.
## Métodos
### `getConnectionStatus()`
Retorna as propriedades tipo e status da conexão do dispositivo no momento da chamada.
### `onChange()`
Notifica as mudanças no tipo de conexão de rede do dispositivo.
---
# PoNotificationService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-notification-service
Serviço responsável por emitir as notificações em uma página. São disponibilizados os métodos de:
- success,
- warning,
- error,
- information.
Cada um destes métodos recebe como parâmetro o objeto `PoNotification` que contém os dados da mensagem e o
objeto ViewContainerRef que é a representação do container do componente onde será criada a notificação.
Estas notificações serão exibidas durante 9 segundos por padrão, podendo ser alterada conforme necessidade.
Após este tempo a mesma é removida automaticamente.
Notificações com ação ou notificações de `erro` permanecerão em tela até o usuário fecha-lá ou clicar na ação.
O serviço possui um limite de até 5 notificações por vez, a partir do sexto a primeira notificação será removida dando lugar a nova.
## Métodos
### `success(notification: TypeUnion)`
Emite uma notificação de sucesso.
### `warning(notification: TypeUnion)`
Emite uma notificação de atenção.
### `error(notification: TypeUnion)`
Emite uma notificação de erro.
### `information(notification: TypeUnion)`
Emite uma notificação de informação.
### `setDefaultDuration(defaultDuration: number)`
Define em milissegundos a duração padrão para as notificações.
> Padrão 9 segundos.
---
# PoStorageService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-storage-service
O PO Storage é uma biblioteca que fornece um serviço para armazenamento de dados no dispositivo local, sendo semelhante
ao funcionamento do [IonicStorage](https://ionicframework.com/docs/storage/).
É possível utilizar os drivers [Websql](https://dev.w3.org/html5/webdatabase/), [Indexeddb](https://www.w3.org/TR/IndexedDB/),
[LocalStorage](https://html.spec.whatwg.org/multipage/webstorage.html) e também [LokiJS](https://github.com/techfort/LokiJS/wiki).
Para um melhor ganho de performance ao buscar e salvar dados, recomendamos a utilização do `LokiJS`, um *database*
orientado a documento semelhante ao MongoDB, que além de permitir a persistência dos dados no dispositivo possibilita
também o armazenamento dos dados em memória. Outra vantagem, é o aumento do limite de armazenamento para
aproximadamente `300mb`.
A estrutura utilizada para armazenar os dados é a de chave/valor, onde uma chave funciona como um identificador exclusivo.
#### Instalando o PO Storage
Para instalar o `po-storage` em sua aplicação execute o seguinte comando:
```shell
`ng add @po-ui/ng-storage`
```
Será instalado o pacote `@po-ui/ng-storage` e também já importará `PoStorageModule` no módulo principal da sua aplicação, conforme abaixo:
```typescript
import { PoStorageModule } from '@po-ui/ng-storage';
@NgModule({
declarations: [...],
imports: [
// Importação do módulo PoStorageModule
PoStorageModule.forRoot(),
],
bootstrap: [IonicApp],
providers: [...]
})
export class AppModule {}
```
Com a declaração do módulo, é criada uma base de dados no armazenamento local e o serviço `PoStorageService` estará
pronto para ser utilizada na sua aplicação.
#### Configurando as opções de armazenamento
Na importação do módulo, o método `PoStorageModule.forRoot()` pode receber como parâmetro um objeto do tipo
[`PoStorageConfig`](documentation/po-storage#po-storage-config),
que serve para configurar as opções personalizadas do armazenamento, como por exemplo: o tipo de armazenamento
preferêncial.
Caso não seja passada nenhuma configuração a ordem padrão será: ['websql', 'indexeddb', 'localstorage', 'lokijs'].
Abaixo segue um exemplo de configuração onde o storage preferencial passa a ser o `lokijs`:
```typescript
import { PoStorageModule } from '@po-ui/ng-storage';
@NgModule({
declarations: [...],
imports: [
// Importação do módulo PoStorageModule com a configuração personalizada
PoStorageModule.forRoot({
name: 'mystorage',
storeName: '_mystore',
driverOrder: ['lokijs', 'websql', 'indexeddb', 'localstorage']
}),
],
bootstrap: [IonicApp],
providers: [...]
})
export class AppModule {}
```
## Métodos
### `appendArrayToArray(key: string, value: Array)`
Busca uma lista armazenada pela chave e concatena com a lista passada por parâmetro.
Por exemplo:
``` typescript
const clients = [ { name: 'Marie', age: 23 }, { name: 'Pether', age: 39 }];
this.poStorageService.set('clientKey', clients).then(() => {});
...
const newClients = [ { name: 'Lisa', age: 36 }, { name: 'Bruce', age: 18 } ];
this.poStorageService.appendArrayToArray('clientKey', newClients).then(() => {
// A lista agora será:
// [ { name: 'Marie', age: 23 }, { name: 'Pether', age: 39 }, { name: 'Lisa', age: 36 }, { name: 'Bruce', age: 18 }];
});
```
### `appendItemToArray(key: string, value: Array)`
Acrescenta um item em uma lista armazenada pela chave.
### `clear()`
Remove todos os itens da base de dados local configurada na declaração do módulo `PoStorageModule`.
> Utilize este método com cautela, para evitar a perda indesejada de dados.
### `exists(key: string)`
Verifica se existe um valor dentro de uma determinada chave.
### `forEach(iteratorCallback: any)`
Itera sobre todas as chaves armazenadas.
### `get(key: string, lock: boolean)`
Retorna o valor armazenado em uma determinada chave.
### `getDriver()`
Retorna o nome do *driver* que está sendo usado para armazenar os dados, por exemplo: localStorage.
### `getFirstItem(key: string)`
Retorna o primeiro item de uma lista para uma determinada chave.
### `getItemAndRemove(key: string)`
Remove o primeiro item de uma lista a partir da chave.
### `getItemByField(key: string, fieldName: string, fieldValue: any)`
Busca o primeiro objeto encontrado dentro de uma lista pelo do valor de um campo.
Por exemplo:
``` typescript
const clients = [ { name: 'Marie', age: 23 }, { name: 'Pether', age: 39 }];
this.poStorageService.set('clientKey', clients).then(() => {});
...
this.poStorageService.getItemByField('clientKey', 'name', 'Marie').then(client => {
// Resultado do console.log: { name: 'Marie', age: 23 }
console.log(client);
});
```
### `keys()`
Lista com todas as chaves armazenadas.
### `length()`
Quantidade de chaves armazenadas.
### `limitedCallWrap(limitedResource: FunctionType)`
Utilizado para gerenciar o bloqueio e desbloqueio de recursos no `PoStorageService`.
Aguardando a liberação da utilização dos recursos que participam deste comportamento e posteriormente envolve o recurso
passado como parâmetro em um comportamento de bloqueio e desbloqueio.
Este método se comporta igual a utilização em conjunta dos métodos: `PoStorageService.requestIdlePromise()`,
`PoStorageService.lock()` e `PoStorageService.unlook()`.
Veja mais no método: [`PoStorage.requestIdlePromise()`](documentation/po-storage#request-idle-promise).
### `lock()`
Incrementa um valor na fila de bloqueio do `PoStorageService`. Utilizado juntamente com o método `unlock` para poder
controlar a execução de uma determinada tarefa com o `PoStorage.requestIdlePromise()`.
Veja mais no método: [`PoStorage.requestIdlePromise()`](documentation/po-storage#request-idle-promise).
### `ready()`
Determina se o processo de inicialização do *driver* assíncrono foi concluído.
### `remove(key: key)`
Remove um valor associado a uma chave.
### `removeIndexFromObject(key: string, property: string)`
Remove uma propriedade de um objeto armazenado.
### `removeItemFromArray(key: string, field: string, value: string)`
Remove um objeto de uma lista armazenada pelo valor de uma propriedade.
Por exemplo:
``` typescript
const clients = [ { name: 'Marie', age: 23 }, { name: 'Pether', age: 39 }];
this.poStorageService.set('clientKey', clients).then(() => {});
...
this.poStorageService.removeItemFromArray('clientKey', 'name', 'Marie').then(() => {
// O objeto { name: 'Marie', age: 23 } foi removido da lista que está na chave 'clientKey'
});
```
### `requestIdlePromise()`
Método que verifica se o acesso a base de dados configurada está liberado.
Utilizado em conjunto com os métodos `lock()` e `unlock()` entre tarefas que não podem ser executadas de forma
paralela, para não causar inconsistências nos dados.
Exemplo de utilização:
```
// Aguarda a liberação para continuar
await this.poStorage.requestIdlePromise();
this.poStorage.lock();
// Executa uma tarefa que irá ler e/ou escrever na base de dados configurada.
this.poStorage.unlock();
```
> É importante sempre utilizá-lo antes de executar os métodos `lock()` e `unlock()` para garantir que a tarefa só
será executada caso o acesso esteja livre.
### `set(key: string, value: any, lock: boolean)`
Grava um valor em uma determinada chave.
### `setIndexToObject(key: string, property: string, value: any)`
Atribui um valor a uma propriedade de um objeto armazenado pela chave.
Por exemplo:
``` typescript
const clients = [ { name: 'Marie', age: 23 }, { name: 'Pether', age: 39 }];
this.poStorageService.set('clientKey', clients).then(() => {});
...
this.poStorageService.setIndexToObject('clientKey', 'name', 'Clare').then(() => {
// O objeto { name: 'Marie', age: 23 } passa a ser { name: 'Clare', age: 23 }
});
```
### `unlock()`
Decrementa um valor na fila de bloqueio. Utilizado juntamente com o método `lock` para poder
controlar a execução de uma determinada tarefa com o `PoStorage.requestIdlePromise()`.
Veja mais no método: [`PoStorage.requestIdlePromise()`](documentation/po-storage#request-idle-promise).
---
# PoSyncService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-sync-service
O `PoSyncService` é utilizado para configurar toda a base de dados que receberá as informações que serão
armazenadas *offline* vindas do servidor. Nele ocorre toda a preparação dos modelos de dados retornados por
cada consulta.
## Métodos
### `destroy()`
Destrói todas as chaves do *storage* referentes ao `po-sync`, ou seja,
as definições dos *schemas*, os registros de cada *schema* e a fila
de eventos que estão para ser enviados ao servidor *(EventSourcing)*.
> Para que não venham ocorrer erros em ações que dependam das definições dos *schemas*,
recomenda-se utilizar o método `prepare()` em seguida.
> Veja mais detalhes em [Fundamentos do PO Sync - Alterando as definições dos schemas](/guides/sync-fundamentals).
### `disableSync()`
Desabilita todos os tipos de sincronização de dados (periódica, reativa e manual).
> Para habilitar novamente a sincronização utilize o método [`PoSyncService.enableSync()`](documentation/po-sync#enable-sync).
### `enableSync()`
Habilita todos os tipos de sincronização de dados (periódica, reativa e manual).
Por padrão, sempre que se inicializa uma aplicação com PO Sync as sincronizações já estão habilitadas.
### `getResponses()`
Método que disponibiliza a partir de sua inscrição o evento de retorno das operações da fila de eventos que
foram enviadas ao servidor. A cada operação enviada para o servidor, será disparado um evento para a inscrição
deste método.
> Veja mais detalhes em [Fundamentos do PO Sync - Capturando respostas da sincronização](/guides/sync-fundamentals).
### `getModel(schemaName: string)`
Retorna uma instância de `PoEntity` para um determinado *schema*.
> Veja mais detalhes em [Fundamentos do PO Sync - Manipulando os registros de um schema](/guides/sync-fundamentals).
### `insertHttpCommand(poHttpRequestData: PoHttpRequestData, customRequestId: string)`
Insere uma requisição HTTP na fila de eventos do `po-sync`.
> Veja mais detalhes em [Fundamentos do PO Sync - Inserindo requisições HTTP na fila de eventos](/guides/sync-fundamentals).
### `loadData()`
Efetua uma chamada na API do servidor para realizar a carga inicial dos dados. Deve ser chamado apenas uma vez
na aplicação, após a preparação dos *schemas* realizada através do método `PoSyncService.prepare()`.
> Veja mais detalhes em [Fundamentos do PO Sync - Carga inicial dos dados](/guides/sync-fundamentals).
### `onSync()`
Responsável por notificar sempre que houver sincronismo.
> Veja mais detalhes em [Fundamentos do PO Sync - Notificação pós-sincronização](/guides/sync-fundamentals).
### `prepare(schemas: TypeApplication, config: PoSyncConfig)`
Prepara a aplicação criando os schemas e aplica as configurações.
> Veja mais detalhes em [Fundamentos do PO Sync - Preparando a aplicação](/guides/sync-fundamentals).
### `removeItemOfSync(idEventSourcing: any)`
Remove um item da fila de eventos que espera a sincronização.
> Veja mais detalhes em [Fundamentos do PO Sync - Capturando respostas da sincronização](/guides/sync-fundamentals).
### `resumeSync()`
Reenvia os comandos pendentes na fila (inclusão, alteração e exclusão) e busca novos dados do servidor.
> Veja mais detalhes em [Fundamentos do PO Sync - Capturando respostas da sincronização](/guides/sync-fundamentals).
### `sync()`
Dispara o sincronismo enviando os eventos pendentes (inclusão, alteração e exclusão) e buscando novos dados do servidor.
O sincronismo somente será executado depois que o acesso a base de dados local do dispositivo for liberada.
> Veja mais detalhes em [Fundamentos do PO Sync - Sincronização manual](/guides/sync-fundamentals).
---
# PoThemeService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-service
O serviço `PoThemeService` permite customizar as cores do tema padrão do `PO-UI` e definir o nível de acessibilidade
mais adequado ao projeto.
O nível **AAA** (padrão) garante maior contraste, áreas clicáveis amplas e espaçamentos maiores entre os elementos,
enquanto o nível **AA** mantém a conformidade com as diretrizes de acessibilidade, mas com proporções mais equilibradas
e contornos mais sutis.
O serviço também possibilita configurar a **densidade de espaçamentos**, permitindo ajustar o espaço entre e dentro dos
componentes. Essa configuração pode ser utilizada com qualquer nível de acessibilidade.
> Observação: a customização das cores de `feedback` não é recomendada por motivos de acessibilidade e usabilidade.
> Para saber mais sobre como customizar o tema padrão, consulte o item
[Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
## Métodos
### `setTheme(themeConfig: PoTheme, themeType: PoThemeTypeEnum, a11yLevel: PoThemeA11yEnum, persistPreference: boolean)`
Aplica um tema ao componente de acordo com o tipo de tema e o nível de acessibilidade especificados.
Este método configura o tema do componente com base no objeto `themeConfig` fornecido, no `themeType` e no `a11yLevel`.
Além disso, ele pode opcionalmente salvar a preferência de tema no localStorage, se solicitado.
### `getA11yLevel()`
Retorna o nível de acessibilidade configurado no tema.
Se não estiver configurado, retorna `AAA` como padrão.
### `setA11yDefaultSizeSmall(enable: boolean)`
Define o tamanho `small` como padrão para componentes que não possuem um tamanho definido. Essa configuração é
aplicada globalmente apenas quando o nível de acessibilidade for `AA`. O valor definido é salvo no
`localStorage` sob a chave `po-default-size` e o atributo `data-default-size` é adicionado ao elemento HTML
para que os componentes possam aplicar o tamanho
Exemplo de uso:
```typescript
import { poThemeDefault, PoThemeService, PoThemeTypeEnum, PoThemeA11yEnum } from '@po-ui/ng-components';
private themeService = inject(PoThemeService);
constructor() {
this.themeService.setA11yDefaultSizeSmall(true);
this.themeService.setTheme(poThemeDefault, PoThemeTypeEnum.light, PoThemeA11yEnum.AA);
}
```
> Para garantir que o tamanho `small` seja aplicado corretamente a todos os componentes, recomendamos
definir esta configuração **junto com o nível de acessibilidade `AA` na inicialização da aplicação**.
> Para ajustar a densidade visual dos componentes agrupadores (como pages, container, etc.), utilize também
o método `setDensityMode` conforme necessário.
### `getDensityMode()`
Retorna o modo de adensamento dos componentes agrupadores.
Se não estiver configurado, retorna `medium` como padrão.
### `setDensityMode(mode: TypeUnion)`
Aplica o modo de adensamento compacto (`small`) ou espaçoso (`medium`) para os componentes agrupadores,
independentemente do nível de acessibilidade. O valor definido é salvo no `localStorage` sob a chave
`po-density-mode`.
### `persistThemeActive()`
Restaura e aplica as preferências visuais do usuário para o tema da aplicação, garantindo que essas preferências
sejam persistidas no `localStorage` para uso em recarregamentos futuros.
### `changeCurrentThemeType(themeType: PoThemeTypeEnum)`
Altera o tipo do tema armazenado e aplica os novos estilos ao documento.
Este método altera o tipo do tema armazenado ativo (light/dark)
### `cleanThemeActive(persistPreference: boolean)`
Método remove o tema armazenado e limpa todos os estilos de tema
aplicados ao documento.
### `getThemeActive()`
Retorna o tema ativo como um observable. Este método funcionará apenas se o tema estiver armazenado no `localStorage`.
### `setDefaultTheme(type: PoThemeTypeEnum)`
Define o tema atual como o tema "PoUI Padrão".
### `setThemeType(theme: PoTheme, themeType: PoThemeTypeEnum)`
Define o tipo (light/dark) quando um tema está sendo aplicado.
### `setCurrentThemeType(themeType: PoThemeTypeEnum)`
Define o tipo (light/dark) para um tema já ativo.
### `setThemeA11y(theme: PoTheme, a11y: PoThemeA11yEnum)`
Define o nível de acessibilidade quando um tema está sendo aplicado.
### `setCurrentThemeA11y(a11y: PoThemeA11yEnum)`
Define o nível de acessibilidade para um tema já ativo.
---
# PoUserGuideService
**Tipo:** Serviço
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-service
Serviço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos `tourStartServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos , `stepChangeServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos `tourStartServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos , e `tourEndServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos `tourStartServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos , `stepChangeServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos `tourStartServiço responsável por criar e controlar tours guiados na interface da aplicação.
O `PoUserGuideService` permite apresentar uma sequência de passos visuais para orientar
o usuário durante o uso de uma tela, funcionalidade ou fluxo específico do sistema.
Ele pode ser utilizado, por exemplo, para apresentar uma nova funcionalidade, guiar um
primeiro acesso ou destacar pontos importantes da interface.
O serviço centraliza a configuração do guia do usuário, incluindo:
- os passos que serão exibidos;
- as opções gerais de comportamento;
- o controle do passo ativo;
- os eventos emitidos durante o ciclo de vida do tour.
A partir dele, a aplicação pode iniciar, acompanhar e reagir à execução do tour por meio
dos eventos públicos , e .
Como o serviço é disponibilizado com `providedIn: 'root'`, não é necessário declará-lo em
`providers` nem importá-lo manualmente em módulos específicos.
Ele pode ser injetado diretamente em qualquer componente, serviço ou diretiva da aplicação.
#### Uso típico
O fluxo recomendado de utilização do serviço, que pode ser encadeado fluentemente, configura os
passos do tour, ajusta opções globais e dispara a execução em uma única expressão:
```typescript
import { Component } from '@angular/core';
import { PoUserGuideService } from '@po-ui/ng-components';
@Component({ selector: 'app-onboarding', templateUrl: './onboarding.component.html' })
export class OnboardingComponent {
constructor(private PoUserGuide: PoUserGuideService) {}
startTour(): void {
this.PoUserGuide
.setSteps([
{ element: '#header', title: 'Bem-vindo!', content: 'Esta é a barra superior.' },
{ element: '', title: 'Menu', content: 'Acesse aqui as funcionalidades do sistema.' },
{ element: '#user-profile', title: 'Perfil', content: 'Configure suas preferências.' }
])
.setOptions({ showProgress: true, allowClose: true })
.start();
}
}
```
#### Boas práticas para seleção de elementos
Ao configurar o elemento que será destacado em cada passo do tour, recomenda-se evitar
seletores baseados em classes internas, estruturas de HTML ou elementos muito genéricos,
como `.minha-classe`, `div`, `span` ou combinações dependentes da hierarquia da página.
Esses seletores podem ser sensíveis a mudanças de implementação, refatorações visuais ou
alterações nos nomes de classes, o que pode fazer com que o passo deixe de encontrar o
elemento esperado.
Quando o passo destacar um componente do PO-UI, prefira utilizar o próprio seletor do
componente, como: `po-button`, `po-input`, `po-combo` ou `po-table`, sempre que isso for
suficiente para identificar o elemento corretamente.
Quando houver mais de um componente igual na tela ou quando for necessário apontar para
um elemento específico, recomenda-se adicionar um `id` no elemento alvo ou encapsular a
área desejada em um elemento próprio da aplicação.
#### Aviso de segurança: HTML em `step.content`
O PO UI sanitiza o conteúdo HTML informado em `step.content` antes de exibi-lo no
popover* do tour, ajudando a prevenir vulnerabilidades de *Cross-Site Scripting* (XSS).
A mesma proteção é aplicada aos *labels* definidos em `PoUserGuideStep` e
`PoUserGuideOptions` quando construídos dinamicamente.
Ainda assim, recomenda-se validar conteúdos vindos de fontes não confiáveis, como entrada
do usuário, APIs externas ou *query strings*, preservando a segurança desde a origem dos dados.
#### Tokens customizáveis
É possível alterar a aparência do *popover* renderizado pelo `PoUserGuideService` através dos tokens
(CSS) consumidos pelo arquivo `po-user-guide.css` distribuído via `@po-ui/style`.
> Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
| Propriedade | Descrição | Valor Padrão |
|--------------------------------------------------|--------------------------------------------------------------------------|--------------------------------------------------------|
| **Overlay** | | |
| `--color-po-user-guide-overlay` | Cor do *overlay* que escurece a página durante o tour | `var(--color-neutral-dark-80)` |
| **Popover** | | |
| `--font-family` | Família tipográfica usada no *popover* | `var(--font-family-theme)` |
| `--color` | Cor padrão do texto do *popover* | `var(--color-neutral-dark-70)` |
| `--background-color` | Cor de fundo do *popover* | `var(--color-neutral-light-00)` |
| `--border-color` | Cor da borda do *popover* | `var(--color-neutral-light-20)` |
| `--border-width` | Espessura da borda do *popover* | `var(--border-width-sm)` |
| `--border-radius` | Raio dos cantos do *popover* | `var(--border-radius-md)` |
| `--shadow` | Sombra projetada pelo *popover* | `var(--shadow-lg)` |
| `--padding` | Espaçamento interno do *popover* | `var(--spacing-sm)` |
| `--max-width` | Largura máxima do *popover* | `360px` |
| `--arrow-color` | Cor da seta que aponta para o elemento destacado | `var(--color-neutral-light-00)` |
| **Título** | | |
| `--title-font-size` | Tamanho da fonte do título | `var(--font-size-default)` |
| `--title-font-weight` | Peso da fonte do título | `var(--font-weight-bold)` |
| `--title-line-height` | Altura de linha do título | `var(--line-height-sm)` |
| `--title-color` | Cor do texto do título | `var(--color-neutral-dark-95)` |
| `--title-margin-bottom` | Espaçamento inferior do título | `var(--spacing-xs)` |
| **Descrição** | | |
| `--description-font-size` | Tamanho da fonte da descrição | `var(--font-size-sm)` |
| `--description-font-weight` | Peso da fonte da descrição | `var(--font-weight-normal)` |
| `--description-line-height` | Altura de linha da descrição | `var(--line-height-md)` |
| `--description-color` | Cor do texto da descrição | `var(--color-neutral-dark-70)` |
| `--description-margin-bottom` | Espaçamento inferior da descrição | `var(--spacing-xs)` |
| **Progresso** | | |
| `--progress-font-size` | Tamanho da fonte do indicador de progresso | `var(--font-size-xs)` |
| `--progress-font-weight` | Peso da fonte do indicador de progresso | `var(--font-weight-normal)` |
| `--progress-line-height` | Altura de linha do indicador de progresso | `var(--line-height-sm)` |
| `--progress-color` | Cor do texto do indicador de progresso | `var(--color-neutral-mid-60)` |
| **Rodapé** | | |
| `--footer-margin-top` | Espaçamento superior do rodapé | `var(--spacing-xs)` |
| `--footer-gap` | Espaçamento entre os botões de navegação | `var(--spacing-xxs)` |
| `--footer-gap-tertiary` | Espaçamento adicional aplicado ao botão terciário | `var(--spacing-sm)` |
| **Botões - base** | | |
| `--button-font-weight` | Peso da fonte dos botões | `var(--font-weight-bold)` |
| `--button-font-size` | Tamanho da fonte dos botões | `var(--font-size-sm)` |
| `--button-line-height` | Altura de linha dos botões | `var(--line-height-none)` |
| `--button-border-width` | Espessura da borda dos botões | `var(--border-width-md)` |
| `--button-border-radius` | Raio dos cantos dos botões | `var(--border-radius-md)` |
| `--button-padding` | Espaçamento interno dos botões | `var(--spacing-xs) var(--spacing-sm)` |
| **Botão primário (`Próximo` / `Finalizar`)** | | |
| `--button-primary-text-color` | Cor do texto do botão primário | `var(--color-neutral-light-00)` |
| `--button-primary-color` | Cor de fundo do botão primário | `var(--color-action-default)` |
| `--button-primary-color-hover` | Cor de fundo do botão primário no estado *hover* | `var(--color-action-hover)` |
| `--button-primary-color-pressed` | Cor de fundo do botão primário no estado *pressed* | `var(--color-action-pressed)` |
| `--button-primary-border-color` | Cor da borda do botão primário | `var(--color-action-default)` |
| `--button-primary-shadow` | Sombra do botão primário | `var(--shadow-none)` |
| `--button-primary-text-color-disabled` | Cor do texto do botão primário desabilitado | `var(--color-neutral-dark-70)` |
| `--button-primary-color-disabled` | Cor de fundo do botão primário desabilitado | `var(--color-neutral-light-30)` |
| `--button-primary-border-color-disabled` | Cor da borda do botão primário desabilitado | `var(--color-transparent)` |
| **Botão terciário (`Anterior`)** | | |
| `--button-tertiary-color` | Cor do texto do botão terciário | `var(--color-action-default)` |
| `--button-tertiary-color-hover` | Cor do texto do botão terciário no estado *hover* | `var(--color-brand-01-darkest)` |
| `--button-tertiary-color-pressed` | Cor do texto do botão terciário no estado *pressed* | `var(--color-brand-01-darker)` |
| `--button-tertiary-background-color` | Cor de fundo do botão terciário | `var(--color-transparent)` |
| `--button-tertiary-background-hover` | Cor de fundo do botão terciário no estado *hover* | `var(--color-brand-01-lighter)` |
| `--button-tertiary-background-pressed` | Cor de fundo do botão terciário no estado *pressed* | `var(--color-brand-01-light)` |
| `--button-tertiary-border-color` | Cor da borda do botão terciário | `var(--color-transparent)` |
| `--button-tertiary-border-color-hover` | Cor da borda do botão terciário no estado *hover* | `var(--color-transparent)` |
| `--button-tertiary-border-color-pressed` | Cor da borda do botão terciário no estado *pressed* | `var(--color-transparent)` |
| `--button-tertiary-shadow` | Sombra do botão terciário | `var(--shadow-none)` |
| `--button-tertiary-color-disabled` | Cor do texto do botão terciário desabilitado | `var(--color-neutral-light-30)` |
| `--button-tertiary-background-disabled` | Cor de fundo do botão terciário desabilitado | `var(--color-transparent)` |
| `--button-tertiary-border-color-disabled` | Cor da borda do botão terciário desabilitado | `var(--color-transparent)` |
| **Botão fechar (`X`)** | | |
| `--button-close-color` | Cor do botão fechar | `var(--color-neutral-mid-60)` |
| `--button-close-color-hover` | Cor do botão fechar no estado *hover* | `var(--color-action-hover)` |
| `--button-close-color-pressed` | Cor do botão fechar no estado *pressed* | `var(--color-action-pressed)` |
| `--button-close-color-focused` | Cor do botão fechar no estado de foco visível | `var(--color-action-focus)` |
| `--button-close-background-color` | Cor de fundo do botão fechar | `var(--color-transparent)` |
| `--button-close-background-hover` | Cor de fundo do botão fechar no estado *hover* | `var(--color-neutral-light-10)` |
| `--button-close-background-pressed` | Cor de fundo do botão fechar no estado *pressed* | `var(--color-neutral-light-20)` |
| `--button-close-border-color` | Cor da borda do botão fechar | `var(--color-transparent)` |
| `--button-close-font-size` | Tamanho da fonte/ícone do botão fechar | `var(--font-size-md)` |
| `--button-close-padding` | Espaçamento interno do botão fechar | `var(--spacing-xxs) var(--spacing-xs)` |
| `--button-close-color-disabled` | Cor do botão fechar desabilitado | `var(--color-neutral-light-30)` |
| `--button-close-background-disabled` | Cor de fundo do botão fechar desabilitado | `var(--color-transparent)` |
| `--button-close-border-color-disabled` | Cor da borda do botão fechar desabilitado | `var(--color-transparent)` |
| **Foco visível** | | |
| `--outline-color-focused` | Cor do *outline* aplicado aos botões em foco visível | `var(--color-action-focus)` |
---
# ErrorAsyncProperties
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/error-async-properties
Interface para realizar uma validação assíncrona no componente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `errorAsync` | `(value) => Observable` | não | Função obrigatória executada para realizar a validação assíncrona personalizada. |
| `triggerMode` | `'change' | 'changeModel'` | sim | Controla se o método será executado no disparo do output `change` ou `change-model`. |
---
# PoAccordionLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-accordion-literals
Interface para definição das literais usadas no `po-accordion`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `closeAllItems` | `string` | sim | Label do gerenciador de Accordion para colapsar todos os itens |
| `expandAllItems` | `string` | sim | Label do gerenciador de Accordion para expandir todos os itens. |
---
# PoBreadcrumb
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-breadcrumb
Interface que define o `po-breadcrumb`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `favorite` | `string` | sim | Permite definir uma URL para favoritar ou desfavoritar. |
| `items` | `Array` | não | Lista de itens do _breadcrumb_. |
| `params` | `object` | sim | Objeto que possibilita o envio de parâmetros adicionais à requisição. |
---
# PoBreadcrumbItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-breadcrumb-item
Interface que define cada item do componente **po-breadcrumb**.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação executada ao clicar no item. |
| `label` | `string` | não | Rótulo do item. |
| `link` | `string` | sim | Url do item. |
---
# PoButtonGroupItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-group-item
Interface para os itens do `po-button-group`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | não | Ação executada ao clicar sobre o botão. |
| `disabled` | `boolean` | sim | Se verdadeiro, define o botão como desabilitado. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do label do botão. |
| `label` | `string` | sim | Label do botão. |
| `selected` | `boolean` | sim | Define se o botão está selecionado. Utilizado juntamente à propriedade `p-toggle`. |
| `tooltip` | `string` | sim | Define a mensagem a ser exibida ao posicionar o *mouse* sobre o botão. |
---
# PoCalendarRangePreset
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-calendar-range-preset
Interface para definir um preset de intervalo de datas no calendário.
Cada preset possui um rótulo identificador e uma função que calcula
dinamicamente o intervalo de datas com base na data atual.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `dateRange` | `(today: Date) => {
start: Date;
end: Date;
}` | não | Função que calcula dinamicamente o intervalo de datas relativo à data informada. |
| `label` | `string` | não | Identificador/rótulo de exibição do preset. |
---
# PoChartAxisOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-axis-options
Interface* que define os eixos do grid.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `gridLines` | `number` | sim | Define a quantidade de linhas exibidas no grid. |
| `labelType` | `PoChartLabelFormat` | sim | Define o tipo do label e a formatação exibida no eixo de valor. |
| `maxRange` | `number` | sim | Define o alcance de valor máximo exibido no eixo Y. |
| `minRange` | `number` | sim | Define o alcance mínimo exibido no eixo Y. |
| `paddingBottom` | `number` | sim | Permite aumentar ou diminuir o espaço inferior do gráfico. |
| `paddingLeft` | `number` | sim | Permite aumentar ou diminuir o espaço esquerdo do gráfico. |
| `paddingRight` | `number` | sim | Permite aumentar ou diminuir o espaço direito do gráfico. |
| `rotateLegend` | `number` | sim | Define o ângulo de rotação da legenda do gráfico. |
| `showAxisDetails` | `boolean` | sim | Exibe a linha de detalhes que acompanha o mouse |
| `showXAxis` | `boolean` | sim | Exibe a linha do eixo X |
| `showYAxis` | `boolean` | sim | Exibe a linha do eixo Y |
---
# PoChartDataLabel
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-data-label
Interface que define as propriedades de exibição dos rótulos das séries no `po-chart`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `fixed` | `boolean` | sim | Indica se o texto associado aos pontos da série deve permanecer fixo na exibição do gráfico. |
---
# PoChartHeaderOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-header-options
Interface* para configuração das ações disponíveis no cabeçalho.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hideExpand` | `boolean` | sim | Define se o botão responsável por expandir o gráfico deve ser ocultado. |
| `hideExportCsv` | `boolean` | sim | Define se a opção de exportação do gráfico em formato CSV deve ser ocultada. |
| `hideExportImage` | `boolean` | sim | Define se a opção de exportação do gráfico nos formatos JPG e PNG deve ser ocultada. |
| `hideTableDetails` | `boolean` | sim | Define se o botão responsável por exibir os detalhes do gráfico em formato de tabela deve ser ocultado. |
---
# PoChartIndicatorOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-indicator-options
Interface para configurações dos indicadores do gráfico `radar`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `color` | `string` | sim | Cor do texto do indicator. |
| `max` | `number` | sim | Valor máximo do indicator. |
| `min` | `number` | sim | Valor mínimo do indicator, com valor padrão de 0. |
| `name` | `string` | sim | Nome do indicator. |
---
# PoChartLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-literals
Interface para definição dos literais usadas no `po-chart`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `category` | `string` | sim | Texto da primeira coluna da tabela no gráfico do tipo `Bar`. |
| `downloadCSV` | `string` | sim | Texto exibido para a ação de download de dados em formato CSV. |
| `exportCSV` | `string` | sim | Texto do botão para exportar o gráfico em CSV. |
| `exportJPG` | `string` | sim | Texto do botão para exportar o gráfico como imagem JPG. |
| `exportPNG` | `string` | sim | Texto do botão para exportar o gráfico como imagem PNG. |
| `item` | `string` | sim | Texto dos títulos das colunas `Gauge` e não possui label. |
| `serie` | `string` | sim | Texto da primeira coluna da tabela em todos os gráficos com exceção do `Bar` e `Gauge`. |
| `value` | `string` | sim | Texto da primeira coluna da tabela quando o gráfico é do tipo `Gauge`. |
---
# PoChartOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-options
Interface* para configurações dos elementos do gráfico.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `areaStyle` | `boolean` | sim | Define se as séries terão sua área preenchida. |
| `axis` | `PoChartAxisOptions` | sim | Define um objeto do tipo `PoChartAxisOptions` para configuração dos eixos. |
| `borderRadius` | `number` | sim | Define borda entre os itens do gráfico. Válido para os gráficos `Donut`, `Pie`. |
| `bottomDataZoom` | `boolean | number` | sim | Define a distância inferior do componente DataZoom. |
| `dataZoom` | `boolean` | sim | Permite aplicar zoom ao gráfico com o scroll do mouse; |
| `descriptionChart` | `string` | sim | Define a descrição do gráfico exibido acima do gráfico. |
| `fillPoints` | `boolean` | sim | Define se os pontos do gráfico serão preenchidos. |
| `firstColumnName` | `string` | sim | Valor que permite customizar o nome da `TH` da primeira coluna da tabela descritiva. |
| `header` | `PoChartHeaderOptions` | sim | Define um objeto do tipo `PoChartHeaderOptions` para configurar a exibição de botões no cabeçalho do gráfico. |
| `innerRadius` | `number` | sim | Define o diâmetro, em valor percentual entre `0` e `100`, da área central para gráficos do tipo `donut`. |
| `legend` | `boolean` | sim | Define a exibição da legenda do gráfico. Valor padrão é `true` |
| `legendPosition` | `'left' | 'center' | 'right'` | sim | Define o alinhamento horizontal da legenda. |
| `legendType` | `'plain' | 'scroll'` | sim | Define o tipo da legenda. |
| `legendVerticalPosition` | `'top' | 'bottom'` | sim | Define a posição vertical da legenda no gráfico. |
| `pointer` | `boolean` | sim | Define a exibição do ponteiro. |
| `rendererOption` | `'canvas' | 'svg'` | sim | Define como o gráfico será renderizado. |
| `roseType` | `boolean` | sim | Transforma os gráficos do tipo `Donut` ou `Pie` num gráfico de área polar. |
| `showContainerGauge` | `boolean` | sim | Esconde a estilização do container em volta do gráfico. |
| `showFromToLegend` | `boolean` | sim | Exibe os valores das propriedades `from` e `to` no gráfico do no texto da legenda entre parênteses. |
| `stacked` | `boolean` | sim | Agrupa todas as séries numa única coluna ou barra por categoria. Essa propriedade sobrescreve a propriedade `stackGroupName` da interface `PoChartSerie` |
| `subtitleGauge` | `string` | sim | Define um subtítulo para o Gauge. Indicamos um subtítulo pequeno, com uma quantidade máxima de 32 caracteres na altura padrão. |
| `textCenterGraph` | `string` | sim | Aplica texto centralizado customizado nos gráficos de `Donut`. |
---
# PoChartRadarOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-radar-options
Interface* para configurações do gráfico `radar`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `indicator` | `Array` | sim | Define as configurações dos indicadores do gráfico, como nome, cor, valor mínimo e valor máximo. |
| `shape` | `'polygon' | 'circle'` | sim | Define o formato da grid, podendo ser exibida como polígono ou círculo. |
| `splitArea` | `boolean` | sim | Define o efeito zebrado na grid. |
---
# PoChartSerie
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-serie
Interface das series dinâmicas do `po-chart` que possibilita desenhar gráficos dos tipos `area`, `bar`, `column`, `line`, `donut`, `pie` e `radar`
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `areaStyle` | `boolean` | sim | Define se a série terá sua área preenchida. |
| `color` | `string` | sim | Determina a cor da série. As maneiras de customizar o *preset* padrão de cores são: |
| `data` | `number | Array` | sim | Define a lista de valores para a série. Os tipos esperados são de acordo com o tipo de gráfico: |
| `from` | `number` | sim | Alcance inicial da cor. |
| `label` | `string` | sim | Rótulo referência da série. |
| `stackGroupName` | `string` | sim | Agrupa as séries em barras ou colunas que receberem o mesmo `stackGroupName`. Exemplo: |
| `to` | `number` | sim | Alcance final da cor. |
| `tooltip` | `string | ((params: any) => string)` | sim | Define o texto que será exibido na tooltip ao passar o mouse por cima das séries do *chart*. |
| `type` | `PoChartType` | sim | Define em qual tipo de gráfico que será exibida a série. É possível combinar séries dos tipos `column` e `line` no mesmo gráfico. Para isso, basta criar as séries com as configurações: |
---
# PoCheckboxGroupOption
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-checkbox-group-option
Interface para as ações do componente po-checkbox-group.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `disabled` | `boolean` | sim | Desabilita o checkbox, por padrão as opções sempre estarão habilitadas para o usuário. |
| `label` | `string` | não | Texto exibido para o usuário ao lado do checkbox. |
| `value` | `string` | não | Valor retornado no model. |
---
# PoCodeEditorRegisterable
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-registerable
Interface para configuração de novas sintaxes ao code editor.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `language` | `string` | não | Nome da sintaxe a ser registrada no code editor. |
| `options` | `PoCodeEditorRegisterableOptions` | não | Opções de configuração da sintaxe customizada. |
| `suggestions` | `PoCodeEditorRegisterableSuggestionType` | sim | Lista de sugestões para a função de autocomplete. |
---
# PoCodeEditorRegisterableOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-registerable-options
Interface para configuração de Opções de novas sintaxes ao code editor.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `escapes` | `RegExp` | não | Escapes específicos da sintaxes. |
| `ignoreCase` | `boolean` | sim | Define se a sintaxe será case sensitive ou não. |
| `keywords` | `Array` | não | Palavras chaves da sintaxe. |
| `operators` | `Array` | não | Operadores específicos da sintaxe. |
| `symbols` | `RegExp` | não | Símbolos específicos da sintaxes. |
| `tokenizer` | `PoCodeEditorRegisterableTokens` | não | Interface para recebimento de token específicos da sintaxe. |
---
# PoCodeEditorRegisterableSuggestion
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-registerable-suggestion
Interface para configuração da lista de sugestão do autocomplete do code editor.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `documentation` | `string` | sim | Texto de ajuda que será exibido caso o usuário deseje ver mais informações sobre a sugestão. |
| `insertText` | `string` | não | Texto que será inserido no editor ao selecionar a sugestão exibida pelo autocomplete. |
| `label` | `string` | não | Texto que será exibido na lista de sugestões. |
---
# PoCodeEditorRegisterableSuggestionType
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-registerable-suggestion-type
Interface do objeto usado pelo monaco para lista de sugestão do autocomplete do code editor.
---
# PoCodeEditorRegisterableTokens
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-registerable-tokens
Interface para configuração de tokens de novas sintaxes ao code editor.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `comment` | `Array` | sim | Tokenizer de comentários. |
| `interpolated` | `Array` | sim | Sequência de interpolação. |
| `interpolatedCompound` | `Array` | sim | Sequência de interpolação composta. |
| `root` | `Array` | não | Principal tokenizer da sintaxe customizada. |
| `string` | `Array` | sim | Tokenizer de strings. |
| `whitespace` | `Array` | sim | Tokenizer de whitespaces. |
---
# PoCodeEditorSuggestionList
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-code-editor-suggestion-list
Interface do objeto usado pelo monaco para lista de sugestão do autocomplete do code editor.
Utilizado internamente pelo serviço PoCodeEditorSuggestionService
---
# PoComboFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-combo-filter
Interface para os serviços que serão utilizados no po-combo.
## Métodos
### `getFilteredData(params: any, filterParams: any)`
Método responsável por retornar um Observable que contém uma coleção de objetos que seguem a interface PoComboOption,
será informado por parametro o campo, de acordo com o fieldLabel, e o valor a ser pesquisado.
### `getObjectByValue(value: TypeUnion, filterParams: any)`
Método responsável por retornar um Observable que contém apenas o objeto filtrado que seguem a interface PoComboOption,
será informado por parametro valor a ser pesquisado.
---
# PoComboLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-combo-literals
Interface para definição das literais usadas no `po-combo`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `chooseOption` | `string` | sim | Texto exibido quando o combo estiver vazio. |
| `clean` | `string` | sim | Texto do aria-label do botão de limpar |
| `noData` | `string` | sim | Texto exibido quando não houver itens na lista ou se, a pesquisa do filtro não retornar nenhum item. |
---
# PoComboOption
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-combo-option
Interface que define as opções que serão exibidas na lista do `po-combo`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | sim | Descrição exibida nas opções da lista. |
| `value` | `string | number` | não | Valor do objeto que será atribuído ao *model*. |
---
# PoComboOptionGroup
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-combo-option-group
Interface dos agrupamentos da coleção que será exibida no dropdown do `po-combo`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Título para cada grupo de opções. |
| `options` | `Array` | não | Lista de itens a serem exibidos. |
---
# PoContextMenuItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-context-menu-item
Interface para os itens do componente po-context-menu.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação executada ao clicar no item. |
| `label` | `string` | não | Texto do item de menu. |
| `selected` | `boolean` | sim | Estado de seleção do item. |
---
# PoDataTransform
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-data-transform
Classe responsável por adaptar dados de APIs que não seguem
o padrão de [API do PO UI](https://po-ui.io/guides/api).
Essa classe deve ser estendida por uma classe que implemente cada um de seus métodos, adaptando os parâmetros de
acordo com a API do *backend* existente que se deseja comunicar.
## Métodos
### `getDateFieldName()`
Retorna o nome da propriedade responsável por informar a data da última sincronização.
### `getItemsFieldName()`
Retorna o nome da propriedade responsável por informar a lista de registros vindos da API.
### `getPageParamName()`
Retorna o nome da propriedade responsável por informar o número da página de registros que a API
recebe como parâmetro.
### `getPageSizeParamName()`
Retorna o nome da propriedade responsável pela quantidade de registros que serão exibidos por página
que a API recebe como parâmetro.
### `hasNext()`
Retorna um valor `boolean`, responsável por informar se há uma nova página de registros disponível.
---
# PoDateSeparator
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-date-separator
Interface para o separador de data das linguagens disponíveis no sistema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `locale` | `string` | sim | Código do locale [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) |
| `separator` | `string` | sim | Separador de data |
---
# PoDatepickerRange
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-datepicker-range
Interface para definição do objeto com a data inicial e final usadas no `po-datepicker-range`.
> Os formatos de data permitidos seguem os padrões definidos na
[descrição do componente](/documentation/po-datepicker-range#accepted-formats).
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `end` | `string | Date` | não | Data final |
| `start` | `string | Date` | não | Data inicial |
---
# PoDatepickerRangeLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-datepicker-range-literals
Interface para definição das literais usadas no `po-datepicker-range`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `clean` | `string` | sim | Limpar campo. |
| `dateOutOfPeriod` | `string` | sim | Data fora do período. |
| `endDate` | `string` | sim | Data final. |
| `invalidDate` | `string` | sim | Data inválida. |
| `invalidFormat` | `string` | sim | Data em formato inválido. |
| `open` | `string` | sim | Abrir calendário. |
| `startDate` | `string` | sim | Data inicial. |
| `startDateGreaterThanEndDate` | `string` | sim | Data inicial maior que data final. |
---
# PoDialogAlertLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dialog-alert-literals
Interface para definição das literais usadas no serviço `po-dialog` para o tipo alerta.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `ok` | `string` | sim | Rótulo do botão de "Ok". |
---
# PoDialogAlertOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dialog-alert-options
Interface para o título e a mensagem do serviço po-dialog. Interface com as propriedades da caixa de diálogo de alerta do serviço po-dialog.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `componentsSize` | `string` | sim | Define o tamanho dos componentes de formulário no dialog: |
| `literals` | `PoDialogAlertLiterals` | sim | Objeto com as literais usadas no `po-dialog` do tipo alerta. |
| `message` | `string` | não | Mensagem da caixa de diálogo. |
| `ok` | `Function` | sim | Ação executada ao fechar o alerta pelo botão "Ok". |
| `title` | `string` | não | Título da caixa de diálogo. |
---
# PoDialogConfirmLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dialog-confirm-literals
Interface para definição das literais usadas no serviço `po-dialog` para o tipo confirmação.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `cancel` | `string` | sim | Rótulo do botão de "Cancelar". |
| `confirm` | `string` | sim | Rótulo do botão de "Confirmar". |
---
# PoDialogConfirmOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dialog-confirm-options
Interface para o título e a mensagem do serviço po-dialog. Interface com as propriedades da caixa de diálogo de confirmação do serviço po-dialog.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `cancel` | `Function` | sim | Ação de cancelamento da caixa de diálogo. |
| `close` | `Function` | sim | Ação de fechamento da caixa de diálogo. |
| `componentsSize` | `string` | sim | Define o tamanho dos componentes de formulário no dialog: |
| `confirm` | `Function` | não | Ação de confirmação da caixa de diálogo. |
| `literals` | `PoDialogConfirmLiterals` | sim | Objeto com as literais usadas no `po-dialog` do tipo confirmação. |
| `message` | `string` | não | Mensagem da caixa de diálogo. |
| `title` | `string` | não | Título da caixa de diálogo. |
---
# PoDisclaimer
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-disclaimer
Interface que representa o objeto `po-disclaimer`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hideClose` | `boolean` | sim | Se verdadeiro, oculta o botão para fechar o *disclaimer*. |
| `label` | `string` | sim | Texto de exibição do objeto. |
| `property` | `string` | sim | Nome da propriedade vinculada ao objeto *disclaimer*. |
| `value` | `any` | não | Valor do objeto. |
---
# PoDisclaimerGroup
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-disclaimer-group
Interface que representa o objeto `po-disclaimer-group`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `change` | `Function` | sim | Função que será disparada quando a lista de *disclaimers* for modificada. |
| `disclaimers` | `Array` | não | Lista de *disclaimers*. |
| `hideRemoveAll` | `boolean` | sim | Oculta o botão para remover todos os *disclaimers* do grupo. |
| `remove` | `Function` | sim | Função que será disparada quando um *disclaimer* for removido da lista de |
| `removeAll` | `Function` | sim | Função que será disparada quando todos os *disclaimers* forem removidos da lista de *disclaimers* pelo usuário, |
| `title` | `string` | sim | Título do grupo de *disclaimers*. |
---
# PoDisclaimerGroupRemoveAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-disclaimer-group-remove-action
Estrutura do objeto representando o estado dos *disclaimers* após a remoção.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `currentDisclaimers` | `Array` | não | Lista com os *disclaimers* atuais (restantes). |
| `removedDisclaimer` | `PoDisclaimer` | não | Disclaimer* que foi removido. |
---
# PoDropdownAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dropdown-action
Interface para as ações do componente `po-dropdown`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, sendo possível passar o nome ou a referência da função. |
| `disabled` | `boolean | Function` | sim | Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo da ação. |
| `selected` | `boolean` | sim | Define se a ação está selecionada. |
| `separator` | `boolean` | sim | Atribui uma linha separadora acima do item. |
| `subItems` | `Array` | sim | Define uma lista de subitens para criação de menus aninhados. |
| `type` | `string` | sim | Define a cor do item. |
| `url` | `string` | sim | URL para redirecionamento. Aceita rotas internas e links externos. |
| `visible` | `boolean | Function` | sim | Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. |
---
# PoDynamicFormField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-form-field
Interface para definição das propriedades dos campos de entrada que serão criados dinamicamente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `additionalHelp` | `Function` | sim | Evento disparado ao clicar no ícone de ajuda adicional. |
| `additionalHelpTooltip` | `string` | sim | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `advancedFilters` | `Array` | sim | Lista de objetos dos campos que serão criados na busca avançada. |
| `appendBox` | `boolean` | sim | Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da |
| `autoHeight` | `boolean` | sim | Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo com o número de itens selecionados e a extensão dos mesmos, mantendo-os sempre visíveis. |
| `autoUpload` | `boolean` | sim | Define se o envio do arquivo será automático ao selecionar o mesmo. |
| `booleanFalse` | `string` | sim | Texto exibido quando o valor do componente for *false*. |
| `booleanTrue` | `string` | sim | Texto exibido quando o valor do componente for *true*. |
| `changeOnEnter` | `boolean` | sim | Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada no `po-combo`. |
| `changeVisibleColumns` | `Function` | sim | Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. |
| `clean` | `boolean` | sim | Se verdadeiro, o campo receberá um botão para ser limpo. |
| `columnRestoreManager` | `Function` | sim | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `columns` | `Array | number` | sim | Define as colunas para utilização da busca avançada. Usada somente em conjunto com a propriedade `searchService`, |
| `compactLabel` | `boolean` | sim | Define se o título do campo será exibido de forma compacta. |
| `container` | `string` | sim | Exibirá um container para todos os campos abaixo dessa propriedade. |
| `customAction` | `PoProgressAction` | sim | Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito |
| `customActionClick` | `(file: PoUploadFile) => void` | sim | Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. |
| `debounceTime` | `number` | sim | Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. Será utilizada apenas quando houver serviço (`p-filter-service`). |
| `decimalsLength` | `number` | sim | Quantidade máxima de casas decimais. |
| `directory` | `boolean` | sim | Permite a seleção de diretórios contendo um ou mais arquivos para envio. |
| `disabled` | `boolean` | sim | Desabilita o campo caso informar o valor *true*. |
| `disabledInitFilter` | `boolean` | sim | Desabilita o filtro inicial no serviço do `po-combo`, que é executado no primeiro clique no campo. |
| `disabledTabFilter` | `boolean` | sim | Se verdadeiro, desabilitará a busca de um item via TAB no `po-combo`. |
| `divider` | `string` | sim | Exibirá um divisor acima, utilizando o seu conteudo como título. |
| `dragDrop` | `boolean` | sim | Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos |
| `dragDropHeight` | `number` | sim | Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. |
| `errorAsyncFunction` | `(value) => Observable` | sim | Função executada para realizar a validação assíncrona personalizada. |
| `errorAsyncProperties` | `ErrorAsyncProperties` | sim | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `boolean` | sim | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorMessage` | `string` | sim | Mensagem que será apresentada quando o campo ficar inválido. |
| `fieldLabel` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como descrição do campo. |
| `fieldValue` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como valor do campo. |
| `filterMinlength` | `number` | sim | Valor mínimo de caracteres para realizar o filtro no serviço do `po-combo`. |
| `filterMode` | `PoMultiselectFilterMode` | sim | Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. |
| `forceBooleanComponentType` | `ForceBooleanComponentEnum` | sim | Valores aceitos: |
| `forceOptionsComponentType` | `ForceOptionComponentEnum` | sim | pode ser utilizada em conjunto com a propriedade `options` forçando o componente a renderizar um `po-select` ou `po-radio-group`. |
| `formField` | `string` | sim | Nome do campo de formulário que será enviado para o serviço informado na propriedade `url`. |
| `format` | `string | Array` | sim | Formato de exibição no campo. |
| `formatModel` | `boolean` | sim | Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou |
| `formatTime` | `string` | sim | Define o formato de exibição do timer (`'12'` ou `'24'`). |
| `gridColumns` | `number` | sim | Tamanho de exibição do campo em telas. |
| `gridLgColumns` | `number` | sim | Tamanho de exibição do campo em telas grandes (lg). |
| `gridLgPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). |
| `gridMdColumns` | `number` | sim | Tamanho de exibição do campo em telas médias (md). |
| `gridMdPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). |
| `gridSmColumns` | `number` | sim | Tamanho de exibição do campo em telas menores (sm). |
| `gridSmPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). |
| `gridXlColumns` | `number` | sim | Tamanho de exibição do campo em telas extra grandes (xl). |
| `gridXlPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). |
| `headers` | `{
[name: string]: string | Array;
}` | sim | Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. |
| `help` | `string` | sim | Texto de ajuda. |
| `helper` | `string | PoHelperOptions` | sim | Texto simples que será apresentado como auxílio ao campo ou objeto com as definições do po-helper. |
| `hideLabelStatus` | `boolean` | sim | Indica se o status do `model` será escondido visualmente ao lado do switch |
| `hidePasswordPeek` | `boolean` | sim | Permite esconder a função de espiar a senha digitada no `po-password`. |
| `hideRestrictionsInfo` | `boolean` | sim | Oculta visualmente as informações de restrições para o upload. |
| `hideSearch` | `boolean` | sim | Esconde o campo de pesquisa existente dentro do dropdown do `po-multiselect`. |
| `hideSelectAll` | `boolean` | sim | Indica se o campo "Selecionar todos" do `po-multiselect` será escondido. |
| `hideSelectButton` | `boolean` | sim | Omite o botão de seleção de arquivos. |
| `hideSendButton` | `boolean` | sim | Omite o botão de envio de arquivos. |
| `icon` | `string | TemplateRef` | sim | Define o ícone que será exibido no início do campo. |
| `infiniteScroll` | `boolean` | sim | Se verdadeiro ativa a funcionalidade de scroll infinito para o combo ou lookup, ao chegar ao fim da tabela executará nova busca dos dados conforme paginação. |
| `infiniteScrollDistance` | `number` | sim | Define o percentual necessário para disparar o evento show-more, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%. |
| `invalidValue` | `boolean` | sim | Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. |
| `isoFormat` | `PoDatepickerIsoFormat` | sim | Padrão de formatação para saída do model, independentemente do formato de entrada. |
| `key` | `boolean` | sim | Identificador |
| `keydown` | `Function` | sim | Função executada quando uma tecla é pressionada enquanto o foco está no componente. |
| `label` | `string` | sim | Rótulo do campo exibido. |
| `labelPosition` | `PoSwitchLabelPosition` | sim | Posição de exibição do rótulo do PoSwitch. |
| `listboxControlPosition` | `'top' | 'bottom'` | sim | Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). |
| `literals` | `PoLookupLiterals | PoMultiselectLiterals | PoComboLiterals | PoDatepickerRangeLiterals | PoUploadLiterals` | sim | Objeto com as literais usadas para os seguintes componentes: `po-lookup`, `po-multiselect`, `po-combo` e `po-datepicker-range`. |
| `loading` | `boolean` | sim | Habilita um estado de carregamento no componente, desabilitando-o e exibindo um ícone de carregamento. |
| `locale` | `string` | sim | Define a localidade a ser utilizada no componente. |
| `mask` | `string` | sim | Máscara para o campo. |
| `maskFormatModel` | `boolean` | sim | Define que o valor do componente será conforme especificado na mascára. O valor padrão é `false`. |
| `maskNoLengthValidation` | `boolean` | sim | 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. |
| `maxLength` | `number` | sim | Tamanho máximo de caracteres. |
| `maxTime` | `string` | sim | Define o horário máximo permitido para seleção no timer. |
| `maxValue` | `string | number` | sim | Valor máximo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minLength` | `number` | sim | Tamanho mínimo de caracteres. |
| `minTime` | `string` | sim | Define o horário mínimo permitido para seleção no timer. |
| `minValue` | `string | number` | sim | Valor mínimo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minuteInterval` | `number` | sim | Define o intervalo entre os minutos exibidos no painel do timepicker. |
| `mode` | `'month-year' | 'year'` | sim | Define o modo de seleção do `po-datepicker`. |
| `modelFormat` | `PoTimepickerModelFormat` | sim | Define o formato do valor do horário a ser utilizado no model do `po-timepicker`. |
| `multiple` | `boolean` | sim | Permite a seleção de múltiplos itens. |
| `noAutocomplete` | `boolean` | sim | Define a propriedade nativa `autocomplete` do campo como off. |
| `offsetColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas. |
| `offsetLgColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas grandes (lg). |
| `offsetMdColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas médias (md). |
| `offsetSmColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas menores (sm). |
| `offsetXlColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas extra grandes (xl). |
| `onError` | `Function` | sim | Evento será disparado quando ocorrer algum erro no envio do arquivo. |
| `onSuccess` | `Function` | sim | Evento será disparado quando o envio do arquivo for realizado com sucesso. |
| `onUpload` | `Function` | sim | Função que será executada no momento de realizar o envio do arquivo, |
| `optional` | `boolean` | sim | Define se a indicação de campo opcional será exibida. |
| `options` | `Array | Array | Array | Array | Array` | sim | Lista de opções que serão exibidos em um componente, podendo selecionar uma opção. |
| `optionsMulti` | `boolean` | sim | Permite que o usuário faça múltipla seleção dentro da lista de opções. |
| `optionsService` | `string | PoComboFilter | PoMultiselectFilter` | sim | Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. |
| `order` | `number` | sim | Informa a ordem de exibição do campo. |
| `params` | `any` | sim | Objeto que será enviado como parâmetro nas requisições de busca usados pelos componentes `po-lookup` e |
| `pattern` | `string` | sim | Regex para validação do campo. |
| `placeholder` | `string` | sim | Mensagem que será exibida enquanto o campo não estiver preenchido. |
| `placeholderSearch` | `string` | sim | Placeholder do campo de pesquisa do `po-multiselect`. |
| `property` | `string` | não | Nome de referência do campo. |
| `range` | `boolean` | sim | O controle passa a permitir a entrada de um intervalo ao invés de um único valor. |
| `rangePresetOptions` | `Array` | sim | Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário. |
| `rangePresets` | `boolean | Array` | sim | Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário. |
| `rangePresetsOrder` | `'asc' | 'desc'` | sim | Define a ordenação dos presets na lista. |
| `readonly` | `boolean` | sim | Indica que o campo será somente leitura. |
| `removeInitialFilter` | `boolean` | sim | Define que o filtro no primeiro clique será removido. |
| `required` | `boolean` | sim | Define a obrigatoriedade do campo. |
| `requiredFieldErrorMessage` | `boolean` | sim | Exibe a mensagem setada na propriedade `errorMessage` se o campo estiver vazio e for requerido. |
| `restrictions` | `PoUploadFileRestrictions` | sim | Objeto que segue a definição da interface `PoUploadFileRestrictions`, |
| `rows` | `number` | sim | Quantidade de linhas exibidas no `po-textarea`. |
| `searchService` | `string | PoLookupFilter` | sim | Serviço que será utilizado para realizar a busca avançada. Pode ser utilizado em conjunto com a propriedade `columns`. |
| `secondInterval` | `number` | sim | Define o intervalo entre os segundos exibidos no painel do timepicker. |
| `secret` | `boolean` | sim | Esconde a informação estilo *password*, pode ser utilizado quando o tipo de dado for *string*. |
| `showRequired` | `boolean` | sim | Define se a indicação de campo obrigatório será exibida. |
| `showSeconds` | `boolean` | sim | Exibe a coluna de segundos no painel do timepicker. |
| `showThumbnail` | `boolean` | sim | Exibe a pré-visualização de imagens ao anexá-las. |
| `size` | `string` | sim | Define o tamanho dos componentes de formulário no template conforme suas respectivas documentações: |
| `sort` | `boolean` | sim | Indica que a lista definida na propriedade p-options será ordenada pela descrição. |
| `step` | `number` | sim | Intervalo utilizado no `po-number`. |
| `thousandMaxlength` | `number` | sim | Quantidade máxima de dígitos antes do separador decimal. O valor máximo permitido é 13 |
| `type` | `string | PoDynamicFieldType` | sim | Tipo do valor campo. |
| `url` | `string` | sim | URL que deve ser feita a requisição com os arquivos selecionados. |
| `validate` | `string | Function` | sim | Função ou serviço para validar as **mudanças do campo**. |
| `visible` | `boolean` | sim | Indica se o campo será visível. |
| `yearRangeLimit` | `number` | sim | Define o limite de anos exibidos na lista de anos do `po-datepicker` nos modos `month-year` e `year`. |
---
# PoDynamicFormFieldChanged
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-form-field-changed
Estrutura dos valores que serão disparados quando houver uma mudança em um campo ou no formulário.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `property` | `string` | não | Valor da propriedade do campo. |
| `value` | `any` | não | Novo valor do campo. |
---
# PoDynamicFormFieldValidation
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-form-field-validation
Estrutura de retorno da validação de um campo.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `field` | `PoDynamicFormField` | sim | Novas definições das propriedades do campo. |
| `focus` | `boolean` | sim | Coloca o foco no campo após a validação. |
| `value` | `any` | sim | Novo valor do campo |
---
# PoDynamicFormLoad
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-form-load
Estrutura de retorno no carregamento do formulário.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `fields` | `Array` | sim | Lista com as novas definições dos campos. |
| `focus` | `string` | sim | Nome do campo que receberá o foco. |
| `value` | `any` | sim | Objeto contendo os novos valores. |
---
# PoDynamicFormValidation
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-form-validation
Estrutura de retorno da validação do formulário.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `fields` | `Array` | sim | Lista com as novas definições dos campos. |
| `focus` | `string` | sim | Nome do campo que receberá o foco. |
| `value` | `any` | sim | Objeto contendo os novos valores. |
---
# PoDynamicViewField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-view-field
Interface para definição das propriedades dos campos de visualização que serão criados dinamicamente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `alt` | `string` | sim | Defini o texto alternativo descrevendo a imagem. |
| `booleanFalse` | `string` | sim | Texto exibido quando o valor do componente for *false*. |
| `booleanTrue` | `string` | sim | Texto exibido quando o valor do componente for *true*. |
| `color` | `string` | sim | Determina a cor da tag. As maneiras de customizar as cores são: |
| `concatLabelValue` | `boolean` | sim | Permite que seja exibido em tela, de forma concatenada as propriedades `fieldLabel` + `fieldValue`. |
| `container` | `string` | sim | Exibirá um container para todos os campos abaixo dessa propriedade. |
| `divider` | `string` | sim | Exibirá um divisor acima, utilizando o seu conteudo como título. |
| `fieldLabel` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como descrição do campo. |
| `fieldValue` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como valor do campo. |
| `format` | `string | Array` | sim | Define o formato de exibição para o valor de um campo. |
| `gridColumns` | `number` | sim | Tamanho de exibição do campo em telas. |
| `gridLgColumns` | `number` | sim | Tamanho de exibição do campo em telas grandes (lg). |
| `gridLgPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). |
| `gridMdColumns` | `number` | sim | Tamanho de exibição do campo em telas médias (md). |
| `gridMdPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). |
| `gridSmColumns` | `number` | sim | Tamanho de exibição do campo em telas menores (sm). |
| `gridSmPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). |
| `gridXlColumns` | `number` | sim | Tamanho de exibição do campo em telas extra grandes (xl). |
| `gridXlPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). |
| `height` | `string` | sim | Defini o texto alternativo descrevendo a imagem. |
| `icon` | `string` | sim | Define um ícone que será exibido ao lado do valor para o campo do tipo *tag*. |
| `image` | `boolean` | sim | Possibilita a utilização de imagem. |
| `isArrayOrObject` | `boolean` | sim | Define que a propriedade `property` é uma lista ou um objeto. |
| `key` | `boolean` | sim | Identificador |
| `label` | `string` | sim | Rótulo do campo exibido. |
| `offsetColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas. |
| `offsetLgColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas grandes (lg). |
| `offsetMdColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas médias (md). |
| `offsetSmColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas menores (sm). |
| `offsetXlColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas extra grandes (xl). |
| `options` | `Array<{
label: string;
value: string | number;
}>` | sim | Lista de opções que podem ser vinculadas à propriedade p-value. |
| `optionsMulti` | `boolean` | sim | Habilita a visualização de múltiplos itens. |
| `optionsService` | `string | PoComboFilter | PoMultiselectFilter` | sim | Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. |
| `order` | `number` | sim | Informa a ordem de exibição do campo. |
| `params` | `any` | sim | Objeto que será enviado como parâmetro nas requisições de busca `searchService` ou `optionsService` |
| `property` | `string` | não | Nome de referência do campo. |
| `searchService` | `string | PoDynamicViewRequest` | sim | Serviço customizado para um campo em específico. |
| `tag` | `boolean` | sim | Indica se o campo será um `po-tag`. |
| `textColor` | `string` | sim | Determina a cor do texto da tag. As maneiras de customizar as cores são: |
| `type` | `string | PoDynamicFieldType` | sim | Tipo do valor campo. |
| `visible` | `boolean` | sim | Indica se o campo será visível. |
---
# PoDynamicViewRequest
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-view-request
Define o tipo de busca customizada para um campo em específico.
## Métodos
### `getObjectByValue(value: TypeUnion, filterParams: any)`
Método responsável por enviar um valor que será buscado no serviço.
---
# PoEntity
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-entity
Uma instância `PoEntity` representa um *schema* e ela contém métodos que possibilitam manipular seus registros,
como por exemplo: buscar, criar e remover.
Esta instância pode ser obtida a partir do retorno do método `PoSyncService.getModel('schema name')`.
## Métodos
### `find(filter: object, fields: string)`
Busca os registros do *schema*, podendo filtrar o resultado a partir do filtro passado e retornando apenas
os campos definidos.
Para que esta busca seja concluída é necessário utilizar o método `PoQueryBuilder.exec()`.
Veja mais em: [PoQueryBuilder](/documentation/po-query-builder).
### `findById(id: any, fields: string)`
Busca um registro pelo seu *id*.
Para que esta busca seja concluída é necessário utilizar o método `PoQueryBuilder.exec()`.
Veja mais em: [PoQueryBuilder](/documentation/po-query-builder).
### `findOne(filter: any, fields: string)`
Semelhante ao método `PoEntity.find()`, porém retorna apenas o primeiro registro encontrado na busca.
Para que esta busca seja concluída é necessário utilizar o método `PoQueryBuilder.exec()`.
Veja mais em: [PoQueryBuilder](/documentation/po-query-builder).
### `remove(record: object, customRequestId: string)`
Remove um registro.
### `save(record: object, customRequestId: string)`
Altera ou inclui um registro.
> O registro será alterado se ele possuir um *id*, caso contrário um novo registro será criado.
### `saveAll(records: TypeApplication, customRequestIds: TypeUnion)`
Salva uma lista de registros em lote.
> Para cada registro da lista, será inserido um novo registro se o mesmo não tiver *id*, caso contrário
será contado como uma atualização de um registro existente.
---
# PoEventSourcingErrorResponse
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-event-sourcing-error-response
Classe que define a resposta de erro para um item da fila de eventos que não foi enviado ao servidor por
alguma inconsistência.
> Pode ser utilizada em casos onde um item da fila é enviado ao servidor com inconsistência nos dados, por exemplo
uma operação de *delete* ou *update* sem o `id` do objeto.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `message` | `string` | não | Mensagem de erro. |
| `operation` | `PoEventSourcingOperation` | não | Operação que havia sido requisitada. |
---
# PoEventSourcingItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-event-sourcing-item
Classe que irá mapear as informações dos `EventSourcing` gerados pela aplicação.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `customRequestId` | `string` | sim | Identificador customizado do registro. |
| `dateTime` | `number` | não | Valor numérico correspondente ao horário da data em que o registro foi criado de acordo com o horário universal. |
| `id` | `number` | não | Identificador do registro. |
| `operation` | `PoEventSourcingOperation` | não | Especifica a operação que deverá ser realizada na API. |
| `record` | `any | PoHttpRequestData` | não | Objeto *json* com os dados do registro. |
| `schema` | `string` | sim | Nome do *schema* à qual se refere o `EventSourcing`. |
---
# PoFilterChipSelectedChange
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-filter-chip-selected-change
Interface que define o objeto emitido pelo evento `p-selected-change`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Rótulo de texto do *chip*. |
| `selected` | `boolean` | não | Estado de seleção do *chip* (`true` para selecionado, `false` para desmarcado). |
---
# PoGaugeOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-gauge-options
Interface* para configurações dos elementos do gráfico.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `descriptionChart` | `string` | sim | Define a descrição do gráfico exibido acima do gráfico. |
| `header` | `PoChartHeaderOptions` | sim | Define um objeto do tipo `PoChartHeaderOptions` para configurar a exibição de botões no cabeçalho do gráfico. |
| `pointer` | `boolean` | sim | Define a exibição do ponteiro. |
| `showContainerGauge` | `boolean` | sim | Esconde a estilização do container em volta do gráfico. |
| `showFromToLegend` | `boolean` | sim | Exibe os valores das propriedades `from` e `to` no gráfico do no texto da legenda entre parênteses. |
| `subtitleGauge` | `string` | sim | Define um subtítulo para o Gauge. Indicamos um subtítulo pequeno, com uma quantidade máxima de 32 caracteres na altura padrão. |
---
# PoGaugeRanges
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-gauge-ranges
Interface que define os alcances das cores do gauge.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `color` | `string` | sim | Determina a cor do alcance. As maneiras de customizar o *preset* padrão de cores são: |
| `from` | `number` | sim | Alcance inicial da cor. O valor padrão é 0. |
| `label` | `string` | sim | O texto para a legenda do alcance. |
| `to` | `number` | sim | Alcance final da cor. O valor padrão é 100. |
---
# PoGridRowActions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-grid-row-actions
Ações executadas durante a manipulação das linhas do grid.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `afterRemove` | `() => void` | sim | Método executado após uma linha do grid ser removida. |
| `afterSave` | `(row: any) => void` | sim | Método executado após uma linha do grid ser salva, ao ser executado, o método irá receber um objeto com os dados atualizados. |
| `beforeInsert` | `(row: any) => boolean` | sim | Método executado antes de uma nova linha ser inserida no grid, se o método retornar algo diferente de `true` a ação |
| `beforeRemove` | `(row: any) => boolean` | sim | Método executado antes de uma linha ser removida do grid, ao ser executado, o método irá receber uma cópia do objeto |
| `beforeSave` | `(updatedRow: any, originalRow: any) => boolean` | sim | Método executado antes de uma linha ser atualizada, ao ser executado, o método irá receber um objeto com os dados atualizados |
---
# PoHeaderActionPopoverAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-action-popover-action
Interface* que define um template para uma ação.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `content` | `TemplateRef` | não | Template que será renderizado dentro do popover. |
| `width` | `number` | sim | Largura, em pixels, do template renderizado dentro do popover. |
---
# PoHeaderActionTool
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-action-tool
Interface* que define a seção de Actions do header.
Indicação de uso:
- Primeira ação destinada à app launcher.
- Segunda ação (terceiro ícone) destinada à notificações.
- Terceira ação (segundo ícone) destinada para agrupamento de ações.
> Caso seja passado items e popover, o componente irá renderizar o popover e os itens serão ignorados.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Evento emitido ao clicar em uma ação |
| `badge` | `number` | sim | Valor númerico com a repsentação de notificações |
| `icon` | `string` | sim | Ícone do botão de ação |
| `items` | `Array` | sim | Itens de ações |
| `label` | `string` | sim | Título da ação |
| `link` | `string` | sim | link utilizado no redirecionamento das páginas. |
| `popover` | `PoHeaderActionPopoverAction` | sim | Template que será utilizado na ação |
| `tooltip` | `string` | sim | Texto que será apresentado na tooltip |
---
# PoHeaderActionToolItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-action-tool-item
Interface* que define uma lista de ações.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | não | Evento emitido ao clicar em uma ação |
| `label` | `string` | não | Label da ação |
---
# PoHeaderActions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-actions
Interface* que define uma lista de ações no sub-menu.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Evento da ação |
| `id` | `string` | sim | Identificador da ação |
| `label` | `string` | não | Label da ação |
| `link` | `string` | sim | link utilizado no redirecionamento das páginas. |
---
# PoHeaderBrand
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-brand
Interface* que define a seção de brand.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Evento da ação |
| `link` | `string` | sim | link utilizado no redirecionamento das páginas. |
| `logo` | `string` | sim | Imagem da marca |
| `smallLogo` | `string` | sim | Imagem da marca quando a tela é menor que 960px |
| `title` | `string` | sim | Título da marca |
---
# PoHeaderLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-literals
Interface para definição das literais usadas no `po-header`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `headerLinks` | `string` | sim | Texto exibido no item de menu no qual os itens do header são agrupados quando está no modo responsivo. |
| `notifications` | `string` | sim | Texto para indicação de notificação, caso seja passado um valor válido na propriedade `badge` |
---
# PoHeaderUser
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-header-user
Interface* que define a seção de Customer do header.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Evento emitido ao clicar na seção |
| `avatar` | `string` | não | Logo representando o perfil |
| `customerBrand` | `string` | não | Imagem da marca |
| `items` | `Array` | sim | Itens de ações |
| `popover` | `PoHeaderActionPopoverAction` | sim | Template que será utilizado na ação |
| `status` | `'positive' | 'negative' | 'warning' | 'disabled'` | sim | Indicação representando o estado do usuário |
---
# PoHelperOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-helper-options
Interface para configuração das opções de ajuda (*helper*).
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `content` | `string` | sim | Texto explicativo exibido no popover. |
| `eventOnClick` | `Function` | sim | Evento disparado ao clicar no ícone do helper. |
| `footerAction` | `{
label: string;
action: Function;
}` | sim | Ação customizada exibida no rodapé do popover. |
| `title` | `string` | sim | Título do helper exibido no popover. |
| `type` | `'info' | 'help'` | sim | Tipo do ícone exibido: `info` ou `help`. |
---
# PoHttpRequestData
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-http-request-data
Interface para definição de uma requisição HTTP.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `body` | `any` | sim | Corpo da requisição. |
| `formField` | `string` | sim | Nome da propriedade que conterá o arquivo enviado para o servidor |
| `headers` | `Array` | sim | Cabeçalho da requisição. |
| `method` | `PoHttpRequestType` | não | Método HTTP que será utilizado. |
| `url` | `string` | não | URL que será utilizada na requisição. |
---
# PoI18nConfig
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-i18n-config
Interface para a configuração do módulo `PoI18nModule`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `contexts` | `PoI18nConfigContext` | não | Deve ser atribuído a esta propriedade um objeto que contenha os contextos com os |
| `default` | `PoI18nConfigDefault` | sim | Configurações padrões. |
---
# PoI18nConfigContext
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-i18n-config-context
Interface para a configuração dos contextos do módulo `PoI18nModule`.
---
# PoI18nConfigDefault
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-i18n-config-default
Interface para a configuração padrão do módulo PoI18nModule.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `cache` | `boolean` | sim | Define se as literais buscadas no serviço deverão ser armazenadas no cache do |
| `context` | `string` | sim | Define o contexto que será buscado por padrão pelo serviço. |
| `language` | `string` | sim | Idioma que será buscado por padrão pelo serviço. |
---
# PoI18nLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-i18n-literals
Interface para o método `getLiterals()` do serviço PoI18nService.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `context` | `string` | sim | Contexto utilizado na busca das literais. |
| `language` | `string` | sim | Idioma a ser buscado. |
| `literals` | `Array` | sim | Lista das literais. |
---
# PoJobScheduler
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-job-scheduler
Estrutura do *payload* enviado nas requisições para salvar e/ou atualizar as tarefas do *Job Scheduler*.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `daily` | `{
hour: number;
minute: number;
}` | sim | Define uma repetição diária. |
| `executionParameter` | `object` | sim | Objeto contendo os nomes das propriedades dos parâmetros e os valores preenchidos pelo usuário. |
| `firstExecution` | `string` | sim | Data da primeira execução. |
| `monthly` | `{
day: number;
hour: number;
minute: number;
}` | sim | Define uma repetição mensal. |
| `processID` | `string` | não | Identificador do processo. |
| `recurrent` | `boolean` | sim | Permite uma execução recorrente. |
| `weekly` | `{
daysOfWeek: Array;
hour: number;
minute: number;
}` | sim | Define uma repetição semanal. |
---
# PoLanguage
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-language
Interface para descrição das linguagens disponíveis no sistema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `description` | `string` | sim | Descrição do idioma |
| `language` | `string` | sim | Código do idioma [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) |
---
# PoListBoxLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-list-box-literals
Interface para definição de literais utilizadas no `po-listbox`
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `backToPreviousGroup` | `string` | sim | Texto do botão para voltar ao agrupador anterior. |
| `noItems` | `string` | sim | Texto exibido quando não houver itens na lista |
| `placeholderSearch` | `string` | sim | Texto do *placeholder* do campo de busca. |
| `selectAll` | `string` | sim | Texto do checkbox para selecionar todos os itens. |
---
# PoListViewAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-list-view-action
Interface que define as ações do componente `po-list-view`.
> As propriedades `subItems`, `separator`, `url` e `selected` serão vistas a partir da terceira ação e somente quando
definir quatro ações ou mais.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, sendo possível passar o nome ou a referência da função. |
| `disabled` | `boolean | Function` | sim | Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo da ação. |
| `selected` | `boolean` | sim | Define se a ação está selecionada. |
| `separator` | `boolean` | sim | Atribui uma linha separadora acima do item. |
| `subItems` | `Array` | sim | Define uma lista de subitens para criação de menus aninhados. |
| `type` | `string` | sim | Define a cor do item. |
| `url` | `string` | sim | URL para redirecionamento. Aceita rotas internas e links externos. |
| `visible` | `boolean | Function` | sim | Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. |
---
# PoListViewLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-list-view-literals
Interface para definição das literais usadas no `po-list-view`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hideDetails` | `string` | sim | Rótulo do botão que oculta os detalhes do item. |
| `loadMoreData` | `string` | sim | Rótulo do botão que deve carregar mais resultados. |
| `noData` | `string` | sim | Rótulo exibido quando não existem itens para serem exibidos na lista. |
| `selectAll` | `string` | sim | Rótulo do `checkbox` da opção de selecionar todos. |
| `showDetails` | `string` | sim | Rótulo do botão que exibe os detalhes do item. |
---
# PoLookupAdvancedFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-lookup-advanced-filter
Interface para definição das propriedades dos campos de entrada que serão criados dinamicamente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `additionalHelp` | `Function` | sim | Evento disparado ao clicar no ícone de ajuda adicional. |
| `additionalHelpTooltip` | `string` | sim | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `advancedFilters` | `Array` | sim | Lista de objetos dos campos que serão criados na busca avançada. |
| `appendBox` | `boolean` | sim | Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da |
| `autoHeight` | `boolean` | sim | Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo com o número de itens selecionados e a extensão dos mesmos, mantendo-os sempre visíveis. |
| `autoUpload` | `boolean` | sim | Define se o envio do arquivo será automático ao selecionar o mesmo. |
| `booleanFalse` | `string` | sim | Texto exibido quando o valor do componente for *false*. |
| `booleanTrue` | `string` | sim | Texto exibido quando o valor do componente for *true*. |
| `changeOnEnter` | `boolean` | sim | Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada no `po-combo`. |
| `changeVisibleColumns` | `Function` | sim | Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. |
| `clean` | `boolean` | sim | Se verdadeiro, o campo receberá um botão para ser limpo. |
| `columnRestoreManager` | `Function` | sim | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `columns` | `Array | number` | sim | Define as colunas para utilização da busca avançada. Usada somente em conjunto com a propriedade `searchService`, |
| `compactLabel` | `boolean` | sim | Define se o título do campo será exibido de forma compacta. |
| `container` | `string` | sim | Exibirá um container para todos os campos abaixo dessa propriedade. |
| `customAction` | `PoProgressAction` | sim | Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito |
| `customActionClick` | `(file: PoUploadFile) => void` | sim | Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. |
| `debounceTime` | `number` | sim | Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. Será utilizada apenas quando houver serviço (`p-filter-service`). |
| `decimalsLength` | `number` | sim | Quantidade máxima de casas decimais. |
| `directory` | `boolean` | sim | Permite a seleção de diretórios contendo um ou mais arquivos para envio. |
| `disabled` | `boolean` | sim | Desabilita o campo caso informar o valor *true*. |
| `disabledInitFilter` | `boolean` | sim | Desabilita o filtro inicial no serviço do `po-combo`, que é executado no primeiro clique no campo. |
| `disabledTabFilter` | `boolean` | sim | Se verdadeiro, desabilitará a busca de um item via TAB no `po-combo`. |
| `divider` | `string` | sim | Exibirá um divisor acima, utilizando o seu conteudo como título. |
| `dragDrop` | `boolean` | sim | Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos |
| `dragDropHeight` | `number` | sim | Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. |
| `errorAsyncFunction` | `(value) => Observable` | sim | Função executada para realizar a validação assíncrona personalizada. |
| `errorAsyncProperties` | `ErrorAsyncProperties` | sim | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `boolean` | sim | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorMessage` | `string` | sim | Mensagem que será apresentada quando o campo ficar inválido. |
| `fieldLabel` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como descrição do campo. |
| `fieldValue` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como valor do campo. |
| `filterMinlength` | `number` | sim | Valor mínimo de caracteres para realizar o filtro no serviço do `po-combo`. |
| `filterMode` | `PoMultiselectFilterMode` | sim | Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. |
| `forceBooleanComponentType` | `ForceBooleanComponentEnum` | sim | Valores aceitos: |
| `forceOptionsComponentType` | `ForceOptionComponentEnum` | sim | pode ser utilizada em conjunto com a propriedade `options` forçando o componente a renderizar um `po-select` ou `po-radio-group`. |
| `formField` | `string` | sim | Nome do campo de formulário que será enviado para o serviço informado na propriedade `url`. |
| `format` | `string | Array` | sim | Formato de exibição no campo. |
| `formatModel` | `boolean` | sim | Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou |
| `formatTime` | `string` | sim | Define o formato de exibição do timer (`'12'` ou `'24'`). |
| `gridColumns` | `number` | sim | Tamanho de exibição do campo em telas. |
| `gridLgColumns` | `number` | sim | Tamanho de exibição do campo em telas grandes (lg). |
| `gridLgPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). |
| `gridMdColumns` | `number` | sim | Tamanho de exibição do campo em telas médias (md). |
| `gridMdPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). |
| `gridSmColumns` | `number` | sim | Tamanho de exibição do campo em telas menores (sm). |
| `gridSmPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). |
| `gridXlColumns` | `number` | sim | Tamanho de exibição do campo em telas extra grandes (xl). |
| `gridXlPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). |
| `headers` | `{
[name: string]: string | Array;
}` | sim | Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. |
| `help` | `string` | sim | Texto de ajuda. |
| `helper` | `string | PoHelperOptions` | sim | Texto simples que será apresentado como auxílio ao campo ou objeto com as definições do po-helper. |
| `hideLabelStatus` | `boolean` | sim | Indica se o status do `model` será escondido visualmente ao lado do switch |
| `hidePasswordPeek` | `boolean` | sim | Permite esconder a função de espiar a senha digitada no `po-password`. |
| `hideRestrictionsInfo` | `boolean` | sim | Oculta visualmente as informações de restrições para o upload. |
| `hideSearch` | `boolean` | sim | Esconde o campo de pesquisa existente dentro do dropdown do `po-multiselect`. |
| `hideSelectAll` | `boolean` | sim | Indica se o campo "Selecionar todos" do `po-multiselect` será escondido. |
| `hideSelectButton` | `boolean` | sim | Omite o botão de seleção de arquivos. |
| `hideSendButton` | `boolean` | sim | Omite o botão de envio de arquivos. |
| `icon` | `string | TemplateRef` | sim | Define o ícone que será exibido no início do campo. |
| `infiniteScroll` | `boolean` | sim | Se verdadeiro ativa a funcionalidade de scroll infinito para o combo ou lookup, ao chegar ao fim da tabela executará nova busca dos dados conforme paginação. |
| `infiniteScrollDistance` | `number` | sim | Define o percentual necessário para disparar o evento show-more, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%. |
| `invalidValue` | `boolean` | sim | Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. |
| `isoFormat` | `PoDatepickerIsoFormat` | sim | Padrão de formatação para saída do model, independentemente do formato de entrada. |
| `key` | `boolean` | sim | Identificador |
| `keydown` | `Function` | sim | Função executada quando uma tecla é pressionada enquanto o foco está no componente. |
| `label` | `string` | sim | Rótulo do campo exibido. |
| `labelPosition` | `PoSwitchLabelPosition` | sim | Posição de exibição do rótulo do PoSwitch. |
| `listboxControlPosition` | `'top' | 'bottom'` | sim | Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). |
| `literals` | `PoLookupLiterals | PoMultiselectLiterals | PoComboLiterals | PoDatepickerRangeLiterals | PoUploadLiterals` | sim | Objeto com as literais usadas para os seguintes componentes: `po-lookup`, `po-multiselect`, `po-combo` e `po-datepicker-range`. |
| `loading` | `boolean` | sim | Habilita um estado de carregamento no componente, desabilitando-o e exibindo um ícone de carregamento. |
| `locale` | `string` | sim | Define a localidade a ser utilizada no componente. |
| `mask` | `string` | sim | Máscara para o campo. |
| `maskFormatModel` | `boolean` | sim | Define que o valor do componente será conforme especificado na mascára. O valor padrão é `false`. |
| `maskNoLengthValidation` | `boolean` | sim | 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. |
| `maxLength` | `number` | sim | Tamanho máximo de caracteres. |
| `maxTime` | `string` | sim | Define o horário máximo permitido para seleção no timer. |
| `maxValue` | `string | number` | sim | Valor máximo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minLength` | `number` | sim | Tamanho mínimo de caracteres. |
| `minTime` | `string` | sim | Define o horário mínimo permitido para seleção no timer. |
| `minValue` | `string | number` | sim | Valor mínimo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minuteInterval` | `number` | sim | Define o intervalo entre os minutos exibidos no painel do timepicker. |
| `mode` | `'month-year' | 'year'` | sim | Define o modo de seleção do `po-datepicker`. |
| `modelFormat` | `PoTimepickerModelFormat` | sim | Define o formato do valor do horário a ser utilizado no model do `po-timepicker`. |
| `multiple` | `boolean` | sim | Permite a seleção de múltiplos itens. |
| `noAutocomplete` | `boolean` | sim | Define a propriedade nativa `autocomplete` do campo como off. |
| `offsetColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas. |
| `offsetLgColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas grandes (lg). |
| `offsetMdColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas médias (md). |
| `offsetSmColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas menores (sm). |
| `offsetXlColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas extra grandes (xl). |
| `onError` | `Function` | sim | Evento será disparado quando ocorrer algum erro no envio do arquivo. |
| `onSuccess` | `Function` | sim | Evento será disparado quando o envio do arquivo for realizado com sucesso. |
| `onUpload` | `Function` | sim | Função que será executada no momento de realizar o envio do arquivo, |
| `optional` | `boolean` | sim | Define se a indicação de campo opcional será exibida. |
| `options` | `Array | Array | Array | Array | Array` | sim | Lista de opções que serão exibidos em um componente, podendo selecionar uma opção. |
| `optionsMulti` | `boolean` | sim | Permite que o usuário faça múltipla seleção dentro da lista de opções. |
| `optionsService` | `string | PoComboFilter | PoMultiselectFilter` | sim | Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. |
| `order` | `number` | sim | Informa a ordem de exibição do campo. |
| `params` | `any` | sim | Objeto que será enviado como parâmetro nas requisições de busca usados pelos componentes `po-lookup` e |
| `pattern` | `string` | sim | Regex para validação do campo. |
| `placeholder` | `string` | sim | Mensagem que será exibida enquanto o campo não estiver preenchido. |
| `placeholderSearch` | `string` | sim | Placeholder do campo de pesquisa do `po-multiselect`. |
| `property` | `string` | não | Nome de referência do campo. |
| `range` | `boolean` | sim | O controle passa a permitir a entrada de um intervalo ao invés de um único valor. |
| `rangePresetOptions` | `Array` | sim | Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário. |
| `rangePresets` | `boolean | Array` | sim | Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário. |
| `rangePresetsOrder` | `'asc' | 'desc'` | sim | Define a ordenação dos presets na lista. |
| `readonly` | `boolean` | sim | Indica que o campo será somente leitura. |
| `removeInitialFilter` | `boolean` | sim | Define que o filtro no primeiro clique será removido. |
| `required` | `boolean` | sim | Define a obrigatoriedade do campo. |
| `requiredFieldErrorMessage` | `boolean` | sim | Exibe a mensagem setada na propriedade `errorMessage` se o campo estiver vazio e for requerido. |
| `restrictions` | `PoUploadFileRestrictions` | sim | Objeto que segue a definição da interface `PoUploadFileRestrictions`, |
| `rows` | `number` | sim | Quantidade de linhas exibidas no `po-textarea`. |
| `searchService` | `string | PoLookupFilter` | sim | Serviço que será utilizado para realizar a busca avançada. Pode ser utilizado em conjunto com a propriedade `columns`. |
| `secondInterval` | `number` | sim | Define o intervalo entre os segundos exibidos no painel do timepicker. |
| `secret` | `boolean` | sim | Esconde a informação estilo *password*, pode ser utilizado quando o tipo de dado for *string*. |
| `showRequired` | `boolean` | sim | Define se a indicação de campo obrigatório será exibida. |
| `showSeconds` | `boolean` | sim | Exibe a coluna de segundos no painel do timepicker. |
| `showThumbnail` | `boolean` | sim | Exibe a pré-visualização de imagens ao anexá-las. |
| `size` | `string` | sim | Define o tamanho dos componentes de formulário no template conforme suas respectivas documentações: |
| `sort` | `boolean` | sim | Indica que a lista definida na propriedade p-options será ordenada pela descrição. |
| `step` | `number` | sim | Intervalo utilizado no `po-number`. |
| `thousandMaxlength` | `number` | sim | Quantidade máxima de dígitos antes do separador decimal. O valor máximo permitido é 13 |
| `type` | `string | PoDynamicFieldType` | sim | Tipo do valor campo. |
| `url` | `string` | sim | URL que deve ser feita a requisição com os arquivos selecionados. |
| `validate` | `string | Function` | sim | Função ou serviço para validar as **mudanças do campo**. |
| `visible` | `boolean` | sim | Indica se o campo será visível. |
| `yearRangeLimit` | `number` | sim | Define o limite de anos exibidos na lista de anos do `po-datepicker` nos modos `month-year` e `year`. |
---
# PoLookupColumn
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-lookup-column
Interface para configuração das colunas do po-lookup.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `fieldLabel` | `boolean` | sim | Indica que a coluna será utilizada como valor do campo e como filtro dentro da modal. |
| `format` | `string` | sim | Formato de exibição do valor da coluna: |
| `label` | `string` | sim | Texto para título da coluna. |
| `mask` | `string` | sim | Define uma máscara para formatação do valor exibido na coluna. |
| `property` | `string` | sim | Nome identificador da coluna. |
| `type` | `string` | sim | Tipo da coluna: |
| `width` | `string` | sim | A largura da coluna pode ser informada em pixels ou porcentagem. Exemplo: '100px' ou '20%' |
---
# PoLookupFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-lookup-filter
Define o tipo de busca utilizado no po-lookup.
## Métodos
### `getFilteredItems(params: PoLookupFilteredItemsParams)`
Método que será disparado ao filtrar a lista de itens ou carregar mais resultados no componente, deve-se retornar
um *Observable* com a resposta da API no formato da interface `PoLookupResponseApi`.
### `getObjectByValue(value: TypeUnion, filterParams: any)`
Método responsável por enviar um valor que será buscado no serviço.
Caso a funcionalidade de múltipla seleção estver habilitada, o parametro value será enviado como uma lista de valores
e o observable deve retornar uma lista de objetos.
---
# PoLookupFilteredItemsParams
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-lookup-filtered-items-params
Interface do objeto enviado como parâmetro na função `getFilteredItems`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `advancedFilters` | `{
[key: string]: any;
}` | sim | Valores informados nos campos de busca avançada, que serão utilizados para filtrar a lista de itens. |
| `filter` | `string` | sim | Conteúdo utilizado para filtrar a lista de itens. |
| `filterParams` | `any` | sim | Valor informado através da propriedade `p-filter-params`. |
| `order` | `string` | sim | Coluna que está sendo ordenada na tabela. |
| `page` | `number` | sim | Controla a paginação dos dados e recebe valor automaticamente a cada clique no botão 'Carregar mais resultados'. |
| `pageSize` | `number` | sim | Quantidade de itens retornados cada vez que o serviço é chamado, por padrão é 10. |
---
# PoLookupLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-lookup-literals
Interface para definição das literais usadas no `po-lookup`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `clean` | `string` | sim | Texto usado no leitor de tela para acessibilidade. Aplica-se ao ícone de limpar. |
| `modalAdvancedSearch` | `string` | sim | Texto do link de busca avançada. |
| `modalAdvancedSearchPrimaryActionLabel` | `string` | sim | Texto exibido no label do botão de ação primária da modal de busca avançada. |
| `modalAdvancedSearchSecondaryActionLabel` | `string` | sim | Texto exibido no label do botão de ação secundária da modal de busca avançada. |
| `modalAdvancedSearchTitle` | `string` | sim | Texto exibido no título da modal de busca avançada. |
| `modalDisclaimerGroupTitle` | `string` | sim | Texto exibido no título do disclaimer. |
| `modalPlaceholder` | `string` | sim | Texto exibido no placeholder do input da modal. |
| `modalPrimaryActionLabel` | `string` | sim | Texto exibido no label do botão de ação primária da modal. |
| `modalSecondaryActionLabel` | `string` | sim | Texto exibido no label do botão de ação secundária da modal. |
| `modalTableLoadMoreData` | `string` | sim | Label do `button` que deve carregar mais resultados na tabela, ou seja, exibir mais itens. |
| `modalTableLoadingData` | `string` | sim | Texto exibido enquanto uma requisição está sendo executada para carregar dados na tabela. |
| `modalTableNoColumns` | `string` | sim | Texto exibido quando não existem colunas definidas para a tabela. |
| `modalTableNoData` | `string` | sim | Texto exibido quando não existem itens para serem exibidos na tabela. |
| `modalTitle` | `string` | sim | Texto exibido no título da modal. |
| `search` | `string` | sim | Texto usado no leitor de tela para acessibilidade. Aplica-se ao ícone de pesquisa. |
---
# PoLookupResponseApi
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-lookup-response-api
Interface que representa a estrutura de resposta de uma coleção de itens.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hasNext` | `boolean` | não | Indica se existe uma próxima página com mais registros para aquela coleção de itens. |
| `items` | `Array` | não | Lista de itens retornados. |
---
# PoMediaQueryTokens
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-media-query-tokens
Interface que define os tokens CSS utilizados em regras de media queries.
Cada chave representa uma variável CSS que pode ser dinamicamente modificada.
> Os tipos de valores aceitos para cada token são: `pixels` , `em` e `rem`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `lg` | `{
'gridSystemLgMinWidth': string;
'gridSystemLgMaxWidth': string;
}` | sim | Define a regra para lg. |
| `md` | `{
'gridSystemMdMinWidth': string;
'gridSystemMdMaxWidth': string;
}` | sim | Define a regra para md. |
| `offset` | `{
'gridSystemOffsetMinWidth': string;
'gridSystemOffsetMaxWidth': string;
}` | sim | Define a regra offset. |
| `pull` | `{
'gridSystemPullMaxWidth': string;
}` | sim | Define a regra pull. |
| `sm` | `{
'gridSystemSmMaxWidth': string;
}` | sim | Define a regra para sm. |
| `xl` | `{
'gridSystemXlMinWidth': string;
}` | sim | Define a regra xl. |
---
# PoMenuFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-menu-filter
Interface do serviço utilizado no componente `po-menu`.
## Métodos
### `getFilteredData(search: string, params: any)`
Método responsável por retornar um *Observable* que retorne uma lista de objetos que seguem a interface `PoMenuItemFiltered`.
Será informado por parâmetro o valor a ser pesquisado e as informações adicionais preenchidas através da propriedade `p-params`.
---
# PoMenuItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-menu-item
Interface para os itens de menu do componente po-menu.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação personalizada para clique do item de menu. |
| `badge` | `PoMenuItemBadge` | sim | Badge do item de menu. |
| `icon` | `string | TemplateRef` | sim | É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: |
| `label` | `string` | não | Texto do item de menu. |
| `link` | `string` | sim | Link para redirecionamento no click do item do menu, podendo ser um link interno ou externo. |
| `shortLabel` | `string` | sim | Texto curto exibido através de um tooltip para o item que aparece quando o menu estiver colapsado. |
| `subItems` | `Array` | sim | Lista de sub-items, criando novos níveis dentro do menu. O número máximo de níveis do menu é igual a 4. |
---
# PoMenuItemBadge
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-menu-item-badge
Interface do *badge* utilizado no `po-menu`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `color` | `string` | sim | Define a cor do *badge* e aceita os valores: |
| `value` | `number` | não | Número exibido no *badge*, caso o mesmo seja maior que **9** o mesmo exibe **9+**. |
---
# PoMenuItemFiltered
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-menu-item-filtered
Interface do objeto que deve conter na coleção de itens filtrados no componente `po-menu`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `() => void` | não | Ação a ser executada quando o item de menu for clicado. |
| `label` | `string` | não | Texto do item de menu. |
| `link` | `string` | não | Link* para redirecionamento no clique do item do menu, podendo ser um *link* interno ou externo. |
---
# PoMenuPanelItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-menu-panel-item
Interface para os itens de menu do componente `po-menu-panel`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação personalizada para clique do item de menu. |
| `icon` | `string` | não | Ícone para o item de menu, os [ícones aceitos](https://po-ui.io/icons) são os definidos no guia de estilo da PO. |
| `label` | `string` | não | Texto do item de menu. |
| `link` | `string` | sim | Link para redirecionamento no click do item do menu, podendo ser um link interno ou externo. |
---
# PoModalAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-modal-action
Interface que define os botões de ação do componente `po-modal`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | não | Função que será executada ao clicar sobre o botão. |
| `danger` | `boolean` | sim | Define a propriedade `p-danger` do botão. |
| `disabled` | `boolean` | sim | Desabilita o botão impossibilitando que sua ação seja executada. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do label do botão. |
| `label` | `string` | não | Rótulo do botão. |
| `loading` | `boolean` | sim | Habilita um estado de carregamento ao botão, desabilitando-o e exibindo um ícone de carregamento à esquerda de seu rótulo. |
---
# PoModalPasswordRecovery
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-modal-password-recovery
Interface com a definição do objeto gerado pelo formulário do componente `po-modal-password-recovery`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `code` | `string` | sim | Valor contendo o código enviado por SMS e digitado pelo usuário. |
| `email` | `string` | sim | Valor contendo o email enviado pelo usuário. |
| `hash` | `string` | sim | Código de validação da solicitação do SMS para ser enviado junto com o código de verificação do SMS |
| `retry` | `number` | sim | Número de tentativas de reenvio. |
| `sms` | `string` | sim | Valor contendo o número de telefone enviado pelo usuário. |
| `token` | `string` | sim | Token de alteração de senha |
| `urlChangePassword` | `string` | sim | URL para o formulário de alteração de senha |
| `urlValidationCode` | `string` | sim | URL usada para validação do código enviado por SMS |
---
# PoMultiselectFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-multiselect-filter
Interface para os serviços que serão utilizados no po-multiselect.
## Métodos
### `getFilteredData(params: RecordType)`
Método que será chamado ao realizar uma busca no componente, deve retornar um Observable que contém uma coleção de objetos que seguem
a interface `PoMultiselectOption`, será informado por parametro o campo e o valor a ser pesquisado.
### `getObjectsByValues(values: TypeApplication)`
Método que será chamado ao iniciar o componente com valor, deve retornar um Observable que contém apenas os objetos filtrados que
seguem a interface `PoMultiselectOption`, será informado por parâmetro valor a ser pesquisado.
---
# PoMultiselectLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-multiselect-literals
Interface para definição das literais usadas no `po-multiselect`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `noData` | `string` | sim | Texto exibido quando não houver dados encontrados na busca. |
| `placeholderSearch` | `string` | sim | Texto do *placeholder* do campo de busca. |
| `selectAll` | `string` | sim | Texto exibido no botão de selecionar todos. |
| `selectItem` | `string` | sim | Texto exibido na propriedade placeholder. |
---
# PoMultiselectOption
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-multiselect-option
Interface dos itens da coleção que será exibida no dropdown do po-multiselect.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Label exibido nos itens da lista. |
| `value` | `string | number` | não | Valor do objeto que será atribuído ao model. |
---
# PoNavbarIconAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-navbar-icon-action
Interface para lista de ações dos ícones do componente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, deve-se passar a referência da função. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido. |
| `label` | `string` | não | Rótulo da ação, será exibido quando o mesmo for aberto no popup. |
| `link` | `string` | sim | link utilizado no redirecionamento das páginas. |
| `tooltip` | `string` | sim | Mensagem exibida ao passar o mouse no ícone quando o mesmo estiver na navbar. |
---
# PoNavbarItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-navbar-item
Interface para lista de items do componente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, deve-se passar a referência da função. |
| `label` | `string` | não | Rótulo do item. |
| `link` | `string` | sim | Link utilizado no redirecionamento das páginas. |
---
# PoNavbarLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-navbar-literals
Interface para definição das literais usadas no `po-navbar`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `navbarLinks` | `string` | sim | Texto exibido no item de menu no qual os itens do navbar são agrupados quando está no modo responsivo. |
---
# PoNetworkStatus
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-network-status
Classe responsável por identificar a conexão de rede disponível no dispositivo.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `status` | `boolean` | não | Retorna se o dispositivo está conectado na rede. |
| `type` | `PoNetworkType` | não | Retorna o tipo de conexão do dispositivo. |
---
# PoNotification
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-notification
Interface para uso do serviço PoNotification.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação para a notificação. |
| `actionLabel` | `string` | sim | Label do botão quando houver uma ação definida. |
| `duration` | `number` | sim | Define em milissegundos o tempo de duração que a notificação ficará disponível em tela. O padrão é 9000 milissegundos. |
| `message` | `string` | não | Mensagem a ser exibida na notificação. |
| `mode` | `PoToasterMode` | sim | Define o Modo/Tipo do Toaster. |
| `orientation` | `PoToasterOrientation` | sim | Posição da notificação na página que pode ser ```Top``` (topo) ou ```Bottom```(rodapé). A posição padrão é `bottom`. |
| `showClose` | `boolean` | sim | Exibe o botão de fechar a notificação. |
| `sizeActions` | `string` | sim | Define o tamanho das ações: |
| `supportMessage` | `string` | sim | Mensagem de suporte a ser exibida na notificação. |
---
# PoNumberSeparator
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-number-separator
Interface para os separadores numéricos das linguagens disponíveis no sistema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `language` | `string` | sim | Código do idioma [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) |
| `separator` | `string` | sim | Separador numérico |
---
# PoPage
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page
Interface para o atributo `filter` do componente `po-page`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `title` | `string` | sim | Título da página. |
---
# PoPageAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-action
Interface para as ações dos componentes `po-page-default` e `po-page-list`.
As ações podem ser exibidas como botões no cabeçalho ou agrupadas em um *dropdown*,
conforme o `PoPageActionsLayout` e o tamanho da tela.
> As propriedades `separator`, `selected` e `subItems` possuem efeito apenas quando
a ação é exibida dentro do *dropdown*.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, sendo possível passar o nome ou a referência da função. |
| `disabled` | `boolean | Function` | sim | Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do rótulo. |
| `kind` | `string` | sim | Define o estilo visual da ação quando exibida como botão fora do *dropdown*. |
| `label` | `string` | não | Rótulo da ação. |
| `selected` | `boolean` | sim | Define se a ação está selecionada. |
| `separator` | `boolean` | sim | Atribui uma linha separadora acima do item. |
| `subItems` | `Array` | sim | Define uma lista de subitens para criação de menus aninhados. |
| `type` | `string` | sim | Define a cor do item. |
| `url` | `string` | sim | URL para redirecionamento. Aceita rotas internas e links externos. |
| `visible` | `boolean | Function` | sim | Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. |
---
# PoPageBlockedUserReasonParams
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-blocked-user-reason-params
Interface que define os valores de customização da mensagem de bloqueio do componente `po-page-blocked-user`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `attempts` | `number` | sim | Quantidade máxima de tentativas. |
| `days` | `number` | sim | Quantidade de dias para expiração de senha. |
| `hours` | `number` | sim | Horas que o sistema permanecerá bloqueado. |
---
# PoPageChangePassword
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-change-password
Interface com a definição do objeto gerado pelo formulário do componente `po-page-change-password`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `currentPassword` | `string` | sim | Senha atual |
| `newPassword` | `string` | sim | Nova senha |
---
# PoPageChangePasswordRecovery
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-change-password-recovery
Interface para especificação do tipo de recuperação de senha no `po-modal-password-recovery`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `contactMail` | `string` | sim | Definição do e-mail que é exibido na mensagem para contato de suporte. |
| `phoneMask` | `string` | sim | Definição da máscara do campo de telefone. |
| `type` | `PoModalPasswordRecoveryType` | sim | Enum para especificação do tipo de recuperação de senha [PoModalPasswordRecoveryType](/documentation/po-modal-password-recovery). |
| `url` | `string` | não | Endpoint usado pelo template **PoModalPasswordRecovery** para requisição do recurso. |
---
# PoPageChangePasswordRequirement
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-change-password-requirement
Interface com a definição dos objetos aceitos pela propriedade `p-password-requirements`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `requirement` | `string` | não | Requisito. |
| `status` | `boolean | Function` | não | Função que deve retornar um booleano para validar um requisito de senha. |
---
# PoPageDefault
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-default
Interface para o atributo `filter` do componente `po-page`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `Array` | sim | Array de objetos que implementam a interface `PoPageAction`. |
---
# PoPageDefaultLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-default-literals
Interface para definição das literais usadas no `po-page-default`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `otherActions` | `string` | sim | Legenda do `po-dropdown` de ações. |
---
# PoPageDetailLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-detail-literals
Interface para definição das literais usadas no `po-page-detail`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `back` | `string` | sim | Label da ação `back`. |
| `edit` | `string` | sim | Label da ação `edit`. |
| `remove` | `string` | sim | Label da ação `remove`. |
---
# PoPageDynamicDetailActions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-actions
Interface para as ações do componente po-page-dynamic-detail.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `back` | `string | boolean | Function` | sim | Rota de redirecionamento para ação de voltar, caso não seja especificada será usado o comando `history.back()`. |
| `beforeBack` | `string | (() => PoPageDynamicDetailBeforeBack)` | sim | Ação que é executada antes da ação `back` e que serve para realização de validações prévias. |
| `beforeEdit` | `string | ((id: any, resource: any) => PoPageDynamicDetailBeforeEdit)` | sim | Rota ou método que será chamado antes de editar um recurso (edit). |
| `beforeRemove` | `string | ((id: any, resource: any) => PoPageDynamicDetailBeforeRemove)` | sim | Rota ou método que será chamado antes de excluir um recurso (remove). |
| `edit` | `string | ((id: any, resource: any) => void)` | sim | Rota para edição do recurso, caso seja preenchida irá habilitar a ação de edição na tabela. |
| `remove` | `string | ((id: any, resource: any) => void)` | sim | Rota de redirecionamento que será executada após a confirmação da exclusão do registro. |
---
# PoPageDynamicDetailBeforeBack
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-before-back
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeBack`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de retorno (*back*) |
| `newUrl` | `string` | sim | Nova rota para retorno que substituirá a definida anteriormente em `back`. |
---
# PoPageDynamicDetailBeforeEdit
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-before-edit
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeEdit`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de edição (*edit*) |
| `newUrl` | `string` | sim | Nova rota para navegação que substituirá a definida anteriormente em `edit`. |
---
# PoPageDynamicDetailBeforeRemove
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-before-remove
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeRemove`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de exclusão (*remove*) |
| `newUrl` | `string` | sim | Nova rota para navegação que substituirá a definida anteriormente em `remove`. |
---
# PoPageDynamicDetailField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-field
Interface dos fields usados para compor o template `po-page-dynamic-detail`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `alt` | `string` | sim | Defini o texto alternativo descrevendo a imagem. |
| `booleanFalse` | `string` | sim | Texto exibido quando o valor do componente for *false*. |
| `booleanTrue` | `string` | sim | Texto exibido quando o valor do componente for *true*. |
| `color` | `string` | sim | Determina a cor da tag. As maneiras de customizar as cores são: |
| `concatLabelValue` | `boolean` | sim | Permite que seja exibido em tela, de forma concatenada as propriedades `fieldLabel` + `fieldValue`. |
| `container` | `string` | sim | Exibirá um container para todos os campos abaixo dessa propriedade. |
| `divider` | `string` | sim | Exibirá um divisor acima, utilizando o seu conteudo como título. |
| `duplicate` | `boolean` | sim | Indica se o campo será duplicado caso seja executada a ação de duplicação. |
| `fieldLabel` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como descrição do campo. |
| `fieldValue` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como valor do campo. |
| `format` | `string | Array` | sim | Define o formato de exibição para o valor de um campo. |
| `gridColumns` | `number` | sim | Tamanho de exibição do campo em telas. |
| `gridLgColumns` | `number` | sim | Tamanho de exibição do campo em telas grandes (lg). |
| `gridLgPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). |
| `gridMdColumns` | `number` | sim | Tamanho de exibição do campo em telas médias (md). |
| `gridMdPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). |
| `gridSmColumns` | `number` | sim | Tamanho de exibição do campo em telas menores (sm). |
| `gridSmPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). |
| `gridXlColumns` | `number` | sim | Tamanho de exibição do campo em telas extra grandes (xl). |
| `gridXlPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). |
| `height` | `string` | sim | Defini o texto alternativo descrevendo a imagem. |
| `icon` | `string` | sim | Define um ícone que será exibido ao lado do valor para o campo do tipo *tag*. |
| `image` | `boolean` | sim | Possibilita a utilização de imagem. |
| `isArrayOrObject` | `boolean` | sim | Define que a propriedade `property` é uma lista ou um objeto. |
| `key` | `boolean` | sim | Identificador |
| `label` | `string` | sim | Rótulo do campo exibido. |
| `offsetColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas. |
| `offsetLgColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas grandes (lg). |
| `offsetMdColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas médias (md). |
| `offsetSmColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas menores (sm). |
| `offsetXlColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas extra grandes (xl). |
| `options` | `Array<{
label: string;
value: string | number;
}>` | sim | Lista de opções que podem ser vinculadas à propriedade p-value. |
| `optionsMulti` | `boolean` | sim | Habilita a visualização de múltiplos itens. |
| `optionsService` | `string | PoComboFilter | PoMultiselectFilter` | sim | Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. |
| `order` | `number` | sim | Informa a ordem de exibição do campo. |
| `params` | `any` | sim | Objeto que será enviado como parâmetro nas requisições de busca `searchService` ou `optionsService` |
| `property` | `string` | não | Nome de referência do campo. |
| `searchService` | `string | PoDynamicViewRequest` | sim | Serviço customizado para um campo em específico. |
| `tag` | `boolean` | sim | Indica se o campo será um `po-tag`. |
| `textColor` | `string` | sim | Determina a cor do texto da tag. As maneiras de customizar as cores são: |
| `type` | `string | PoDynamicFieldType` | sim | Tipo do valor campo. |
| `visible` | `boolean` | sim | Indica se o campo será visível. |
---
# PoPageDynamicDetailMetaData
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-meta-data
Interface para as propriedades de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `PoPageDynamicDetailActions` | sim | Ações que o usuário poderá executar na página através de botões. |
| `autoRouter` | `boolean` | sim | Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `fields` | `Array` | sim | Lista dos campos usados no formulário de detalhe. |
| `title` | `string` | sim | Título da página. |
| `version` | `string` | sim | Versão do metadata, o sistema irá buscar a versão nas próximas iteração. |
---
# PoPageDynamicDetailOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-detail-options
Interface para as propriedades de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `PoPageDynamicDetailActions` | sim | Ações que o usuário poderá executar na página através de botões. |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `fields` | `Array` | sim | Lista dos campos usados no formulário de detalhe. |
| `title` | `string` | sim | Título da página. |
---
# PoPageDynamicEditActions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-actions
Interface para as ações do componente po-page-dynamic-edit.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `beforeCancel` | `string | (() => PoPageDynamicEditBeforeCancel)` | sim | Rota ou método que será chamado antes de executar a ação de cancelamento (cancel). |
| `beforeSave` | `string | ((resource: any, id: string) => PoPageDynamicEditBeforeSave)` | sim | Rota ou método que será chamado antes de salvar um recurso (save). |
| `beforeSaveNew` | `string | ((resource: any, id: string) => PoPageDynamicEditBeforeSaveNew)` | sim | Rota ou método que será chamado antes de executar o evento salvar e abrir novo registro (saveNew). |
| `cancel` | `string | boolean | Function` | sim | Rota de redirecionamento para ação de cancelar, caso não seja especificada será usado o comando `navigator.back()`. |
| `save` | `string | ((resource: any, id: string) => void)` | sim | Rota de redirecionamento ou método para executar o envio dos dados ao servidor. |
| `saveNew` | `string | ((resource: any, id?: string) => void)` | sim | Rota de redirecionamento ou método para executar o envio dos dados ao servidor. |
---
# PoPageDynamicEditBeforeCancel
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-before-cancel
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeCancel`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de cancelamento de edição da página (cancel) |
| `newUrl` | `string` | sim | Nova rota para navegação que substituirá a definida anteriormente em `cancel`. |
---
# PoPageDynamicEditBeforeSave
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-before-save
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeSave`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação salvar (save). |
| `newUrl` | `string` | sim | Nova rota para salvar o recurso, que substituirá a rota definida anteriormente em `save`. |
| `resource` | `any` | sim | Recurso atualizado. |
---
# PoPageDynamicEditBeforeSaveNew
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-before-save-new
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeSaveNew`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação salvar e novo (saveNew). |
| `newUrl` | `string` | sim | Nova rota de redirecionamento, que substituirá a rota definida anteriormente em `saveNew`. |
| `resource` | `any` | sim | Recurso atualizado. |
---
# PoPageDynamicEditField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-field
Interface dos fields usados para compor o template `po-page-dynamic-edit`.
Herda as definições da interface
[PoDynamicFormField](https://po-ui.io/documentation/po-dynamic-form).
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `duplicate` | `boolean` | sim | Indica se o campo será duplicado caso seja executada a ação de duplicação. |
---
# PoPageDynamicEditLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-literals
Interface para definição das literais usadas no `po-page-dynamic-edit`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `cancelConfirmMessage` | `string` | sim | Texto exibido na mensagem de cancelamento da inclusão/edição. |
| `detailActionNew` | `string` | sim | Rótulo exibido no botão `Novo`. |
| `pageActionCancel` | `string` | sim | Rótulo exibido no botão `Cancelar`. |
| `pageActionSave` | `string` | sim | Rótulo exibido no botão `Salvar`. |
| `pageActionSaveNew` | `string` | sim | Rótulo exibido no botão `Salvar e novo`. |
| `registerNotFound` | `string` | sim | Texto exibido para resgistro não encontrado. |
| `saveNotificationError` | `string` | sim | Texto exibido para ocorrência de alguma inconsistência ao salvar. |
| `saveNotificationSuccessSave` | `string` | sim | Texto exibido para recurso salvo com sucesso. |
| `saveNotificationSuccessUpdate` | `string` | sim | Texto exibido para recurso atualizado com sucesso. |
| `saveNotificationWarning` | `string` | sim | Texto exibido para adivertência de formulário preenchido de forma incorreta. |
---
# PoPageDynamicEditMetadata
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-metadata
Interface para as propriedades de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `PoPageDynamicEditActions` | sim | Ações que o usuário poderá executar na página através de botões. |
| `autoRouter` | `boolean` | sim | Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `fields` | `Array` | sim | Lista dos campos usados. |
| `title` | `string` | sim | Título da página. |
| `version` | `number` | não | Versão do metadado devolvido pelo backend. |
---
# PoPageDynamicEditOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-edit-options
Interface para as propriedades de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `PoPageDynamicEditActions` | sim | Ações que o usuário poderá executar na página através de botões. |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `fields` | `Array` | sim | Lista dos campos usados. |
| `title` | `string` | sim | Título da página. |
---
# PoPageDynamicSearchFilters
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-search-filters
Interface para a customização de uma página dinâmica que permite atribuir valores iniciais aos filtros de busca avançada.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `fixed` | `boolean` | sim | Define um valor fixed para um filtro de busca avançada. |
| `initValue` | `any` | sim | Define um valor inicial para um filtro de busca avançada. |
---
# PoPageDynamicSearchLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-search-literals
Interface para definição das literais usadas no `po-page-dynamic-search` e no `po-page-dynamic-table`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `disclaimerBooleanFalse` | `string` | sim | Texto exibido no *disclaimer* de filtros do tipo `boolean` quando o valor for `false` e |
| `disclaimerBooleanTrue` | `string` | sim | Texto exibido no *disclaimer* de filtros do tipo `boolean` quando o valor for `true` e |
| `disclaimerGroupTitle` | `string` | sim | Título do grupo de *disclaimers* que será exibido após realizar alguma busca. |
| `filterCancelLabel` | `string` | sim | Texto exibido no botão para cancelamento da busca avaçanda. |
| `filterConfirmLabel` | `string` | sim | Texto exibido no botão para confirmação da busca avaçanda. |
| `filterTitle` | `string` | sim | Título da busca avançada. |
| `quickSearchLabel` | `string` | sim | Texto do *disclaimer* que será exibido em conjunto com o valor preenchido no campo de busca rápida. |
| `searchPlaceholder` | `string` | sim | Mensagem que aparecerá enquanto o campo de busca rápida não estiver preenchido. |
---
# PoPageDynamicSearchOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-search-options
Interface para a customização de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `Array` | sim | Lista de ações que o usuário poderá executar na página através de botões. |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `concatFilters` | `boolean` | sim | Permite a utilização da pesquisa rápida junto com a pesquisa avançada. |
| `filters` | `Array` | sim | Lista dos campos usados na busca avançada. Caso não seja passado a busca avançada não será exibida. |
| `hideCloseDisclaimers` | `Array` | sim | Lista de filtros que terão a opção de fechar ocultada |
| `hideRemoveAllDisclaimer` | `boolean` | sim | Oculta o botão para remover todos os *disclaimers*. |
| `keepFilters` | `boolean` | sim | Mantém na modal de busca avançada os valores preenchidos do último filtro realizado pelo usuário. |
| `quickSearchWidth` | `number` | sim | Largura do campo de busca, utilizando o *Grid System*, |
| `title` | `string` | sim | Título da página. |
---
# PoPageDynamicTableActions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-actions
Interface para as ações do componente po-page-dynamic-table.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `beforeDetail` | `string | ((id?: string, resource?: any) => PoPageDynamicTableBeforeDetail)` | sim | Método/URL que deve ser chamado antes da ação de ir para o detalhe |
| `beforeDuplicate` | `string | ((key: string, resource: any) => PoPageDynamicTableBeforeDuplicate)` | sim | Rota ou método que será chamado antes de duplicar um recurso (duplicate). O método recebe os parâmetros `key` e também um objeto com as propriedades marcadas com `duplicate: true`. |
| `beforeEdit` | `string | ((id: any, resource: any) => PoPageDynamicTableBeforeEdit)` | sim | Rota ou método que será chamado antes de editar um recurso (edit). |
| `beforeNew` | `string | (() => PoPageDynamicTableBeforeNew)` | sim | Método/URL que deve ser chamado antes da ação de inclusão |
| `beforeRemove` | `string | ((id?: string, resource?: any) => PoPageDynamicTableBeforeRemove)` | sim | Método/URL que deve ser chamado antes da ação de exclusão |
| `beforeRemoveAll` | `string | ((resources?: Array) => PoPageDynamicTableBeforeRemoveAll)` | sim | Método/URL que deve ser chamado antes de executar o evento de exclusão em lote (removeAll). |
| `detail` | `string | ((id: string, resource: any) => void)` | sim | Rota ou função para exibição do recurso em detalhe, caso seja preenchida irá habilitar a ação de visualização na tabela. |
| `duplicate` | `string | ((resource: any) => void)` | sim | Rota ou função para duplicação do recurso, caso seja preenchida irá habilitar a ação de duplicação na tabela. |
| `edit` | `string | ((id: string, resource: any) => {
[key: string]: any;
})` | sim | Rota ou função para edição do recurso, caso seja preenchida irá habilitar a ação de edição na tabela. |
| `new` | `string | Function` | sim | Rota ou função para criar um novo recurso, caso seja preenchida sera exibido uma ação no topo da página. |
| `remove` | `boolean | ((id: string, resource: any) => boolean)` | sim | Habilita a ação de exclusão na tabela. |
| `removeAll` | `boolean | ((resources: Array) => Array)` | sim | Habilita a ação de exclusão em lote na página. |
---
# PoPageDynamicTableBeforeDetail
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-before-detail
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeDetail`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de ir para o detalhe |
| `newUrl` | `string` | sim | Nova rota para abrir o detalhe, deve substituir a função ou rota definida anteriormente |
---
# PoPageDynamicTableBeforeDuplicate
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-before-duplicate
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeDuplicate`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de duplicação de recurso (*duplicate*) |
| `newUrl` | `string` | sim | Nova rota para navegação que substituirá a definida anteriormente em `duplicate`. |
| `resource` | `any` | sim | Objeto com as novas propriedades para duplicação, o mesmo substituirá o objeto atual. |
---
# PoPageDynamicTableBeforeEdit
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-before-edit
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeEdit`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de edição (*edit*) |
| `newUrl` | `string` | sim | Nova rota para navegação que substituirá a definida anteriormente em `edit`. |
---
# PoPageDynamicTableBeforeNew
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-before-new
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeNew`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de inserção (new) |
| `newUrl` | `string` | sim | Nova rota para salvar o recurso, que substituirá a rota definida anteriormente em `new`. |
---
# PoPageDynamicTableBeforeRemove
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-before-remove
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeRemove`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de exclusão (delete) |
| `newUrl` | `string` | sim | Nova rota para enviar o delete, deve substituir a função ou rota definida anteriormente |
---
# PoPageDynamicTableBeforeRemoveAll
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-before-remove-all
Definição da estrutura de retorno da url ou método executado através da
propriedade `beforeRemoveAll`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowAction` | `boolean` | sim | Define se deve ou não executar a ação de exclusão `(remove all)` |
| `newUrl` | `string` | sim | Nova rota para enviar o `remove all`, deve substituir a rota definida anteriormente. |
| `resources` | `Array` | sim | Lista com as keys dos recursos que serão enviados para a ação `removeAll` |
---
# PoPageDynamicTableCustomAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-custom-action
Interface com as propriedades para adicionar uma ação customizada na página.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `string | ((resources?: any) => void)` | sim | Ação que será executada ao clicar no botão. |
| `icon` | `string | TemplateRef` | sim | Define um ícone que será exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo do botão que será exibido. |
| `selectable` | `boolean` | sim | Ao utilizar essa propriedade ela habilita a seleção na tabela e também desabilita |
| `url` | `string` | sim | Rota para o qual será redirecionado ao clicar no botão. |
| `visible` | `boolean | Function` | sim | Define se a ação será visível. |
---
# PoPageDynamicTableCustomTableAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-custom-table-action
Interface com as propriedades para adicionar uma ação customizada na tabela da página.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `string | ((resource?: any) => any)` | sim | Ação que será executada ao clicar no botão. |
| `concatKeys` | `boolean` | sim | Permite concatenar o valor de propriedades definidas como keys na url via path parameter. |
| `disabled` | `boolean | Function` | sim | Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado. |
| `icon` | `string | TemplateRef` | sim | Define um ícone que será exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo do botão que será exibido. |
| `url` | `string` | sim | Rota para o qual será redirecionado ao clicar no botão. |
| `visible` | `boolean | Function` | sim | Define se a ação será visível. |
---
# PoPageDynamicTableField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-field
Interface para definição das propriedades dos campos de entrada que serão criados dinamicamente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `additionalHelp` | `Function` | sim | Evento disparado ao clicar no ícone de ajuda adicional. |
| `additionalHelpTooltip` | `string` | sim | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `advancedFilters` | `Array` | sim | Lista de objetos dos campos que serão criados na busca avançada. |
| `allowColumnsManager` | `boolean` | sim | Permite o campo aparecer no gerenciador de colunas, mesmo que esteja utilizando `visible: false`, |
| `appendBox` | `boolean` | sim | Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da |
| `autoHeight` | `boolean` | sim | Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo com o número de itens selecionados e a extensão dos mesmos, mantendo-os sempre visíveis. |
| `autoUpload` | `boolean` | sim | Define se o envio do arquivo será automático ao selecionar o mesmo. |
| `booleanFalse` | `string` | sim | Texto exibido quando o valor do componente for *false*. |
| `booleanTrue` | `string` | sim | Texto exibido quando o valor do componente for *true*. |
| `changeOnEnter` | `boolean` | sim | Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada no `po-combo`. |
| `changeVisibleColumns` | `Function` | sim | Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. |
| `clean` | `boolean` | sim | Se verdadeiro, o campo receberá um botão para ser limpo. |
| `columnRestoreManager` | `Function` | sim | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `columns` | `Array | number` | sim | Define as colunas para utilização da busca avançada. Usada somente em conjunto com a propriedade `searchService`, |
| `compactLabel` | `boolean` | sim | Define se o título do campo será exibido de forma compacta. |
| `container` | `string` | sim | Exibirá um container para todos os campos abaixo dessa propriedade. |
| `customAction` | `PoProgressAction` | sim | Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito |
| `customActionClick` | `(file: PoUploadFile) => void` | sim | Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. |
| `debounceTime` | `number` | sim | Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. Será utilizada apenas quando houver serviço (`p-filter-service`). |
| `decimalsLength` | `number` | sim | Quantidade máxima de casas decimais. |
| `directory` | `boolean` | sim | Permite a seleção de diretórios contendo um ou mais arquivos para envio. |
| `disabled` | `boolean` | sim | Desabilita o campo caso informar o valor *true*. |
| `disabledInitFilter` | `boolean` | sim | Desabilita o filtro inicial no serviço do `po-combo`, que é executado no primeiro clique no campo. |
| `disabledTabFilter` | `boolean` | sim | Se verdadeiro, desabilitará a busca de um item via TAB no `po-combo`. |
| `divider` | `string` | sim | Exibirá um divisor acima, utilizando o seu conteudo como título. |
| `dragDrop` | `boolean` | sim | Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos |
| `dragDropHeight` | `number` | sim | Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. |
| `duplicate` | `boolean` | sim | Indica se o campo será duplicado caso seja executada a ação de duplicação. |
| `errorAsyncFunction` | `(value) => Observable` | sim | Função executada para realizar a validação assíncrona personalizada. |
| `errorAsyncProperties` | `ErrorAsyncProperties` | sim | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `boolean` | sim | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorMessage` | `string` | sim | Mensagem que será apresentada quando o campo ficar inválido. |
| `fieldLabel` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como descrição do campo. |
| `fieldValue` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como valor do campo. |
| `filter` | `boolean` | sim | Indica se o campo será usado para busca avançada. |
| `filterMinlength` | `number` | sim | Valor mínimo de caracteres para realizar o filtro no serviço do `po-combo`. |
| `filterMode` | `PoMultiselectFilterMode` | sim | Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. |
| `forceBooleanComponentType` | `ForceBooleanComponentEnum` | sim | Valores aceitos: |
| `forceOptionsComponentType` | `ForceOptionComponentEnum` | sim | pode ser utilizada em conjunto com a propriedade `options` forçando o componente a renderizar um `po-select` ou `po-radio-group`. |
| `formField` | `string` | sim | Nome do campo de formulário que será enviado para o serviço informado na propriedade `url`. |
| `format` | `string | Array` | sim | Formato de exibição no campo. |
| `formatModel` | `boolean` | sim | Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou |
| `formatTime` | `string` | sim | Define o formato de exibição do timer (`'12'` ou `'24'`). |
| `gridColumns` | `number` | sim | Tamanho de exibição do campo em telas. |
| `gridLgColumns` | `number` | sim | Tamanho de exibição do campo em telas grandes (lg). |
| `gridLgPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). |
| `gridMdColumns` | `number` | sim | Tamanho de exibição do campo em telas médias (md). |
| `gridMdPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). |
| `gridSmColumns` | `number` | sim | Tamanho de exibição do campo em telas menores (sm). |
| `gridSmPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). |
| `gridXlColumns` | `number` | sim | Tamanho de exibição do campo em telas extra grandes (xl). |
| `gridXlPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). |
| `headers` | `{
[name: string]: string | Array;
}` | sim | Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. |
| `help` | `string` | sim | Texto de ajuda. |
| `helper` | `string | PoHelperOptions` | sim | Texto simples que será apresentado como auxílio ao campo ou objeto com as definições do po-helper. |
| `hideLabelStatus` | `boolean` | sim | Indica se o status do `model` será escondido visualmente ao lado do switch |
| `hidePasswordPeek` | `boolean` | sim | Permite esconder a função de espiar a senha digitada no `po-password`. |
| `hideRestrictionsInfo` | `boolean` | sim | Oculta visualmente as informações de restrições para o upload. |
| `hideSearch` | `boolean` | sim | Esconde o campo de pesquisa existente dentro do dropdown do `po-multiselect`. |
| `hideSelectAll` | `boolean` | sim | Indica se o campo "Selecionar todos" do `po-multiselect` será escondido. |
| `hideSelectButton` | `boolean` | sim | Omite o botão de seleção de arquivos. |
| `hideSendButton` | `boolean` | sim | Omite o botão de envio de arquivos. |
| `icon` | `string | TemplateRef` | sim | Define o ícone que será exibido no início do campo. |
| `infiniteScroll` | `boolean` | sim | Se verdadeiro ativa a funcionalidade de scroll infinito para o combo ou lookup, ao chegar ao fim da tabela executará nova busca dos dados conforme paginação. |
| `infiniteScrollDistance` | `number` | sim | Define o percentual necessário para disparar o evento show-more, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%. |
| `invalidValue` | `boolean` | sim | Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. |
| `isoFormat` | `PoDatepickerIsoFormat` | sim | Padrão de formatação para saída do model, independentemente do formato de entrada. |
| `key` | `boolean` | sim | Identificador |
| `keydown` | `Function` | sim | Função executada quando uma tecla é pressionada enquanto o foco está no componente. |
| `label` | `string` | sim | Rótulo do campo exibido. |
| `labelPosition` | `PoSwitchLabelPosition` | sim | Posição de exibição do rótulo do PoSwitch. |
| `labels` | `Array` | sim | Lista de objetos do tipo `PoTableColumnLabel` que representa as labels disponíveis na coluna do tipo `label`. |
| `listboxControlPosition` | `'top' | 'bottom'` | sim | Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). |
| `literals` | `PoLookupLiterals | PoMultiselectLiterals | PoComboLiterals | PoDatepickerRangeLiterals | PoUploadLiterals` | sim | Objeto com as literais usadas para os seguintes componentes: `po-lookup`, `po-multiselect`, `po-combo` e `po-datepicker-range`. |
| `loading` | `boolean` | sim | Habilita um estado de carregamento no componente, desabilitando-o e exibindo um ícone de carregamento. |
| `locale` | `string` | sim | Define a localidade a ser utilizada no componente. |
| `mask` | `string` | sim | Máscara para o campo. |
| `maskFormatModel` | `boolean` | sim | Define que o valor do componente será conforme especificado na mascára. O valor padrão é `false`. |
| `maskNoLengthValidation` | `boolean` | sim | 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. |
| `maxLength` | `number` | sim | Tamanho máximo de caracteres. |
| `maxTime` | `string` | sim | Define o horário máximo permitido para seleção no timer. |
| `maxValue` | `string | number` | sim | Valor máximo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minLength` | `number` | sim | Tamanho mínimo de caracteres. |
| `minTime` | `string` | sim | Define o horário mínimo permitido para seleção no timer. |
| `minValue` | `string | number` | sim | Valor mínimo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minuteInterval` | `number` | sim | Define o intervalo entre os minutos exibidos no painel do timepicker. |
| `mode` | `'month-year' | 'year'` | sim | Define o modo de seleção do `po-datepicker`. |
| `modelFormat` | `PoTimepickerModelFormat` | sim | Define o formato do valor do horário a ser utilizado no model do `po-timepicker`. |
| `multiple` | `boolean` | sim | Permite a seleção de múltiplos itens. |
| `noAutocomplete` | `boolean` | sim | Define a propriedade nativa `autocomplete` do campo como off. |
| `offsetColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas. |
| `offsetLgColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas grandes (lg). |
| `offsetMdColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas médias (md). |
| `offsetSmColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas menores (sm). |
| `offsetXlColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas extra grandes (xl). |
| `onError` | `Function` | sim | Evento será disparado quando ocorrer algum erro no envio do arquivo. |
| `onSuccess` | `Function` | sim | Evento será disparado quando o envio do arquivo for realizado com sucesso. |
| `onUpload` | `Function` | sim | Função que será executada no momento de realizar o envio do arquivo, |
| `optional` | `boolean` | sim | Define se a indicação de campo opcional será exibida. |
| `options` | `Array | Array | Array | Array | Array` | sim | Lista de opções que serão exibidos em um componente, podendo selecionar uma opção. |
| `optionsMulti` | `boolean` | sim | Permite que o usuário faça múltipla seleção dentro da lista de opções. |
| `optionsService` | `string | PoComboFilter | PoMultiselectFilter` | sim | Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. |
| `order` | `number` | sim | Informa a ordem de exibição do campo. |
| `params` | `any` | sim | Objeto que será enviado como parâmetro nas requisições de busca usados pelos componentes `po-lookup` e |
| `pattern` | `string` | sim | Regex para validação do campo. |
| `placeholder` | `string` | sim | Mensagem que será exibida enquanto o campo não estiver preenchido. |
| `placeholderSearch` | `string` | sim | Placeholder do campo de pesquisa do `po-multiselect`. |
| `property` | `string` | não | Nome de referência do campo. |
| `range` | `boolean` | sim | O controle passa a permitir a entrada de um intervalo ao invés de um único valor. |
| `rangePresetOptions` | `Array` | sim | Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário. |
| `rangePresets` | `boolean | Array` | sim | Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário. |
| `rangePresetsOrder` | `'asc' | 'desc'` | sim | Define a ordenação dos presets na lista. |
| `readonly` | `boolean` | sim | Indica que o campo será somente leitura. |
| `removeInitialFilter` | `boolean` | sim | Define que o filtro no primeiro clique será removido. |
| `required` | `boolean` | sim | Define a obrigatoriedade do campo. |
| `requiredFieldErrorMessage` | `boolean` | sim | Exibe a mensagem setada na propriedade `errorMessage` se o campo estiver vazio e for requerido. |
| `restrictions` | `PoUploadFileRestrictions` | sim | Objeto que segue a definição da interface `PoUploadFileRestrictions`, |
| `rows` | `number` | sim | Quantidade de linhas exibidas no `po-textarea`. |
| `searchService` | `string | PoLookupFilter` | sim | Serviço que será utilizado para realizar a busca avançada. Pode ser utilizado em conjunto com a propriedade `columns`. |
| `secondInterval` | `number` | sim | Define o intervalo entre os segundos exibidos no painel do timepicker. |
| `secret` | `boolean` | sim | Esconde a informação estilo *password*, pode ser utilizado quando o tipo de dado for *string*. |
| `showRequired` | `boolean` | sim | Define se a indicação de campo obrigatório será exibida. |
| `showSeconds` | `boolean` | sim | Exibe a coluna de segundos no painel do timepicker. |
| `showThumbnail` | `boolean` | sim | Exibe a pré-visualização de imagens ao anexá-las. |
| `size` | `string` | sim | Define o tamanho dos componentes de formulário no template conforme suas respectivas documentações: |
| `sort` | `boolean` | sim | Indica que a lista definida na propriedade p-options será ordenada pela descrição. |
| `sortable` | `boolean` | sim | Controla se a coluna será considerada como "ordenável". Caso seja definido um valor falso, a coluna não será usada para |
| `step` | `number` | sim | Intervalo utilizado no `po-number`. |
| `thousandMaxlength` | `number` | sim | Quantidade máxima de dígitos antes do separador decimal. O valor máximo permitido é 13 |
| `type` | `string | PoDynamicFieldType` | sim | Tipo do valor campo. |
| `url` | `string` | sim | URL que deve ser feita a requisição com os arquivos selecionados. |
| `validate` | `string | Function` | sim | Função ou serviço para validar as **mudanças do campo**. |
| `visible` | `boolean` | sim | Indica se o campo será visível. |
| `width` | `number | string` | sim | Tamanho da coluna em pixels ou porcetagem. |
| `yearRangeLimit` | `number` | sim | Define o limite de anos exibidos na lista de anos do `po-datepicker` nos modos `month-year` e `year`. |
---
# PoPageDynamicTableFilters
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-filters
Interface para a customização de uma página dinâmica que permite atribuir valores iniciais aos filtros de busca avançada.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `additionalHelp` | `Function` | sim | Evento disparado ao clicar no ícone de ajuda adicional. |
| `additionalHelpTooltip` | `string` | sim | Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. |
| `advancedFilters` | `Array` | sim | Lista de objetos dos campos que serão criados na busca avançada. |
| `allowColumnsManager` | `boolean` | sim | Permite o campo aparecer no gerenciador de colunas, mesmo que esteja utilizando `visible: false`, |
| `appendBox` | `boolean` | sim | Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da |
| `autoHeight` | `boolean` | sim | Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo com o número de itens selecionados e a extensão dos mesmos, mantendo-os sempre visíveis. |
| `autoUpload` | `boolean` | sim | Define se o envio do arquivo será automático ao selecionar o mesmo. |
| `booleanFalse` | `string` | sim | Texto exibido quando o valor do componente for *false*. |
| `booleanTrue` | `string` | sim | Texto exibido quando o valor do componente for *true*. |
| `changeOnEnter` | `boolean` | sim | Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada no `po-combo`. |
| `changeVisibleColumns` | `Function` | sim | Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. |
| `clean` | `boolean` | sim | Se verdadeiro, o campo receberá um botão para ser limpo. |
| `columnRestoreManager` | `Function` | sim | Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. |
| `columns` | `Array | number` | sim | Define as colunas para utilização da busca avançada. Usada somente em conjunto com a propriedade `searchService`, |
| `compactLabel` | `boolean` | sim | Define se o título do campo será exibido de forma compacta. |
| `container` | `string` | sim | Exibirá um container para todos os campos abaixo dessa propriedade. |
| `customAction` | `PoProgressAction` | sim | Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito |
| `customActionClick` | `(file: PoUploadFile) => void` | sim | Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. |
| `debounceTime` | `number` | sim | Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. Será utilizada apenas quando houver serviço (`p-filter-service`). |
| `decimalsLength` | `number` | sim | Quantidade máxima de casas decimais. |
| `directory` | `boolean` | sim | Permite a seleção de diretórios contendo um ou mais arquivos para envio. |
| `disabled` | `boolean` | sim | Desabilita o campo caso informar o valor *true*. |
| `disabledInitFilter` | `boolean` | sim | Desabilita o filtro inicial no serviço do `po-combo`, que é executado no primeiro clique no campo. |
| `disabledTabFilter` | `boolean` | sim | Se verdadeiro, desabilitará a busca de um item via TAB no `po-combo`. |
| `divider` | `string` | sim | Exibirá um divisor acima, utilizando o seu conteudo como título. |
| `dragDrop` | `boolean` | sim | Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos |
| `dragDropHeight` | `number` | sim | Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. |
| `duplicate` | `boolean` | sim | Indica se o campo será duplicado caso seja executada a ação de duplicação. |
| `errorAsyncFunction` | `(value) => Observable` | sim | Função executada para realizar a validação assíncrona personalizada. |
| `errorAsyncProperties` | `ErrorAsyncProperties` | sim | Realiza alguma validação customizada assíncrona no componente. |
| `errorLimit` | `boolean` | sim | Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. |
| `errorMessage` | `string` | sim | Mensagem que será apresentada quando o campo ficar inválido. |
| `fieldLabel` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como descrição do campo. |
| `fieldValue` | `string` | sim | Nome da propriedade do objeto retornado que será utilizado como valor do campo. |
| `filter` | `boolean` | sim | Indica se o campo será usado para busca avançada. |
| `filterMinlength` | `number` | sim | Valor mínimo de caracteres para realizar o filtro no serviço do `po-combo`. |
| `filterMode` | `PoMultiselectFilterMode` | sim | Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. |
| `fixed` | `boolean` | sim | Controla se o filtro será fixo, ou seja, não poderá ser alterado pelo usuário no filtro avançado. |
| `forceBooleanComponentType` | `ForceBooleanComponentEnum` | sim | Valores aceitos: |
| `forceOptionsComponentType` | `ForceOptionComponentEnum` | sim | pode ser utilizada em conjunto com a propriedade `options` forçando o componente a renderizar um `po-select` ou `po-radio-group`. |
| `formField` | `string` | sim | Nome do campo de formulário que será enviado para o serviço informado na propriedade `url`. |
| `format` | `string | Array` | sim | Formato de exibição no campo. |
| `formatModel` | `boolean` | sim | Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou |
| `formatTime` | `string` | sim | Define o formato de exibição do timer (`'12'` ou `'24'`). |
| `gridColumns` | `number` | sim | Tamanho de exibição do campo em telas. |
| `gridLgColumns` | `number` | sim | Tamanho de exibição do campo em telas grandes (lg). |
| `gridLgPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). |
| `gridMdColumns` | `number` | sim | Tamanho de exibição do campo em telas médias (md). |
| `gridMdPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). |
| `gridSmColumns` | `number` | sim | Tamanho de exibição do campo em telas menores (sm). |
| `gridSmPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). |
| `gridXlColumns` | `number` | sim | Tamanho de exibição do campo em telas extra grandes (xl). |
| `gridXlPull` | `number` | sim | Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). |
| `headers` | `{
[name: string]: string | Array;
}` | sim | Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. |
| `help` | `string` | sim | Texto de ajuda. |
| `helper` | `string | PoHelperOptions` | sim | Texto simples que será apresentado como auxílio ao campo ou objeto com as definições do po-helper. |
| `hideLabelStatus` | `boolean` | sim | Indica se o status do `model` será escondido visualmente ao lado do switch |
| `hidePasswordPeek` | `boolean` | sim | Permite esconder a função de espiar a senha digitada no `po-password`. |
| `hideRestrictionsInfo` | `boolean` | sim | Oculta visualmente as informações de restrições para o upload. |
| `hideSearch` | `boolean` | sim | Esconde o campo de pesquisa existente dentro do dropdown do `po-multiselect`. |
| `hideSelectAll` | `boolean` | sim | Indica se o campo "Selecionar todos" do `po-multiselect` será escondido. |
| `hideSelectButton` | `boolean` | sim | Omite o botão de seleção de arquivos. |
| `hideSendButton` | `boolean` | sim | Omite o botão de envio de arquivos. |
| `icon` | `string | TemplateRef` | sim | Define o ícone que será exibido no início do campo. |
| `infiniteScroll` | `boolean` | sim | Se verdadeiro ativa a funcionalidade de scroll infinito para o combo ou lookup, ao chegar ao fim da tabela executará nova busca dos dados conforme paginação. |
| `infiniteScrollDistance` | `number` | sim | Define o percentual necessário para disparar o evento show-more, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%. |
| `initValue` | `any` | sim | Define um Valor inicial para um filtro de busca avançada. |
| `invalidValue` | `boolean` | sim | Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. |
| `isoFormat` | `PoDatepickerIsoFormat` | sim | Padrão de formatação para saída do model, independentemente do formato de entrada. |
| `key` | `boolean` | sim | Identificador |
| `keydown` | `Function` | sim | Função executada quando uma tecla é pressionada enquanto o foco está no componente. |
| `label` | `string` | sim | Rótulo do campo exibido. |
| `labelPosition` | `PoSwitchLabelPosition` | sim | Posição de exibição do rótulo do PoSwitch. |
| `labels` | `Array` | sim | Lista de objetos do tipo `PoTableColumnLabel` que representa as labels disponíveis na coluna do tipo `label`. |
| `listboxControlPosition` | `'top' | 'bottom'` | sim | Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). |
| `literals` | `PoLookupLiterals | PoMultiselectLiterals | PoComboLiterals | PoDatepickerRangeLiterals | PoUploadLiterals` | sim | Objeto com as literais usadas para os seguintes componentes: `po-lookup`, `po-multiselect`, `po-combo` e `po-datepicker-range`. |
| `loading` | `boolean` | sim | Habilita um estado de carregamento no componente, desabilitando-o e exibindo um ícone de carregamento. |
| `locale` | `string` | sim | Define a localidade a ser utilizada no componente. |
| `mask` | `string` | sim | Máscara para o campo. |
| `maskFormatModel` | `boolean` | sim | Define que o valor do componente será conforme especificado na mascára. O valor padrão é `false`. |
| `maskNoLengthValidation` | `boolean` | sim | 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. |
| `maxLength` | `number` | sim | Tamanho máximo de caracteres. |
| `maxTime` | `string` | sim | Define o horário máximo permitido para seleção no timer. |
| `maxValue` | `string | number` | sim | Valor máximo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minLength` | `number` | sim | Tamanho mínimo de caracteres. |
| `minTime` | `string` | sim | Define o horário mínimo permitido para seleção no timer. |
| `minValue` | `string | number` | sim | Valor mínimo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date*, *dateTime* ou *time*. |
| `minuteInterval` | `number` | sim | Define o intervalo entre os minutos exibidos no painel do timepicker. |
| `mode` | `'month-year' | 'year'` | sim | Define o modo de seleção do `po-datepicker`. |
| `modelFormat` | `PoTimepickerModelFormat` | sim | Define o formato do valor do horário a ser utilizado no model do `po-timepicker`. |
| `multiple` | `boolean` | sim | Permite a seleção de múltiplos itens. |
| `noAutocomplete` | `boolean` | sim | Define a propriedade nativa `autocomplete` do campo como off. |
| `offsetColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas. |
| `offsetLgColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas grandes (lg). |
| `offsetMdColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas médias (md). |
| `offsetSmColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas menores (sm). |
| `offsetXlColumns` | `number` | sim | Tamanho do espaço de exibição do campo em telas extra grandes (xl). |
| `onError` | `Function` | sim | Evento será disparado quando ocorrer algum erro no envio do arquivo. |
| `onSuccess` | `Function` | sim | Evento será disparado quando o envio do arquivo for realizado com sucesso. |
| `onUpload` | `Function` | sim | Função que será executada no momento de realizar o envio do arquivo, |
| `optional` | `boolean` | sim | Define se a indicação de campo opcional será exibida. |
| `options` | `Array | Array | Array | Array | Array` | sim | Lista de opções que serão exibidos em um componente, podendo selecionar uma opção. |
| `optionsMulti` | `boolean` | sim | Permite que o usuário faça múltipla seleção dentro da lista de opções. |
| `optionsService` | `string | PoComboFilter | PoMultiselectFilter` | sim | Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. |
| `order` | `number` | sim | Informa a ordem de exibição do campo. |
| `params` | `any` | sim | Objeto que será enviado como parâmetro nas requisições de busca usados pelos componentes `po-lookup` e |
| `pattern` | `string` | sim | Regex para validação do campo. |
| `placeholder` | `string` | sim | Mensagem que será exibida enquanto o campo não estiver preenchido. |
| `placeholderSearch` | `string` | sim | Placeholder do campo de pesquisa do `po-multiselect`. |
| `property` | `string` | não | Nome de referência do campo. |
| `range` | `boolean` | sim | O controle passa a permitir a entrada de um intervalo ao invés de um único valor. |
| `rangePresetOptions` | `Array` | sim | Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário. |
| `rangePresets` | `boolean | Array` | sim | Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário. |
| `rangePresetsOrder` | `'asc' | 'desc'` | sim | Define a ordenação dos presets na lista. |
| `readonly` | `boolean` | sim | Indica que o campo será somente leitura. |
| `removeInitialFilter` | `boolean` | sim | Define que o filtro no primeiro clique será removido. |
| `required` | `boolean` | sim | Define a obrigatoriedade do campo. |
| `requiredFieldErrorMessage` | `boolean` | sim | Exibe a mensagem setada na propriedade `errorMessage` se o campo estiver vazio e for requerido. |
| `restrictions` | `PoUploadFileRestrictions` | sim | Objeto que segue a definição da interface `PoUploadFileRestrictions`, |
| `rows` | `number` | sim | Quantidade de linhas exibidas no `po-textarea`. |
| `searchService` | `string | PoLookupFilter` | sim | Serviço que será utilizado para realizar a busca avançada. Pode ser utilizado em conjunto com a propriedade `columns`. |
| `secondInterval` | `number` | sim | Define o intervalo entre os segundos exibidos no painel do timepicker. |
| `secret` | `boolean` | sim | Esconde a informação estilo *password*, pode ser utilizado quando o tipo de dado for *string*. |
| `showRequired` | `boolean` | sim | Define se a indicação de campo obrigatório será exibida. |
| `showSeconds` | `boolean` | sim | Exibe a coluna de segundos no painel do timepicker. |
| `showThumbnail` | `boolean` | sim | Exibe a pré-visualização de imagens ao anexá-las. |
| `size` | `string` | sim | Define o tamanho dos componentes de formulário no template conforme suas respectivas documentações: |
| `sort` | `boolean` | sim | Indica que a lista definida na propriedade p-options será ordenada pela descrição. |
| `sortable` | `boolean` | sim | Controla se a coluna será considerada como "ordenável". Caso seja definido um valor falso, a coluna não será usada para |
| `step` | `number` | sim | Intervalo utilizado no `po-number`. |
| `thousandMaxlength` | `number` | sim | Quantidade máxima de dígitos antes do separador decimal. O valor máximo permitido é 13 |
| `type` | `string | PoDynamicFieldType` | sim | Tipo do valor campo. |
| `url` | `string` | sim | URL que deve ser feita a requisição com os arquivos selecionados. |
| `validate` | `string | Function` | sim | Função ou serviço para validar as **mudanças do campo**. |
| `visible` | `boolean` | sim | Indica se o campo será visível. |
| `width` | `number | string` | sim | Tamanho da coluna em pixels ou porcetagem. |
| `yearRangeLimit` | `number` | sim | Define o limite de anos exibidos na lista de anos do `po-datepicker` nos modos `month-year` e `year`. |
---
# PoPageDynamicTableMetaData
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-meta-data
Interface para as propriedades de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `PoPageDynamicTableActions` | sim | Ações que o usuário poderá executar na página através de botões. |
| `autoRouter` | `boolean` | sim | Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `concatFilters` | `boolean` | sim | Permite a utilização da pesquisa rápida junto com a pesquisa avançada. |
| `fields` | `Array` | sim | Lista dos campos usados na tabela e busca avançada. |
| `hideCloseDisclaimers` | `Array` | sim | Lista de filtros que terão a opção de fechar ocultada |
| `hideRemoveAllDisclaimer` | `boolean` | sim | Oculta o botão para remover todos os *disclaimers*. |
| `keepFilters` | `boolean` | sim | Mantém na modal de Busca Avançada os valores preenchidos do último filtro realizado pelo usuário. |
| `pageCustomActions` | `Array` | sim | Lista de ações customizadas da página que serão incorporadas às ações informadas através da propriedade `actions` |
| `quickSearchWidth` | `number` | sim | Largura do campo de busca, utilizando o *Grid System*, |
| `tableCustomActions` | `Array` | sim | Lista de ações customizadas da tabela que serão incorporadas às ações informadas através da propriedade `actions`. |
| `title` | `string` | sim | Título da página. |
| `version` | `string` | sim | Versão do metadata, o sistema irá buscar a versão nas próximas iteração. |
---
# PoPageDynamicTableOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-dynamic-table-options
Interface para as propriedades de uma página dinâmica.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `actions` | `PoPageDynamicTableActions` | sim | Ações que o usuário poderá executar na página através de botões. |
| `breadcrumb` | `PoBreadcrumb` | sim | Objeto com propriedades do breadcrumb. |
| `concatFilters` | `boolean` | sim | Permite a utilização da pesquisa rápida junto com a pesquisa avançada. |
| `fields` | `Array` | sim | Lista dos campos usados na tabela e busca avançada. |
| `hideCloseDisclaimers` | `Array` | sim | Lista de filtros que terão a opção de fechar ocultada |
| `hideRemoveAllDisclaimer` | `boolean` | sim | Oculta o botão para remover todos os *disclaimers*. |
| `keepFilters` | `boolean` | sim | Mantém na modal de Busca Avançada os valores preenchidos do último filtro realizado pelo usuário. |
| `pageCustomActions` | `Array` | sim | Lista de ações customizadas da página que serão incorporadas às ações informadas através da propriedade `actions` |
| `quickSearchWidth` | `number` | sim | Largura do campo de busca, utilizando o *Grid System*, |
| `tableCustomActions` | `Array` | sim | Lista de ações customizadas da tabela que serão incorporadas às ações informadas através da propriedade `actions`. |
| `title` | `string` | sim | Título da página. |
---
# PoPageEditLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-edit-literals
Interface para definição das literais usadas no `po-page-edit`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `cancel` | `string` | sim | Label da ação `cancel`. |
| `save` | `string` | sim | Label da ação `save`. |
| `saveNew` | `string` | sim | Label da ação `saveNew`. |
---
# PoPageFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-filter
Interface para o atributo `filter` do componente `po-page-list`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação a ser executada. |
| `advancedAction` | `Function` | sim | Ação a ser executada quando for disparado o |
| `placeholder` | `string` | sim | Texto de instrução exibido dentro do campo de filtro. |
| `width` | `number` | sim | Tamanho do filtro em tela, utilizando o *Grid System*, |
---
# PoPageListLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-list-literals
Interface para definição das literais usadas no `po-page-list`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `otherActions` | `string` | sim | Legenda do `po-dropdown` de ações. |
---
# PoPageLogin
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-login
Interface com a definição do objeto gerado pelo formulário do componente `po-page-login`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `login` | `string` | não | Login preenchido pelo usuário. |
| `password` | `string` | não | Senha preenchida pelo usuário, a mesma será convertida para [hash/md5] antes de ser enviada para a aplicação. |
| `rememberUser` | `boolean` | não | Essa propriedade informa se o usuário quer que seus dados sejam lembrados em um acesso futuro. |
---
# PoPageLoginCustomField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-login-custom-field
Interface com a definição do Custom Field, podendo ser utilizado para informar um campo customizado no componente `po-page-login`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `errorPattern` | `string` | sim | Mensagem que será exibida quando a expressão regular informada na propriedade `pattern` não for válida. |
| `fieldValue` | `string` | sim | Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na |
| `options` | `Array` | sim | Lista de opções de um `po-select`. |
| `pattern` | `string` | sim | Expressão regular para validar o campo customizado, caso a expressão não seja atendida a literal informada na |
| `placeholder` | `string` | sim | Mensagem que será exibida enquanto o campo customizado não estiver preenchido. |
| `property` | `string` | não | Nome da propriedade que será utilizado no campo customizado. |
| `url` | `string` | sim | Nesta propriedade deve ser informada a URL do serviço em que será realizado o filtro para carregamento da |
| `value` | `string | number` | sim | Valor do campo customizado. |
---
# PoPageLoginLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-login-literals
Interface para definição das literais usadas no `po-page-login`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `attempts` | `string` | sim | Texto que informa a quantidade de tentativas restantes no popover de aviso de bloqueio. |
| `createANewPasswordNow` | `string` | sim | Texto exibido no popover de aviso de bloqueio, que orienta o usuário, caso ele tenha esquecido a senha, a criar uma nova senha. |
| `customFieldErrorPattern` | `string` | sim | Mensagem de erro apresentada quando o campo customizado está inválido |
| `customFieldPlaceholder` | `string` | sim | Placeholder para o campo customizado. |
| `forgotPassword` | `string` | sim | Texto de ajuda para recuperação dos dados de acesso. |
| `forgotYourPassword` | `string` | sim | Texto que questiona o esquecimento da senha no popover de aviso de bloqueio. |
| `highlightInfo` | `string` | sim | Texto de destaque sobreposto à imagem de destaque. Essa opção é utilizada em conjunto com o atributo `p-background`. |
| `iForgotMyPassword` | `string` | sim | Texto do link de 'esqueci minha senha' exibido no popover de aviso de bloqueio. |
| `ifYouTryHarder` | `string` | sim | Texto de aviso de tentativas exibido no popover de aviso de bloqueio. |
| `loginErrorPattern` | `string` | sim | Mensagem de erro apresentada quando o campo de login está inválido. |
| `loginHint` | `string` | sim | Texto exibido como dica para o campo de login. |
| `loginLabel` | `string` | sim | Texto exibido como label do campo de login. |
| `loginPlaceholder` | `string` | sim | Placeholder do campo de login. |
| `passwordErrorPattern` | `string` | sim | Mensagem de erro apresentada quando o campo de password está inválido. |
| `passwordLabel` | `string` | sim | Texto exibido como label do campo de password. |
| `passwordPlaceholder` | `string` | sim | Placeholder do campo de password. |
| `registerUrl` | `string` | sim | Texto exibido no link de novo cadastro. |
| `rememberUser` | `string` | sim | Texto exibido na função "Lembrar usuário". |
| `rememberUserHint` | `string` | sim | Texto exibido como dica da função "Lembrar usuário" |
| `submitLabel` | `string` | sim | Texto exibido no botão de confirmação da página de login. |
| `submittedLabel` | `string` | sim | Texto exibido no botão de confirmação da página de login quando estiver em estado de carregamento. |
| `support` | `string` | sim | Label do botão de suporte. |
| `titlePopover` | `string` | sim | Título do popover para aviso de bloqueio. |
| `welcome` | `string` | sim | Mensagem de "Boas-vindas" para o usuário que aparece acima dos campos de entrada. |
| `yourUserWillBeBlocked` | `string` | sim | Texto que informa ao usuário que o mesmo será bloqueado e por quanto tempo no popover de aviso de bloqueio. |
---
# PoPageLoginRecovery
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-login-recovery
Interface para especificação do tipo de recuperação de senha no `po-modal-password-recovery`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `contactMail` | `string` | sim | Definição do e-mail que é exibido na mensagem para contato de suporte. |
| `phoneMask` | `string` | sim | Definição da máscara do campo de telefone. |
| `type` | `PoModalPasswordRecoveryType` | sim | Enum para especificação do tipo de recuperação de senha [PoModalPasswordRecoveryType](/documentation/po-modal-password-recovery). |
| `url` | `string` | não | Endpoint usado pelo template **PoModalPasswordRecovery** para requisição do recurso. |
---
# PoPopupAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-popup-action
Interface para lista de ações do componente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, sendo possível passar o nome ou a referência da função. |
| `disabled` | `boolean | Function` | sim | Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo da ação. |
| `selected` | `boolean` | sim | Define se a ação está selecionada. |
| `separator` | `boolean` | sim | Atribui uma linha separadora acima do item. |
| `subItems` | `Array` | sim | Define uma lista de subitens para criação de menus aninhados. |
| `type` | `string` | sim | Define a cor do item. |
| `url` | `string` | sim | URL para redirecionamento. Aceita rotas internas e links externos. |
| `visible` | `boolean | Function` | sim | Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. |
---
# PoProgressAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-progress-action
Interface para as ações dos componentes po-progress e po-upload.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `disabled` | `boolean | Function` | sim | Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado. |
| `icon` | `string | TemplateRef` | sim | Define um ícone que será exibido ao lado esquerdo do rótulo. |
| `label` | `string` | sim | Rótulo da ação. |
| `type` | `string` | sim | Define a cor do item, sendo `default` o padrão. |
| `visible` | `boolean | Function` | sim | Define se a ação será visível. |
---
# PoQueryBuilder
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-query-builder
Classe utilitária para construir consultas sobre os registros de um *schema*.
A utilização dos métodos desta classe é feita a partir do retorno do método `PoEntity.find()`. Por exemplo,
para utilizar o método `PoQueryBuilder.page()`, é necessário:
``` typescript
PoSyncService.getModel('schema name').find().page(2).exec();
```
O `PoQueryBuilder` foi projetado para que os seus métodos sejam
chamados em cascata e ao final desse encadeamento invocar o método
`PoQueryBuilder.exec()` para que a busca seja concluída. Por exemplo:
``` typescript
PoSyncService
.getModel('schema name')
.find()
.page(2)
.pageSize(5)
.sort()
.exec();
```
## Métodos
### `exec()`
Ao final da chamada dos métodos do `PoQueryBuilder` utilizados, este método deve ser chamado para que a busca seja concluída.
### `filter(filter: object)`
Aplica filtros sobre os registros, baseados nos campos e valores definidos como filtro. Por exemplo:
```
PoQueryBuilder.filter({ name: 'Marie', age: 24 });
```
Retorna todos os registros que contenham a propriedade `name` igual a Marie e `age` igual a 24.
### `limit(limit: number)`
Limita o número de registros que serão retornados.
### `page(page: number)`
Especifica a página de registros que se deseja retornar.
### `pageSize(pageSize: number)`
Define quantos elementos serão retornados por página.
### `select(fields: string)`
Utilizado para definir quais campos do *schema* serão retornados na consulta.
### `sort(field: string)`
Ordena os registros por um campo.
### `where(filter: object)`
Essa função serve como alias para o `PoQueryBuilder.filter()`. É utilizada somente para dar maior legibilidade ao código.
---
# PoRadioGroupOption
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-radio-group-option
Interface para as ações do componente po-radio-group.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `disabled` | `boolean` | sim | Desabilita o radio. |
| `label` | `string` | não | Texto do radio. |
| `value` | `string | number` | não | Valor do radio. |
---
# PoResponseApi
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-response-api
Interface que representa a estrutura de uma resposta de sucesso HTTP.
> Utilizada apenas quando a resposta incluir uma coleção de itens.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hasNext` | `boolean` | não | Indica se existe uma próxima página com mais registros para aquela coleção de itens. |
| `items` | `Array` | não | Lista de itens retornados. |
---
# PoResponseApi
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-response-api
Interface que representa a estrutura de uma resposta de sucesso HTTP.
> Utilizada apenas quando a resposta incluir uma coleção de itens.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hasNext` | `boolean` | não | Indica se existe uma próxima página com mais registros para aquela coleção de itens. |
| `items` | `Array` | não | Lista de itens retornados. |
---
# PoSearchAiColumn
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-column
Interface que define os metadados de uma coluna/campo enviados ao endpoint de IA
para contextualizar a interpretação da busca em linguagem natural.
Esses metadados ajudam o provedor de IA a mapear os termos digitados pelo usuário
para as propriedades reais dos dados e a gerar um filtro (por exemplo, OData) coerente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Rótulo legível exibido ao usuário (ex: `Nome`, `Idade`, `Cidade`). |
| `property` | `string` | não | Nome da propriedade do campo (ex: `name`, `age`, `city`). |
| `type` | `string` | sim | Tipo do campo, utilizado pela IA para gerar comparações adequadas. |
---
# PoSearchAiError
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-error
Interface que define o objeto emitido pelo evento `p-error` quando a chamada à
API de IA falha (erro HTTP, timeout, resposta inválida, etc.).
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `message` | `string` | não | Mensagem de erro. |
| `query` | `string` | não | Texto original digitado pelo usuário. |
| `statusCode` | `number` | não | Código HTTP do erro (ex: `500`, `408` para timeout). |
---
# PoSearchAiLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-literals
Interface para definição das literais usadas no `po-search-ai`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `clean` | `string` | sim | Texto de acessibilidade do botão de limpar o campo. |
| `errorMessage` | `string` | sim | Mensagem exibida quando a busca com IA falha. |
---
# PoSearchAiRequest
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-request
Interface que define o payload enviado ao endpoint de IA configurado via `p-url`.
O componente é **agnóstico ao provedor de IA**: o backend (proxy) recebe este payload,
encaminha para a LLM e retorna um `PoSearchAiResponse`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `columns` | `Array` | não | Metadados dos campos disponíveis para a busca (ver `PoSearchAiColumn`). |
| `query` | `string` | não | Texto em linguagem natural digitado pelo usuário. |
---
# PoSearchAiResponse
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-response
Interface que define a resposta esperada do endpoint de IA configurado via `p-url`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `confidence` | `number` | sim | Nível de confiança da interpretação da IA, em um intervalo de `0.0` a `1.0`. |
| `data` | `Record` | sim | Payload genérico da resposta da IA (mensagem de chat, ações, dados customizados, etc.). |
| `description` | `string` | sim | Descrição legível, em linguagem natural, da resposta. |
| `filter` | `string` | sim | Filtro gerado pela IA, normalmente no padrão OData |
| `type` | `PoSearchAiResponseType` | sim | Tipo da resposta retornada pela IA. |
---
# PoSearchAiResult
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-result
Interface que define o objeto emitido pelos eventos `p-result` e `p-low-confidence`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `confidence` | `number` | sim | Nível de confiança da interpretação (`0.0` a `1.0`). |
| `data` | `Record` | sim | Payload genérico da resposta (chat, ações, dados customizados, etc.). |
| `description` | `string` | sim | Descrição legível da resposta. |
| `filter` | `string` | sim | Filtro retornado pela IA (ex: filtro OData). Presente quando `type` é `'filter'`. |
| `query` | `string` | não | Texto original digitado pelo usuário. |
| `type` | `PoSearchAiResponseType` | não | Tipo da resposta retornada pela IA. |
---
# PoSearchFilterSelect
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-filter-select
Interface que define as opções que serão exibidas no dropdown do `po-search`, ao usar a propriedade `p-filter-select`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Descrição exibida nas opções da lista. |
| `value` | `Array | string` | não | Valores que serão atribuídos ao `p-filter-keys` |
---
# PoSearchLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-literals
Interface para definição das literais usadas no `po-search`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `all` | `string` | sim | Texto exibido no dropdown de tipo de filtro, representando todos os tipos disponíveis. |
| `clean` | `string` | sim | Texto alternativo (aria-label) para o botão de limpar o campo de busca, usado por leitores de tela. |
| `footerActionListbox` | `string` | sim | Texto exibido na ação do rodapé da lista de resultados. |
| `next` | `string` | sim | Texto alternativo (aria-label) para navegação até o próximo resultado da busca. |
| `of` | `string` | sim | Texto alternativo (aria-label) para a palavra "de" no contador de resultados (ex: "Resultado 1 de 4"). |
| `placeholderListbox` | `string` | sim | Texto exibido como *placeholder* na lista de resultados. |
| `previous` | `string` | sim | Texto alternativo (aria-label) para navegação até o resultado anterior da busca. |
| `result` | `string` | sim | Texto alternativo (aria-label) para a label "Resultado" que acompanha o contador. |
| `search` | `string` | sim | Texto exibido como *placeholder* no campo de busca. |
---
# PoSearchLocateSummary
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-locate-summary
Interface que define o resumo de localização do filtro `p-filter-locate`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `currentIndex` | `number` | não | Índice atual da ocorrência localizada. |
| `total` | `number` | não | Total de ocorrências encontradas. |
---
# PoSearchOption
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-option
Interface que define as opções que serão exibidas na lista ao procurar do `po-search`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | sim | Descrição exibida nas opções da lista. |
| `value` | `string | number` | não | Valor do objeto que será atribuído ao *model*. |
---
# PoSelectOption
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-select-option
Interface da coleções de itens que deve ser informado no componente po-select
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Label a ser utilizada nos itens da lista. |
| `value` | `string | number` | não | Valor do objeto que será atribuído ao model. |
---
# PoSelectOptionGroup
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-select-option-group
Interface da coleções de itens em grupo, utilizando uma label para o grupo e as opções do tipo `PoSelectOption`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `label` | `string` | não | Label para denominar o nome do grupo. |
| `options` | `Array` | não | Lista com as opções disponíveis em cada grupo. |
---
# PoSlideItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-slide-item
Interface que define cada objeto do `PoSlideItem`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação executada ao clicar no slide caso não tenha link definido. |
| `alt` | `string` | sim | Texto que aparece quando a imagem não é encontrada. |
| `image` | `string` | não | Define o caminho da imagem. |
| `link` | `string` | sim | Link interno ou externo que será aberto ao clicar no slide. |
---
# PoStepperItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-stepper-item
Interface para definição dos *steps* do componente `po-stepper` quando utilizada a propriedade `p-steps`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `iconActive` | `string | TemplateRef` | sim | Define o ícone do *step* ativo. |
| `iconDefault` | `string | TemplateRef` | sim | Define o ícone do *step* default. |
| `iconDone` | `string | TemplateRef` | sim | Define o ícone do *step* concluído. |
| `id` | `string` | sim | Identificador único do step. |
| `label` | `string` | sim | Texto do item do stepper. |
| `status` | `PoStepperStatus` | sim | Define o estado de exibição do *step*. |
---
# PoStorageConfig
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-storage-config
Interface para as configurações da base de dados local do `PoStorageService`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `driverOrder` | `Array` | sim | Ordem de preferência dos *drivers* para gravação dos dados. |
| `name` | `string` | sim | Nome da base de dados. |
| `storeName` | `string` | sim | Nome da coleção onde os dados serão armazenados. Deve ser alfanumérico e conter "_"(underscores). |
---
# PoSyncConfig
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-sync-config
Interface para a definição das configurações do sincronismo.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `dataTransform` | `PoDataTransform` | sim | Classe usada para a trasformação dos dados nas requisições. |
| `period` | `number` | sim | Tempo em segundos do sicronismo periódico. |
| `type` | `PoNetworkType | Array` | não | Tipos de conexões permitidas para o sincronismo. |
---
# PoSyncFieldOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-sync-field-options
Interface que irá mapear as configurações dos campos do `PoSyncSchema`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `local` | `boolean` | sim | Propriedade que informa se o campo será apenas para armazenamento local |
| `name` | `string` | não | Propriedade que informa o nome do campo. |
---
# PoSyncResponse
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-sync-response
Define a resposta dos eventos enviados ao servidor.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `customRequestId` | `string` | sim | Identificador customizado do registro. |
| `id` | `number` | não | Identificador do evento na fila. |
| `request` | `PoHttpRequestData` | não | Dados da requisição. |
| `response` | `HttpResponse | HttpErrorResponse | PoEventSourcingErrorResponse` | não | Resposta retornada após a tentativa de envio para o servidor. |
---
# PoSyncSchema
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-sync-schema
Interface que irá mapear as informações dos recursos, principalmente sua origem e as informações que serão retornadas.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `createdAtField` | `string` | sim | Nome da propriedade que informa a data de criação do registro. |
| `deleteUrlApi` | `string` | sim | Endereço do endpoint para excluir registros. |
| `deletedAtField` | `string` | sim | Nome da propriedade que informa a data de deleção. |
| `deletedField` | `string` | não | Nome da propriedade que informa se o registro foi excluído. |
| `diffUrlApi` | `string` | não | Endereço do endpoint que proverá apenas dados alterados no servidor. |
| `fields` | `Array` | não | Campos que serão retornados pela API. |
| `getUrlApi` | `string` | não | Endereço do endpoint que utiliza o método GET que proverá os dados. |
| `idField` | `string` | não | Nome da propriedade referente ao identificador único para os itens do *schema*. |
| `name` | `string` | não | Identifição para representar o *schema*. |
| `pageSize` | `number` | não | Quantidade de itens por página que será enviado pela API. |
| `patchUrlApi` | `string` | sim | Endereço do endpoint que utiliza o método PUT para atualizar registros. |
| `postUrlApi` | `string` | sim | Endereço do endpoint que utiliza o método POST para incluir os registros. |
| `updatedAtField` | `string` | sim | Nome da propriedade que informa a data de atualização do registro. |
---
# PoTab
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tab
Interface que define o `po-tab`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `active` | `boolean` | sim | Ativa a aba exibindo seu conteúdo. |
| `click` | `Function` | sim | Método disparado ao clicar na aba. |
| `closeTab` | `Function` | sim | Método disparado ao clicar no botão de fechar a aba. |
| `disabled` | `boolean` | sim | Desabilita a aba impossibilitando que fique ativa. |
| `hide` | `boolean` | sim | Oculta a aba. |
| `hideClose` | `boolean` | sim | Esconde o botão de fechar a aba. |
| `label` | `string` | não | Rótulo da aba. |
---
# PoTableAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-action
Interface para lista de ações do componente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, sendo possível passar o nome ou a referência da função. |
| `disabled` | `boolean | Function` | sim | Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo da ação. |
| `selected` | `boolean` | sim | Define se a ação está selecionada. |
| `separator` | `boolean` | sim | Atribui uma linha separadora acima do item. |
| `subItems` | `Array` | sim | Define uma lista de subitens para criação de menus aninhados. |
| `type` | `string` | sim | Define a cor do item. |
| `url` | `string` | sim | URL para redirecionamento. Aceita rotas internas e links externos. |
| `visible` | `boolean | Function` | sim | Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. |
---
# PoTableBoolean
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-boolean
Interface que define as colunas booleanas do `po-table`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `falseLabel` | `string` | sim | Define o rótulo para valores `false`. |
| `trueLabel` | `string` | sim | Define o rótulo para valores `true`. |
---
# PoTableColumn
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-column
Interface para configuração das colunas do `po-table`.
As definições das colunas serão aplicadas linha a linha.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Define uma ação na coluna quando o tipo da coluna for `link` ou `icon`. |
| `boolean` | `PoTableBoolean` | sim | Define um objeto do tipo `PoTableBoolean` para as colunas do tipo _boolean_. Por exemplo: |
| `color` | `string | Function` | sim | Define a cor que será aplicada no conteúdo da coluna. |
| `detail` | `PoTableDetail` | sim | Define um objeto que segue a interface `PoTableDetail`, para as colunas de detalhes. Por exemplo: |
| `disabled` | `Function` | sim | Função que deve retornar um booleano para habilitar ou desabilitar o *link* e sua ação. |
| `format` | `string` | sim | Formato de exibição do valor da coluna. |
| `icons` | `Array` | sim | Define um *array* de objetos para colunas de ícones que irá sobrepor os valores como `action` e `color` |
| `label` | `string` | sim | Texto para título da coluna. |
| `labels` | `Array` | sim | Define um array de objetos para as colunas de label, onde 'labels' é uma lista de objetos |
| `link` | `string` | sim | Define o nome da propriedade que conterá o `link` a ser redirecionado. |
| `mask` | `string` | sim | Define uma máscara para formatação do valor exibido na coluna. |
| `property` | `string` | sim | Nome identificador da coluna. Também permite objetos aninhados conforme exemplo abaixo. |
| `searchAiIgnore` | `boolean` | sim | Quando `true`, exclui a coluna dos metadados enviados ao endpoint de IA configurado |
| `sortable` | `boolean` | sim | Controla se a coluna será considerada como "ordenavel". Caso seja definido um valor falso, a coluna não será usada para |
| `subtitles` | `Array` | sim | Define um array de objetos para as colunas de legenda. Onde, `subtitles` é uma lista de objetos do tipo PoTableSubtitle na qual |
| `tooltip` | `string` | sim | Define um texto de ajuda que será exibido ao passar o *mouse* sobre um texto. |
| `type` | `string` | sim | Tipo da coluna. |
| `visible` | `boolean` | sim | Controla a exibição da coluna. Caso seja definido um valor falso, a coluna não será exibida mas mas será possível torná-la |
| `width` | `string` | sim | hoje o tamanho mínimo das colunas é de 32px, respeitando o padding lateral. |
---
# PoTableColumnIcon
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-column-icon
Interface que define a coluna com ícone(s) do `po-table`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Define a ação que será executada ao clicar no ícone. |
| `color` | `string | Function` | sim | Define a cor do ícone. |
| `disabled` | `Function` | sim | Função que deve retornar um booleano para habilitar ou desabilitar o ícone e sua ação. |
| `icon` | `string | TemplateRef` | sim | É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: |
| `tooltip` | `string` | sim | Define um texto de ajuda que será exibido ao passar o *mouse* em cima do ícone. |
| `value` | `string` | não | Define o valor do ícone que será exibido. |
---
# PoTableColumnLabel
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-column-label
Interface para configuração das colunas de labels do `po-table`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `color` | `string` | sim | Define a cor do label. |
| `icon` | `boolean | string | TemplateRef` | sim | Define ou ativa um ícone que será exibido ao lado do valor da *tag*. |
| `label` | `string` | não | Texto que será exibido na coluna. |
| `textColor` | `string` | sim | Determina a cor do texto da tag. As maneiras de customizar as cores são: |
| `tooltip` | `string` | sim | Define um texto de ajuda que será exibido ao passar o *mouse* em cima do *label*. |
| `type` | `PoTagType` | sim | Define o tipo da *tag*. |
| `value` | `string | number` | não | Valor que será usado como referência para exibição do conteúdo na coluna. |
---
# PoTableColumnSort
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-column-sort
Interface para ordenação das colunas do componente table.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `column` | `PoTableColumn` | sim | Coluna pela qual a tabela está ordenada. |
| `type` | `PoTableColumnSortType` | não | Tipo da ordenação. |
---
# PoTableDetail
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-detail
Interface para configuração do _detail_ do componente `po-table`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `columns` | `Array` | não | Define uma lista do tipo `PoTableDetailColumn` para as colunas do objet *detail*. Por exemplo: |
| `hideSelect` | `boolean` | sim | Define se o checkbox de seleção do detail será exibido. Valor padrão 'false'. |
| `typeHeader` | `string` | sim | Define o tipo de cabeçalho para o conteúdo do _detail_ . |
---
# PoTableDetailColumn
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-detail-column
Interface para configuração das colunas do `po-table-detail`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `format` | `string` | sim | Formato de exibição do valor da coluna: |
| `label` | `string` | sim | Texto para título da coluna. |
| `property` | `string` | sim | Nome identificador da coluna. |
| `type` | `string` | sim | Tipo da coluna. |
---
# PoTableFilter
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-filter
Define o tipo de busca utilizado no po-table.
## Métodos
### `getFilteredItems(params: PoTableFilteredItemsParams)`
Método que será disparado ao filtrar a lista de itens ou carregar mais resultados no componente, deve-se retornar um *Observable* com a resposta da API no formato da interface `PoTableResponseApi`.
---
# PoTableFilteredItemsParams
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-filtered-items-params
Interface do objeto enviado como parâmetro da função `getItems`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `filter` | `string` | sim | Conteúdo utilizado para filtrar a lista de items. |
| `order` | `string` | sim | Coluna que está sendo ordenada na tabela. |
| `page` | `number` | sim | Controla a paginação dos dados e recebe um valor automaticamente a cada clique no botão 'Carregar mais resultados'. |
| `pageSize` | `number` | sim | Quantidade de itens retornados cada vez que o serviço é chamado, por padrão é 10. |
| `queryParams` | `{
[key: string]: string | number | boolean;
}` | sim | Objeto utilizado para filtros personalizados. |
| `size` | `string` | sim | Define o tamnho dos componentes de formulário no table. |
---
# PoTableLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-literals
Interface para definição das literais usadas no `po-table`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `bodyDelete` | `string` | sim | Texto no corpo do Modal de exclusão |
| `cancel` | `string` | sim | Texto no Modal para cancelar a exclusão |
| `columnsManager` | `string` | sim | Texto do **Gerenciador de colunas** localizado no canto superior direito da tabela. |
| `completeSubtitle` | `string` | sim | Título da modal 'Legenda completa' que aparece ao clicar no botão 'Ver legenda completa'. |
| `delete` | `string` | sim | Texto no Modal para confirmar a exclusão |
| `deleteApiError` | `string` | sim | Texto de notificação de erro na requisição Delete |
| `deleteSuccessful` | `string` | sim | Texto de notificação de remoção com sucesso |
| `loadMoreData` | `string` | sim | Texto do botão de **Carregar mais resultados** localizado no rodapé da tabela. |
| `loadingData` | `string` | sim | Texto exibido enquanto uma requisição está sendo executada para carregar dados na tabela. |
| `multipleItems` | `string` | sim | Texto exibido quando apenas 1 item for selecionado no checkbox. |
| `noColumns` | `string` | sim | Texto exibido quando não existem colunas definidas para a tabela. |
| `noData` | `string` | sim | Texto exibido quando não existem itens para serem exibidos na tabela. |
| `noItem` | `string` | sim | Texto exibido quando nenhum item for selecionado no checkbox. |
| `noVisibleColumn` | `string` | sim | Texto exibido quando não existem colunas visíveis para a tabela. |
| `oneItem` | `string` | sim | Texto exibido quando apenas 1 item for selecionado no checkbox. |
| `searchAiPlaceholder` | `string` | sim | Texto exibido como placeholder padrão no campo de busca por IA (`p-search-ai-field`) quando nenhum `placeholder` é informado. |
| `seeCompleteSubtitle` | `string` | sim | Texto do botão **Ver legenda completa** que aparece quando o rodapé de legendas é maior que a tabela. |
---
# PoTableResponseApi
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-response-api
Interface que representa a estrutura de resposta de uma coleção de itens.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `hasNext` | `boolean` | não | Indica se existe uma próxima página com mais registros para aquela coleção de itens. |
| `items` | `Array` | não | Lista de itens retornados. |
---
# PoTableSearchAiField
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-search-ai-field
Interface de configuração da busca por IA integrada ao `po-table`, utilizada pela
propriedade `p-search-ai-field`.
Quando configurada, a tabela renderiza um campo `po-search-ai` na barra de ações,
no lugar da busca textual padrão (`po-search`). O filtro gerado pela IA é aplicado
automaticamente aos dados da tabela, conforme a estratégia definida em `apply`.
#### Endpoint de IA (`url`)
O campo `url` deve apontar para um endpoint (proxy) que implemente o contrato do
`po-search-ai`: recebe `{ query, columns }` via `POST` e responde com
`{ filter, description, confidence }`.
> A integração com a LLM e a guarda de chaves devem ocorrer **no backend**, nunca
> no client-side. O backend de referência open source está disponível em
> [`po-sample-api`](https://github.com/po-ui/po-sample-api).
#### Colunas enviadas à IA
Por padrão, os metadados enviados ao endpoint são derivados automaticamente de
`p-columns` da tabela, respeitando as colunas visíveis e excluindo aquelas com
`searchAiIgnore: true`. O campo `columns` permite sobrescrever esse comportamento.
#### Estratégia de aplicação do filtro (`apply`)
| Valor | Comportamento |
|-------|---------------|
| `'auto'` (padrão) | Modo serviço: envia `$filter` ao `p-service-api`; modo local: aplica o parser OData interno sobre `p-items`. |
| `'parser'` | Sempre usa o parser OData interno. No modo serviço, busca todos os dados e filtra localmente. |
| `'server'` | Sempre delega o filtro ao `p-service-api` via `$filter`. |
| `'none'` | Não aplica o filtro; apenas emite `p-search-ai-result` para o desenvolvedor tratar. |
| `(result) => void` | Override total: o desenvolvedor recebe o resultado e assume o controle. |
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `apply` | `'auto' | 'parser' | 'server' | 'none' | ((result: PoSearchAiResult) => void)` | sim | Define como o filtro OData retornado pela IA é aplicado à tabela. |
| `columns` | `Array` | sim | Override das colunas enviadas ao endpoint de IA. Quando omitido, os metadados |
| `literals` | `PoSearchAiLiterals` | sim | Objeto com os literais usados pelo `po-search-ai` integrado à tabela. Permite |
| `minConfidence` | `number` | sim | Nível mínimo de confiança (`0.0` a `1.0`) para que o filtro gerado pela IA seja |
| `placeholder` | `string` | sim | Texto exibido como placeholder no campo de busca por IA. |
| `timeout` | `number` | sim | Tempo máximo de espera (em milissegundos) pela resposta do endpoint de IA. |
| `url` | `string` | não | Endpoint (proxy) de IA responsável por converter a consulta em linguagem natural |
---
# PoTableSubtitleColumn
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-subtitle-column
Interface para configuração das colunas de legenda do Po-Table.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `color` | `string` | sim | Define a cor do *status*. |
| `content` | `string` | não | Conteúdo que será exibido na coluna da tabela. |
| `label` | `string` | não | Texto que será exibido no rodapé da tabela como legenda. |
| `value` | `string | number` | não | Valor que será usado como referência para exibição do conteúdo na coluna. |
---
# PoTagLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tag-literals
Interface para definição das literais usadas no `po-tag`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `remove` | `string` | sim | Texto exibido no tooltip indicando remoção da tag. |
---
# PoTheme
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme
Interface para o método `setTheme()`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `active` | `PoThemeTypeEnum | PoThemeActive` | sim | Tipo e nível de acessibilidade de tema ativo |
| `name` | `string` | não | Nome para o tema: |
| `type` | `PoThemeType | Array` | não | Tipo de tema: |
---
# PoThemeColor
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-color
Interface para representar as cores do tema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `PoThemeColorAction` | sim | Cores da Action a serem aplicadas. |
| `brand` | `poThemeColorBrand` | sim | Cores da Brand a serem aplicadas. |
| `categorical` | `PoThemeColorCategorical` | sim | Cores da Categorical a serem aplicadas. |
| `categorical-overlay` | `PoThemeColorCategorical` | sim | Cores da Categorical a serem aplicadas. |
| `neutral` | `PoThemeColorNeutral` | sim | Cores Neutrals a serem aplicadas. |
---
# PoThemeColorAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-color-action
Interface para as cores de ação do tema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `default` | `string` | sim | Cores da Action 'Default'. |
| `disabled` | `string` | sim | Cores da Action de 'disabled'. |
| `focus` | `string` | sim | Cores da Action para 'focus'. |
| `hover` | `string` | sim | Cores da Action para 'hover'. |
| `pressed` | `string` | sim | Cores da Action para 'pressed'. |
---
# PoThemeColorNeutral
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-color-neutral
Interface para as cores neutras do tema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `dark` | `{
'70'?: string;
'80'?: string;
'90'?: string;
'95'?: string;
}` | sim | Cores Neutrals do tipo 'dark'. |
| `light` | `{
'00'?: string;
'05'?: string;
'10'?: string;
'20'?: string;
'30'?: string;
}` | sim | Cores Neutrals do tipo 'light'. |
| `mid` | `{
'40'?: string;
'60'?: string;
}` | sim | Cores Neutrals do tipo 'mid'. |
---
# PoThemeToken
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-token
Interface para os tokens do Tema.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `color` | `PoThemeColor` | sim | Tokens do tipo 'color' |
| `onRoot` | `DynamicProperties` | sim | Tokens do tipo 'onRoot' |
| `perComponent` | `DynamicProperties` | sim | Tokens do tipo 'perComponent' |
---
# PoThemeTokens
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-tokens
Interface para o tema da aplicação.
---
# PoToolbarAction
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-toolbar-action
Interface para lista de ações do componente.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `action` | `Function` | sim | Ação que será executada, sendo possível passar o nome ou a referência da função. |
| `disabled` | `boolean | Function` | sim | Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. |
| `icon` | `string | TemplateRef` | sim | Ícone exibido ao lado esquerdo do rótulo. |
| `label` | `string` | não | Rótulo da ação. |
| `selected` | `boolean` | sim | Define se a ação está selecionada. |
| `separator` | `boolean` | sim | Atribui uma linha separadora acima do item. |
| `subItems` | `Array` | sim | Define uma lista de subitens para criação de menus aninhados. |
| `type` | `string` | sim | Define a cor do item. |
| `url` | `string` | sim | URL para redirecionamento. Aceita rotas internas e links externos. |
| `visible` | `boolean | Function` | sim | Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. |
---
# PoToolbarProfile
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-toolbar-profile
Interface que define o perfil do `PoToolbarComponent`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `avatar` | `string` | sim | Define o caminho da imagem do perfil. |
| `subtitle` | `string` | sim | Define um texto com menor destaque ao lado da imagem do perfil, como por exemplo o e-mail de usuário. |
| `title` | `string` | não | Define um texto com maior destaque ao lado da imagem do perfil, como por exemplo o nome de usuário. |
---
# PoTreeViewItem
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tree-view-item
Interface para definição dos itens do componente `po-tree-view`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `expanded` | `boolean` | sim | Expande o item. |
| `isSelectable` | `boolean | null` | sim | Permite ativar/desativar a seleção do item |
| `label` | `string` | não | Desabilita a selecão do item. |
| `selected` | `boolean | null` | sim | Marca o item como selecionado. |
| `subItems` | `Array` | sim | Lista de itens do próximo nível, e assim consecutivamente até que se atinja o quarto nível. |
| `value` | `string | number` | não | Valor do item que poderá ser utilizado como referência para sua identificação. |
---
# PoUploadFileRestrictions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-upload-file-restrictions
Interface que define as restrições dos arquivos a serem selecionados com base em regras predefinidas
para o seu tamanho, extensão e quantidade.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowedExtensions` | `Array` | sim | Extensões permitidas de arquivos que serão enviados ao servidor, devendo ser informada uma coleção de extensões, por exemplo: |
| `maxFileSize` | `number` | sim | Tamanho máximo do arquivo a ser enviado ao servidor. |
| `maxFiles` | `number` | sim | Quantidade máxima de arquivos para o *upload*. |
| `minFileSize` | `number` | sim | Tamanho mínimo em *bytes* do arquivo que será enviado ao servidor. |
---
# PoUploadLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-upload-literals
Interface para definição das literais usadas no `po-upload`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `close` | `string` | sim | Texto do leitor de tela ao focar no ícone de fechar. |
| `continue` | `string` | sim | Texto do botão padrão do modal de pré-visualizar. |
| `doneText` | `string` | sim | Texto a ser exibido no container de informação quando o estado for de sucesso. |
| `dragFilesHere` | `string` | sim | Texto indicativo para a área onde os arquivos devem ser arrastados quando utilizada a propriedade `p-drag-drop`. |
| `dragFoldersHere` | `string` | sim | Texto indicativo para a área onde os diretórios devem ser arrastados quando utilizada a propriedade `p-drag-drop`. |
| `dropFilesHere` | `string` | sim | Texto indicativo para a área onde os arquivos devem ser soltos quando utilizada a propriedade `p-drag-drop` |
| `dropFoldersHere` | `string` | sim | Texto indicativo para a área onde os diretórios devem ser soltos quando utilizada a propriedade `p-drag-drop`. |
| `errorOccurred` | `string` | sim | Texto a ser exibido quando ocorrer erro no envio do arquivo. |
| `files` | `string` | sim | Parâmetro *files* para o texto de exibição quando arrastado um arquivo para um local inválido com a opção de *dragDrop*. |
| `folders` | `string` | sim | Parâmetro *folders* para o texto de exibição quando arrastado um arquivo para um local inválido com a opção de *dragDrop*. |
| `invalidDropArea` | `string` | sim | Texto exibido caso o usuário arrastar um arquivo para um local inválido ao utilizar a opção de *dragDrop*. |
| `preview` | `string` | sim | Título do modal de pré-visualizar. |
| `selectFile` | `string` | sim | Texto exibido no label do botão de seleção dos arquivos. |
| `selectFiles` | `string` | sim | Texto exibido no label do botão de seleção dos arquivos ao utilizar a propriedade `p-multiple`. |
| `selectFilesOnComputer` | `string` | sim | Texto utilizado para indicar a possibilidade de seleção de arquivos na área onde podem ser arrastados os arquivos |
| `selectFolder` | `string` | sim | Texto exibido no label do botão de seleção dos arquivos ao utilizar a propriedade `p-directory`. |
| `selectFolderOnComputer` | `string` | sim | Texto utilizado para indicar a possibilidade de seleção de diretório na área onde podem ser arrastados os arquivos |
| `sentWithSuccess` | `string` | sim | Texto a ser exibido quando o envio do arquivo for realizado com sucesso. |
| `startSending` | `string` | sim | Texto exibido no label do botão para iniciar o envio dos arquivos. |
| `thumbnail` | `string` | sim | Texto do leitor da miniatura da imagem. |
| `tryAgain` | `string` | sim | Texto de Tente novamente ao ocorrer erro ao enviar. |
| `uploadingText` | `string` | sim | Texto a ser exibido no container de informação quando o estado for enviando. |
---
# PoUserGuideEndEvent
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-end-event
Interface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourEndInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, sempre após a
emissão do último `PoUserGuideStepChangeEvent` em `PoUserGuideService.stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourEndInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, sempre após a
emissão do último `PoUserGuideStepChangeEvent` em e após a limpeza do estado
interno do serviço.
As aplicações consumidoras podem assinar `tourEndInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourEndInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, sempre após a
emissão do último `PoUserGuideStepChangeEvent` em `PoUserGuideService.stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourEndInterface que descreve o evento emitido pelo `PoUserGuideService` no encerramento da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, sempre após a
emissão do último `PoUserGuideStepChangeEvent` em e após a limpeza do estado
interno do serviço.
As aplicações consumidoras podem assinar para registrar telemetria de conclusão ou de
abandono do tour, executar limpezas de UI ou disparar lógica de negócio dependente do encerramento
da jornada do usuário.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `lastIndex` | `number` | não | Índice, com base zero, do último passo ativo antes do encerramento do tour. |
| `reason` | `'completed' | 'closed'` | não | Motivo do encerramento do tour. |
| `totalSteps` | `number` | não | Total de passos configurados no tour, equivalente ao tamanho do array passado a `PoUserGuideService.setSteps`. |
---
# PoUserGuideLiterals
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-literals
Interface para definição das literais usadas no `po-user-guide`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `close` | `string` | sim | Label padrão do botão "Fechar" (X) exibido no canto do popover do tour. |
| `done` | `string` | sim | Label padrão do botão "Finalizar" aplicado ao último passo do tour. |
| `next` | `string` | sim | Label padrão do botão "Próximo" aplicado a todos os passos do tour. |
| `previous` | `string` | sim | Label padrão do botão "Anterior" aplicado a todos os passos do tour. |
| `progressTemplate` | `string` | sim | Template padrão do texto de progresso exibido no popover (ex: `{ {current} } de { {total} }`). |
---
# PoUserGuideOptions
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-options
Interface que descreve as opções globais de configuração do tour guiado executado pelo `PoUserGuideService`.
Os valores informados são aplicados a toda a execução do tour e podem ser sobrescritos pontualmente
em cada `PoUserGuideStep` através das propriedades específicas de *labels* (`nextLabel`, `previousLabel`,
`doneLabel`) — neste caso, o valor declarado no passo prevalece sobre o valor declarado nas opções globais.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `allowClose` | `boolean` | sim | Permite que o usuário encerre o tour clicando fora do popover ou utilizando o botão "Fechar" (X). |
| `allowScroll` | `boolean` | sim | Quando `true`, mantém a rolagem da página totalmente livre durante o tour. |
| `closeLabel` | `string` | sim | Label* padrão do botão "Fechar" (X) exibido no canto do popover do tour. |
| `doneLabel` | `string` | sim | Label* padrão do botão "Finalizar" aplicado ao último passo do tour. |
| `keyboardControl` | `boolean` | sim | Habilita/desabilita o controle do tour por teclado (valor padrão: `true`). |
| `literals` | `PoUserGuideLiterals` | sim | Objeto com as literais usadas no `po-user-guide`. |
| `nextLabel` | `string` | sim | Label* padrão do botão "Próximo" aplicado a todos os passos do tour. |
| `onStepChange` | `(event: PoUserGuideStepChangeEvent) => void` | sim | Função de *callback* invocada a cada mudança de passo durante a execução do tour. |
| `overlayOpacity` | `number` | sim | Define a opacidade do *overlay* que escurece a página ao redor do elemento destacado. |
| `popoverClass` | `string` | sim | Classe CSS adicional aplicada ao elemento raiz do popover do tour. |
| `previousLabel` | `string` | sim | Label* padrão do botão "Anterior" aplicado a todos os passos do tour. |
| `progressTemplate` | `string` | sim | Template do texto de progresso exibido no popover quando `showProgress` está habilitado. |
| `showProgress` | `boolean` | sim | Exibe o indicador textual de progresso do tour no popover (por exemplo, `1 de 5`). |
---
# PoUserGuideStartEvent
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-start-event
Interface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourStartInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, imediatamente
após a configuração da instância do tour e antes da emissão do primeiro `PoUserGuideStepChangeEvent` em
`PoUserGuideService.stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourStartInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, imediatamente
após a configuração da instância do tour e antes da emissão do primeiro `PoUserGuideStepChangeEvent` em
.
As aplicações consumidoras podem assinar `tourStartInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourStartInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, imediatamente
após a configuração da instância do tour e antes da emissão do primeiro `PoUserGuideStepChangeEvent` em
`PoUserGuideService.stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` `PoUserGuideService.tourStartInterface que descreve o evento emitido pelo `PoUserGuideService` no início da execução de um tour guiado.
É publicado no `Observable` exatamente uma vez por execução, imediatamente
após a configuração da instância do tour e antes da emissão do primeiro `PoUserGuideStepChangeEvent` em
.
As aplicações consumidoras podem assinar para registrar telemetria do início do tour,
exibir mensagens contextuais ou disparar lógica de negócio dependente do início da jornada do usuário.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `startIndex` | `number` | não | Índice do passo inicial do tour, com base zero. |
| `timestamp` | `number` | não | Marca de tempo, em milissegundos, do momento de emissão do evento, obtida a partir de `Date.now()`. |
| `totalSteps` | `number` | não | Total de passos configurados no tour, equivalente ao tamanho do array passado a `PoUserGuideService.setSteps`. |
---
# PoUserGuideStep
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-step
Interface que descreve um passo individual do tour guiado executado pelo `PoUserGuideService`.
Cada passo representa uma parada do tour, com um elemento opcional a ser destacado na página,
conteúdo textual ou em HTML, configurações de posicionamento do popover, *labels* específicos
dos botões de navegação e *hooks* de ciclo de vida do passo.
> A propriedade `content` é a única obrigatória e corresponde ao corpo do popover apresentado ao usuário.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `align` | `PoUserGuideAlignment` | sim | Alinhamento do popover ao longo do eixo da posição configurada em `position`. |
| `content` | `string` | não | Conteúdo principal do passo, exibido no corpo do popover. Aceita texto puro ou HTML. |
| `doneLabel` | `string` | sim | Sobrescreve o *label* do botão "Finalizar" exclusivamente para este passo. |
| `element` | `string | HTMLElement` | sim | Elemento da página que o passo deve destacar. |
| `nextLabel` | `string` | sim | Sobrescreve o *label* do botão "Próximo" exclusivamente para este passo. |
| `onBeforeHighlight` | `(step: PoUserGuideStep, index: number) => void` | sim | Hook* executado imediatamente antes de o passo ser destacado na página, sincronamente à transição. |
| `onDeselected` | `(step: PoUserGuideStep, index: number) => void` | sim | Hook* executado quando o passo deixa de estar ativo, seja por avanço, retrocesso ou encerramento do tour. |
| `onHighlighted` | `(step: PoUserGuideStep, index: number) => void` | sim | Hook* executado imediatamente após o passo ser destacado na página. |
| `position` | `PoUserGuidePosition` | sim | Posição preferida do popover em relação ao elemento destacado. |
| `previousLabel` | `string` | sim | Sobrescreve o *label* do botão "Anterior" exclusivamente para este passo. |
| `showButtons` | `Array<'next' | 'previous' | 'close'>` | sim | Lista que filtra quais botões de navegação devem ser exibidos no popover deste passo. |
| `title` | `string` | sim | Título exibido no cabeçalho do popover do passo. |
---
# PoUserGuideStepChangeEvent
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-step-change-event
Interface que descreve o evento emitido pelo `PoUserGuideService` a cada mudança de passo durante a execução do tour.
É publicado no `Observable` `PoUserGuideService.stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` a cada mudança de passo durante a execução do tour.
É publicado no `Observable` toda vez que o passo ativo é alterado, seja por
interação do usuário (cliques nos botões "Próximo"/"Anterior" ou navegação por teclado) ou por chamada
programática aos métodos `next`, `previous`, `goTo` e `start` do `PoUserGuideService`.
As aplicações consumidoras podem assinar `stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` a cada mudança de passo durante a execução do tour.
É publicado no `Observable` `PoUserGuideService.stepChangeInterface que descreve o evento emitido pelo `PoUserGuideService` a cada mudança de passo durante a execução do tour.
É publicado no `Observable` toda vez que o passo ativo é alterado, seja por
interação do usuário (cliques nos botões "Próximo"/"Anterior" ou navegação por teclado) ou por chamada
programática aos métodos `next`, `previous`, `goTo` e `start` do `PoUserGuideService`.
As aplicações consumidoras podem assinar para reagir à navegação do usuário, atualizar a
UI conforme o passo ativo, registrar telemetria de progresso ou disparar lógica de negócio contextual.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `direction` | `'next' | 'previous' | 'goto' | 'start'` | não | Direção da transição que originou a mudança de passo. |
| `index` | `number` | não | Índice, com base zero, do passo ativo após a transição. |
| `step` | `PoUserGuideStep` | não | Passo do tour que se tornou ativo após a transição. |
| `totalSteps` | `number` | não | Total de passos configurados no tour, equivalente ao tamanho do array passado a `PoUserGuideService.setSteps`. |
---
# PoWidgetAvatar
**Tipo:** Interface / Modelo
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-widget-avatar
Interface para definição do avatar no `po-widget`.
## Propriedades
| Propriedade | Tipo | Opcional | Descrição |
|---|---|---|---|
| `customTemplate` | `TemplateRef` | sim | Permite a criação de template customizado para o avatar |
| `size` | `string` | sim | Tamanho de exibição do componente `po-avatar`. |
| `src` | `string` | sim | Fonte da imagem que pode ser um caminho local (`./assets/images/logo-black-small.png`) |
| `widthCustomTemplate` | `string` | sim | Define a largura em porcentagem do `customTemplate`. |
---
# ForceBooleanComponentEnum
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/force-boolean-component-enum
Enum para definição do tipo de componente a ser renderizado.
## Valores
| Valor | Descrição |
|---|---|
| `switch` | Força a renderização de um po-switch |
| `checkbox` | Força a renderização de um po-checkbox |
---
# ForceOptionComponentEnum
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/force-option-component-enum
Enum para definição do tipo de componente a ser renderizado.
## Valores
| Valor | Descrição |
|---|---|
| `radioGroup` | Força a renderização de um po-radio-group independente da quantidade do opções |
| `select` | Força a renderização de um po-select independente da quantidade do opções |
---
# PoButtonGroupToggle
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-group-toggle
Tipos de seleção (`p-toggle`) disponíveis para o componente.
## Valores
| Valor | Descrição |
|---|---|
| `Multiple` | Seleção múltipla. |
| `None` | Seleção desabilitada. |
| `Single` | Seleção única. |
---
# PoButtonKind
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-kind
Estilos disponíveis do button.
## Valores
| Valor | Descrição |
|---|---|
| `primary` | Estilo primário, usado para ações principais que requerem maior destaque. |
| `secondary` | Estilo secundário, usado como padrão, para ações comuns. |
| `tertiary` | Estilo terciário, ideal para ações menos importantes, sem fundo preenchido. |
---
# PoButtonSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-size
Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
## Valores
| Valor | Descrição |
|---|---|
| `Small` | Define a altura do button como 32px. |
| `Medium` | Define a altura do button como 44px. |
| `Large` | Define a altura do button como 56px. |
---
# PoButtonType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-button-type
Enumeração que define os tipos possíveis para o `PoButtonComponent`. Estes tipos estão relacionados ao comportamento
do botão quando utilizado dentro de um formulário HTML.
## Valores
| Valor | Descrição |
|---|---|
| `Submit` | Define o botão como do tipo `submit`. Quando clicado, o formulário é enviado automaticamente, |
| `Button` | Define o botão como do tipo `button`. Este tipo de botão não possui comportamento padrão associado |
| `Reset` | Define o botão como do tipo `reset`. Quando clicado, redefine os campos do formulário ao qual pertence |
---
# PoCalendarMode
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-calendar-mode
Define os modos de exibição do `po-calendar`.
## Valores
| Valor | Descrição |
|---|---|
| `Range` | Modo de seleção de intervalo (data inicial e final). |
| `MonthYear` | |
| `Year` | |
| `DateTime` | |
---
# PoChartLabelFormat
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-label-format
Enum* `PoChartLabelFormat` para especificação dos tipos de formatação do eixo de valor no gráfico.
## Valores
| Valor | Descrição |
|---|---|
| `Number` | Os valores serão exibidos no formato numérico com duas casas decimais. Equivalente ao formato `'1.2-2'` da [DecimalPipe](https://angular.io/api/common/DecimalPipe). |
| `Currency` | Os valores serão exibidos com o símbolo monetário de acordo com a formatação padrão da aplicação, isto é, o valor do token [DEFAULT_CURRENCY_CODE](https://angular.dev/api/core/DEFAULT_CURRENCY_CODE). Para adequar ao padrão numérico brasileiro, é necessário configurar o [LOCALE_ID](https://angular.dev/api/core/LOCALE_ID) da aplicação. A configuração pode ser feita da seguinte forma: |
---
# PoChartType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-chart-type
Enum* `PoChartType` para especificação dos tipos de gráficos.
## Valores
| Valor | Descrição |
|---|---|
| `Area` | Tipo de gráfico que exibe os dados de modo quantitativo, utilizando linhas contínuas demarcadas por pontos para cada valor de série definido. |
| `Donut` | Exibe os dados em formato de rosca, dividindo em partes proporcionais. |
| `Pie` | Exibe os dados em formato circular, dividindo proporcionalmente em fatias. |
| `Line` | Gráfico que mostra os dados de modo linear e contínuo. É útil, por exemplo, para fazer comparações de tendência durante determinado período. |
| `Column` | Gráfico que exibe os dados em forma de barras verticais e sua extensão varia de acordo com seus valores. É comumente usado como comparativo entre diversas séries. |
| `Bar` | Gráfico que exibe os dados em forma de barras horizontais e sua extensão varia de acordo com seus valores. É comumente usado como comparativo de séries e categorias. |
| `Gauge` | Gráfico que provê a representação de um valor através de um arco. Possui dois tipos de tratamentos: |
| `Radar` | Tipo de gráfico utilizado para visualizar e comparar o desempenho de diferentes itens em múltiplas categorias. |
---
# PoCheckboxSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-checkbox-size
Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
## Valores
| Valor | Descrição |
|---|---|
| `Small` | Define a caixa de seleção como 16px. |
| `Medium` | Define a caixa de seleção comoc24px. |
| `Large` | Define a caixa de seleção comoc32px. |
---
# PoComboFilterMode
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-combo-filter-mode
Define o tipo de busca usado no po-combo.
## Valores
| Valor | Descrição |
|---|---|
| `startsWith` | Verifica se o texto *inicia* com o valor pesquisado. Caso não seja especificado um tipo, será esse o utilizado. |
| `contains` | Verifica se o texto *contém* o valor pesquisado. |
| `endsWith` | Verifica se o texto *finaliza* com o valor pesquisado. |
---
# PoDatepickerIsoFormat
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-datepicker-iso-format
Enum* que define o padrão de formatação das datas.
> Caso um formato padrão seja definido, o mesmo não será mais alterado de acordo com o formato de entrada.
## Valores
| Valor | Descrição |
|---|---|
| `Basic` | Padrão **E8601DAw** (*yyyy-mm-dd*). |
| `Extended` | Padrão **E8601DZw** (*yyyy-mm-ddThh:mm:ss+\|-hh:mm*). |
---
# PoDividerSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-divider-size
Enum para definição da espessura da linha.
## Valores
| Valor | Descrição |
|---|---|
| `small` | A espessura da linha fica com 1px. |
| `medium` | A espessura da linha fica com 2px. |
| `large` | A espessura da linha fica com 4px. |
---
# PoDynamicFieldType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-dynamic-field-type
Enum para definição do tipo de campo que será criado dinamicamente.
## Valores
| Valor | Descrição |
|---|---|
| `Boolean` | Valor booleano. |
| `Currency` | Valor numérico que contém casas decimais e milhar. |
| `Decimal` | Valor numérico que contém casas decimais e milhar. |
| `Date` | Valor para data. |
| `DateTime` | Valor para data e hora. |
| `Time` | Utilizado para informar/exibir hora. |
| `Number` | Valor numérico. |
| `String` | Texto. |
| `Upload` | Utilizado para fazer uploads de arquivos. |
---
# PoHttpRequestType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-http-request-type
Define o método de requisição HTTP.
## Valores
| Valor | Descrição |
|---|---|
| `DELETE` | Método `delete` do protocolo HTTP. |
| `GET` | Método `get` do protocolo HTTP. |
| `HEAD` | Método `head` do protocolo HTTP. |
| `OPTIONS` | Método `options` do protocolo HTTP. |
| `PATCH` | Método `patch` do protocolo HTTP. |
| `POST` | Método `post` do protocolo HTTP. |
| `PUT` | Método `put` do protocolo HTTP. |
---
# PoInfoOrientation
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-info-orientation
Define os tipos de orientações disponíveis para o `po-info`.
## Valores
| Valor | Descrição |
|---|---|
| `Horizontal` | O valor será exibido na horizontal, ao lado direito em relação ao label. |
| `Vertical` | Exibe o valor na vertical, ou seja, abaixo do label. |
---
# PoModalPasswordRecoveryType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-modal-password-recovery-type
Enum* para especificação do tipo de recuperação de senha.
## Valores
| Valor | Descrição |
|---|---|
| `All` | Possibilita ao usuário optar por envio via email ou SMS |
| `Email` | Definição para recuperação apenas por email |
| `SMS` | Definição para recuperação apenas por SMS |
---
# PoMultiselectFilterMode
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-multiselect-filter-mode
Define o tipo de busca usado no po-multiselect.
## Valores
| Valor | Descrição |
|---|---|
| `startsWith` | Verifica se o texto *inicia* com o valor pesquisado. |
| `contains` | Verifica se o texto *contém* o valor pesquisado. |
| `endsWith` | Verifica se o texto *finaliza* com o valor pesquisado. |
---
# PoNetworkType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-network-type
Tipos de rede existentes no dispositivo.
## Valores
| Valor | Descrição |
|---|---|
| `unknown` | Define o tipo de rede como desconhecido (`unknown`). |
| `ethernet` | Define o tipo de rede como `Ethernet`. |
| `wifi` | Define o tipo de rede como `WiFi`. |
| `_2g` | Define o tipo de rede como `2G`. |
| `_3g` | Define o tipo de rede como `3G`. |
| `_4g` | Define o tipo de rede como `4G`. |
| `cellular` | Define o tipo de rede como `cellular`. Isso acontece na utilização dos navegadores |
| `none` | Define o tipo de rede como `none`. |
---
# PoPageActionsLayout
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-actions-layout
Define os layouts de exibição das ações no cabeçalho do `po-page-default`.
> Compatível com todos os valores de `PoPageHeaderType`.
## Valores
| Valor | Descrição |
|---|---|
| `default` | Exibe as ações como botões (até 3 em desktop e 2 em mobile), agrupando as demais no *dropdown*. |
| `dropdown` | Agrupa todas as ações exclusivamente dentro do menu *dropdown*. |
| `mixed` | Exibe a primeira ação como botão e agrupa as demais no *dropdown*. |
---
# PoPageBlockedUserReason
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-blocked-user-reason
Enum* para os tipos de motivo de bloqueio de usuário. As informações modificam conforme o motivo selecionado pelo desenvolvedor.
## Valores
| Valor | Descrição |
|---|---|
| `None` | Sem definição; a tela exibirá conteúdo de bloqueio genérico. |
| `ExceededAttempts` | Definição para tentativas de acesso esgotadas. |
| `ExpiredPassword` | Definição para senha expirada. |
---
# PoPageComponentsSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-components-size
Tamanhos da propriedade `p-components-size` para componentes de formulário no template. A medida `small` está
disponível apenas para acessibilidade AA.
## Valores
| Valor | Descrição |
|---|---|
| `Small` | Aplica a medida `small` do componente. |
| `Medium` | Aplica a medida `medium` do componente. |
---
# PoPageHeaderType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-header-type
Define os tipos de cabeçalho disponíveis no `po-page-default`.
## Valores
| Valor | Descrição |
|---|---|
| `primary` | Layout padrão com suporte a `p-breadcrumb`. |
| `secondary` | Exibe um botão de retorno ao lado do título. |
| `tertiary` | Layout simplificado sem botão de retorno. |
---
# PoPageLoginAuthenticationType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-page-login-authentication-type
Enum* para definição do tipo de autenticação.
## Valores
| Valor | Descrição |
|---|---|
| `Basic` | Autenticação Basic |
| `Bearer` | Autenticação Bearer |
---
# PoProgressShape
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-progress-shape
Enum `PoProgressShape` para definir o formato visual do componente de progresso.
## Valores
| Valor | Descrição |
|---|---|
| `bar` | Formato barra de progresso (padrão). |
| `circle` | Formato circular de progresso. |
---
# PoProgressSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-progress-size
Enum para configurar a expessura (`p-size`) da barra de progresso do componente.
## Valores
| Valor | Descrição |
|---|---|
| `medium` | Tamanho médio com 4px. |
| `large` | Tamanho grande com 8px. |
---
# PoProgressStatus
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-progress-status
Enum `PoProgressStatus` para os status de barra de progresso.
## Valores
| Valor | Descrição |
|---|---|
| `Default` | Define o status `default` para a barra de progresso. |
| `Error` | Define o status de `error` para a barra de progresso. |
| `Success` | Define o status de `success` para a barra de progresso. |
---
# PoRadioSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-radio-size
Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
## Valores
| Valor | Descrição |
|---|---|
| `Small` | Define o radio como 16px. |
| `Medium` | Define o radio como 24px. |
| `Large` | Define o radio como 32px. |
---
# PoRichTextToolbarActions
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-rich-text-toolbar-actions
Enumeração que define as ações disponíveis na barra de ferramentas do `PoRichTextComponent`.
Cada ação corresponde a um conjunto de botões ou funcionalidades que podem ser habilitados ou desabilitados
na barra de ferramentas do editor do rich-text.
## Valores
| Valor | Descrição |
|---|---|
| `Color` | Seletor de cores, Ação que permite que o usuário altere a cor do texto selecionado. |
| `Align` | Alinhamento de texto, incluindo alinhamento à esquerda, centralizado, à direita e justificado. |
| `Format` | Formatação de texto, como aplicar negrito, itálico ou sublinhado ao texto selecionado. |
| `List` | Listas com marcadores (bullet points) ou listas numeradas. |
| `Link` | Links no conteúdo, aplica partes do texto para serem clicáveis e direcionem para URLs especificadas. |
| `Media` | Mídias, como imagens, no conteúdo do editor. |
---
# PoSearchAiResponseType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-ai-response-type
Enum que define os tipos de resposta suportados pelo endpoint de IA.
## Valores
| Valor | Descrição |
|---|---|
| `filter` | Resposta contendo um filtro estruturado (ex: OData). |
| `chat` | Resposta conversacional em linguagem natural. |
| `custom` | Payload genérico definido pelo consumidor. |
---
# PoSearchFilterMode
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-search-filter-mode
Define o tipo de busca usado no `po-search`.
## Valores
| Valor | Descrição |
|---|---|
| `startsWith` | Verifica se o texto *inicia* com o valor pesquisado. |
| `contains` | Verifica se o texto *contém* o valor pesquisado. |
| `endsWith` | Verifica se o texto *finaliza* com o valor pesquisado. |
---
# PoSkeletonAnimation
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-skeleton-animation
Define os tipos de animação do componente `po-skeleton`.
## Valores
| Valor | Descrição |
|---|---|
| `none` | Sem animação |
| `pulse` | Animação de pulsação |
| `shimmer` | Animação de brilho deslizante |
---
# PoSkeletonSize
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-skeleton-size
Define os tamanhos disponíveis para o componente `po-skeleton`.
## Valores
| Valor | Descrição |
|---|---|
| `xs` | Tamanho extra pequeno |
| `sm` | Tamanho pequeno |
| `md` | Tamanho médio |
| `lg` | Tamanho grande |
| `xl` | Tamanho extra grande |
| `xxl` | Tamanho extra extra grande |
---
# PoSkeletonType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-skeleton-type
Define os tipos visuais disponíveis para o componente `po-skeleton`.
## Valores
| Valor | Descrição |
|---|---|
| `normal` | Tipo padrão com cor neutra clara |
| `primary` | Tipo primário com cor neutra média |
| `content` | Tipo de conteúdo com fundo branco |
---
# PoSkeletonVariant
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-skeleton-variant
Define as variantes visuais do componente `po-skeleton`.
## Valores
| Valor | Descrição |
|---|---|
| `text` | Variante para simular texto |
| `rectangle` | Variante retangular (largura maior que altura) |
| `square` | Variante quadrada (largura igual à altura) |
| `circle` | Variante circular |
---
# PoStepperOrientation
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-stepper-orientation
Enums* para definição da orientação do `po-stepper`.
## Valores
| Valor | Descrição |
|---|---|
| `Horizontal` | Define a exibição do componente na horizontal. |
| `Vertical` | Define a exibição do componente na vertical. |
---
# PoStepperStatus
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-stepper-status
Enums* para os status do `po-stepper` quando utilizada a propriedade `p-steps`.
## Valores
| Valor | Descrição |
|---|---|
| `Active` | Define o estado do *step* como ativo. |
| `Default` | Define o estado do *step* como padrão. |
| `Disabled` | Define o estado do *step* como desabilitado. |
| `Done` | Define o estado do *step* como concluído. |
| `Error` | Define o estado do *step* com erro. |
---
# PoSwitchLabelPosition
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-switch-label-position
Enum para posicionar o label do valor do po-switch.
## Valores
| Valor | Descrição |
|---|---|
| `Right` | Posiciona o label do lado esquerdo do switch. |
| `Left` | Posiciona o label do lado direito do switch. |
---
# PoTableColumnSortType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-column-sort-type
Tipos de ordenação das colunas da tabela.
## Valores
| Valor | Descrição |
|---|---|
| `Ascending` | Ordenação ascendente |
| `Descending` | Ordenação descendente |
---
# PoTableColumnSpacing
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-column-spacing
Tipos de espaçamento interno (padding) das células (**p-spacing**) do po-table.
## Valores
| Valor | Descrição |
|---|---|
| `ExtraSmall` | Espaçamento extra pequeno: 0.25rem (vertical) x 0.5rem (horizontal). |
| `Small` | Espaçamento pequeno: 0.5rem (vertical) x 1rem (horizontal). |
| `Medium` | Espaçamento médio: 0.75rem (vertical) x 1rem (horizontal). |
| `Large` | Espaçamento grande: 1rem (vertical) x 1rem (horizontal). |
---
# PoTableRowTemplateArrowDirection
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-table-row-template-arrow-direction
Define a posição da arrow que expande o * row template* na tabela, será exibida na esquerda ou direita.
## Valores
| Valor | Descrição |
|---|---|
| `Left` | Posiciona a *arrow* na esquerda. (Padrão) |
| `Right` | Posiciona a *arrow* na direita |
---
# PoTagOrientation
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tag-orientation
Define os tipos de orientações disponíveis para o `po-tag`.
## Valores
| Valor | Descrição |
|---|---|
| `Horizontal` | A tag será exibida na horizontal, ao lado direito em relação ao label. |
| `Vertical` | Exibe a tag na vertical, ou seja, abaixo do label. |
---
# PoTagType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-tag-type
Define os tipos disponíveis para o `po-tag`.
## Valores
| Valor | Descrição |
|---|---|
| `Danger` | Erro, perigo, problema ou aviso crítico. |
| `Info` | Informativo ou explicativo. |
| `Success` | Confirmação, resultados positivos ou êxito. |
| `Warning` | Aviso ou advertência. |
| `Neutral` | De uso geral, quando os tipos Info, Warning, Success e Danger não atendem a necessidade. |
---
# PoThemeA11yEnum
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-a11y-enum
Enum para configurar o nível de acessibilidade dos componentes através do serviço de tema.
```
import { PoThemeA11yEnum } from '@po-ui/theme';
// Definindo o nível de acessibilidade ao configurar as cores e o tipo do tema (light | dark)
themeService.setTheme(...theme, ...type, PoThemeA11yEnum.AA);
// Definindo o nível de acessibilidade ao configurar apenas as cores do tema
themeService.setThemeA11y(...theme, PoThemeA11yEnum.AAA);
// Alterando o nível de acessibilidade com as cores do tema já definidas
themeService.setCurrentThemeA11y(PoThemeA11yEnum.AAA);
```
## Valores
| Valor | Descrição |
|---|---|
| `AA` | Nível de acessibilidade AA. |
| `AAA` | Nível de acessibilidade AAA. |
---
# PoThemeTypeEnum
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-theme-type-enum
Enum utilizado para configurar o tipo de tema suportado, é possível alternar entre os tipos definidos.
```
import { PoThemeTypeEnum } from '@po-ui/theme';
// Definindo o tipo de tema como claro
themeService.setTheme(...theme, PoThemeTypeEnum.light);
// Definindo o tipo de tema como escuro
themeService.setTheme(...theme, PoThemeTypeEnum.dark);
// Alterando o tipo do tema para um tema já aplicado
themeService.setCurrentThemeType(PoThemeTypeEnum.dark);
```
## Valores
| Valor | Descrição |
|---|---|
| `light` | Define o tema como claro. |
| `dark` | Define o tema como escuro. |
---
# PoTimepickerModelFormat
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-timepicker-model-format
Enum* que define o padrão de formatação do model de saída do timepicker.
## Valores
| Valor | Descrição |
|---|---|
| `HourMinute` | Formato básico `HH:mm` (ex: `14:30`). |
| `HourMinuteSecond` | Formato com segundos `HH:mm:ss` (ex: `14:30:00`). |
---
# PoTimerFormat
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-timer-format
Enum para definição do formato de exibição do timer.
## Valores
| Valor | Descrição |
|---|---|
| `Format24` | Formato de 24 horas (0-23). |
| `Format12` | Formato de 12 horas (1-12) com indicador AM/PM. |
---
# PoToasterType
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-toaster-type
Define os tipos possíveis para o `PoToasterComponent`.
## Valores
| Valor | Descrição |
|---|---|
| `Error` | Tipo de toaster para mensagens de erro. |
| `Information` | Tipo de toaster para mensagens informativas. |
| `Success` | Tipo de toaster para mensagens de sucesso. |
| `Warning` | Tipo de toaster para mensagens de atenção. |
---
# PoUserGuideAlignment
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-alignment
Enum* que define o alinhamento do popover do tour ao longo do eixo da posição configurada,
utilizado na propriedade `align` de `PoUserGuideStep`.
> Quando o valor não é informado, é aplicado o padrão `PoUserGuideAlignment.Start`.
## Valores
| Valor | Descrição |
|---|---|
| `Start` | O popover é alinhado ao início do eixo da posição (topo ou esquerda, conforme a `PoUserGuidePosition`). |
| `Center` | O popover é alinhado ao centro do eixo da posição. |
| `End` | O popover é alinhado ao final do eixo da posição (rodapé ou direita, conforme a `PoUserGuidePosition`). |
---
# PoUserGuidePosition
**Tipo:** Enum
**Pacote:** `@po-ui/ng-components`
**Referência:** https://po-ui.io/documentation/po-user-guide-position
Enum* que define a posição preferida do popover do tour em relação ao elemento destacado,
utilizado na propriedade `position` de `PoUserGuideStep`.
> Quando o valor não é informado, é aplicado o padrão `PoUserGuidePosition.Auto`.
## Valores
| Valor | Descrição |
|---|---|
| `Top` | O popover é renderizado acima do elemento destacado. |
| `Right` | O popover é renderizado à direita do elemento destacado. |
| `Bottom` | O popover é renderizado abaixo do elemento destacado. |
| `Left` | O popover é renderizado à esquerda do elemento destacado. |
| `Over` | O popover é renderizado sobreposto ao elemento destacado. |
| `Auto` | A posição é calculada automaticamente conforme o espaço disponível na viewport. |