import * as i0 from '@angular/core'; import { EventEmitter, ElementRef, TemplateRef, OnInit, OnDestroy, Renderer2, QueryList, OnChanges, ChangeDetectorRef, SimpleChanges, AfterViewInit, Type, ViewContainerRef, DoCheck, IterableDiffers, ComponentFactoryResolver, ApplicationRef, Injector, ComponentRef, AfterViewChecked, PipeTransform, AfterContentInit, SimpleChange, RendererFactory2, InjectionToken, ModuleWithProviders } from '@angular/core'; import * as i2 from '@angular/common'; import { DecimalPipe, TitleCasePipe, CurrencyPipe, DatePipe } from '@angular/common'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import * as rxjs from 'rxjs'; import { Observable, Subject, Subscription } from 'rxjs'; import * as i4 from '@angular/router'; import { Router } from '@angular/router'; import * as i3 from '@angular/forms'; import { ControlValueAccessor, AbstractControl, Validator, ValidationErrors, NgForm } from '@angular/forms'; import * as i5 from '@angular/cdk/overlay'; import * as i9 from '@angular/cdk/listbox'; import * as _angular_common_http from '@angular/common/http'; import { HttpHeaders, HttpClient, HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http'; import * as _po_ui_ng_components from '@po-ui/ng-components'; import * as i19 from '@angular/cdk/drag-drop'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import * as i18 from '@angular/cdk/scrolling'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; /** * @docsPrivate * * @description * * Serviço responsável por gerenciar as linguagens da aplicação. */ declare class PoLanguageService { constructor(); set languageDefault(language: string); get languageDefault(): string; /** * @description * * Método responsável por retornar o idioma ativo. * * A busca do idioma será feita na seguinte ordem: * * 1 - o idioma que foi armazenado no *localStorage*, através do método `setLanguage()` utilizado pelo i18n. * * 2 - o valor inserido nas configurações do módulo do i18n através do parâmetro `config`, sendo o idioma inserido * na propriedade `language` da interface `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`. * * **Retorno:** `string` com a sigla do idioma ativo. */ getLanguage(): string; /** * @description * * Método responsável por retornar o idioma *default* da aplicação definido nas configurações do módulo do i18n através * do parâmetro `config`. * * **Retorno:** `string` com a sigla do idioma *default*. */ getLanguageDefault(): string; /** * @description * * Método responsável por retornar a abreviação do idioma ativo na aplicação. * * @default `pt` * * **Retorno:** `string` com a sigla abreviada do idioma ativo. */ getShortLanguage(): string; /** * @description * * Método para salvar o idioma da aplicação no *storage*, utilizado pelo serviço do i18n. * * > Ao definir um idioma por este método, todos os módulos da aplicação utilizarão o idioma definido. * * @param language sigla do idioma. * * Esta sigla deve ser composta por duas letras representando o idioma, * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`. * * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado. */ setLanguage(language: string): void; /** * @description * * Método que define o idioma configurado a partir do parâmetro `config` utilizado pelo módulo do i18n. * * > Ao definir um idioma por este serviço, apenas o módulo do i18n referente a esta configuração utilizará o idioma definido. * * @param language sigla do idioma. * * Esta sigla deve ser composta por duas letras representando o idioma, * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`. * * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado. */ setLanguageDefault(language: string): void; /** * @description * * Método que retorna o separador * * @param language sigla do idioma. * * Esta sigla deve ser composta por duas letras representando o idioma * * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado. */ getNumberSeparators(language?: string): { decimalSeparator: string; thousandSeparator: string; }; /** * @description * * Método que retorna o separador de datas * * @param language sigla do idioma. * * Esta sigla deve ser composta por duas letras representando o idioma * * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado. */ getDateSeparator(language?: string): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @usedBy PoAccordionComponent * * @description * * Interface para definição das literais usadas no `po-accordion`. */ interface PoAccordionLiterals { /** Label do gerenciador de Accordion para expandir todos os itens. */ expandAllItems?: string; /** Label do gerenciador de Accordion para colapsar todos os itens */ closeAllItems?: string; } /** * @description * * 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)` | * */ declare class PoAccordionBaseComponent { private language; private _literals; private _size?; /** * @optional * * @description * * Objeto com as literais usadas no `po-accordion`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoAccordionLiterals = { * closeAllItems: 'Fechar todos os itens', * expandAllItems: 'Expandir todos os itens' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoAccordionLiterals = { * expandAllItems: 'Expandir todos os itens' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoAccordionLiterals); get literals(): PoAccordionLiterals; /** * @optional * * @description * * Exibe o Gerenciador de Accordion. * * @default `false` */ showManagerAccordion: boolean; /** * @optional * * @description * * Permite expandir mais de um `` ao mesmo tempo. * Sempre habilitada caso a propriedade `p-show-manager-accordion` esteja como `true`. * * @default `false` */ allowExpandItems: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura de 32px (disponível apenas para acessibilidade AA). * - `medium`: altura de 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * * Evento disparado ao expandir o gerenciador de accordion, seja manualmente ou programaticamente. * */ expandAllEvent: EventEmitter; /** * @optional * * @description * * Evento disparado ao retrair o gerenciador de accordion, seja manualmente ou programaticamente. * */ collapseAllEvent: EventEmitter; constructor(languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showManagerAccordion: any; static ngAcceptInputType_allowExpandItems: any; } declare class PoAccordionItemHeaderComponent { private language; accordionElement: ElementRef; accordionHeaderElement: ElementRef; expanded: boolean; label: string; labelTag: string; typeTag: string; disabledItem: boolean; toggle: EventEmitter; constructor(); onClick(): void; getTooltip(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoTagComponent * * @description * * Define os tipos de orientações disponíveis para o `po-tag`. */ declare enum PoTagOrientation { /** A tag será exibida na horizontal, ao lado direito em relação ao label. */ Horizontal = "horizontal", /** Exibe a tag na vertical, ou seja, abaixo do label. */ Vertical = "vertical" } /** * @usedBy PoTagComponent * * @description * * Define os tipos disponíveis para o `po-tag`. */ declare enum PoTagType { /** Erro, perigo, problema ou aviso crítico. */ Danger = "danger", /** Informativo ou explicativo. */ Info = "info", /** Confirmação, resultados positivos ou êxito. */ Success = "success", /** Aviso ou advertência. */ Warning = "warning", /** De uso geral, quando os tipos Info, Warning, Success e Danger não atendem a necessidade. */ Neutral = "neutral" } /** * @usedBy PoTagComponent * * @description * * Interface para definição das literais usadas no `po-tag`. */ interface PoTagLiterals { /** Texto exibido no tooltip indicando remoção da tag. */ remove?: string; } /** * @docsPrivate * * @description * * Define os ícones disponíveis para o `po-tag`. */ declare enum PoTagIcon { /** Ícone fechar. */ Danger = "ICON_CLOSE", /** Ícone de informação. */ Info = "ICON_INFO", /** Ícone que representa confirmação. */ Success = "ICON_OK", /** Ícone com ponto de exclamação. */ Warning = "ICON_WARNING" } /** * @description * * 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)` | * */ declare class PoTagBaseComponent { /** * @optional * * @description * * Define uma legenda que será exibida acima ou ao lado da *tag*, de acordo com a `p-orientation`. */ label?: string; /** * @optional * * @description * * Habilita a opção de remover a tag * * @default `false` */ removable: boolean; /** * @optional * * @description * * Desabilita o `po-tag` e não permite que o usuário interaja com o mesmo. * > A propriedade `p-disabled` somente terá efeito caso a propriedade `p-removable` esteja definida como `true`. * * @default `false` */ disabled: boolean; /** Texto da tag. */ value: string; appendInBody: boolean; /** * @optional * * @description * * 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. * * O evento de click só funciona se a tag não for removível. */ click: EventEmitter; /** * @optional * * @description * * Ação que sera executada quando clicar sobre o ícone de remover no `po-tag` */ remove: EventEmitter; readonly poTagOrientation: typeof PoTagOrientation; customColor: any; customTextColor: any; private _color?; private _textColor?; private _icon?; private _orientation?; private _type?; private _literals; private language; /** * @optional * * @description * * Determina a cor da tag. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; * - Usando uma das cores do tema do PO: * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background; * - O componente ajusta automaticamente a cor do texto para garantir legibilidade, escolhendo dinamicamente entre texto claro ou escuro conforme o contraste necessário. * * > **Atenção:** A propriedade `p-type` sobrepõe esta definição. */ set color(value: string); get color(): string; /** * @optional * * @description * * Determina a cor do texto da tag. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; * - Usando uma das cores do tema do PO: * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background. * * > **Atenção:** A propriedade `p-type` sobrepõe esta definição. */ set textColor(value: string); get textColor(): string; /** * @optional * * @description * * Define ou ativa um ícone que será exibido ao lado do valor da *tag*. * * Quando `p-type` estiver definida, basta informar um valor igual a `true` para que o ícone seja exibido conforme descrições abaixo: * - - `success` * - - `warning` * - - `danger` * - - `info` * * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. * * @default `false` */ set icon(value: boolean | string | TemplateRef); get icon(): boolean | string | TemplateRef; /** * @optional * * @description * * Define o *layout* de exibição. * * @default `vertical` */ set orientation(value: PoTagOrientation); get orientation(): PoTagOrientation; /** * @optional * * @description * * Define o tipo da *tag*. * * Valores válidos: * - `success`: cor verde utilizada para simbolizar sucesso ou êxito. * - `warning`: cor amarela que representa aviso ou advertência. * - `danger`: cor vermelha para erro ou aviso crítico. * - `info`: cor azul claro que caracteriza conteúdo informativo. * - `neutral`: cor cinza claro para uso geral. * * > Quando esta propriedade for definida, irá sobrepor a definição de `p-color` e `p-icon` somente será exibido caso seja `true`. * * @default `info` */ set type(value: PoTagType); get type(): PoTagType; forceIcon: boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-tag`. * * * Para utilizar, basta passar a literal customizada: * * ``` * const customLiterals: PoTagLiterals = { * remove: 'Remover itens' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente: * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoTagLiterals); get literals(): PoTagLiterals; constructor(languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_removable: any; static ngAcceptInputType_disabled: any; static ngAcceptInputType_forceIcon: any; } /** * @docsExtends PoTagBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoTagComponent extends PoTagBaseComponent implements OnInit { private el; tagContainer: ElementRef; tagClose: ElementRef; poTag: ElementRef; isClickable: boolean; constructor(); ngOnInit(): void; get iconFromType(): PoTagIcon; get tagColor(): string; get tagOrientation(): boolean; onClick(event?: string): void; onClose(event?: string): void; onKeyPressed(event: any): void; styleTag(): { 'background-color': any; } | { 'background-color'?: undefined; }; private applyTextColorByContrast; getWidthTag(): boolean; setAriaLabel(): string; private onRemove; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @usedBy PoButton * * @description * * Permite a exibição de ícones. */ declare class PoIconComponent { iconElement: ElementRef; class: string; private _icon; private _iconToken; hostPIcon: string | null; constructor(); /** * Define o ícone a ser exibido. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ set icon(value: string | TemplateRef); get icon(): string | TemplateRef; private addClasses; private getIcon; private processIcon; private processIconTokens; private splitIconNames; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente Po-Icon. */ declare class PoIconModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * 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)` | * */ declare abstract class PoTooltipBaseDirective { /** * @optional * * @description * * Define que o po-tooltip será incluido no body e não dentro do elemento ao qual o tooltip foi especificado. * Opção necessária para o caso de uso de tooltip em um elemento SVG. * * @default `false` */ appendInBody: boolean; /** * @optional * * @description * * Controla a exibição da seta de indicação da tooltip. * * Quando `true`, a seta que aponta para o elemento alvo será ocultada. * Quando `false`, a seta será exibida normalmente. * * Essa propriedade é útil em cenários onde a seta não é necessária ou pode interferir no layout da aplicação. * * @default `false` */ hideArrow: boolean; /** * @optional * * @description * * Permite a renderização de conteúdo HTML dentro da tooltip. * * Quando `true`, o valor da propriedade `tooltip` será interpretado como HTML, * possibilitando a utilização de tags e elementos HTML dentro da tooltip. * Caso `false`, o conteúdo será tratado como texto puro. * * @default `false` */ innerHtml: boolean; protected _tooltipPosition?: string; protected tooltipContent: any; private _displayTooltip; private _tooltip; /** * @description * * Habilita e atribui um texto ao po-tooltip. * * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** */ set tooltip(tooltip: string); get tooltip(): string; /** * @optional * * @description * * Define a posição que o po-tooltip abrirá em relação ao componente alvo. Sugere-se que seja * usada a orientação "bottom" (abaixo), porém o mesmo é flexível e será rotacionado * automaticamente para se adequar a tela, caso necessário. * * Posições válidas: * - `right`: Posiciona o po-tooltip no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-tooltip no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-tooltip no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-tooltip abaixo do componente alvo. * - `bottom-left`: Posiciona o po-tooltip abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-tooltip abaixo e à direita do componente alvo. * - `left`: Posiciona o po-tooltip no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-tooltip no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-tooltip no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-tooltip acima do componente alvo. * - `top-right`: Posiciona o po-tooltip acima e à direita do componente alvo. * - `top-left`: Posiciona o po-tooltip acima e à esquerda do componente alvo. * * @default bottom */ set tooltipPosition(position: string); get tooltipPosition(): string; set displayTooltip(value: boolean); get displayTooltip(): boolean; protected abstract addTooltipAction(): any; protected abstract removeTooltipAction(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendInBody: any; static ngAcceptInputType_hideArrow: any; static ngAcceptInputType_innerHtml: any; static ngAcceptInputType_displayTooltip: any; } declare class PoControlPositionService { private arrowDirection; private customPositions; private differenceDiagonalToWidthArrow; private element; private elementOffset; private isCornerAligned; private isSetElementWidth; private offsetArrow; private targetElement; /** * @description Ajusta a posição do elemento, caso não couber em tela irá para próxima posição. * * @param value posição para exibição do elemento */ adjustPosition(value: string): void; /** * @description Retorna a direção da seta, conforme a posição do elemento. */ getArrowDirection(): string; /** * @description Método responsável por definir as propriedades utilizadas para exibir o elemento na posição correta. * * @param element elemento que será exibido * @param elementOffset offSet do elemento * @param targetElement elemento de onde deve partir a exibição * @param customPositions posições que sobrescreve as posições padrões * @param isSetElementWidth indica se deve definir o tamanho do elemento a ser exibido, caso for verdadeiro será igual do targetElement * @param isCornerAligned indica se o elemento filho será alinhado nos cantos do elemneto pai. */ setElements(element: ElementRef | HTMLElement, elementOffset: number, targetElement: ElementRef | HTMLElement, customPositions?: Array, isSetElementWidth?: boolean, isCornerAligned?: boolean): void; private adjustCustomPosition; private adjustDefaultPosition; private elementPosition; private getMainPosition; private getMainPositions; private getMainPositionsByCustomPositions; private getOverflows; private getSizesAndPositions; private nextPosition; private overflowAllSides; private overflowMain; private setAlignedArrowDirection; private setAlignedBottomPositions; private setAlignedElementPosition; private setAlignedTopPositions; private setArrowDirection; private setBottomPositions; private setElementPosition; private setElementWidth; private setLeftPositions; private setRightPositions; private setTopPositions; private verifySubPositions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class PoTooltipControlPositionService extends PoControlPositionService { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsExtends PoTooltipBaseDirective * * @example * * * * * * * * * * * * * * * * */ declare class PoTooltipDirective extends PoTooltipBaseDirective implements OnInit, OnDestroy { private elementRef; private renderer; private poControlPosition; private readonly sanitizer; private arrowDirection; private divArrow; private divContent; private isHidden; private lastTooltipText; private textContent; private tooltipOffset; private eventListenerFunction; constructor(elementRef: ElementRef, renderer: Renderer2, poControlPosition: PoTooltipControlPositionService, sanitizer: DomSanitizer); ngOnDestroy(): void; ngOnInit(): void; onMouseEnter(): void; onMouseLeave(): void; onMouseClick(): void; onFocusOut(): void; onFocusIn(): void; onKeyDown(event: any): void; toggleTooltipVisibility(show: boolean): void; protected addTooltipAction(): void; protected removeTooltipAction(): void; private addArrow; private addScrollEventListener; private createTooltip; private initScrollEventListenerFunction; private hideTooltip; private removeArrow; private removeScrollEventListener; private showTooltip; private updateTextContent; private insertAriaLabelTooltip; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @description * * Módulo da diretiva Po-Tooltip. */ declare class PoTooltipModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente `po-tag`. */ declare class PoTagModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Componente utilizado para renderizar os itens do `po-accordion`. * * O componente `po-accordion` já faz o controle de abertura e fechamento dos itens automaticamente, * mas caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript, pode ser feita da seguinte forma: * * ``` * * * 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(); * } * ``` */ declare class PoAccordionItemComponent implements OnDestroy { private accordionService; private _type?; /** Título do item. */ label: string; /** * @optional * * @description * * Label da Tag. * */ labelTag: string; /** * @optional * * @description * * Desabilita item. * * @default `false` */ disabledItem: boolean; /** * @optional * * @description * * Define o tipo da *tag* caso ela esteja sendo exibida. * * Valores válidos: * - `success`: cor verde utilizada para simbolizar sucesso ou êxito. * - `warning`: cor amarela que representa aviso ou advertência. * - `danger`: cor vermelha para erro ou aviso crítico. * - `info`: cor cinza escuro que caracteriza conteúdo informativo. * * * @default `info` */ set typeTag(value: PoTagType); get typeTag(): PoTagType; /** Evento disparado ao expandir o item, seja manualmente ou programaticamente. */ expandEvent: EventEmitter; /** Evento disparado ao retrair o item, seja manualmente ou programaticamente. */ collapseEvent: EventEmitter; templateRef: TemplateRef; expanded: boolean; private expandSubscription; private collapseSubscription; constructor(); ngOnDestroy(): void; /** * Método para colapsar o `po-accordion-item`. */ collapse(): void; /** * Método para expandir o `po-accordion-item`. */ expand(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabledItem: any; } /** * @docsExtends PoAccordionBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoAccordionComponent extends PoAccordionBaseComponent implements OnDestroy { private accordionService; accordionsHeader: QueryList; poAccordionItems: QueryList; expandedAllItems: boolean; private accordionServiceSubscription; private expandedActiveAccordionItem; constructor(); ngOnDestroy(): void; changeVisibleAllItems(event: boolean): void; /** * Método para colapsar todos os itens. * Só pode ser utilizado quando a propriedade `p-show-manager-accordion` estiver como `true`. */ collapseAllItems(): void; /** * Método para expandir todos os itens. * Só pode ser utilizado quando a propriedade `p-show-manager-accordion` estiver como `true`. */ expandAllItems(): void; headerToggle(event: boolean, poAccordionItem: PoAccordionItemComponent): void; private checkVisibleAllItems; private receiveFromChildAccordionSubscription; private toggle; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoAccordionItemBodyComponent { expanded: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoAccordionManagerComponent implements OnChanges { labelValue: string; changeDetector: ChangeDetectorRef; accordionElement: ElementRef; accordionHeaderElement: ElementRef; expandedAllItems: boolean; literals: PoAccordionLiterals; clickManager: EventEmitter; ngOnChanges(changes: SimpleChanges): void; onClick(): void; getTooltip(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Este componente apresenta uma linha demarcadora de blocos e pode conter um *label*. Seu uso é indicado para definição * e organização de informações em uma tela e sua característica é semelhante à tag `
`. * * #### 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** | | | * | `--color` | Cor principla do divider  | `var(--color-neutral-mid-40)` | * | `--stroke-linecap` | Extremidade da linha  | `round` | * */ declare class PoDividerBaseComponent implements OnInit { coordinateX1: string; coordinateX2: string; private _borderWidth; /** Valor do rótulo a ser exibido. */ label?: string; /** * @optional * * @description * * Define a espessura da linha. * * Valores válidos: * - small * - medium * - large * * @default `small` */ set borderWidth(value: string); get borderWidth(): string; ngOnInit(): void; getCoordinates(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoDividerBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoDividerComponent extends PoDividerBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-divider. */ declare class PoDividerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente `po-accordion`. * * > Para o correto funcionamento do componente `po-accordion`, 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)); * ``` */ declare class PoAccordionModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * 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. */ declare class PoAvatarBaseComponent { /** * Fonte da imagem que pode ser um caminho local (`./assets/images/logo-black-small.png`) * ou um servidor externo (`https://po-ui.io/assets/images/logo-black-small.png`). */ src: string; /** * @optional * * @description * * Indica como o navegador deve carregar a imagem. * * Valores válidos: * - `eager` (a imagem é carregada imediatamente, independente de estar visível ou não) * - `lazy` (a imagem só é carregada quando estiver próxima de ser renderizada) * * @default `eager` */ loading: 'eager' | 'lazy'; /** Evento disparado ao clicar na imagem do *avatar*. */ click: EventEmitter; private _size; /** * @optional * * @description * * Tamanho de exibição do componente. * * Valores válidos: * - `xs` (24x24) * - `sm` (32x32) * - `md` (64x64) * - `lg` (96x96) * - `xl` (144x144) * * @default `md` */ set size(value: string); get size(): string; get hasClickEvent(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoAvatarBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoAvatarComponent extends PoAvatarBaseComponent implements OnInit { ngOnInit(): void; onError(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-avatar. */ declare class PoAvatarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy * * PoBreadcrumb, PoBreadcrumbComponent, PoBreadcrumbBaseComponent, * PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent * * @description * * Interface que define cada item do componente **po-breadcrumb**. */ interface PoBreadcrumbItem { /** * Ação executada ao clicar no item. * * > A função atribuída a esta propriedade receberá o _label_ do item como parâmetro para execução. */ action?: Function; /** Rótulo do item. */ label: string; /** * Url do item. * * > Caso o item também contenha uma *action* definida, a preferência de execução será do *link*. * * > Para o correto funcionamento, é necessário que haja uma rota referenciando seu valor. * **[Veja um exemplo de como criar rotas aqui](/guides/getting-started)**. * * > Esta propriedade é necessária para que a propriedade `p-favorite-service` consiga favoritar ou desfavoritar. */ link?: string; } /** * @description * * 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)` | * */ declare class PoBreadcrumbBaseComponent { /** * @optional * * @description * * Permite definir uma URL no componente `po-breadcrumb` para favoritar ou desfavoritar. * > Para utilizar esta propriedade, o último `PoBreadcrumbItem` da lista de items da propriedade `p-items` deve ter um link informado. * * > A API deve estar preparada para retornar um objeto no formato `{ isFavorite: boolean }`. * * Ao iniciar, o `po-breadcrumb` faz um GET na URL definida na propriedade `p-favorite-service` e deve retornar a propriedade * `{ isFavorite: boolean }` do último `PoBreadcrumbItem` definido na lista de itens da propriedade `p-items`. * * Ao clicar em favoritar ou desfavoritar o `po-breadcrumb` faz um POST com o link e a propriedade `{ isFavorite: boolean }` * definidos no último item da propriedade `p-items`. * * > Caso algum parâmetro seja definido na propriedade `p-params-service`, o mesmo será enviado para a API e retornará * após fazer um GET ou POST. * * Exemplo de URL contendo o serviço de favoritar ou desfavoritar: * * ``` * https://po-ui.io/sample/api/favorite * ``` * * Ao fazer o GET o `po-breadcrumb` concatena o link com a URL de serviço. Exemplo: * * ``` * GET http:///api/favorite?url=/example * ``` * * ``` * GET http://po.com.br/sample/api/favorite?url=/example * ``` * * ``` * POST * payload: { isFavorite: true, url: '/example' } * ``` * * Caso possua parâmetros definidos na propriedade `p-params-service`: * * ``` * POST * payload: { isFavorite: true, url: "/example", params: "{ id: 14, user: 'dev.po' }" } * ``` * * Exemplos de retorno: * * ``` * { isFavorite: true, url: "/example" } * ``` * * ``` * { isFavorite: false, url: "/example" } * ``` * * ``` * { isFavorite: false, url: "/example", params: "{ id: 14, user: 'dev.po' }" } * ``` */ favoriteService?: string; /** * @optional * * @description * * Objeto que possibilita o envio de parâmetros adicionais à requisição. */ paramsService?: object; itemsView: Array; itemsViewPopup: Array; protected clickoutListener: () => void; protected resizeListener: () => void; private _items; private _size?; /** * @description * * Lista de itens do _breadcrumb_. * * **Exemplo:** * ``` * { label: 'Po Portal', link: 'portal' } * ``` */ set items(items: Array); get items(): Array; /** * @optional * * @description * * Define o tamanho do componente entre `small` ou `medium`. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; private transformToArrayPopup; private transformArrayToActionPopUp; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface PoItemListOption { /** Rótulo do Item. */ label?: string; /** Valor do Item. */ value: string | number; } declare enum PoItemListFilterMode { /** Verifica se o texto *inicia* com o valor pesquisado. Caso não seja especificado um tipo, será esse o utilizado. */ startsWith = 0, /** Verifica se o texto *contém* o valor pesquisado. */ contains = 1, /** Verifica se o texto *finaliza* com o valor pesquisado. */ endsWith = 2 } declare enum PoItemListType { action = "action", check = "check", option = "option", danger = "danger" } interface PoItemListAction { /** * Ação que será executada, sendo possível passar o nome ou a referência da função. * * > Para que a função seja executada no contexto do elemento filho o mesmo deve ser passado utilizando *bind*. * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado. * * Também é possível informar diretamente um valor booleano que vai habilitar ou desabilitar a ação para todos os registros. */ disabled?: boolean | Function; /** * @description * * Define um ícone que será exibido ao lado esquerdo do rótulo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * * myProperty = [ * { * label: 'FA ICON', * icon: this.iconTemplate * } * ]; * ``` */ icon?: string | TemplateRef; /** Rótulo da ação. */ label: string; /** URL utilizada no redirecionamento das páginas. */ url?: string; selected?: boolean; /** Atribui uma linha separadora acima do item. */ separator?: boolean; /** * @description * * Define a cor do item, sendo `action` o padrão. * * Valores válidos: * - `action` * - `check` * - `option` */ type?: string; /** * @description * * Define se a ação será visível. * * > Caso o valor não seja especificado a ação será visível. * * Opções para tornar a ação visível ou não: * * - Função que deve retornar um booleano. * * - Informar diretamente um valor booleano. * */ visible?: boolean | Function; /** * @description * * Define se o item vai ter o estilo danger ou não. * * Deve ser usado para mostrar uma ação de exclusão ou de saída. */ danger?: boolean; } interface PoItemListOptionGroup { /** Rótulo da ação. */ label: string; /** Array de PoItemListOption */ options: Array; } /** * @description * * O componente `po-item-list` é a menor parte da lista de ação que compõem o componente [**PO Listbox**](/documentation/po-listbox). */ declare class PoItemListBaseComponent { private _label; private _value; private _type; private _visible; private _disabled; _activeTabs: boolean; set type(value: string); get type(): PoItemListType; /** * @optional * * @description * * Define o estado como visível. * * @default `true` */ set visible(value: any); get visible(): boolean; item: PoItemListAction | PoItemListOption | PoItemListOptionGroup | any; /** Texto de exibição do item. */ label: string; /** Tamanho do texto exibido. */ size: string; /** Valor do item. */ value: string; danger: boolean; /** * @optional * * @description * * Define o estado como desabilitado. * * @default `false` */ set disabled(value: any); get disabled(): boolean; /** * @optional * * @description * * Define se a ação está selecionada. * * @default `false` */ selected: boolean; /** * @optional * * @description * * Atribui uma linha separadora acima do item. * * @default `false` */ separator: boolean; /** * @optional * * @description * * Define um ícone que será exibido ao lado esquerdo do rótulo. */ icon: string | TemplateRef; /** * @optional * * @description * * Define se deve ser exibido o ícone indicando subnível. */ iconArrowRight: string; iconPosition: 'left' | 'right'; /** * @optional * * @description * * Ação a ser realizada ao clicar no item do tipo `option`. */ clickItem: EventEmitter; checkboxItem: EventEmitter; comboItem: EventEmitter; checkboxValue: any; fieldValue: string; fieldLabel: string; template: TemplateRef | any; templateContext: any; searchValue: string; filterMode: PoItemListFilterMode; isFiltering: boolean; shouldMarkLetters: boolean; compareCache: boolean; comboService: any; isTabs?: boolean; tabHide?: boolean; tabsItem: EventEmitter; activatedTab: EventEmitter; set activeTabs(value: boolean); get activeTabs(): boolean; keysLabel?: Array; protected emitActiveTabs(tab: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_danger: any; static ngAcceptInputType_selected: any; static ngAcceptInputType_separator: any; } declare class PoItemListComponent extends PoItemListBaseComponent implements OnChanges { protected sanitized: DomSanitizer; itemList: ElementRef; selectedView: PoItemListOption; protected param: any; protected clickListener: () => void; private shouldUpdateSelected; ngOnChanges(changes: SimpleChanges): void; onCheckboxItem(): void; onComboItem(options: any, event: any): void; compareObjects(obj1: any, obj2: any): boolean; onCheckboxItemEmit(event: KeyboardEvent): void; getLabelFormatted(label: string): SafeHtml; validateForOptionsLabel(): boolean; safeHtml(value: any): SafeHtml; private sanitizeTagHTML; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoListBoxComponent * * @description * * Interface para definição de literais utilizadas no `po-listbox` */ interface PoListBoxLiterals { /** Texto do botão para voltar ao agrupador anterior. */ backToPreviousGroup?: string; /** Texto exibido quando não houver itens na lista */ noItems?: string; /** Texto do *placeholder* do campo de busca. */ placeholderSearch?: string; /** Texto do checkbox para selecionar todos os itens. */ selectAll?: string; footerActionListbox?: string; } /** * @docsPrivate * * @description * * Componente de pesquisa que será criado dentro do search do `po-listbox`. */ declare class PoSearchListComponent { private cd; inputElement: ElementRef; /** Propriedade que recebe as literais definidas no `po-listbox`. */ literals?: PoListBoxLiterals; fieldValue: string; /** Tamanho do texto de exibido do item. */ size: string; /** Evento que será disparado a cada tecla digitada no campo de busca. */ change: EventEmitter; private _placeholder?; initUp: boolean; initDown: boolean; /** * @optional * * @description * * Placeholder do campo de pesquisa. * * > Caso o mesmo não seja informado, o valor padrão será traduzido com base no idioma do navegador (pt, es e en). * * @default `Buscar` */ set placeholder(placeholder: string); get placeholder(): string; get inputValue(): any; onChange(event: any): void; setFocus(): void; clean(): void; resetKeys(): void; isTypeof(object: any, type: any): boolean; changeInitSearch(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * O componente `po-listbox` é uma caixa suspensa que aparece sobre a interface após ser acionado por um gatilho visível em tela, como o dropdown. Ele apoia trazendo agrupamentos de opções. O componente listbox é composto pelo componente [**PO Item List**](/documentation/po-item-list). */ declare class PoListBoxBaseComponent { private _items; private _type; private _literals; private language; private _size?; listboxSubitems: boolean; visible: boolean; set type(value: string); get type(): PoItemListType; set items(items: Array); get items(): Array; set literals(value: PoListBoxLiterals); get literals(): PoListBoxLiterals; get isItemListGroup(): boolean; isTabs: boolean; param?: any; checkboxAllValue: any; selectedOptions: Array; selectedOption?: any; fieldValue: string; fieldLabel: string; literalSearch?: any; fieldValueSearch: string; hideSearch?: boolean; hideSelectAll?: boolean; multiselectTemplate: TemplateRef | any; template: TemplateRef | any; placeholderSearch: string; searchValue: string; isServerSearching: boolean; infiniteLoading: boolean; infiniteScroll: boolean; cache: boolean; infiniteScrollDistance: number; filterMode: PoItemListFilterMode; isFiltering: boolean; shouldMarkLetters: boolean; set size(value: string); get size(): string; compareCache: boolean; comboService: any; containerWidth: number; keysLabel: Array; footerActionListbox: boolean; placeholderListbox: string; separator: boolean; changeSearch: EventEmitter; selectItem: EventEmitter; closeEvent: EventEmitter; change: EventEmitter; selectCombo: EventEmitter; changeAll: EventEmitter; UpdateInfiniteScroll: EventEmitter; activatedTab: EventEmitter; clickTab: EventEmitter; changeStateTabs: EventEmitter; clickItem: EventEmitter; footerActionListboxEvent: EventEmitter; constructor(languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_visible: any; static ngAcceptInputType_isTabs: any; static ngAcceptInputType_isServerSearching: any; static ngAcceptInputType_infiniteLoading: any; static ngAcceptInputType_infiniteScroll: any; static ngAcceptInputType_cache: any; } /** * @usedBy PoPopupComponent, PoWidgetComponent * * @description * * Interface para lista de ações do componente. */ interface PoPopupAction { /** * @description * * Rótulo da ação. * * No componente `po-dropdown`, a label também pode representar o agrupador de subitens. */ label: string; /** * @description * * Ação que será executada, sendo possível passar o nome ou a referência da função. * * No componente `po-dropdown`, a action também pode ser executada para o agrupador de subitens. * * > Para que a função seja executada no contexto do elemento filho o mesmo deve ser passado utilizando *bind*. * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * @description * * Define um ícone que será exibido ao lado esquerdo do rótulo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * * myProperty = [ * { * label: 'FA ICON', * icon: this.iconTemplate * } * ]; * ``` */ icon?: string | TemplateRef; /** * @description * * Atribui uma linha separadora acima do item. * * */ separator?: boolean; /** * @description * * Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado. * * Também é possível informar diretamente um valor booleano que vai habilitar ou desabilitar a ação para todos os registros. * */ disabled?: boolean | Function; /** * @description * * Define a cor do item, sendo `default` o padrão. * * Valores válidos: * - `default` * - `danger` - indicado para ações exclusivas (excluir, sair). */ type?: string; /** * @description * * URL utilizada para redirecionamento das páginas. * * No componente `po-dropdown`, a url também pode ser configurada para o agrupador de subitens. * Entretanto, quando a `url` é informada em um agrupador, o clique **não abrirá os subitens**, pois o item será * tratado como um link e o redirecionamento terá prioridade sobre a exibição da lista. * */ url?: string; /** * @description * * Define se a ação está selecionada. * */ selected?: boolean; /** * @description * * Define se a ação será visível. * * > Caso o valor não seja especificado a ação será visível. * * Opções para tornar a ação visível ou não: * * - Função que deve retornar um booleano. * * - Informar diretamente um valor booleano. * */ visible?: boolean | Function; $id?: string; $subItemTemplate?: TemplateRef; } /** * @description * Interface do componente po-dropdown * * @docsExtends PoPopupAction * * @usedBy PoDropdownComponent */ interface PoDropdownAction extends PoPopupAction { /** * Array de ações (`PoDropdownAction`) usado para criar agrupadores de subitens. * * - Permite a criação de menus aninhados (submenus). * * > Boas práticas de desenvolvimento: * Recomenda-se limitar a navegação a, no máximo, três níveis hierárquicos. * Isso evita sobrecarga cognitiva, facilita a memorização da estrutura e garante uma melhor experiência de uso. */ subItems?: Array; } declare class PoListBoxComponent extends PoListBoxBaseComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { element: ElementRef; currentItems: Array; currentGroup: PoDropdownAction | null; private readonly navigationStack; private readonly renderer; private readonly router; private readonly changeDetector; listbox: ElementRef; listboxItemList: ElementRef; listboxGroupHeader: ElementRef; searchElement: PoSearchListComponent; popupHeaderContainer: ElementRef; listboxItems: QueryList; private scrollEvent$; private subscriptionScrollEvent; constructor(); ngOnInit(): void; ngAfterViewInit(): void; ngOnChanges(changes?: SimpleChanges): void; ngOnDestroy(): void; openGroup(group: PoDropdownAction, event?: MouseEvent | KeyboardEvent): void; goBack(event: MouseEvent | KeyboardEvent): void; onKeydownGoBack(event: KeyboardEvent, currentGroup?: PoDropdownAction): void; protected onKeydownTemplate(event: KeyboardEvent): void; onSelectItem(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: MouseEvent | KeyboardEvent): void | Promise; onSelectAllCheckboxKeyDown(event: KeyboardEvent): void; onKeyDown(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: KeyboardEvent): void; checkboxClicked({ option, selected }: { option: any; selected: any; }): void; optionClicked(option: any): void; onSelectCheckBoxItem(option: any): void; isSelectedItem(option: any): boolean; changeAllEmit(event: KeyboardEvent): void; onSelectTabs(tab: any): void; onActivatedTabs(tab: any): void; callChangeSearch(event: any): void; showMoreInfiniteScroll({ target }: { target: any; }): void; scrollListener(componentListner: HTMLElement): Observable; setFocus(): void; protected checkInfiniteScroll(): void; protected getSizeLoading(): "xs" | "sm" | "md"; protected getTextLoading(): "" | " "; private hasInfiniteScroll; checkTemplate(): number | true; private includeInfiniteScroll; protected returnBooleanValue(itemListAction: any, property: string): any; private setListBoxMaxHeight; private setListBoxWidth; private openUrl; onClickTabs(tab: any): void; formatItemList(item: any): string; handleFooterActionListbox(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoHelperComponent * * @description * * *Interface* que define as opções de configuração do componente po-helper. * * Permite customizar o conteúdo, título, tipo do ícone, modo de abertura do popover, ações customizadas e eventos. * */ interface PoHelperOptions { /** * * @optional * * @description * * Título do helper exibido no popover. */ title?: string; /** * * @optional * * @description * * Texto explicativo exibido no popover. */ content?: string; /** * * @optional * * @description * * Tipo do ícone exibido: `info` ou `help`. * * Quando o valor é `info`, o popover exibe apenas informações e não permite ações customizadas. * * Quando o valor é `help`, o popover pode exibir ações customizadas no rodapé. * * @default `help` */ type?: 'info' | 'help'; /** * * @optional * * @description * * Ação customizada exibida no rodapé do popover. * Compatível apenas com a propriedade type com o valor `help` e desconsiderada quando o type for `info`. * * Deve ser um objeto com as propriedades: * - `label`: Texto do botão. * - `action`: Função executada ao clicar no botão. * * Exemplo: * ```typescript * { label: 'Saiba mais', action: this.footerAction.bind(this)) } * ``` */ footerAction?: { label: string; action: Function; }; /** * @optional * * @description * Evento disparado ao clicar no ícone do helper. * * O conteúdo do popover não é exibido quando esta propriedade é definida, para controle total do evento pelo desenvolvedor. * * Pode ser uma função ou um `EventEmitter`. * * Exemplo: * ``` * eventOnClick: (event) => { * alert('Clicou no helper'); * console.log(event); * } * ``` */ eventOnClick?: Function; size?: string; } /** * @description * * 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 * * ``` * * Também é possível passar apenas uma string para o conteúdo: * ```html * * ``` * * A propriedade `p-helper` aceita um objeto do tipo `PoHelperOptions`: * ```typescript * interface PoHelperOptions { * title?: string; * content: string; * type?: 'help' | 'info'; * eventOnClick?: Function; * footerAction?: { label: string; action: Function }; * } * ``` * * > **Importante:** A propriedade `footerAction` não pode ser utilizada quando o tipo do helper for `info`, pois o ícone de informação é destinado apenas para exibir informações estáticas sem ações adicionais. * * #### 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 | * |--------------------------------------------|---------------------------------------------------------------|---------------------------------------------------| * | `--color` | Cor principal do ícone | `var(--color-action-default)` | * | `--border-color-hover` | Cor da borda no estado hover | `var(--color-brand-01-darkest)` | * | `--background-pressed` | Cor de background no estado de pressionado  | `var(--color-brand-01-light)` | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` | * */ declare class PoHelperBaseComponent { /** * @Input * * @optional * * @description * * Define o conteúdo e as opções do popover de ajuda/informação. * * Aceita uma string simples (exibida como conteúdo) ou um objeto do tipo `PoHelperOptions` para configuração avançada: * - `title`: Título do popover. * - `content`: Conteúdo explicativo exibido no popover. * - `type`: Tipo do ícone (`help` ou `info`). * - `eventOnClick`: Função chamada ao clicar no ícone. * - `footerAction`: Objeto com `label` e `action` para ação customizada no rodapé do popover. * * Exemplo de uso: * ```html * * * ``` * */ helper: i0.InputSignal; /** * @Input * * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do ícone com seu valor de 16px (disponível apenas para acessibilidade AA). * - `medium`: altura do ícone com seu valor de 24px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ size: i0.InputSignal; /** * @Input * * @optional * * @description * * Indica se o helper deve ser exibido no estado desativado, desabilitando interações do usuário. * * @default `false` */ disabled: i0.InputSignal; /** * @Input * * @optional * * @description * Define que o popover será inserido no body da página em vez do elemento definido em `p-target`. Essa opção pode * ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o posicionamento * correto do conteúdo próximo ao elemento. */ appendBox: i0.InputSignal; private transformHelper; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * O componente `po-popover` é um container pequeno recomendado para incluir vários tipos de conteúdo como: * gráficos, textos, imagens e inputs. Ele abre sobreposto aos outros componentes. * * Para mostrar apenas pequenos textos recomenda-se o uso da diretiva * [**po-tooltip**](https://po-ui.io/documentation/po-tooltip?view=doc). * * Para conteúdos maiores recomenda-se o uso do [**po-modal**](https://po-ui.io/documentation/po-modal?view=doc). * * Ele contém um título e também é possível escolher as posições do popover em relação ao componente pai, * as posições permitidas são: `right`, `right-top`, `right-bottom`, `top`, `top-left`, `top-right`, * `left`, `left-top`, `left-bottom`, `bottom`, `bottom-left` e `bottom-right`. * * Também é possível escolher entre os dois eventos que podem abrir o *popover*. * Os eventos permitidos são: `click` e `hover`. * */ declare class PoPopoverBaseComponent { /** * @optional * * @description * * Define que o popover será inserido no body da página em vez do elemento definido em `p-target`. Essa opção pode * ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o posicionamento * correto do conteúdo próximo ao elemento. * * @default `false` */ appendBox: boolean; /** * @description * * ElementRef do componente de origem responsável por abrir o popover. * Para utilizar o po-popover deve-se colocar uma variável no componente que vai disparar o evento * de abertura, exemplo: * * ``` * * * * * * ``` * * Também deve-se criar um ViewChild para cada popover, passando como referência o elemento do * HTML que irá disparar o evento. Exemplo: * * ``` * @ViewChild(PoButtonComponent, {read: ElementRef}) poButton: PoButtonComponent; * ``` * * Pode-se tambem informar diretamente o HTMLElement, para não ter que utilizar o ViewChild. * Para utilizar o po-popover deve-se colocar uma variável no componente que vai disparar o evento * de abertura, exemplo: * * ``` * * * * * ``` * * * */ target: ElementRef | HTMLElement; /** Título do popover. */ title?: string; /** Evento disparado ao fechar o popover. */ closePopover: EventEmitter; /** Evento disparado ao abrir o popover. */ openPopover: EventEmitter; isHidden: boolean; protected clickoutListener: () => void; protected mouseEnterListener: () => void; protected mouseLeaveListener: () => void; protected resizeListener: () => void; private _hideArrow; private _position?; private _trigger?; /** * @optional * * @description * * Desabilita a seta do componente *popover*. * * @default `false` */ set hideArrow(value: boolean); get hideArrow(): boolean; /** * @optional * * @description * * Define a posição que o po-popover abrirá em relação ao componente alvo. Sugere-se que seja * usada a orientação "right" (direita), porém o mesmo é flexível e será rotacionado * automaticamente para se adequar a tela, caso necessário. * * Posições válidas: * - `right`: Posiciona o po-popover no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-popover no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-popover no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-popover abaixo do componente alvo. * - `bottom-left`: Posiciona o po-popover abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-popover abaixo e à direita do componente alvo. * - `left`: Posiciona o po-popover no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-popover no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-popover no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-popover acima do componente alvo. * - `top-right`: Posiciona o po-popover acima e à direita do componente alvo. * - `top-left`: Posiciona o po-popover acima e à esquerda do componente alvo. * * * @default right */ set position(value: string); get position(): string; /** * @description * * Define o evento que abrirá o po-popover. * * Valores válidos: * - `click`: Abre ao clicar no componente alvo. * - `hover`: Abre ao passar o mouse sobre o componente alvo. * - `function`: Abre através de funções públicas do componente. * * @default click * @optional */ set trigger(value: string); get trigger(): string; /** * @Input * * @optional * * @description * Permite a inclusão de classes CSS customizadas ao componente. * * Exemplo: `p-custom-classes="minha-classe-1 minha-classe-2"`. * */ customClasses: i0.InputSignal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_appendBox: any; } /** * * @docsExtends PoPopoverBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoPopoverComponent extends PoPopoverBaseComponent implements AfterViewInit, OnDestroy, OnChanges { private renderer; private readonly poControlPosition; private readonly cd; popoverElement: ElementRef; arrowDirection: string; timeoutResize: any; targetElement: any; afterViewInitWasCalled: boolean; private keydownTargetListener?; private keydownPopoverListener?; eventListenerFunction: () => void; private readonly tabbableSelector; constructor(renderer: Renderer2, poControlPosition: PoControlPositionService, cd: ChangeDetectorRef); ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; initEvents(): void; ngOnDestroy(): void; close(): void; debounceResize(): void; open(): void; ensurePopoverPosition(): void; setOpacity(value: number): void; setPopoverPosition(): void; setRendererListenInit(): void; togglePopup(event: any): void; private addScrollEventListener; private initEventListenerFunction; private removeListeners; private setElementsControlPosition; private focusOnTarget; private focusOnFirstFocusable; private attachPopoverKeydown; private isVisible; private getTabbablesIn; private getDocumentTabbables; private focusNextAfterTarget; private focusPrevBeforeTarget; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoButtonComponent * * @description * * 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. * * @example * No uso com o `PoButtonComponent`, a propriedade `p-type` pode ser utilizada para configurar o comportamento: * * ``` * * * * ``` */ declare enum PoButtonType { /** * Define o botão como do tipo `submit`. Quando clicado, o formulário é enviado automaticamente, * disparando o evento `submit`. */ Submit = "submit", /** * Define o botão como do tipo `button`. Este tipo de botão não possui comportamento padrão associado * e é utilizado principalmente para ações programáticas como cliques e disparos de eventos customizados. */ Button = "button", /** * Define o botão como do tipo `reset`. Quando clicado, redefine os campos do formulário ao qual pertence * para seus valores iniciais. */ Reset = "reset" } /** * @description * * 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)` | * */ declare class PoButtonBaseComponent { /** * @Input * * @optional * * @description * * Label do botão. */ readonly label: i0.InputSignal; /** * @Input * * @optional * * @description * Ícone exibido ao lado esquerdo do label do botão. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca * esteja carregada no projeto: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ readonly icon: i0.InputSignal>; /** * @Input * * @optional * * @description * Define o tipo do botão. * * @default `PoButtonType.Button` */ readonly type: i0.InputSignal; blur: EventEmitter; /** Ação que será executada quando o usuário clicar sobre o `po-button`. */ click: EventEmitter; private _danger?; private _disabled?; private _loading?; private _kind?; private _size?; protected hasSize?: boolean; /** * @optional * * @description * * Exibe um ícone de carregamento à esquerda do _label_ do botão. * * > Quando esta propriedade estiver habilitada, desabilitará o botão. * * @default `false` */ set loading(value: boolean); get loading(): boolean; /** * @optional * * @description * * 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. * * > A propriedade `p-kind="tertiary"` será inativada ao utilizar esta propriedade. */ set danger(value: boolean); get danger(): boolean; /** * @optional * * @description * * Define o estilo visual do componente conforme valores especificados no enum `PoButtonKind`: * - `primary`: destaca o botão, sendo recomendado para ações principais. * - `secondary`: estilo padrão, ideal para ações secundárias. * - `tertiary`: exibe o botão sem preenchimento no fundo, indicado para ações opcionais. * * @default `secondary` */ set kind(value: string); get kind(): string; /** * @optional * * @description * * Desabilita o `po-button` e não permite que o usuário interaja com o mesmo. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @Input * * @optional * * @description * * Define um `aria-label` para o `po-button`. * * Caso esta propriedade não seja informada será considerada a label do botão. * * > Em caso de botões com apenas ícone a atribuição de valor à esta propriedade é muito importante para acessibilidade. */ readonly ariaLabel: i0.InputSignal; ariaExpanded?: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura de 32px (disponível apenas para acessibilidade AA). * - `medium`: altura de 44px. * - `large`: altura de 56px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_danger: any; } /** * @docsExtends PoButtonBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoButtonComponent extends PoButtonBaseComponent { buttonElement: ElementRef; onBlur(): void; /** * 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(); * } * ``` */ focus(): void; mapSizeToIcon(size: string): string; onClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Este componente tem o objetivo de mostrar visualmente aos usuários que a aplicação está processando * ou aguardando a resposta de alguma requisição. */ declare class PoLoadingBaseComponent { protected languageService: PoLanguageService; private _text?; private _size?; /** * Texto a ser exibido no componente. */ set text(value: string); get text(): string; /** * Define o tamanho do ícone. * Valores válidos: * - `xs`: 16px * - `sm`: 24px * - `md`: 32px * - `lg`: 80px * * @default `lg` */ set size(value: string); get size(): string; inOverlay: boolean; constructor(languageService: PoLanguageService); private getTextDefault; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsPrivate * * @docsExtends PoLoadingBaseComponent */ declare class PoLoadingComponent extends PoLoadingBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface LoadingIconComponent { size?: string; } /** * @docsPrivate * * @description * * Componente que exibe um ícone de carregamento de conteúdo. A cor padrão para ele é a primária conforme o tema utilizado. * É possível alterá-la para um tom cinza conforme a necessidade. */ declare class PoLoadingIconComponent implements AfterViewInit, OnDestroy { loadingIconComponent?: Type; private _neutralColor; private _size; private createdRef; id: string; loadingContainer: ViewContainerRef; /** * @optional * * @description * * Definição para cor neutra (cinza) para o ícone de carregamento. * * @default `false` */ set neutralColor(value: boolean); get neutralColor(): boolean; /** * @optional * * @description * * Definição do tamanho do ícone. * * Valores válidos: * - `xs`: tamanho `extra small` * - `sm`: tamanho `small` * - `md`: tamanho `medium` * - `lg`: tamanho `large` * * @default `md` */ set size(value: string); get size(): string; inOverlay: boolean; constructor(loadingIconComponent?: Type); ngOnDestroy(): void; ngAfterViewInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * * @description * * Este componente mostra ao usuário uma imagem de _loading_ e bloqueia a página inteira ou o container escolhido, * enquanto aguarda a resposta de alguma requisição. * * #### 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-loading` * * > 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-weight` | Peso da fonte | `var(--font-weight-normal)` | * | `--text-color` | Cor do texto | `var(--color-neutral-dark-70)` | * | `--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 de background | `var(--color-neutral-light-00)` | * | `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-md)` | * | **po-loading-icon** | | | * | `--color` | Cor principal do spinner | `var(--color-action-default)` | * */ declare class PoLoadingOverlayBaseComponent { private languageService; private _screenLock?; private _text?; private _size?; /** * @optional * * @description * * Define se o *overlay* será aplicado a um *container* ou à página inteira. * * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo: * * ``` *
* * * * * * *
* ``` * * @default `false` */ set screenLock(screenLock: boolean); get screenLock(): boolean; /** * @optional * * @description * * Texto a ser exibido no componente. * * > O valor padrão será traduzido de acordo com o idioma configurado no [**PoI18n**](/documentation/po-i18n) ou navegador. * * @default `Carregando` */ set text(value: string); get text(): string; /** * @optional * * @description * * Define o tamanho do componente com base no tamanho do ícone de *loading*. * * Tamanhos disponíveis para o *loading*: * - `xs`: 1rem * - `sm`: 1.5rem * - `md`: 3rem * - `lg`: 5rem (valor padrão) * * @default `lg` */ set size(value: string | null); get size(): string; constructor(languageService: PoLanguageService); private getTextDefault; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * * @docsExtends PoLoadingOverlayBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoLoadingOverlayComponent extends PoLoadingOverlayBaseComponent { changeDetector: ChangeDetectorRef; constructor(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do serviço `po-language`. */ declare class PoLanguageModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoOverlayBaseComponent { /** * @optional * * @description * * Define se o *overlay* será aplicado a um *container* ou a página inteira. * * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo: * * ``` *
* * * * * * *
* ``` * * @default `false` */ screenLock: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_screenLock: any; } declare class PoOverlayComponent extends PoOverlayBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoOverlayModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * * @description * * Módulo do componente po-loading-overlay. */ declare class PoLoadingModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente po-button. */ declare class PoButtonModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoButtonComponent, PoWidgetComponent * * @description * * Estilos disponíveis do button. */ declare enum PoButtonKind { /** Estilo primário, usado para ações principais que requerem maior destaque. */ primary = "primary", /** Estilo secundário, usado como padrão, para ações comuns. */ secondary = "secondary", /** Estilo terciário, ideal para ações menos importantes, sem fundo preenchido. */ tertiary = "tertiary" } /** * @description * * Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA. */ declare enum PoButtonSize { /** Define a altura do button como 32px. */ Small = "small", /** Define a altura do button como 44px. */ Medium = "medium", /** Define a altura do button como 56px. */ Large = "large" } /** * @docsExtends PoHelperBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoHelperComponent extends PoHelperBaseComponent implements AfterViewInit, OnDestroy, OnChanges { private readonly cdr; target: ElementRef; popover: PoPopoverComponent; poButton: PoButtonComponent; private static instances; private static idCounter; protected popoverPosition: string; id: string; private boundFocusIn; private readonly poHelperLiterals; constructor(cdr: ChangeDetectorRef); ngAfterViewInit(): void; setPopoverPositionByScreen(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; openHelperPopover(): void; helperIsVisible(): boolean; closeHelperPopover(): void; emitClick(event: MouseEvent): void; onKeyDown(event: KeyboardEvent): void; private handleEmitEvent; closePopoverOnFocusOut(event: FocusEvent): void; protected ariaLabel(): string; protected handleOpen(): void; protected handleClose(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-popover. */ declare class PoPopoverModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Os links são utilizados como rota. O destino dessa rota pode ser externo ou interno à aplicação. Eles podem ser usados dentro de texto ou isoladamente. * * #### Boas Práticas * * O componente link foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1. Também foram estruturadas padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência para os usuários. Por isso, é muito importante que, ao aplicar esse componente, o proprietário do conteúdo leve em consideração alguns critérios e práticas: * ##### Uso * - Evite usar muitos links em uma única tela, pois isso pode confundir o usuário quanto a identificação e rotas. * - Em caso de interações que alteram ou manipulam dados ou acionam alguma ação, priorize o uso de botões ao invés de link. * - Use labels (rótulos) que descrevam a finalidade do link. Evite texto como "Clique aqui", por exemplo. (WCAG [2.4.9: Link Purpose - Link Only](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only)) * - Não use cores para o link com baixo contraste entre o fundo e o texto, pois isso dificulta o entendimento do conteúdo. É possível conferir se o contraste está adequado e atingindo o valor de 7:1 em um [Contrast Checker](https://webaim.org/resources/contrastchecker/) (WCAG [1.4.6: Contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html)) * * ##### Interação * - A interação de foco deve compor o componente, sendo a navegação por mouse ou teclado, e em sequência lógica. Como por exemplo, ao pressionar Enter, executa o link e move o foco para o destino do link. (WCAG [2.4.3: Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order)) * - A distância entre o link e outras áreas interativas deve ter no mínimo 44px de altura e largura, para permitir distanciamento seguro e para que nenhum outro elemento seja acionado sem intenção. (WCAG [2.5.8: Pointer Target Spacing](https://w3c.github.io/wcag/understanding/pointer-target-spacing)) * - Quando se tratar de um link para uma página externa, é recomendável que esta informação seja adicionada na label do componente link, para que a mudança de contexto seja informada ao usuário (WCAG [3.2.5: Change on Request](https://www.w3.org/WAI/WCAG21/Understanding/change-on-request)). * * #### 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 link 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 link de textos comuns ou outros elementos, por isso deve-se manter o underline no link, para proporcionar essa diferença. (WCAG [1.4.1: Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)/ [3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification)) * - O foco precisa ter uma área mínima do dobro do perímetro do link, ter contraste de pelo menos 4.5:1 entre o estado focado e não focado do componente; e o foco não pode ficar escondido por outros elementos da tela. (WCAG [2.4.12: Focus Appearance - Enhanced](https://w3c.github.io/wcag/understanding/focus-appearance-enhanced)) * - O estado de foco do componente deve ser sempre preservado. (WCAG [2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)) * * #### 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-action-default)` | * | **Hover** | | | * | `--text-color-hover` | Cor do texto no estado de hover | `var(--color-action-hover)` | * | **Pressed** | | | * | `--text-color-pressed` | Cor do texto no estado pressionado | `var(--color-action-pressed)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | **Visited** | | | * | `--text-color-visited` | Cor do texto do estado Visited | `var(--color-action-pressed)` | * */ declare class PoLinkBaseComponent { /** Valor do rótulo a ser exibido. */ label: string; /** Indica se o link deverá ser aberto em uma nova aba. Sempre que utilizar essa propriedade, é importante informar isso ao usuário através da label. */ openNewTab: boolean; /** Url que será aberta ao clicar no link. */ url: string; get type(): string; /** Ação que será executada quando o usuário clicar sobre o `po-link`. * > Ao utilizar junto da propriedade `p-url` a ação será ignorada. */ action: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_openNewTab: any; } /** * @docsExtends PoLinkBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoLinkComponent extends PoLinkBaseComponent { onClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-link. */ declare class PoLinkModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * Módulo do componente po-helper */ declare class PoHelperModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * 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)` | * | **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)` | * */ declare abstract class PoCheckboxBaseComponent implements ControlValueAccessor { private readonly cd; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper`) será incluído no body da página e não dentro do componente. Essa * opção pode ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o * posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * Texto de apoio do campo */ help?: string; /** Define o nome do *checkbox*. */ name: string; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** Texto de exibição do *checkbox*. */ label?: string; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Evento disparado quando o valor do *checkbox* for alterado. */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; checkboxValue: boolean | null | string; checkBoxRequired: boolean; disabladTabindex: boolean; displayAdditionalHelp: boolean; id: string; propagateChange: any; onTouched: any; private _disabled?; private _size?; /** * @optional * * @description * * Define o estado do *checkbox* como desabilitado. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Define o tamanho da caixa de seleção do componente: * - `small`: 16x16 (disponível apenas para acessibilidade AA). * - `medium`: 24x24. * - `large`: 32x32. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` * */ set size(value: string); /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; get size(): string; constructor(cd: ChangeDetectorRef); changeValue(): void; checkOption(event: any, value: boolean | null | string): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; writeValue(value: any): void; protected abstract changeModelValue(value: boolean | null): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_checkBoxRequired: any; static ngAcceptInputType_disabladTabindex: any; } /** * @docsExtends PoCheckboxBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoCheckboxComponent extends PoCheckboxBaseComponent implements AfterViewInit, OnChanges, OnInit { private readonly changeDetector; showTip: boolean; checkboxLabel: ElementRef; labelEl: ElementRef; helperEl?: PoHelperComponent; constructor(); /** * 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(); * } * ``` */ focus(): void; onBlur(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; emitAdditionalHelp(): void; getAdditionalHelpTooltip(): string; onKeyDown(event: KeyboardEvent, value: boolean | string): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoCheckboxComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; protected changeModelValue(value: boolean | null | string): void; private isAdditionalHelpEventTriggered; handleLabelTooltip(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * Componente de uso interno. */ declare class PoLabelComponent { private _disabled?; private _field?; /** * @optional * * @description * * Indica se o label está desativado. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Indica se o label será de um field. * * @default `false` */ set field(value: boolean); get field(): boolean; /** Indica o campo vinculado ao label */ for: string; /** Label do campo. */ label?: string; /** Indica o tipo do campo vinculado ao label */ requirement?: string; /** * @optional * * @description * * Habilita a quebra automática do texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ textWrap: i0.InputSignal; isRequiredLiteral(value: string): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoLabelModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoDirectivesModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * Componente de uso interno, responsável por gerar uma margem inferior nos componentes que utilizam o po-field-container. * Essa margem inferior pode conter uma mensagem de erro. */ declare class PoFieldContainerBottomComponent implements OnChanges { poTooltip: PoTooltipDirective; helperEl?: PoHelperComponent; /** Define se o tooltip será inserido no `body` em vez do componente. */ appendBox: boolean; disabled: boolean; /** * Mensagem que será apresentada quando o pattern ou a máscara não for satisfeita. * Obs: Esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido. */ errorPattern?: string; /** * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. */ errorLimit: boolean; /** Texto de apoio do campo. */ help?: string; /** Define o tamanho do componente. */ size?: string; /** Configurações do ícone de ajuda adicional vínculado ao label. */ poHelperComponent: i0.InputSignal; /** Define se o componente helper estará visível através das ações customizadas */ showHelperComponent: i0.InputSignal; private isInitialChange; ngOnChanges(changes: SimpleChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_appendBox: any; } /** * @docsPrivate * * Componente de uso interno, responsável por atribuir uma label para o campo */ declare class PoFieldContainerComponent implements OnInit, OnChanges { private readonly cdr; labelEl: ElementRef; helperEl?: PoHelperComponent; /** Indica se o campo será desabilitado. */ disabled: boolean; /** Identificador do campo */ id: string; /** Label do campo. */ label?: string; /** Texto de apoio do campo. */ help: string; /** Configurações do ícone de ajuda adicional vínculado ao label. */ poHelperComponent: i0.InputSignal; /** Define se o componente helper estará visível através das ações customizadas */ showHelperComponent: i0.InputSignal; /** * @optional * * Habilita a quebra automática do texto do componente po-label. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ textWrap: i0.InputSignal; literals: object; requirement: string; showTip: boolean; private _optional; private _required; /** Indica se o campo será opcional. */ set optional(value: boolean); get optional(): boolean; /** Indica se o campo será obrigatório. */ set required(value: boolean); get required(): boolean; /** Define se a indicação de campo obrigatório será exibida. */ showRequired: boolean; /** Define o tamanho do componente. */ size?: string; constructor(cdr: ChangeDetectorRef); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; private setRequirement; handleLabelTooltip(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-field-container`. */ declare class PoFieldContainerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoCheckboxModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoListBoxModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * O componente `po-popup` é um container pequeno recomendado para ações de navegação: * Ele abre sobreposto aos outros componentes. * * É possível escolher as posições do `po-popup` em relação ao componente alvo, para isto veja a propriedade `p-position`. * * Também é possível informar um _template_ _header_ para o `po-popup`, que será exibido acima das ações. * Para funcionar corretamente é preciso adicionar a propriedade `p-popup-header-template` no elemento que servirá de template, por exemplo: * * ``` * *
*
* 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)` | * */ declare class PoPopupBaseComponent { arrowDirection: string; showPopup: boolean; protected oldTarget: any; protected param: any; protected clickoutListener: () => void; protected resizeListener: () => void; private _actions; private _customPositions?; private _hideArrow; private _isCornerAlign; private _position?; private _size?; private _target; listboxSubitems: boolean; templateIcon: boolean; /** Lista de ações que serão exibidas no componente. */ set actions(value: Array); get actions(): Array; /** * @optional * * @description * * Oculta a seta do componente *popup*. * * @default `false` */ set hideArrow(value: boolean); get hideArrow(): boolean; set isCornerAlign(value: boolean); get isCornerAlign(): boolean; /** * @optional * * @description * * Define a posição inicial que o `po-popup` abrirá em relação ao componente alvo. Sugere-se que seja * usada a orientação `bottom-left` (abaixo e a esquerda), porém o mesmo é flexível e será rotacionado * automaticamente para se adequar a tela, caso necessário. * * > Caso seja definido um `p-custom-positions` o componente irá abrir na posição definida na propriedade `p-position` * e caso não caiba na posição inicial ele irá rotacionar seguindo a ordem de posições definidas no `p-custom-positions`. * * Posições válidas: * - `right`: Posiciona o po-popup no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-popup no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-popup no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-popup abaixo do componente alvo. * - `bottom-left`: Posiciona o po-popup abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-popup abaixo e à direita do componente alvo. * - `left`: Posiciona o po-popup no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-popup no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-popup no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-popup acima do componente alvo. * - `top-right`: Posiciona o po-popup acima e à direita do componente alvo. * - `top-left`: Posiciona o po-popup acima e à esquerda do componente alvo. * * @default `bottom-left` */ set position(value: string); get position(): string; /** * @optional * * @description * * Define as posições e a sequência que o `po-popup` poderá rotacionar. A sequência será definida pela ordem passada * no *array*. Caso não seja definido, o `po-popup` irá rotacionar em todas as posições válidas. * * > O componente sempre irá abrir na posição definida no `p-position` e caso não caiba na posição definida o mesmo * irá rotacionar seguindo a ordem definida pelo `p-custom-position`. * * Posições válidas: * - `right`: Posiciona o po-popup no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-popup no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-popup no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-popup abaixo do componente alvo. * - `bottom-left`: Posiciona o po-popup abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-popup abaixo e à direita do componente alvo. * - `left`: Posiciona o po-popup no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-popup no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-popup no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-popup acima do componente alvo. * - `top-right`: Posiciona o po-popup acima e à direita do componente alvo. * - `top-left`: Posiciona o po-popup acima e à esquerda do componente alvo. */ set customPositions(value: Array); get customPositions(): Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @description * * Para utilizar o `po-popup` deve-se colocar uma variável local no componente que disparará o evento * de abertura no mesmo e com isso, invocará a função `toggle`, por exemplo: * * ``` * * Credit Actions * * * * * ``` * * Caso o elemento alvo for um componente, será preciso obter o `ElementRef` do mesmo e passá-lo à propriedade, por exemplo: * * ``` * // component.html * * * * * * * * // component.ts * * @ViewChild('poButton', { read: ElementRef }) poButtonRef: ElementRef; * ``` */ set target(value: any); get target(): any; closeEvent: EventEmitter; clickItem: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * * @docsExtends PoPopupBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoPopupComponent extends PoPopupBaseComponent implements AfterViewInit { id: string; private renderer; private router; private poControlPosition; changeDetector: ChangeDetectorRef; popupRef: ElementRef; listbox: ElementRef; poListBoxRef: PoListBoxComponent; ngAfterViewInit(): void; /** * Fecha o componente *popup*. * * > Por padrão, este comportamento é acionado somente ao clicar fora do componente ou em determinada ação / url. */ close(): void; onActionClick(popupAction: PoPopupAction): void | Promise; /** * 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. */ open(param?: any): void; returnBooleanValue(popupAction: any, property: string): any; /** * 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. */ toggle(param?: any): void; onClickItem(item: any): void; protected checkAllActionIsInvisible(): boolean; private clickedOutDisabledItem; private clickedOutHeaderTemplate; private clickedOutTarget; private closePopupOnClickout; private elementContains; private hasContentToShow; private initializeListeners; private onScroll; private openUrl; private removeListeners; private setPosition; private validateInitialContent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const poBreadcrumbLiterals: object; /** * @docsExtends PoBreadcrumbBaseComponent * * @example * * * * * * * * * * */ declare class PoBreadcrumbComponent extends PoBreadcrumbBaseComponent implements AfterViewInit, DoCheck, OnDestroy { private element; renderer: Renderer2; languageService: PoLanguageService; breadcrumbElement: ElementRef; dropdownIcon: ElementRef; svgTarget: ElementRef; popupContainer: PoPopupComponent; showDropdown: boolean; showDropdownToggle: boolean; dropdownItems: Array; literals: any; hiddenLiteralFavorite: boolean; private _breadcrumbItemsLenght; private calculatedElement; private differ; private hiddenWithoutResize; private initialized; private timeoutResize; constructor(); ngAfterViewInit(): void; ngDoCheck(): void; ngOnDestroy(): void; emitAction(item: PoBreadcrumbItem): void; openPopup(event: any): void; closePopUp(): void; private checkChangeOnItems; private calcBreadcrumb; private getBreadcrumbFavoriteWidth; private getBreadcrumbTooltipWidth; private existsFavoritelabel; private getBreadcrumbWidth; private calcBreadcrumbItemsWidth; private enableBreadcrumbResponsive; private disableBreadcrumbResponsive; private debounceResize; private initBreadcrumbSize; private initializeResizeListener; private removeResizeListener; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente que renderiza o serviço de favoritar do po-breadcrumb. */ declare class PoBreadcrumbFavoriteComponent implements OnInit, OnDestroy { private service; private languageService; favoriteService: string; itemActive: PoBreadcrumbItem; paramsService: object; hiddenLiteral: boolean; favorite: boolean; literals: any; private getSubscription; private setSubscription; constructor(); ngOnInit(): void; ngOnDestroy(): void; toggleFavoriteAction(): void; private getStatusFavorite; private setStatusFavorite; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-popup. */ declare class PoPopupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente po-breadcrumb. * */ declare class PoBreadcrumbModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoButtonGroupComponent * * @description * * Interface para os itens do `po-button-group`. */ interface PoButtonGroupItem { /** Ação executada ao clicar sobre o botão. */ action: Function; /** * @description * * Se verdadeiro, define o botão como desabilitado. * * > Por padrão esta propriedade é `false`. */ disabled?: boolean; /** * Ícone exibido ao lado esquerdo do label do botão. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * buttons: Array = [ * { label: 'Button 1', action: this.action.bind(this), icon: 'an an-user' }, * ]; * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * buttons: Array = [ * { label: 'Button 1', action: this.action.bind(this), icon: 'fa fa-podcast' }, * ]; * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * * component.html: * ``` * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * buttons: Array = []; * ... * * this.buttons = [ * { label: 'Button 1', action: this.action.bind(this), icon: this.iconTemplate } * ]; * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ icon?: string | TemplateRef; /** Label do botão. */ label?: string; /** Define se o botão está selecionado. Utilizado juntamente à propriedade `p-toggle`. */ selected?: boolean; /** * Define a mensagem a ser exibida ao posicionar o *mouse* sobre o botão. */ tooltip?: string; } /** * @description * * 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)` | * */ declare class PoButtonGroupBaseComponent { /** * @Input * * @description * * Lista de botões. */ readonly buttons: i0.InputSignal; private _size?; private _toggle?; /** * @optional * * @description * * Define o modo de seleção dos botões no componente conforme valores especificados no enum `PoButtonGroupToggle`: * - `multiple`: permite múltiplas seleções. * - `none`: desativa a funcionalidade de seleção. * - `single`: restringe a seleção a um único botão. * * @default `none` */ set toggle(value: string); get toggle(): string; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura de 32px (disponível apenas para acessibilidade AA). * - `medium`: altura de 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; onButtonClick(buttonClicked: PoButtonGroupItem, buttonIndex: number): void; private checkSelecteds; private deselectAllButtons; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoButtonGroupBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * */ declare class PoButtonGroupComponent extends PoButtonGroupBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-button-group. */ declare class PoButtonGroupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do serviço `po-date`. */ declare class PoDateTimeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * Serviço responsável por gerenciar o tratamento dos formatos de data e hora. */ declare class PoDateService { private readonly dateRegex; private readonly isoRegex; /** * Método responsável por converter datas do formato `yyyy-mm-ddThh:mm:ss+|-hh:mm` para o formato `Date`. * * @param dateString Data no formato `yyyy-mm-ddThh:mm:ss+|-hh:mm`. * @param minDate Definir `true` caso seja `minDate`. * @param maxDate Definir `true` caso seja `maxDate`. */ convertIsoToDate(dateString: string, minDate?: boolean, maxDate?: boolean): Date; /** * Método responsável por converter data do formato `Date` para o formato `yyyy-mm-dd`. * * @param date Data no formato `Date`. */ convertDateToISO(date: Date): string; /** * Método responsável por adicionar zeros a esquerda do anos em formato string. * * @param year Ano a ser validado. */ formatYear(year: number): string; /** * Método responsável por retornar o dia, mês e ano separados em formato de objeto. * * @param isoDate Ano em formato string. */ getDateFromIso(isoDate: string): { year: number; month: number; day: number; }; /** * Método responsável por retornar a data com a hora definida para `00:00:00` caso `isMinDate` for igual a `true` ou `23:59:59` * caso `isMindate` seja igual a `false` . * * @param date Data no formato `Date` ou `yyyy-mm-ddThh:mm:ss+|-hh:mm`. * @param isMinDate Caso `true` aplica `00:00:00`, caso `false` aplica `23:59:59` a hora da data informada. */ getDateForDateRange(date: any, isMinDate: boolean): Date; /** * Retorna `true` caso o período seja válido, para isso a primeira data deve ser maior que a segunda data. * * @param dateA primeira data * @param dateB segunda data */ isDateRangeValid(dateA?: string, dateB?: string): boolean; /** * Método responsável por validar se uma data está no formato `yyyy-mm-ddThh:mm:ss+|-hh:mm` ou `yyyy-mm-dd`. * * @param stringDate Data. */ isValidIso(stringDate: string): boolean; /** * Método responsável por corrigir a data caso a mesma esteja entre os anos 0 e 99. * * @param date Data. * @param year . */ setYearFrom0To100(date: Date, year: number): void; /** * Método responsável por retornar o dia , mês e ano de uma data informada. * * @param date Valor da data. */ splitDate(date: Date): { year: number; month: number; day: number; }; /** * Método responsável por validar se uma data está entre a `minDate` e `maxDate`. * * @param date Data a ser validada. * @param minDate Data inicial. * @param maxDate Data final. */ validateDateRange(date: Date, minDate: Date, maxDate: Date): boolean; /** * Método responsável por validar se a data foi informada nos padrões 'yyyy-mm-dd', 'yyyy-mm-ddThh:mm:ss+|-hh:mm' ou * 'Date' padrão do javascript. * * @param date Data que será validada. */ private validateDate; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @usedBy PoCalendarComponent * * @description * * Define os modos de exibição do `po-calendar`. */ declare enum PoCalendarMode { /** Modo de seleção de intervalo (data inicial e final). */ Range = "range" } /** * @description * * 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)` | */ declare class PoCalendarBaseComponent { poDate: PoDateService; private languageService; /** * @optional * * @description * * Evento disparado ao alterar o valor do model. * Em modo padrão, retorna uma `string` no formato ISO 8601 (`yyyy-mm-dd`). * Em modo *range*, retorna um objeto contendo as datas de início (`start`) e fim (`end`). */ change: EventEmitter; /** * @description * * Evento disparado ao alterar o mês ou o ano no cabeçalho do calendário. * Retorna um objeto contendo os valores numéricos: * - `month`: Mês selecionado (variando de 1 a 12). * - `year`: Ano selecionado. */ changeMonthYear: EventEmitter; close: EventEmitter; activateDate: any; value: any; protected onTouched: any; protected propagateChange: any; protected today: Date; private shortLanguage; private _locale; private _maxDate; private _minDate; private _mode; private _size?; /** * @optional * * @description * * Idioma do componente. * * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set locale(locale: string); get locale(): string; /** * @optional * * @description * * Define a data máxima permitida para seleção. As datas posteriores ao limite definido permanecem visíveis, mas ficam * desabilitadas para clique. * * Aceita os seguintes formatos: * * - **Data e hora combinados (E8601DZw): yyyy-mm-ddThh:mm:ss+|-hh:mm** * ``` * this.date = '2017-11-28T00:00:00-02:00'; * ``` * * - **Data (E8601DAw.): yyyy-mm-dd** * ``` * this.date = '2017-11-28'; * ``` * * - **JavaScript Date Object:** * ``` * this.date = new Date(2017, 10, 28); * ``` */ set maxDate(maxDate: any); get maxDate(): any; /** * @optional * * @description * * Define a data mínima para seleção. As datas anteriores ao limite permanecem visíveis, mas desabilitadas para clique. * * Aceita os seguintes formatos: * * - **Data e hora combinados (E8601DZw): yyyy-mm-ddThh:mm:ss+|-hh:mm** * ``` * this.date = '2017-11-28T00:00:00-02:00'; * ``` * * - **Data (E8601DAw.): yyyy-mm-dd** * ``` * this.date = '2017-11-28'; * ``` * * - **JavaScript Date Object:** * ``` * this.date = new Date(2017, 10, 28); * ``` */ set minDate(minDate: any); get minDate(): any; /** * @optional * * @description * * Define o modo de exibição do calendário. * Caso não seja informado, o componente operará no modo padrão de seleção única. * Para permitir a seleção de um intervalo de datas, deve ser utilizado o valor `PoCalendarMode.Range`. */ set mode(value: PoCalendarMode); get mode(): PoCalendarMode; get isRange(): boolean; headerTemplate?: TemplateRef; /** * @optional * * @description * * Define o tamanho do componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; constructor(poDate: PoDateService, languageService: PoLanguageService); protected setActivateDate(date?: Date | string): void; private verifyActivateDate; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoCalendarBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoCalendarComponent extends PoCalendarBaseComponent implements OnInit, OnChanges { private changeDetector; hoverValue: Date; constructor(); get isResponsive(): boolean; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; getActivateDate(partType: any): any; getValue(partType: any): any; onSelectDate(selectedDate: any, partType?: any): void; onHoverDate(date: any): void; onHeaderChange({ month, year }: { month: any; year: any; }, partType: any): void; onCloseCalendar(): void; registerOnChange(fn: any): void; registerOnTouched(func: any): void; validate(c: AbstractControl): { [key: string]: any; }; writeValue(value: any): void; private getValidateStartDate; private getValueFromSelectedDate; private updateActivateDateFromHeaderChange; private buildDateWithMonthYear; private convertDateToISO; private convertDateFromIso; private updateModel; private writeDate; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoComboComponent * * @description * * Interface que define as opções que serão exibidas na lista do `po-combo`. */ interface PoComboOption { /** * @optional * * @description * * Descrição exibida nas opções da lista. * * > Caso não seja definida será assumido o valor definido na propriedade `value`. */ label?: string; /** Valor do objeto que será atribuído ao *model*. */ value: string | number; } declare class PoCalendarLangService { private language; private months; private shortWeekDays; private monthLabel; private yearLabel; private todayLabel; private previousMonthLabel; private nextMonthLabel; readonly toCleanLabel: { pt: string; en: string; es: string; ru: string; }; getMonth(month: number): any; getMonthLabel(): any; getMonthsArray(): any[]; getWeekDays(day: number): any; getWeekDaysArray(): any[]; getYearLabel(): any; getTodayLabel(): any; getPreviousMonthLabel(): any; getNextMonthLabel(): any; getToCleanLabel(): any; setLanguage(language: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class PoCalendarHeaderComponent implements OnInit, OnChanges { readonly cdr: ChangeDetectorRef; readonly poCalendarLangService: PoCalendarLangService; hidePrevious: boolean; hideNext: boolean; displayMonth: number; displayYear: number; displayMonthLabel: string; monthOptions?: Array; headerTemplate?: TemplateRef; templateContext: any; size: string; private _locale; set locale(value: string); get locale(): string; previous: EventEmitter; next: EventEmitter; selectMonth: EventEmitter; selectYear: EventEmitter; previousMonthLabel: string; nextMonthLabel: string; private labelsInitialized; ngOnInit(): void; private setupLabels; ngOnChanges(changes: SimpleChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoCalendarWrapperComponent implements OnInit, OnChanges { private poCalendarService; private poCalendarLangService; private poDate; readonly cdr: ChangeDetectorRef; readonly elementRef: ElementRef; value: any; mode: 'day' | 'month' | 'year'; responsive: boolean; partType: 'start' | 'end'; range: boolean; activateDate: Date; selectedValue: any; minDate: any; maxDate: any; hoverValue: Date; size: string; headerTemplate?: TemplateRef; private _locale; set locale(value: string); get locale(): string; headerChange: EventEmitter; selectDate: EventEmitter; readonly hoverDateSource: Subject; hoverDate: rxjs.Observable; closeCalendar: EventEmitter; currentYear: number; displayYear: number; displayMonthNumber: number; displayMonth: string; displayDays: Array; displayWeekDays: Array; displayMonths: Array; displayDecade: Array; displayStartDecade: number; displayFinalDecade: number; displayToday: string; displayToClean: string; today: Date; comboMonthsOptions: Array<{ label: string; value: number; }>; comboYearsOptions: Array<{ label: string; value: number; }>; comboKey: number; focusedDayIndex: number; templateContext: any; protected currentMonthNumber: number; protected lastDisplay: string; get monthLabel(): any; get yearLabel(): any; get isDayVisible(): boolean; get isMonthVisible(): boolean; get isYearVisible(): boolean; get isStartPart(): boolean; get isEndPart(): boolean; private get date(); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; private getDateToUse; private initializeData; private setupOptions; onHeaderDateChange(event: { year: number; month: number; }): void; private updateTemplateContext; updateDate(year: number, month: number, comboComponent?: any): void; onComboBlur(comboComponent?: any): void; private updateDisplay; private setInitialFocusedDay; private ensureValidFocusedDay; getDayTabIndex(day: Date, index: number): number; onNextMonth(): void; onPreviousMonth(): void; updateYear(value: number): void; onSelectMonth(year: number, month: number): void; onSelectYear(year: number, month: number): void; selectDisplayMode(mode: 'month' | 'day' | 'year'): void; onSelectDate(date: Date): void; onMouseEnter(day: any): void; onMouseLeave(): void; onSelectToday(): void; onTodayKeydown(event: KeyboardEvent): void; onHostKeydown(event: KeyboardEvent): void; private restoreOriginalDisplay; onTodayKeydownEnter(event: KeyboardEvent): void; onTodayKeydownSpace(event: KeyboardEvent): void; onDayKeydown(event: KeyboardEvent, day: Date, index: number): void; private isSelectionKey; private handleSelectKey; private handleNavigationKey; private getNextNavigationIndex; private getFirstAvailableDayInWeek; private getLastAvailableDayInWeek; private getNavigationDirection; private findNextAvailableDay; private handlePageNavigation; private hasAvailableDaysInMonth; private applyPageNavigation; private focusElement; private focusOnSameDayAndWeek; private queryDayElement; private findTargetDayIndex; private isValidCalendarDate; onClear(): void; getDayBackgroundColor(date: Date): string; getDayForegroundColor(date: Date): string; getBackgroundColor(displayValue: number, propertyValue: number): "po-calendar-box-background-selected" | "po-calendar-box-background"; getForegroundColor(displayValue: number, propertyValue: number): "po-calendar-box-foreground-selected" | "po-calendar-box-foreground"; isTodayUnavailable(): boolean; isDayDisabled(date: Date): boolean; private getDayColor; private getRangeColor; getColorForDate(date: Date, type: 'background' | 'foreground'): string; getColorForDefaultDate(date: Date, type: 'background' | 'foreground'): string; getColorForToday(date: Date, type: 'background' | 'foreground'): string; getColorForDateRange(date: Date, type: 'background' | 'foreground'): string; getColorState(date: Date, prefix: string, state: string): string; private equalsDate; private getDecadeArray; private updateDecade; private addAllYearsInDecade; trackByYear(index: number, year: number): number; trackByMonth(index: number, month: string): number; trackByDay(index: number, day: Date): string; trackByWeekDay(index: number, weekDay: string): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoComboComponent * * @description * * Interface dos agrupamentos da coleção que será exibida no dropdown do `po-combo`. */ interface PoComboOptionGroup { /** Título para cada grupo de opções. */ label: string; /** Lista de itens a serem exibidos. */ options: Array; } /** * @docsPrivate * * @description * * Interface que extende as propriedades existentes nas interfaces `PoComboOption` e `PoComboOptionGroup`. */ interface PoComboGroup extends Partial, Partial { } /** * @usedBy PoComboComponent * * @description * * Define o tipo de busca usado no po-combo. */ declare enum PoComboFilterMode { /** Verifica se o texto *inicia* com o valor pesquisado. Caso não seja especificado um tipo, será esse o utilizado. */ startsWith = 0, /** Verifica se o texto *contém* o valor pesquisado. */ contains = 1, /** Verifica se o texto *finaliza* com o valor pesquisado. */ endsWith = 2 } /** * @usedBy PoComboComponent * * @description * * Interface para os serviços que serão utilizados no po-combo. */ interface PoComboFilter { /** * 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. * * @param {any} params Objeto contendo a propriedade e o valor responsável por realizar o filtro. * @param {any} filterParams Valor informado através da propriedade `p-filter-params`. */ getFilteredData(params: any, filterParams?: any): Observable>; /** * 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. * * @param {string | number} value Valor responsável por realizar a busca de um único objeto. * @param {any} filterParams Valor informado através da propriedade `p-filter-params`. */ getObjectByValue(value: string | number, filterParams?: any): Observable; } /** * @usedBy PoComboComponent * * @description * * Interface para definição das literais usadas no `po-combo`. */ interface PoComboLiterals { /** Texto exibido quando não houver itens na lista ou se, a pesquisa do filtro não retornar nenhum item. */ noData?: string; /** Texto exibido quando o combo estiver vazio. */ chooseOption?: string; /** Texto do aria-label do botão de limpar */ clean?: string; } /** * @docsPrivate * * @description * * Serviço padrão utilizado para filtrar os dados do componente po-combo. */ declare class PoComboFilterService implements PoComboFilter { private http; fieldLabel: string; fieldValue: string; hasNext: boolean; readonly headers: HttpHeaders; private _url; private messages; get url(): string; getFilteredData(param: any, filterParams?: any): Observable>; getObjectByValue(value: string | number, filterParams?: any): Observable; configProperties(url: string, fieldLabel: string, fieldValue: string): void; scrollListener(componentListner: HTMLElement): Observable; private prepareParams; private parseToArrayComboOption; private parseToComboOption; private addMessage; private displayMessages; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * 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` * | **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)` | * */ declare abstract class PoComboBaseComponent implements ControlValueAccessor, OnInit, Validator { protected changeDetector: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** Label no componente. */ label?: string; /** Texto de apoio para o campo. */ help?: string; /** Nome do componente. */ name: string; /** * @optional * * @description * Nesta propriedade deve ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de * itens no componente. * Caso haja a necessidade de customização, então pode ser informado um serviço implementando a interface PoComboFilter. * * Caso utilizado uma URL, o serviço deve ser retornado no padrão API TOTVS e utiliza as propriedades * `p-field-label` e `p-field-value` para a construção da lista de itens. * * Quando utilizada uma URL de serviço, então será concatenada nesta URL o valor que deseja-se filtrar da seguinte forma: * ``` * url + ?filter=Peter * ``` * * Se for definida a propriedade `p-filter-params`, a mesma também será concatenada. Por exemplo, para o * parâmetro `{ age: 23 }` a URL ficaria: * * ``` * url + ?page=1&pageSize=20&age=23&filter=Peter * ``` */ filterService: PoComboFilter | string; /** * @optional * * @description * * 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. * * @default `false` */ set infiniteScroll(value: boolean); get infiniteScroll(): boolean; /** * @optional * * @description * * 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%. * * **Exemplos** * - p-infinite-scroll-distance = 80: Quando atingir 80% do scroll do combo, o `show-more` será disparado. */ set infiniteScrollDistance(value: number); get infiniteScrollDistance(): number; /** * @optional * * @description * * Define o ícone que será exibido no início do campo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ icon?: string | TemplateRef; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** Se verdadeiro, o campo receberá um botão para ser limpo. */ clean?: boolean; /** * @optional * * @description * * Se verdadeiro, o evento `p-change` receberá como argumento o `PoComboOption` referente à opção selecionada. * * @default `false` */ emitObjectValue: boolean; /** * @optional * * @description * * Se verdadeiro, desabilitará a busca de um item via TAB. * * @default `false` */ disabledTabFilter: boolean; /** * @optional * * @description * * Define se o filtro inicial será removido no primeiro clique do campo. * * Quando habilitado e o combo possui um valor padrão, o primeiro clique * exibirá todos os itens da lista ao invés de apenas o item inicializado. * * @default `false` */ set removeInitialFilter(value: boolean); get removeInitialFilter(): boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Deve ser informada uma função que será disparada quando houver alterações no ngModel. A função receberá como argumento o model modificado. * * > Pode-se optar pelo recebimento do objeto selecionado ao invés do model através da propriedade `p-emit-object-value`. */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` * */ ngModelChange: EventEmitter; /** * @optional * * @description * * 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. * */ inputChange: EventEmitter; /** * @docsPrivate * * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any} */ controlValueWithLabel?: boolean; /** * @optional * * @description * * Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). * Útil em casos onde o posicionamento automático não se comporta como esperado, como quando o componente está próximo * ao final do formulário ou do container visível. Na maioria dos casos, essa direção será respeitada; no entanto, * pode ser ajustada automaticamente conforme o espaço disponível na tela. * * @default `bottom` */ listboxControlPosition: 'top' | 'bottom'; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; cacheOptions: Array; defaultService: PoComboFilterService; firstInWriteValue: boolean; isFirstFilter: boolean; isFiltering: boolean; keyupSubscribe: any; onModelChange: any; previousSearchValue: string; selectedOption: any; selectedValue: any; selectedView: any; service: PoComboFilterService; visibleOptions: Array; page: number; pageSize: number; displayAdditionalHelp: boolean; dynamicLabel: string; dynamicValue: string; shouldApplyFocus: boolean; protected hasValidatorRequired: boolean; protected cacheStaticOptions: Array; protected comboOptionsList: Array; protected onModelTouched: any; private _changeOnEnter?; private _debounceTime?; private _disabled?; private _disabledInitFilter?; private _fieldLabel?; private _fieldValue?; private _filterMinlength?; private _filterMode?; private _filterParams?; private _literals?; private _loading; private _options; private _placeholder; private _required?; private _size?; private _sort?; private language; private _infiniteScrollDistance?; private _infiniteScroll?; private _removeInitialFilter; private isRemoveInitialFilterSetByInput; private fromWriteValue; private validatorChange; /** Mensagem apresentada enquanto o campo estiver vazio. */ set placeholder(value: string); get placeholder(): string; /** * @optional * * @description * 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`). * * @default `400` */ set debounceTime(value: number); get debounceTime(): number; /** * @optional * * @description * Desabilita o filtro inicial no serviço, que é executado no primeiro clique no campo. * * @default `false` * */ set disabledInitFilter(value: boolean); get disabledInitFilter(): boolean; /** * @optional * * @description * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente * (`p-options`), esta propriedade será responsável pelo valor de cada item da lista. * * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface * PoComboOption. * * @default `value` */ set fieldValue(value: string); get fieldValue(): string; /** * @optional * * @description * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente * (`p-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista. * * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface * PoComboOption. * * @default `label` */ set fieldLabel(value: string); get fieldLabel(): string; /** * @optional * * @description * Valor mínimo de caracteres para realizar o filtro no serviço. * * @default `0` */ set filterMinlength(value: number); get filterMinlength(): number; /** * @optional * * @description * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada. * * @default `false` */ set changeOnEnter(changeOnEnter: boolean); get changeOnEnter(): boolean; /** * @optional * * @description * Indica que o campo será desabilitado. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** Indica que a lista definida na propriedade p-options será ordenada pela descrição. */ set sort(sort: boolean); get sort(): boolean; /** * Nesta propriedade define a lista de opções do `po-combo`. * * > A lista pode ser definida utilizando um array com o valor representando o `value` e o `label` das seguintes formas: * * ``` * * ``` * * ``` * * ``` * * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens. */ set options(options: Array); get options(): Array; /** * @optional * * @description * * Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. * * > Quando utilizar a propriedade `p-filter-service` esta propriedade será ignorada. * * @default `startsWith` */ set filterMode(filterMode: PoComboFilterMode); get filterMode(): PoComboFilterMode; /** * @optional * * @description * * Valor que será repassado como parâmetro para a URL ou aos métodos do serviço que implementam a interface *PoComboFilter*. * * > Caso a lista contenha agrupamentos, os mesmos só serão exibidos se houver no mínimo uma opção que corresponda à pesquisa. */ set filterParams(filterParams: any); get filterParams(): any; /** * @optional * * @description * * Objeto com as literais usadas no `po-combo`. * * Para utilizar basta passar a literal que deseja customizar: * * ``` * const customLiterals: PoComboLiterals = { * noData: 'Nenhum valor' * }; * ``` * * E para carregar a literal customizada, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoComboLiterals); get literals(): PoComboLiterals; /** * @optional * * @description * * Define se o componente irá guardar o valor do model para evitar requisições repetidas. * * > Caso o valor seja `false`, o componente fará uma nova requisição mesmo que o valor procurado seja o mesmo do model. * * @default `true` */ cache: boolean; /** * @optional * * @description * * Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou * overflow escondido,garantindo o posicionamento correto de ambos próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; constructor(languageService: PoLanguageService, changeDetector: ChangeDetectorRef); get isOptionGroupList(): boolean; ngOnInit(): void; onInitService(): void; setService(service: PoComboFilter | string): void; compareMethod(search: string, option: PoComboOption | PoComboGroup, filterMode: PoComboFilterMode): any; startsWith(search: string, option: any): any; contains(search: string, option: any): boolean; endsWith(search: string, option: any): any; getOptionFromValue(value: any, options: any): any; getOptionFromLabel(label: any, options: any): any; updateSelectedValue(option: any, isUpdateModel?: boolean): void; callModelChange(value: any): any; isEqual(value: any, inputValue: any): boolean; mapSizeToIcon(size: string): string; searchForLabel(search: string, options: Array, filterMode: PoComboFilterMode): void; updateComboList(options?: Array): void; getNextOption(value: any, options: Array, reverse?: boolean): any; getIndexSelectedView(): number; compareObjects(obj1: any, obj2: any): boolean; verifyValidOption(): void; writeValue(value: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; clear(value: any): void; protected configAfterSetFilterService(service: PoComboFilter | string): void; protected unsubscribeKeyupObservable(): void; protected validateModel(model: any): void; private comboListDefinitions; private checkIfService; private compareOptions; private getValueUpdate; private getValueWrite; private normalizeModelIfNeeded; private hasDuplicatedOption; private listingComboOptions; private sortOptions; private validateValue; private verifyComboOptions; private verifyComboOptionsGroup; private verifyIfHasLabel; private updateInternalVariables; private updateModel; private updateSelectedValueWithOldOption; private updateHasNext; abstract setInputValue(value: any): void; abstract applyFilter(value: string): void; abstract getObjectByValue(value: string): void; abstract getInputValue(): string; abstract initInputObservable(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_clean: any; static ngAcceptInputType_emitObjectValue: any; static ngAcceptInputType_disabledTabFilter: any; static ngAcceptInputType_controlValueWithLabel: any; static ngAcceptInputType_cache: any; static ngAcceptInputType_appendBox: any; } /** * @usedBy PoComboComponent * * @description * * 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: * * ``` * ... * * * *

* * *
*
* *
*
*
* * * ... * * ``` */ declare class PoComboOptionTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoComboBaseComponent * * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoComboComponent extends PoComboBaseComponent implements AfterViewInit, OnChanges, OnDestroy { element: ElementRef; differs: IterableDiffers; defaultService: PoComboFilterService; renderer: Renderer2; private controlPosition; comboOptionTemplate: PoComboOptionTemplateDirective; outerContainer: ElementRef; containerElement: ElementRef; contentElement: ElementRef; iconElement: ElementRef; inputEl: ElementRef; poListbox: PoListBoxComponent; helperEl?: PoHelperComponent; comboIcon: string; comboOpen: boolean; differ: any; id: string; isProcessingValueByTab: boolean; scrollTop: number; shouldMarkLetters: boolean; infiniteLoading: boolean; containerWidth: number; private _isServerSearching; private lastKey; private clickoutListener; private eventResizeListener; private filterSubscription; private getSubscription; private subscriptionScrollEvent; constructor(); set isServerSearching(value: boolean); get isServerSearching(): boolean; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; emitAdditionalHelp(): void; /** * 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(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; onBlur(event: any): void; onKeyDown(event?: any): void; onKeyUp(event?: any): void; initInputObservable(): void; controlApplyFilter(value: any, isArrowDown?: boolean): void; applyFilter(value: string, reset?: boolean, isArrowDown?: boolean): void; setOptionsByApplyFilter(value: any, items: any, reset?: boolean): void; getErrorPattern(): string; hasInvalidClass(): any; getObjectByValue(value: any): void; updateOptionByFilteredValue(item: any): void; setShouldApplyFocus(value: boolean): void; toggleComboVisibility(isButton?: boolean): void; applyFilterInFirstClick(): void; controlComboVisibility(toOpen: boolean, reset?: boolean, isButton?: boolean): void; onCloseCombo(): void; onOptionClick(option: PoComboOption | PoComboGroup, event?: any): void; calculateScrollTop(selectedItem: any, index: any): any; cleanListbox(): void; getInputValue(): any; setInputValue(value: string): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoComboComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; wasClickedOnToggle(event: MouseEvent): void; isValidCharacterToSearch(keyCode: any): boolean; searchOnEnterOrArrow(event: any, value: string): void; showMoreInfiniteScroll(): void; clearAndFocus(): void; updateCacheOptions(): void; isCleanVisible(): boolean; handleCleanKeyboardTab(event: KeyboardEvent): void; onListboxKeyDown(event: any): void; private adjustContainerPosition; private close; private initializeListeners; private isAdditionalHelpEventTriggered; private onErrorGetObjectByValue; private onScroll; private onErrorFilteredData; private open; private removeListeners; private setContainerPosition; private setContainerWidth; private setOptions; private prepareOptions; private setPage; private setScrollingControl; private focusItem; private focusInput; private shouldHandleTab; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * Este componente é de uso interno utilizado por componentes de entrada de dados com o objetivo de resetar as informações do model. * * Por padrão limpa o valor do campo e executa o método onChangePropagate, caso tenha a necessidade de tratar a função de limpar o campo, * deve implementar a interface PoClean. */ declare abstract class PoCleanBaseComponent { private _size?; /** Nesta propriedade deve-se informar o elementRef do campo de entrada que utilizará o po-clean. */ inputRef: ElementRef; /** Valor que será atribuído ao campo quando for clicado no po-clean. */ defaultValue?: string; icon?: string; set size(value: string); get size(): string; /** * @optional * * @description * * Evento disparado quando executada ação do po-clean. * Este evento deve ser usado para avisar para o componente que está usando o po-clean, que o botão foi disparado, * e provavelmente será preciso emitir o evento para atualizar o model. */ changeEvent: EventEmitter; clear(): void; showIcon(): boolean; abstract setInputValue(value: string): void; abstract getInputValue(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsPrivate * * @docsExtends PoCleanBaseComponent * * @examplePrivate * * * * * */ declare class PoCleanComponent extends PoCleanBaseComponent { setInputValue(value?: string): void; getInputValue(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-clean`. */ declare class PoCleanModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoComboModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * Módulo do componente `po-calendar`. */ declare class PoCalendarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoModalComponent * * @description * * Interface que define os botões de ação do componente `po-modal`. */ interface PoModalAction { /** Função que será executada ao clicar sobre o botão. */ action: Function; /** * Define a propriedade `p-danger` do botão. * * > Caso a propriedade esteja definida como `true` em ambos os botões, apenas o botão primário receberá o `p-danger` como `true`. */ danger?: boolean; /** Desabilita o botão impossibilitando que sua ação seja executada. */ disabled?: boolean; /** * Ícone exibido ao lado esquerdo do label do botão. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo: * ``` * modalAction: PoModalAction = { * action: () => {}, * label: 'Botão com ícone PO', * icon: 'an an-user' * }; * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca * esteja carregada no projeto: * ``` * modalAction: PoModalAction = { * action: () => {}, * label: 'Botão com ícone Font Awesome', * icon: 'fa fa-user' * }; * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * // Template HTML * * * * * // Componente TypeScript * @ViewChild('customIcon', { static: true }) customIcon: TemplateRef; * * modalAction: PoModalAction = { * action: () => {}, * label: 'Botão com ícone customizado', * }; * * // Atribuição do TemplateRef à propriedade icon após a inicialização da view * ngAfterViewInit() { * this.modalAction.icon = this.customIcon; * } * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ icon?: string | TemplateRef; /** Rótulo do botão. */ label: string; /** Habilita um estado de carregamento ao botão, desabilitando-o e exibindo um ícone de carregamento à esquerda de seu rótulo. */ loading?: boolean; } /** * @description * * O componente `po-modal` é utilizado para incluir conteúdos rápidos e informativos. * * No cabeçalho do componente é possível definir um título e como também permite ocultar o ícone de fechamento da modal. * * Em seu corpo é possível definir um conteúdo informativo, podendo utilizar componentes como por exemplo `po-chart`, * `po-table` e os demais componentes do PO. * * No rodapé encontram-se os botões de ação primária e secundária, no qual permitem definir uma ação e um rótulo, bem como * definir um estado de carregando e / ou desabilitado e / ou definir o botão com o tipo *danger*. Também é possível utilizar * o componente [`PoModalFooter`](/documentation/po-modal-footer). * * > É possível fechar a modal através da tecla *ESC*, quando a propriedade `p-hide-close` não estiver habilitada. * * #### 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 de background | `var(--color-neutral-light-00)` | * | `--shadow`   | Contém o valor da sombra do elemento | `var(--shadow-md)` | * | `--color-overlay`   | Cor da camada visual temporária | `var(--color-neutral-dark-80)` | * | `--opacity-overlay`   | Opacidade da camada visual temporária   | `0.7` | * | `--color-divider`   | Cor das divisões do modal | `var(--color-neutral-light-20)` | * | `--padding-header`   | Padding do header do modal | `var(--spacing-sm) var(--spacing-md)` | * | `--padding-body`   | Padding do corpo do modal | `var(--spacing-md) var(--spacing-2xl) var(--spacing-2xl) var(--spacing-md) ` | * */ declare class PoModalBaseComponent { /** Título da modal. */ title: string; /** Evento disparado ao fechar o modal. */ closeModal: EventEmitter; /** * Deve ser definido um objeto que implementa a interface `PoModalAction` contendo a label e a função da primeira ação. * Caso esta propriedade não seja definida ou esteja incompleta, automaticamente será adicionado um botão de ação com * a função de fechar a modal. */ primaryAction?: PoModalAction; /** Deve ser definido um objeto que implementa a interface `PoModalAction` contendo a label e a função da segunda ação. */ secondaryAction?: PoModalAction; language: any; literals: any; isHidden: boolean; onXClosed: EventEmitter; private _componentsSize?; private _hideClose?; private _size?; /** * Define o tamanho da modal. * * Valores válidos: * - `sm` (pequeno) * - `md` (médio) * - `lg` (grande) * - `xl` (extra grande) * - `auto` (automático) * * > Quando informado `auto` a modal calculará automaticamente seu tamanho baseado em seu conteúdo. * Caso não seja informado um valor, a modal terá o tamanho definido como `md`. * */ set size(value: string); get size(): string; /** * Define o fechamento da modal ao clicar fora da mesma. * Informe o valor `true` para ativar o fechamento ao clicar fora da modal. */ clickOut?: boolean; set setClickOut(value: boolean | string); /** * @optional * * @description * * Define o tamanho dos componentes de formulário no modal: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Oculta o ícone de fechar do cabeçalho da modal. * * > Caso a propriedade estiver habilitada, não será possível fechar a modal através da tecla *ESC*. * * @default `false` */ set hideClose(value: boolean); get hideClose(): boolean; /** * @optional * * @description * Ícone exibido ao lado esquerdo do label do titúlo da modal. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` */ icon?: string | TemplateRef; constructor(poLanguageService: PoLanguageService); /** Função para fechar a modal. */ close(xClosed?: boolean): void; /** Função para abrir a modal. */ open(): void; validPrimaryAction(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @description * * 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. * * ``` * * * * * * * * ``` */ declare class PoModalFooterComponent { /** * @optional * * @description * * Desabilita o alinhamento padrão, à direita, dos botões de ações que ficam no rodapé da [`PoModal`](/documentation/po-modal). * * > Caso a propriedade esteja habilitada, o alinhamento deverá ser a esquerda e pode ser personalizado. * * @default false */ disabledAlign?: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoModalBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoModalComponent extends PoModalBaseComponent { private poActiveOverlayService; modalContent: ElementRef; modalContainer: ElementRef; modalFooter: PoModalFooterComponent; private firstElement; private focusFunction; private focusableElements; private id; private sourceElement; constructor(); close(xClosed?: boolean): void; closeModalOnEscapeKey(event: any): void; getSecondaryActionButtonDanger(): "true" | "false"; onClickOut(event: any): void; open(): void; private handleFocus; private initFocus; private removeEventListeners; private setFirstElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-modal */ declare class PoModalModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoTableComponent * * @description * Tipos de ordenação das colunas da tabela. */ declare enum PoTableColumnSortType { /** Ordenação ascendente */ Ascending = "ascending", /** Ordenação descendente */ Descending = "descending" } /** * @usedBy PoTableRowTemplateDirective * * @description * Define a posição da arrow que expande o * row template* na tabela, será exibida na esquerda ou direita. */ declare enum PoTableRowTemplateArrowDirection { /** Posiciona a *arrow* na esquerda. (Padrão) */ Left = "LEFT", /** Posiciona a *arrow* na direita */ Right = "RIGHT" } /** * @usedBy PoTableComponent, PoLookupComponent, PoPageDynamicTableComponent * * @description * Tipos de espaçamento interno (padding) das células (**p-spacing**) do po-table. */ declare enum PoTableColumnSpacing { /** Espaçamento extra pequeno: 0.25rem (vertical) x 0.5rem (horizontal). */ ExtraSmall = "extraSmall", /** Espaçamento pequeno: 0.5rem (vertical) x 1rem (horizontal). */ Small = "small", /** Espaçamento médio: 0.75rem (vertical) x 1rem (horizontal). */ Medium = "medium", /** Espaçamento grande: 1rem (vertical) x 1rem (horizontal). */ Large = "large" } /** * @usedBy PoTableComponent * * @docsExtends PoPopupAction */ interface PoTableAction extends PoPopupAction { } /** * @usedBy PoTableComponent * * @description * * Interface que define as colunas booleanas do `po-table`. */ interface PoTableBoolean { /** Define o rótulo para valores `false`. */ falseLabel?: string; /** Define o rótulo para valores `true`. */ trueLabel?: string; } /** * @usedBy PoTableComponent * * @description * * * * Interface que define a coluna com ícone(s) do `po-table`. */ interface PoTableColumnIcon { /** Define a ação que será executada ao clicar no ícone. */ action?: Function; /** * @optional * * @description * * Define a cor do ícone. * * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * */ color?: string | Function; /** Função que deve retornar um booleano para habilitar ou desabilitar o ícone e sua ação. */ disabled?: Function; /** * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * [ { icon: 'an an-plus' } ] * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * [ { icon: 'fas fa-plus' } ] * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * `component.html`: * ``` * * add * * * * ``` * `component.ts`: * ``` * * @ViewChild('iconTemplateAdd', { static: true }) iconTemplateAdd: TemplateRef; * * myProperty = [ * { property: 'columnIcon', label: 'Icons', type: 'icon', icons: [ * { value: 'plus', icon: this.iconTemplateAdd }, * ]} * ]; * ``` * * > Caso esta propriedade não seja definida, a mesma receberá o valor contido em `value`. */ icon?: string | TemplateRef; /** Define um texto de ajuda que será exibido ao passar o *mouse* em cima do ícone. */ tooltip?: string; /** * Define o valor do ícone que será exibido. */ value: string; } /** * @usedBy PoTableComponent, PoPageDynamicTableComponent * * @description * * Interface para configuração das colunas de labels do `po-table`. */ interface PoTableColumnLabel { /** * @optional * * @description * * Define a cor do label. * * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` */ color?: string; /** * @optional * * @description * * Determina a cor do texto da tag. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; * - Usando uma das cores do tema do PO: * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background. * * > **Atenção:** A propriedade `p-type` sobrepõe esta definição. */ textColor?: string; /** * @optional * * @description * * Define ou ativa um ícone que será exibido ao lado do valor da *tag*. * * Quando `p-type` estiver definida, basta informar um valor igual a `true` para que o ícone seja exibido conforme descrições abaixo: * - - `success` * - - `warning` * - - `danger` * - - `info` * * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. * * @default `false` */ icon?: boolean | string | TemplateRef; /** * @optional * * @description * * Define o tipo da *tag*. * * Valores válidos: * - `success`: cor verde utilizada para simbolizar sucesso ou êxito. * - `warning`: cor amarela que representa aviso ou advertência. * - `danger`: cor vermelha para erro ou aviso crítico. * - `info`: cor cinza escuro que caracteriza conteúdo informativo. * * > Quando esta propriedade for definida, irá sobrepor a definição de `p-color` e `p-icon` somente será exibido caso seja `true`. * * @default `info` */ type?: PoTagType; /** Texto que será exibido na coluna. */ label: string; /** * Define um texto de ajuda que será exibido ao passar o *mouse* em cima do *label*. * * > Caso o conteúdo da célula exceder a largura da coluna, * é ignorado o valor atribuido ao tooltip e será exibido justamente o conteúdo da célula. */ tooltip?: string; /** Valor que será usado como referência para exibição do conteúdo na coluna. */ value: string | number; } /** * @usedBy PoTableComponent * * @description * * Interface para configuração das colunas do `po-table-detail`. */ interface PoTableDetailColumn { /** * Formato de exibição do valor da coluna: * - Formato para moeda (currency). Exemplos: 'BRL', 'USD'. * - Formato para data (date): aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy), * caso não seja informado um formato o mesmo será 'dd/MM/yyyy'. Exemplos: 'dd/MM/yyyy', 'dd-MM-yy', 'mm/dd/yyyy'. * - Formato para horário (time): aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e * milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será * 'HH:mm:ss'. Exemplos: 'HH:mm', 'HH:mm:ss.ffffff', 'HH:mm:ss.ff', 'mm:ss.fff'. * - Formato para números (number): aceita um valor seguindo o padrão [**DecimalPipe**](https://angular.io/api/common/DecimalPipe) * para formatação, e caso não seja informado, o número será exibido na sua forma original. Exemplo: * * + Valor de entrada: `50` e valor para formatação: `'1.2-5'` o resultado será: `50.00` */ format?: string; /** * @optional * * @description * * Texto para título da coluna. */ label?: string; /** * @optional * * @description * * Nome identificador da coluna. */ property?: string; /** * Tipo da coluna. * * Valores válidos: * - `currency`: valores monetários. * * - `date`: valor de datas. * + Aceita os tipos _string_ e _Date_ padrão do Javascript, * por exemplo: `'2017-11-28'` ou `new Date(2017, 10, 28)`. * * - `time`: valor de horário. * - `number`: valores numéricos. * * - `dateTime`: valor de data com horário. * + Aceita o tipo _string_ no formato **ISO-8601** extendido **'yyyy-mm-ddThh:mm:ss+|-hh:mm'** * e o tipo _Date_ padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'` ou `new Date(2017, 10, 28)`. * + Aceita o tipo _string_ nos formatos **'HH:mm:ss'** ou **'HH:mm:ss.ffffff'**, por exemplo: `'23:12:45'`. * * @default `string` */ type?: string; } /** * @usedBy PoTableComponent * * @description * * Interface para configuração do _detail_ do componente `po-table`. */ interface PoTableDetail { /** * Define uma lista do tipo `PoTableDetailColumn` para as colunas do objet *detail*. Por exemplo: * * ``` * [ * { property: 'miles', label: 'Miles', type: 'number', format: '1.0-5' }, * { property: 'departure', label: 'Departure time', type: 'date', format: 'dd/MM/yyyy' } * ] * ``` */ columns: Array; /** * * Define se o checkbox de seleção do detail será exibido. Valor padrão 'false'. */ hideSelect?: boolean; /** * * Define o tipo de cabeçalho para o conteúdo do _detail_ . * * Valores válidos: * - `inline`: Atribui o cabeçalho na mesma linha do _detail_. * - `top`: Atribui o cabeçalho acima do _detail_, idêntico ao `po-table`. * - `none`: Remove o cabeçalho do _detail_. */ typeHeader?: string; } /** * @usedBy PoTableComponent * * @description * * Interface para configuração das colunas de legenda do Po-Table. */ interface PoTableSubtitleColumn { /** Valor que será usado como referência para exibição do conteúdo na coluna. */ value: string | number; /** Texto que será exibido no rodapé da tabela como legenda. */ label: string; /** * @optional * * @description * * Define a cor do *status*. * * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * @default `color-01` */ color?: string; /** Conteúdo que será exibido na coluna da tabela. */ content: string; } /** * @usedBy PoTableComponent * * @description * * Interface para configuração das colunas do `po-table`. * * As definições das colunas serão aplicadas linha a linha. */ interface PoTableColumn { /** * Define uma ação na coluna quando o tipo da coluna for `link` ou `icon`. * * > Quando for do tipo `link` será enviado como primeiro parâmetro o valor da coluna * e no segundo parâmetro o objeto completo da linha. Caso tenha sido definido uma ação e um link na coluna, a ação * será executada ao invés do link. * * > Quando for do tipo `icon` enviará o objeto completo da linha e o segundo parâmetro será a definição da coluna. */ action?: Function; /** * Define um objeto do tipo `PoTableBoolean` para as colunas do tipo _boolean_. Por exemplo: * * ``` * { property: 'approbation', type: 'boolean', boolean: { * trueLabel: 'Accepted', falseLabel: 'Rejected' * }} * ``` * * > Caso não seja definido um objeto para colunas do tipo *boolean*, * esta exibirá por padrão `Sim` e `Não` de acordo com os valores _booleanos_. */ boolean?: PoTableBoolean; /** * @optional * * @description * * Define a cor que será aplicada no conteúdo da coluna. * * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * > Existe a possibilidade de informar uma função que retorne um dos valores aceitos, serão passados * por parâmetro a linha e a coluna atual, por exemplo: * * ``` * (row, column) => { row[column] == 'text' ? 'color-03' : 'color-09' } * ``` * * > É possível também usá-la na coluna do tipo `icons` para alteração das cores de seu conteúdo conforme exemplo abaixo, * contudo, desta forma sobrepõe a cor especificada em cada objeto caso haja: * * ``` * { property: 'columnIcon', label: 'Like', type: 'icon', color: 'color-08', icons: [ * { value: 'an an-star', action: () => this.notification() } * ]}, * ``` */ color?: string | Function; /** * Define um objeto que segue a interface `PoTableDetail`, para as colunas de detalhes. Por exemplo: * * ``` * { columns: [{ property: 'package', label: 'Pacote' }], typeHeader: 'top' } * ``` * */ detail?: PoTableDetail; /** * Função que deve retornar um booleano para habilitar ou desabilitar o *link* e sua ação. * * > Propriedade disponível nas colunas do tipo `link`. */ disabled?: Function; /** * Formato de exibição do valor da coluna. * * | Formatação | Type da Coluna | Descrição | Exemplos | * |------------|-----------------|-----------|----------| * | Monetário | `currency` | Formato para valores monetários. Informe o código da moeda (ISO 4217). | `'BRL'`, `'USD'`, `'EUR'`, `'RUB'` | * | Data | `date` | Aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy), caso não seja informado um formato o mesmo será 'dd/MM/yyyy' | `'dd/MM/yyyy'`, `'dd-MM-yy'`, `'mm/dd/yyyy'` | * | Hora | `time` | Aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será 'HH:mm:ss' | `'HH:mm'`, `'HH:mm:ss.ffffff'`, `'HH:mm:ss.ff'`, `'mm:ss.fff'` | * | Número | `number` | Aceita um valor seguindo o padrão [**DecimalPipe**](https://angular.dev/api/common/DecimalPipe) para formatação, e caso não seja informado, o número será exibido na sua forma original. | `'1.2-5'` (ex.: `50` → `50.00`) | * * Observação: caso não seja informado um formato, o valor será exibido em sua forma original. */ format?: string; /** * @description * * Define um *array* de objetos para colunas de ícones que irá sobrepor os valores como `action` e `color` * definidos na coluna, à partir do *value* da [`PoTableColumnIcon`](documentation/po-table#tableColumnIcon), por exemplo: * * ``` * { property: 'columnIcon', label: 'Icons', type: 'icon', action: this.favorite.bind(this), icons: [ * { value: 'delete', icon: 'an an-plus', color: 'color-06', action: this.add.bind(this), tooltip: 'Adiciona um novo item' }, * { value: 'edit', icon: 'an an-pencil-simple', action: this.edit.bind(this) }, * { value: 'delete', icon: 'an an-trash', color: 'color-12', action: this.remove.bind(this) } * ]}, * ``` * * ``` * ... * { id: 1, columnIcon: ['an an-pencil-simple', 'an an-trash', 'an an-star'] } * ... * * ``` */ icons?: Array; /** * Texto para título da coluna. * * Caso não seja informado, será utilizado como *label* o valor da propriedade *property* com a primeira letra em maiúsculo. */ label?: string; /** * Define um array de objetos para as colunas de label, onde 'labels' é uma lista de objetos * do tipo `PoTableColumnLabel` na qual devem ser definidas os labels. Por exemplo: * * ``` * { property: 'flightStatus', label: 'Status', type: 'label', width:'100px', labels: [ * { value: 'confirmed', color: 'color-11', label: 'Confirmado', tooltip: 'Flight Status' }, * { value: 'delayed', color: 'color-08', label: 'Atrasado', tooltip: 'Flight Status' } * } * ``` * */ labels?: Array; /** * Define o nome da propriedade que conterá o `link` a ser redirecionado. * * @default link */ link?: string; /** Nome identificador da coluna. Também permite objetos aninhados conforme exemplo abaixo. * * ``` * { property: 'address.street', label: 'Rua' } * ``` */ property?: string; /** * @optional * * @description * * Controla se a coluna será considerada como "ordenavel". Caso seja definido um valor falso, a coluna não será usada para * ordenação. * * @default `true` */ sortable?: boolean; /** * Define um array de objetos para as colunas de legenda. Onde, `subtitles` é uma lista de objetos do tipo PoTableSubtitle na qual * devem ser definidas as opções de legenda. Por exemplo: * * ``` * { property: 'flightStatus', label: 'Status', color: 'subtitle', width:'100px', subtitles: [ * { value: 'confirmed', color: 'color-11', label: 'Confirmado', content: '1' }, * { value: 'delayed', color: 'color-08', label: 'Atrasado', content: '2' } * } * ``` * Nesse exemplo a coluna escolhida para legenda é 'flightStatus', se o valor dessa coluna for 'confirmed', o texto da legenda será * 'Confirmado'. * */ subtitles?: Array; /** * Define um texto de ajuda que será exibido ao passar o *mouse* sobre um texto. * * > O tooltip só será visível se for uma coluna do tipo *link*. * * > Caso o conteúdo da célula exceder a largura da coluna, * é ignorado o valor atribuído ao *tooltip* e será exibido justamente o conteúdo da célula. */ tooltip?: string; /** * Tipo da coluna. * * Valores válidos: * - `boolean`: Exibirá por padrão `Sim` e `Não` de acordo com os valores *booleanos*. * > Caso necessite exibir valores diferentes do padrão, deve-se utilizar a propriedade `boolean` desta interface. * - `currency`: valores monetários. * * - `date`: valor de datas. * + Aceita os tipos _string_ e _Date_ padrão do Javascript, * por exemplo: `'2017-11-28'` ou `new Date(2017, 10, 28)`. * * - `dateTime`: valor de data com horário. * + Aceita o tipo _string_ no formato **ISO-8601** extendido **'yyyy-mm-ddThh:mm:ss+|-hh:mm'** * e o tipo _Date_ padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'` ou `new Date(2017, 10, 28)`. * * - `detail`: array de objetos para o master-detail. * + Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * - `icon`: *array* de *string* ou objetos para a coluna de ícones. * - `label`: texto com destaque. * - `link`: habilita link na coluna para ação ou navegação. * - `number`: valores numéricos. * - `string`: textos. * - `subtitle`: array de objetos para a coluna de legenda. * * - `time`: valor de horário. * + Aceita o tipo _string_ nos formatos **'HH:mm:ss'** ou **'HH:mm:ss.ffffff'**, por exemplo: `'23:12:45'`. * - `cellTemplate`: Indica que a coluna será utilizada como template, em conjunto com o * [PoTableCellTemplate](/documentation/po-table-cell-template). * - `columnTemplate`: Indica que a coluna será utilizada como template, em conjunto com o * [PoTableColumnTemplate](/documentation/po-table-column-template). * * @default `string` */ type?: string; /** * @optional * * @description * * 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 * visível através do **gerenciador de colunas**. * * > A disponibilidade de visualização pode limitar-se de acordo com a definição de `p-max-columns`. * * @default `true` */ visible?: boolean; /** * * hoje o tamanho mínimo das colunas é de 32px, respeitando o padding lateral. * Boas Práticas: * Indicamos: * - para colunas com 2 das propriedades (property, [p-draggable] e [p-sort]) : 96px * - para colunas com 3 propriedades (property, [p-draggable] e [p-sort]) : 144px * */ width?: string; fixed?: boolean; } /** * @usedBy PoTableComponent * * @description * * Interface para ordenação das colunas do componente table. */ interface PoTableColumnSort { /** Coluna pela qual a tabela está ordenada. */ column?: PoTableColumn; /** Tipo da ordenação. */ type: PoTableColumnSortType; } /** * @usedBy PoTableComponent * * @description * * Interface para definição das literais usadas no `po-table`. */ interface PoTableLiterals { /** Texto do **Gerenciador de colunas** localizado no canto superior direito da tabela. */ columnsManager?: string; /** Título da modal 'Legenda completa' que aparece ao clicar no botão 'Ver legenda completa'. */ completeSubtitle?: string; /** Texto exibido quando não existem colunas definidas para a tabela. */ noColumns?: string; /** Texto exibido quando não existem itens para serem exibidos na tabela. */ noData?: string; /** Texto exibido quando nenhum item for selecionado no checkbox. */ noItem?: string; /** Texto exibido quando apenas 1 item for selecionado no checkbox. */ oneItem?: string; /** Texto exibido quando apenas 1 item for selecionado no checkbox. */ multipleItems?: string; /** Texto exibido quando não existem colunas visíveis para a tabela. */ noVisibleColumn?: string; /** Texto exibido enquanto uma requisição está sendo executada para carregar dados na tabela. */ loadingData?: string; /** Texto do botão de **Carregar mais resultados** localizado no rodapé da tabela. */ loadMoreData?: string; /** Texto do botão **Ver legenda completa** que aparece quando o rodapé de legendas é maior que a tabela. */ seeCompleteSubtitle?: string; /** Texto no corpo do Modal de exclusão */ bodyDelete?: string; /** Texto no Modal para cancelar a exclusão */ cancel?: string; /** Texto no Modal para confirmar a exclusão */ delete?: string; /** Texto de notificação de remoção com sucesso */ deleteSuccessful?: string; /** Texto de notificação de erro na requisição Delete */ deleteApiError?: string; } /** * @usedBy PoTableComponent * * @description * * 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*. */ declare class PoTableRowTemplateDirective { templateRef: TemplateRef; /** * @optional * * @description * * Função que deve retornar um valor booleano, informando se apresentará o template da linha. * Serão passados o objeto da linha e o indice da mesma por parâmetro, para que seja possível * tomar uma decisão a partir do objeto da linha corrente. * * Caso não ser utilizado esta propriedade, serão apresentados todos os detalhes das linhas. * * @default `true` */ poTableRowTemplateShow: (row: any, index: number) => boolean; private _tableRowTemplateArrowDirection; /** * @optional * * @description * * Propriedade responsável por informar a posição do colapse que abrirá os detalhes da linha. * * @default `'LEFT'` */ set tableRowTemplateArrowDirection(value: PoTableRowTemplateArrowDirection); get tableRowTemplateArrowDirection(): PoTableRowTemplateArrowDirection; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @usedBy PoTableComponent * * @description * * 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` */ declare class PoTableCellTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @usedBy PoTableComponent * * @description * * 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` */ declare class PoTableColumnTemplateDirective { templateRef: TemplateRef; /** * @optional * * @description * * Variável responsável por armazenar a property da coluna da tabela que será adicionado o template. * * Caso não seja informada esta propriedade, serão apresentados normalmente os dados da coluna. */ targetProperty: string; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class PoTableColumnFrozenDirective implements AfterViewInit, OnChanges { private el; private renderer; _frozen: boolean; get frozen(): boolean; set frozen(val: boolean); alignFrozen: string; constructor(el: ElementRef, renderer: Renderer2); ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; updateStickyPosition(): void; resizeColumns(): void; getOuterWidth(el: any, margin?: any): number; index(element: any): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare enum PoToasterMode { /** Modo Inline do componente, mostrado fixado no DOM */ Inline = "inline", /** Modo Padrão do componente, mostrado como Alerta */ Alert = "alert" } declare enum PoToasterOrientation { /** Orientção do componente fica no rodapé */ Bottom = 0, /** Orientção do componente fica no topo */ Top = 1 } /** * @usedBy PoToasterComponent * * @description * * Define os tipos possíveis para o `PoToasterComponent`. */ declare enum PoToasterType { /** Tipo de toaster para mensagens de erro. */ Error = "error", /** Tipo de toaster para mensagens informativas. */ Information = "information", /** Tipo de toaster para mensagens de sucesso. */ Success = "success", /** Tipo de toaster para mensagens de atenção. */ Warning = "warning" } /** * @usedBy PoNotificationService * * @description * * Interface para uso do serviço PoNotification. */ interface PoNotification { /** * Ação para a notificação. * * Ao utilizar esta propriedade em conjunto com a `actionLabel`, * a notificação ficará fixa na página até usuário fechá-la ou clicar nesta ação. * * Caso não informar a propriedade `actionLabel` a ação será atribuida ao ícone de "Fechar" da notificação. */ action?: Function; /** Label do botão quando houver uma ação definida. */ actionLabel?: string; /** Mensagem a ser exibida na notificação. */ message: string; /** * Define o tamanho das ações: * - `small`: aplica a medida small de cada ação (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada ação. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `small` */ sizeActions?: string; /** Mensagem de suporte a ser exibida na notificação. */ supportMessage?: string; /** * @description * * Posição da notificação na página que pode ser ```Top``` (topo) ou ```Bottom```(rodapé). A posição padrão é `bottom`. * * @default `Bottom` */ orientation?: PoToasterOrientation; /** * Define em milissegundos o tempo de duração que a notificação ficará disponível em tela. O padrão é 9000 milissegundos. * * > Caso a notificação tenha uma ação ou seja uma notificação de `erro`, a propriedade será ignorada. */ duration?: number; /** * Define o Modo/Tipo do Toaster. * * @default `Alert` */ mode?: PoToasterMode; /** * Exibe o botão de fechar a notificação. * * > Caso a notificação seja do modo `default`, a propriedade será ignorada. * * @default `false` */ showClose?: boolean; } /** * * @description * * O Toaster serve para exibir uma mensagem temporária em linha na interface, podendo ou não ser removida pelos usuários a depender do uso especificado. * * #### 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: * * - Permitir a interação via teclado (2.1.1: Keyboard (A)); * - Permitir que o usuário feche facilmente o toaster e não retirar o foco de onde está. (2.2.4: Interrupções (AAA)); * - Preservar o foco visível na navegação via teclado. (2.4.7: Foco visível (A)); * - Áreas de clique ou toque para elementos interativos devem ter pelo menos 44x44 pixels (2.5.5: Área de clique (AAA)); * * #### 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-color` | Cor principal do texto | `var(--color-neutral-dark-90)` | * | `--font-color-support` | Cor principal do texto de supporte | `var(--color-neutral-dark-80)` | * | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-radius-md)` | * | **Type Success** | | | * | `--color-success` | Cor principal no tipo success | `var(--color-feedback-positive-base)` | * | `--background-success` | Cor de fundo principal no tipo success | `var(--color-feedback-positive-lightest)` | * | `--border-color-success` | Cor da borda principal tipo success | `var(--color-feedback-positive-lighter)` | * | **Type Error** | | | * | `--color-error` | Cor principal no tipo error | `var(--color-feedback-negative-base)` | * | `--background-error` | Cor de fundo principal no tipo error | `var(--color-feedback-negative-lightest)` | * | `--border-color-error` | Cor da borda principal tipo error | `var(--color-feedback-negative-lighter)` | * | **Type Warning** | | | * | `--color-icon-warning` | Cor principal do icone no tipo warning | `var(--color-neutral-dark-90)` | * | `--color-warning` | Cor principal no tipo warning | `var(--color-feedback-warning-base)` | * | `--background-warning` | Cor de fundo principal no tipo warning | `var(--color-feedback-warning-lightest)` | * | `--border-color-warning` | Cor da borda principal tipo warning | `var(--color-feedback-warning-lighter)` | * | **Type Info** | | | * | `--color-info` | Cor principal no tipo info | `var(--color-feedback-info-base)` | * | `--background-info` | Cor de fundo principal no tipo info | `var(--color-feedback-info-lightest)` | * | `--border-color-info` | Cor da borda principal tipo info | `var(--color-feedback-info-lighter)` | * */ declare abstract class PoToasterBaseComponent { private _isHide; private _sizeActions; /** * @optional * * @description * * Ação para a notificação. */ action: Function; /** * @optional * * @description * * Label do botão quando houver uma ação definida. */ actionLabel: string; /** * @optional * * @description * * Mensagem a ser exibida na notificação. */ message: string; /** * @optional * * @description * * Define se o Toaster esta invisivel. * * @default `false` */ isHide: boolean; /** * @optional * * @description * * Evento emitido quando o valor de `isHide` é alterado. * */ isHideChange: EventEmitter; /** * @optional * * @description * * Exibe botão de fechar no toaster modo inline. * * @default `true` */ showClose: boolean; /** * @optional * * @description * * Define o tamanho das ações no componente: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set sizeActions(value: string); get sizeActions(): string; /** * @optional * * @description * * Mensagem de suporte a ser exibida na notificação. */ supportMessage?: string; /** * @optional * * @description * * Determina o tipo de notificação. * * Valores aceitos: `error`, `information`, `success` e `warning`. * @see PoToasterType * * @default `PoToasterType.Information` */ type: PoToasterType; mode: PoToasterMode; orientation: PoToasterOrientation; componentRef: any; position: number; abstract close(): void; abstract changePosition(value: number): void; abstract configToaster(poToaster: PoToaster): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_isHide: any; static ngAcceptInputType_showClose: any; } /** * @docsExtends PoToasterBaseComponent * * @example * * * * * * * * * * */ declare class PoToasterComponent extends PoToasterBaseComponent implements AfterViewInit, OnDestroy, OnChanges { changeDetector: ChangeDetectorRef; private renderer; toaster: ElementRef; buttonClose: PoButtonComponent; alive: boolean; language: string; literals: any; icon: string; margin: number; observableOnClose: Subject; toasterPosition: string; toasterType: string; constructor(); ngOnDestroy(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; changePosition(position: number): void; close(): void; setFadeOut(): void; setFadeIn(): void; configToaster(poToaster: PoToaster): void; hasClose(): boolean; isAlert(): boolean; isInline(): boolean; getIcon(): string; show(): void; hide(): void; getToasterPosition(): string; getToasterType(): string; onButtonClose(event: any): void; poToasterAction(event: any): void; returnHeightToaster(position: any): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-toaster. */ declare class PoToasterModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoNotificationModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } interface PoToaster extends PoNotification { /** Referência do componente toaster. */ componentRef?: any; /** Posição onde a notificação aparecerá na tela. */ position: number; /** Tipo de notificação. */ type: PoToasterType; } declare const poToasterLiterals: { en: { close: string; }; es: { close: string; }; pt: { close: string; }; ru: { close: string; }; }; declare class PoComponentInjectorService { private componentResolver; private applicationRef; private injector; constructor(componentResolver: ComponentFactoryResolver, applicationRef: ApplicationRef, injector: Injector); createComponentInApplication(component: any): ComponentRef; destroyComponentInApplication(componentRef: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * 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. * */ declare abstract class PoNotificationBaseService { stackTop: Array>; stackBottom: Array>; private defaultDuration; /** * Emite uma notificação de sucesso. * * @param {PoNotification | string} notification Objeto com os dados da notificação ou somente a string com a mensagem da notificação. */ success(notification: PoNotification | string): void; /** * Emite uma notificação de atenção. * * @param {PoNotification | string} notification Objeto com os dados da notificação ou somente a string com a mensagem da notificação */ warning(notification: PoNotification | string): void; /** * Emite uma notificação de erro. * * @param {PoNotification | string} notification Objeto com os dados da notificação ou somente a string com a mensagem da notificação */ error(notification: PoNotification | string): void; /** * Emite uma notificação de informação. * * @param {PoNotification | string} notification Objeto com os dados da notificação ou somente a string com a mensagem da notificação */ information(notification: PoNotification | string): void; /** * Define em milissegundos a duração padrão para as notificações. * * > Padrão 9 segundos. * * @param {number} defaultDuration Duração em milisegundos */ setDefaultDuration(defaultDuration: number): void; /** * @docsPrivate * * Cria um objeto do tipo PoToaster de acordo o tipo. * * @param {PoNotification | string} notification Objeto PoNotification com os dados da notificação */ private buildToaster; /** * @docsPrivate * * Método responsável por criar o po-toaster. * * @param {PoToaster} toaster Objeto contendo as informações do toaster. */ abstract createToaster(toaster: PoToaster): void; /** * @docsPrivate * * Método responsável por destruir o po-toaster. * * @param {ComponentRef} toaster Número da posição ou instancia do toaster a ser destruído. * @param {PoToasterOrientation} orientation Orientação do PoToaster: Top ou Bottom */ abstract destroyToaster(toaster: ComponentRef): void; } /** * @docsExtends PoNotificationBaseService * * @example * * * * * * * * * * * * * * * */ declare class PoNotificationService extends PoNotificationBaseService { private poComponentInjector; constructor(poComponentInjector: PoComponentInjectorService); createToaster(toaster: PoToaster): void; destroyToaster(toaster: any): void; private observableOnClose; private verifyLimitToaster; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @usedBy PoSearchComponent * * @description * * Define o tipo de busca usado no `po-search`. */ declare enum PoSearchFilterMode { /** Verifica se o texto *inicia* com o valor pesquisado. */ startsWith = 0, /** Verifica se o texto *contém* o valor pesquisado. */ contains = 1, /** Verifica se o texto *finaliza* com o valor pesquisado. */ endsWith = 2 } /** * @description * * Interface que representa a estrutura de uma resposta de sucesso HTTP. * * > Utilizada apenas quando a resposta incluir uma coleção de itens. */ interface PoResponseApi { /** Lista de itens retornados. */ items: Array; /** Indica se existe uma próxima página com mais registros para aquela coleção de itens. */ hasNext: boolean; } /** * @docsExtends PoResponseApi * */ interface PoTableResponseApi extends PoResponseApi { } /** * * @description * * Interface do objeto enviado como parâmetro da função `getItems`. */ interface PoTableFilteredItemsParams { /** * Conteúdo utilizado para filtrar a lista de items. */ filter?: string; /** * Objeto utilizado para filtros personalizados. */ queryParams?: { [key: string]: string | number | boolean; }; /** * Controla a paginação dos dados e recebe um valor automaticamente a cada clique no botão 'Carregar mais resultados'. */ page?: number; /** * Quantidade de itens retornados cada vez que o serviço é chamado, por padrão é 10. */ pageSize?: number; /** * Coluna que está sendo ordenada na tabela. * * - Coluna decrescente será informada da seguinte forma: `-`, por exemplo `-name`. * - Coluna ascendente será informada da seguinte forma: `, por exemplo `name`. */ order?: string; /** Define o tamnho dos componentes de formulário no table. */ size?: string; } /** * @description * * Define o tipo de busca utilizado no po-table. */ interface PoTableFilter { /** * 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`. * * @param { PoTableFilteredItemsParams } params objeto enviado por parâmetro que implementa a interface `PoTableFilteredItemsParams` */ getFilteredItems(params: PoTableFilteredItemsParams): Observable; } declare class PoTableService implements PoTableFilter { private http; readonly headers: HttpHeaders; private url; private urlDelete; constructor(http: HttpClient); getFilteredItems(filteredParams?: PoTableFilteredItemsParams): Observable; deleteItem(paramDelete: string, paramResponse: any): Observable; setUrl(url: string, method: 'GET' | 'DELETE'): void; scrollListener(componentListner: HTMLElement): Observable; private validateParams; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } type QueryParamsType = string | number | boolean; /** * @description * * Este componente de tabela é utilizado para exibição de dados com diferentes tipos como por exemplo textos, data, horas e números com * formato personalizado. * * Também é possivel criar tabelas com ordenação de dados, linhas com detalhes, coluna para seleção de linhas, coluna com ações e também * carregamento por demanda através do botão **Carregar mais resultados**. * * > As linhas de detalhes podem também ser customizadas através do [`p-table-row-template`](/documentation/po-table-row-template). * * > As colunas podem ser customizadas através dos templates [`p-table-column-template`](/documentation/po-table-column-template) * e [`p-table-cell-template`](/documentation/po-table-cell-template). * * O componente permite gerenciar a exibição das colunas dinamicamente. Esta funcionalidade pode ser acessada através do ícone de engrenagem * no canto superior direito do cabeçalho da tabela. * * Caso a largura de todas as colunas forem definidas e o total ultrapassar o tamanho tabela, será exibido um *scroll* na horizontal para a * completa visualização dos dados. * * #### 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)` | * | `--background-color` | Cor de background | `var(--color-neutral-light-00)` | * | `--color` | Cor principal da table | `var(--color-neutral-dark-95)` | * | `--background-striped-color` | Cor do background quando striped | `var(--color-neutral-light-05)` | * | `--color-line` | Cor das linhas | `var(--color-neutral-mid-40)` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` | * | `--background-color-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)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-mid-40)` | * | **Headline** | | | * | `--background-color-headline`   | Cor do cabeçalho | `var(--color-neutral-light-10)` | * | `--font-weight-headline` | Peso da fonte do cabeçalho | `var(--font-weight-bold)` | * | **Selected** | | | * | `--background-color-selected`  | Cor de background no estado de selecionado | `var(--color-brand-01-lightest)` | * | **Actived** | | | * | `--color-actived` | Cor do texto no estado de selecionado | `var(--color-neutral-dark-90)` | * | `--background-color-actived` | Cor de background no estado de selecionado | `var(--color-brand-01-light)` | * */ declare abstract class PoTableBaseComponent implements OnChanges, OnDestroy { private poDate; private poTableService; /** * @optional * * @description * * Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. * * @default `false` */ hideColumnsManager: boolean; /** * @optional * * @description * * Permite que as ações em lote, responsável por excluir e exibir a quantidade de itens, sejam escondidas. * * @default `true` */ hideBatchActions: boolean; /** * @optional * * @description * * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * * @default `false` */ textWrap?: boolean; /** * @optional * * @description * * Permite que as ações para fixar uma coluna da tabela sejam escondidas. * * @default `false` */ set hideActionFixedColumns(hide: boolean); get hideActionFixedColumns(): boolean; /** * @optional * * @description * * Permite que o campo de pesquisa seja escondido. * * @default `true` */ hideTableSearch: boolean; /** * @optional * * @description * * Permite fechar um detalhe ou row template automaticamente, ao abrir outro item. * * @default `false` */ autoCollapse: boolean; /** * @optional * * @description * * Permite que seja adicionado o estado de carregamento no botão "Carregar mais resultados". * * @default `false` */ loadingShowMore: boolean; /** * @optional * * @description * * Habilita em todas as colunas a opção de ordenação de dados. Caso a coluna seja do tipo 'data' ou 'dateTime' a * mesma deve respeitar os tipos de entrada definidos para que sejam ordenadas. * * @default `false` */ sort: boolean; /** * @description * * Se verdadeiro, torna habilitado o botão "Carregar mais resultados". * * @default `false` */ showMoreDisabled: boolean; /** * @description * * Habilita ou desabilita o estilo listrado da tabela (`striped`). * > Recomendado para tabelas com maior número de dados, facilitando a sua visualização na tabela. * * @default `false` */ striped: boolean; /** * @description * * Esconde o *checkbox* para seleção de todas as linhas. * * > Sempre receberá *true* caso a seleção de apenas uma linha esteja ativa. * * @default `false` */ hideSelectAll: boolean; /** * @description * * Define que somente uma linha da tabela pode ser selecionada. * * > Esta definição não se aplica aos itens filhos, os mesmos possuem comportamento independente do item pai. */ singleSelect: boolean; /** * @description * * Permite selecionar um item da tabela clicando na linha. * * > Caso haja necessidade de selecionar o item apenas via radio ou checkbox, deve-se definir esta propriedade como `false`. * * @default `true` */ selectableEntireLine: boolean; /** * @optional * * @description * * Define que a coluna de ações ficará no lado direito da tabela. * * @default `false` */ actionRight: boolean; /** * @optional * * @description * * Define uma quantidade máxima de colunas que serão exibidas na tabela. * * Quando chegar no valor informado, as colunas que não estiverem selecionadas ficarão * desabilitadas e caso houver mais colunas visíveis do que o permitido, as excedentes * serão ignoradas por ordem de posição. */ maxColumns?: number; /** * @optional * * @description * * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. * Valores definidos no enum: PoSearchFilterMode * > Obs: A pesquisa é realizada exclusivamente nos dados locais, ou seja, aqueles que foram * > renderizados na tabela. * * @default `startsWith` */ filterType: PoSearchFilterMode; /** * @optional * * @description * Evento executado quando todas as linhas são selecionadas por meio do *checkbox* que seleciona todas as linhas. */ allSelected: EventEmitter; /** * @optional * * @description * Evento executado quando a seleção das linhas é desmarcada por meio do *checkbox* que seleciona todas as linhas. */ allUnselected: EventEmitter; /** * @optional * * @description * * Evento executado ao colapsar uma linha do `po-table`. * * > Como parâmetro o componente envia o item colapsado. */ collapsed: EventEmitter; /** * @optional * * @description * * Evento executado ao expandir uma linha do `po-table`. * * > Como parâmetro o componente envia o item expandido. */ expanded: EventEmitter; /** * @optional * * @description * * Evento executado após o método de exclusão ser finalizado. * * ``` * * * ``` * * * > Como parâmetro o componente envia a lista atualizada, sem os itens excluídos. */ eventDelete: EventEmitter; /** * @optional * * @description * * Evento executado ao selecionar uma linha do `po-table`. */ selected: EventEmitter; /** * @optional * * @description * * Recebe uma ação de clique para o botão "Carregar mais resultados", caso nenhuma ação for definida o mesmo * não é visível. * * Recebe um objeto `{ column, type }` onde: * * - column (`PoTableColumn`): objeto da coluna que está ordenada. * - type (`PoTableColumnSortType`): tipo da ordenação. */ showMore: EventEmitter; /** * @optional * * @description * * Evento executado ao ordenar colunas da tabela. * * Recebe um objeto `{ column, type }` onde: * * - column (`PoTableColumn`): objeto da coluna que foi clicada/ordenada. * - type (`PoTableColumnSortType`): tipo da ordenação. */ sortBy: EventEmitter; /** * @optional * * @description * Evento executado ao desmarcar a seleção de uma linha do `po-table`. */ unselected: EventEmitter; /** * @optional * * @description * Evento disparado ao fechar o page slide do gerenciador de colunas após alterar as colunas visíveis. * * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ changeVisibleColumns: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ columnRestoreManager: EventEmitter; allColumnsWidthPixels: boolean; columnMasterDetail: PoTableColumn; hasMainColumns: boolean; mainColumns: Array; selectAll: boolean; sortedColumn: { property: PoTableColumn; ascending: boolean; }; subtitleColumns: Array; page: number; pageSize: number; hasService?: boolean; initialColumns: Array; showBatchActions: boolean; itemsSelected: Array; paramsFilter: {}; filteredItems: Array; initialized: boolean; fixedLayout: boolean; private initialVisibleColumns; private _componentsSize?; private _spacing; private _filteredColumns; private _actions?; private _columns; private _container?; private _paramDelete; private _height?; private _hideDetail?; private _items; private _literals; private _loading?; private _selectable?; private language; private _serviceApi; private _serviceDeleteApi; private poTableServiceSubscription; private sortStore; private _infiniteScrollDistance?; private _infiniteScroll?; private _draggable?; private _hideActionFixedColumns?; private _virtualScroll?; constructor(poDate: PoDateService, languageService: PoLanguageService, poTableService: PoTableService); /** * @optional * * @description * * Define o tamanho dos componentes de formulário no table: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @description * * Lista de itens da tabela. * > Se falso, será inicializado como um *array* vazio. */ set items(items: Array); get items(): Array; /** * @optional * * @description * * Lista das colunas da tabela, deve receber um *array* de objetos que implementam a interface `PoTableColumn`. * Por padrão receberá como valor a primeira coluna da lista de itens da tabela. * > Caso não encontre valor, a mensagem 'Nenhuma definição de colunas' será exibida. * */ set columns(columns: Array); get columns(): Array; /** * @optional * * @description * * Adiciona um contorno arredondado ao `po-table`, as opções são: * - `border`: com bordas/linhas. * - `shadow`: com sombras. * * @default `border` */ set container(value: string); get container(): string; /** * @optional * * @description * * Adiciona o parâmetro a ser enviado para a requisição de DELETE. * * É necessário a utilização da propriedade `p-service-delete` em conjunto. * * @default `id` */ set paramDeleteApi(value: string); get paramDeleteApi(): string; /** * @optional * * @description * * Define a altura da tabela em *pixels* e fixa o cabeçalho. * * Ao utilizar essa propriedade será inserido o `virtual-scroll` na tabela melhorando a performance. */ set height(height: number); get height(): number; /** * @optional * * @description * * Habilita a visualização da lista de detalhes de cada linha da coluna. * * @default `false` */ set hideDetail(hideDetail: boolean); get hideDetail(): boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-table`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoTableLiterals = { * noColumns: 'Nenhuma definição de colunas', * noData: 'Nenhum dado encontrado', * noVisibleColumn: 'Nenhuma coluna visível', * noItem: 'Nenhum item selecionado', * oneItem: '1 item selecionado', * multipleItems: 'itens selecionados', * loadingData: 'Carregando', * loadMoreData: 'Carregar mais resultados', * seeCompleteSubtitle: 'Ver legenda completa', * completeSubtitle: 'Legenda completa', * columnsManager: 'Gerenciador de colunas', * bodyDelete: 'Deseja realmente excluir esse item?', * cancel: 'Cancelar', * delete: 'Excluir', * deleteSuccessful: 'Itens removidos com sucesso', * deleteApiError: 'Ocorreu um erro inesperado, tente novamente mais tarde!', * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoTableLiterals = { * noData: 'Sem dados' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoTableLiterals); get literals(): PoTableLiterals; /** * @optional * * @description * * Bloqueia a interação do usuário com os dados da _table_. * * @default `false` */ set loading(loading: boolean); get loading(): boolean; /** * @optional * * @description * * Define uma lista de ações. * * Quando houver apenas uma ação definida ela será exibida diretamente na coluna, caso contrário, o componente * se encarrega de agrupá-las exibindo o ícone [**an an-dots-three**](https://po-ui.io/icons) que listará as ações ao ser clicado. * * **A coluna de ações não será exibida quando:** * - a lista conter valores inválidos ou indefinidos. * - tenha uma única ação e a mesma não for visível. */ set actions(actions: Array); get actions(): Array; /** * @optional * * @description * * Permite a seleção de linhas na tabela e, caso a propriedade `p-single-select` esteja definida será possível * selecionar apenas uma única linha. * * **Importante:** * - As linhas de detalhe definidas em `PoTableDetail` possuem comportamento independente da linha mestre; * - Cada linha possui por padrão a propriedade dinâmica `$selected`, na qual é possível validar se a linha * está selecionada, por exemplo: `item.$selected` ou `item['$selected']`. * * @default `false` */ set selectable(value: boolean); get selectable(): boolean; /** * @optional * * @description * * 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 * executará a função `p-show-more`. * * **Regras de utilização:** * - O scroll infinito só funciona para tabelas que utilizam a propriedade `p-height` e que possuem o scroll já na carga inicial dos dados. * * @default `false` */ set infiniteScroll(value: boolean); get infiniteScroll(): boolean; /** * @optional * * @description * * 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 * que 0, o valor padrão será 100% * * **Exemplos:** * - p-infinite-scroll-distance = 80: Quando atingir 80% do scroll da tabela, o `p-show-more` será disparado. */ set infiniteScrollDistance(value: number); get infiniteScrollDistance(): number; /** * @optional * * @description * * URL da API responsável por retornar os registros. * * Ao realizar a busca de mais registros via paginação (Carregar mais resultados), será enviado os parâmetros `page` e `pageSize`, conforme abaixo: * * ``` * url + ?page=1&pageSize=10 * ``` * * Caso utilizar ordenação, a coluna ordenada será enviada através do parâmetro `order`, por exemplo: * - Coluna decrescente: * ``` * url + ?page=1&pageSize=10&order=-name * ``` * * - Coluna ascendente: * ``` * url + ?page=1&pageSize=10&order=name * ``` * * > Esta URL deve retornar e receber os dados no padrão de [API do PO UI](https://po-ui.io/guides/api). */ set serviceApi(service: string); get serviceApi(): string; /** * @optional * * @description * * URL da API responsável por excluir os registros. * * Ao selecionar o botão de excluir itens, essa url será executada utilizando o parâmetro enviado na propriedade `p-param-delete-api`. * Caso ela não seja utilizada, o parâmetro padrão a ser enviado será `id`. * * > Esta URL deve retornar e receber os dados no padrão de [API do PO UI](https://po-ui.io/guides/api). */ set serviceDeleteApi(service: string); get serviceDeleteApi(): string; /** * @optional * * @description * * Define o espaçamento interno das células, impactando diretamente na altura das linhas do table. Os valores * permitidos são definidos pelo enum **PoTableColumnSpacing**. * * > Em nível de acessibilidade **AA**, caso o valor de `p-spacing` não seja definido, o valor padrão será `extraSmall` * > nos seguintes cenários: * > - Quando o valor de `p-components-size` for `small`; * > - Quando o valor padrão dos componentes for configurado como `small` no * > [serviço de tema](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set spacing(value: string); get spacing(): string; /** * @optional * * @description * * Define as colunas que serão filtradas no campo de pesquisa. * Aceita um array de strings, representando as colunas específicas que serão consideradas na filtragem. * */ set filteredColumns(values: Array); get filteredColumns(): Array; get hasColumns(): boolean; get hasItems(): boolean; get nameColumnDetail(): string; get validColumns(): PoTableColumn[]; get visibleActions(): PoTableAction[]; private getFilteredColumns; private get sortType(); /** * @optional * * @description * * Habilita o modo drag and drop para as colunas da tabela. * * @default `false` */ set draggable(draggable: boolean); get draggable(): boolean; /** * @optional * * @description * * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. * Requer altura (`p-height`) para funcionar corretamente. * * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. * * @default `true` */ set virtualScroll(value: boolean); get virtualScroll(): boolean; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; selectAllRows(): void; selectRow(row: any): void; hasSelectableRow(): boolean; selectDetailRow(event: any): void; updateParentRowSelection(parentRow: any): void; setSelectedList(): void; getClassColor(row: any, column: any): string; toggleDetail(row: any): void; toggleRowAction(row: any): void; sortColumn(column: PoTableColumn): void; onShowMore(): void; getFilteredItems(queryParams?: { [key: string]: QueryParamsType; }): Observable; setTableResponseProperties(data: PoTableResponseApi): void; initializeData(params?: { [key: string]: QueryParamsType; }): void; sortArray(column: PoTableColumn, ascending: boolean, item?: Array): void; protected getDefaultColumns(item: any): { label: string; property: string; }[]; protected setShowDetail(rowIdentifier: any | number, isShowDetail: boolean): void; private collapseAllItems; private configAfterSelectRow; private emitExpandEvents; private emitSelectAllEvents; private emitSelectEvents; private getColumnColor; private getColumnMasterDetail; private getMainColumns; private getSubtitleColumns; private isEverySelected; private onChangeColumns; private setColumnLink; private setColumnMasterDetail; private setMainColumns; private setSubtitleColumns; private unselectOtherRows; private verifyWidthColumnsPixels; private setService; private getFilteredParams; private getOrderParam; private removePropertyFixed; protected abstract calculateHeightTableContainer(height: any): any; protected abstract checkInfiniteScroll(): any; protected abstract changeSizeLoading(): any; protected abstract changeHeaderWidth(): any; protected abstract getDefaultSpacing(): any; protected abstract reapplySort(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideColumnsManager: any; static ngAcceptInputType_hideBatchActions: any; static ngAcceptInputType_textWrap: any; static ngAcceptInputType_hideTableSearch: any; static ngAcceptInputType_autoCollapse: any; static ngAcceptInputType_loadingShowMore: any; static ngAcceptInputType_sort: any; static ngAcceptInputType_showMoreDisabled: any; static ngAcceptInputType_striped: any; static ngAcceptInputType_hideSelectAll: any; static ngAcceptInputType_singleSelect: any; static ngAcceptInputType_selectableEntireLine: any; static ngAcceptInputType_actionRight: any; } /** * @docsExtends PoTableBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoTableComponent extends PoTableBaseComponent implements AfterViewInit, DoCheck, OnDestroy, OnInit { private changeDetector; private decimalPipe; private readonly defaultService; tableRowTemplate: PoTableRowTemplateDirective; tableCellTemplate: PoTableCellTemplateDirective; tableColumnTemplates: QueryList; noColumnsHeader: any; poPopupComponent: PoPopupComponent; modalDelete: PoModalComponent; tableFooterElement: any; tableWrapperElement: any; tableTemplate: any; tableVirtualScroll: any; tableScrollable: any; columnManager: any; columnBatchActions: any; columnActionLeft: any; actionsIconElement: QueryList; actionsElement: QueryList; filterInput: ElementRef; poSearchInput: ElementRef; viewPort: CdkVirtualScrollViewport; poNotification: PoNotificationService; heightTableContainer: number; heightTableVirtual: number; popupTarget: any; tableOpacity: number; tooltipText: string; itemSize: number; lastVisibleColumnsSelected: Array; tagColor: string; idRadio: string; inputFieldValue: string; JSON: JSON; newOrderColumns: Array; sizeLoading: string; headerWidth: number; close: PoModalAction; confirm: PoModalAction; private _columnManagerTarget; private _columnManagerTargetFixed; private differ; private footerHeight; private timeoutResize; private visibleElement; private scrollEvent$; private subscriptionScrollEvent; private subscriptionService; private clickListener; private resizeListener; set columnManagerTarget(value: ElementRef); get columnManagerTarget(): ElementRef; set columnManagerTargetFixed(value: ElementRef); get columnManagerTargetFixed(): ElementRef; constructor(poDate: PoDateService, differs: IterableDiffers, renderer: Renderer2, poLanguageService: PoLanguageService, changeDetector: ChangeDetectorRef, decimalPipe: DecimalPipe, defaultService: PoTableService); get hasRowTemplateWithArrowDirectionRight(): boolean; get columnCount(): number; get columnCountForMasterDetail(): number; get detailHideSelect(): boolean; get hasVisibleActions(): boolean; get firstAction(): PoTableAction; get hasFooter(): boolean; get hasMasterDetailColumn(): boolean; get hasRowTemplate(): boolean; get hasSelectableColumn(): boolean; get hasValidColumns(): boolean; get hasVisibleSubtitleColumns(): boolean; get isSingleAction(): boolean; get isDraggable(): boolean; get inverseOfTranslation(): string; ngOnInit(): void; changeHeaderWidth(): void; ngAfterViewInit(): void; showMoreInfiniteScroll({ target }: { target: any; }): void; ngDoCheck(): void; ngOnDestroy(): void; /** * 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 * ``` * * @param { { key: value } } queryParams Formato do objeto a ser enviado. * > Pode ser utilizada qualquer string como key, e qualquer string ou number como value. */ applyFilters(queryParams?: { [key: string]: QueryParamsType; }): void; /** * Verifica se columns possuem a propriedade width. */ applyFixedColumns(): boolean; /** * Método que colapsa uma linha com detalhe quando executada. * * @param { number } rowIndex Índice da linha que será colapsada. * > Ao reordenar os dados da tabela, o valor contido neste índice será alterado conforme a ordenação. */ collapse(rowIndex: number): void; /** * Método que expande uma linha com detalhe quando executada. * * @param { number } rowIndex Índice da linha que será expandida. * > Ao reordenar os dados da tabela, o valor contido neste índice será alterado conforme a ordenação. */ expand(rowIndex: number): void; /** * Retorna as linhas do `po-table` que estão selecionadas. */ getSelectedRows(): any[]; /** * Retorna as linhas do `po-table` que não estão selecionadas. */ getUnselectedRows(): any[]; /** * Desmarca as linhas que estão selecionadas. */ unselectRows(): void; checkDisabled(row: any, column: PoTableColumn): any; containsMasterDetail(row: any): any; executeTableAction(row: any, tableAction: any): void; /** * Desmarca uma linha que está selecionada. */ unselectRowItem(itemfn: { [key: string]: any; } | ((item: any) => boolean)): void; /** * Seleciona uma linha do 'po-table'. */ selectRowItem(itemfn: { [key: string]: any; } | ((item: any) => boolean)): void; /** * 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: * * ``` * * * ``` */ deleteItems(): void; formatNumber(value: any, format: string): any; getCellData(row: any, column: PoTableColumn): any; getBooleanLabel(rowValue: any, columnBoolean: PoTableColumn): string; getColumnIcons(row: any, column: PoTableColumn): any; getColumnLabel(row: any, columnLabel: PoTableColumn): PoTableColumnLabel; getSubtitleColumn(row: any, subtitleColumn: PoTableColumn): PoTableSubtitleColumn; isShowMasterDetail(row: any): boolean; isShowRowTemplate(row: any, index: number): boolean; onClickLink(event: any, row: any, column: PoTableColumn): void; onChangeVisibleColumns(columns: Array): void; onColumnRestoreManager(value: Array): void; onVisibleColumnsChange(columns: Array): void; tooltipMouseEnter(event: any, column?: PoTableColumn, row?: any): any; tooltipMouseLeave(): void; togglePopup(row: any, targetRef: any): void; trackBy(index: number): number; validateTableAction(row: any, tableAction: any): any; onOpenColumnManager(): void; onFilteredItemsChange(items: Array): void; /** * Método que remove um item da tabela. * * @param { number | { key: value } } item Índice da linha ou o item que será removido. * > Ao remover o item, a linha que o representa será excluída da tabela. */ removeItem(item: number | { [key: string]: any; }): void; /** * Método que atualiza um item da tabela. * * @param { number | { key: value } } item Índice da linha ou o item que será atualizado. * @param { { key: value } } updatedItem Item que foi atualizado. * > Ao atualizar o item, a informação será alterada na tabela. */ updateItem(item: number | { [key: string]: any; }, updatedItem: { [key: string]: any; }): void; drop(event: CdkDragDrop>): void; getTemplate(column: PoTableColumn): TemplateRef; getWidthColumnManager(): any; getColumnWidthActionsLeft(): any; hasSomeFixed(): boolean; protected calculateHeightTableContainer(height: number): void; protected verifyCalculateHeightTableContainer(): void; protected checkInfiniteScroll(): void; private changesAfterDelete; protected changeSizeLoading(): void; protected getDefaultSpacing(): PoTableColumnSpacing; protected reapplySort(): void; private checkChangesItems; private checkingIfColumnHasTooltip; private countExtraColumns; private debounceResize; private deleteItemsLocal; private deleteItemsService; private findCustomIcon; private getHeightTableFooter; private hasInfiniteScroll; private includeInfiniteScroll; private mergeCustomIcons; private removeListeners; private setTableOpacity; private verifyChangeHeightInFooter; private toggleSelect; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por exibir ícones nas colunas. */ declare class PoTableColumnIconComponent { /** Definição da coluna que utiliza os icones. */ column: PoTableColumn; /** Dados da linha da tabela. */ row: any; private _icons; /** Lista de colunas com ícones. */ set icons(icons: Array | Array | string); get icons(): Array | Array | string; click(columnIcon: PoTableColumnIcon, event: any): void; getColor(column: PoTableColumnIcon): string; getIcon(column: PoTableColumnIcon): string | i0.TemplateRef; isClickable(columnIcon: PoTableColumnIcon): boolean; isDisabled(column: PoTableColumnIcon): boolean; trackByFunction(index: any): any; private convertToColumnIcon; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente para a criação da representação da legenda, em formato de texto . */ declare class PoTableColumnLabelComponent implements OnInit { value: PoTableColumnLabel; ngOnInit(): void; checkValueHasLabel(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por exibir link nas colunas. */ declare class PoTableColumnLinkComponent { action: Function; disabled: boolean; link: string; openNewTab: boolean; row: any; value: string; get type(): "action" | "externalLink" | "internalLink"; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Interface para as ações do componente po-checkbox-group. * * @usedBy PoCheckboxGroupComponent */ interface PoCheckboxGroupOption { /** Texto exibido para o usuário ao lado do checkbox. */ label: string; /** * Valor retornado no model. * * É possível usar os valores ```true``` e ```false```, caso a propriedade ```p-indeterminate``` esteja setada como ```true``` * passa a aceitar ```null``` também, por padrão esse valor sempre será setado como ```false```. */ value: string; /** * Desabilita o checkbox, por padrão as opções sempre estarão habilitadas para o usuário. * * Mesmo desabilitado o desenvolvedor pode alterar o valor do item via código, mas não será permitido ao * usuário alterar a condição do checkbox. */ disabled?: boolean; fixed?: boolean; } /** * @docsPrivate * * @usedBy PoPageSlide * * @description * * Interface para as literais do `PoPageSlide`. */ interface PoPageSlideLiterals { /** Texto da aria-label do botão de fechar */ close?: string; } /** * @description * * 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%` | * */ declare class PoPageSlideBaseComponent { /** * @description * * Título da página. */ title: string; /** * @description * * Subtítulo da página. */ subtitle?: string; /** * @optional * * @description * * Oculta o botão de encerramento da página. * * Esta opção só é possível se a propriedade `p-click-out` estiver habilitada. * * @default `false` */ hideClose: boolean; /** * @optional * * @description * * Define se permite o encerramento da página ao clicar fora da mesma. * * @default `false` */ clickOut: boolean; /** * @optional * * @description * * Permite a expansão dinâmica da largura do `po-page-slide` quando `p-size` for `auto` (automático). * Propriedade necessária para correto funcionamento da `po-table` dentro do `po-page-slide` * * @default `false` */ flexibleWidth: boolean; /** * @optional * * @description * Evento executado ao fechar o page slide. */ closePageSlide: EventEmitter; hidden: boolean; private _componentsSize?; private _size; /** * @optional * * @description * * Define o tamanho da página. * * Valores válidos: * - `sm` (pequeno) * - `md` (médio) * - `lg` (grande) * - `xl` (extra-grande) * - `auto` (automático) * * > Todas as opções de tamanho, exceto `auto`, possuem uma largura máxima de **768px**. * * @default `md` */ set size(value: string); get size(): string; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * 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(); * } * ``` */ open(): void; /** * 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(); * } * ``` */ close(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideClose: any; static ngAcceptInputType_clickOut: any; static ngAcceptInputType_flexibleWidth: any; } /** * @description * * 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. * * ``` * * * * * * * * ``` */ declare class PoPageSlideFooterComponent { /** * @optional * * @description * * Desabilita o alinhamento padrão, à direita, dos botões de ações que ficam no rodapé da [`PoPageSlide`](/documentation/po-page-slide). * * > Caso a propriedade esteja habilitada, o alinhamento deverá ser a esquerda e pode ser personalizado. * * @default false */ disabledAlign?: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const poPageSlideLiteralsDefault: { en: PoPageSlideLiterals; es: PoPageSlideLiterals; pt: PoPageSlideLiterals; ru: PoPageSlideLiterals; }; /** * @docsExtends PoPageSlideBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoPageSlideComponent extends PoPageSlideBaseComponent { private poActiveOverlayService; private languageService; private _pageContent; private firstElement; private id; private loadingCompleted; private sourceElement; buttonAriaLabel: string; duration: string; timing: string; private focusEvent; pageSlideFooter: PoPageSlideFooterComponent; set pageContent(pageContent: ElementRef); get pageContent(): ElementRef; constructor(); open(): void; close(): void; onClickOut(event: MouseEvent): void; private setTimeFromCSS; private getTextDefault; private handleFocus; private initFocus; private loadFirstElement; private removeEventListeners; get fadeParams(): { value: boolean; params: { duration: string; }; }; get slideParams(): { value: boolean; params: { timing: string; }; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageSlideModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoTableColumnManagerComponent implements OnChanges, OnDestroy { private renderer; popover: PoPopoverComponent; pageSlideColumnsManager: PoPageSlideComponent; columns: Array; target: ElementRef; colunsDefault: Array; lastVisibleColumnsSelected: Array; visibleColumnsChange: EventEmitter; changeVisibleColumns: EventEmitter; initialColumns: EventEmitter; hideActionFixedColumns: boolean; literals: any; columnsOptions: Array; visibleColumns: Array; columnUpdate: any; private _maxColumns; private defaultColumns; private resizeListener; private restoreDefaultEvent; private lastEmittedValue; private minColumns; private _componentsSize?; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no table: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; set maxColumns(value: number); get maxColumns(): number; constructor(renderer: Renderer2, languageService: PoLanguageService); ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; checkChanges(event?: Array, emit?: boolean): void; restore(): void; changePosition({ option, direction }: { option: any; direction: any; }): void; emitColumnFixed(option: any): void; private changePositionColumn; private verifyToEmitChange; private emitChangesToSelectedColumns; private allowsChangeVisibleColumns; private verifyToEmitVisibleColumns; private verifyRestoreValues; private allowsChangeSelectedColumns; private verifyOnClose; private emitVisibleColumns; private allowsEmission; private isFirstTime; private isUpdate; private isEqualArrays; private disableColumnsOptions; private getColumnTitleLabel; /** Retorna um Array de column.property das colunas que são visiveis. */ private getVisibleColumns; private isVisibleColumn; /** Retorna um Array PoTableColumn a partir das colunas visiveis no gerenciador de colunas. */ private getVisibleTableColumns; private initializeListeners; private isDisableColumn; private mapTableColumnsToCheckboxOptions; private disabledLastColumn; private onChangeColumns; private updateValues; private removeListeners; private stringify; private removePropertyFixed; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideActionFixedColumns: any; } /** * @docsPrivate * * @usedBy PoCheckboxGroupComponent * * @description * * Interface para as ações do componente po-checkbox-group utilizada no template. * */ interface PoCheckboxGroupOptionView extends PoCheckboxGroupOption { id: string; } /** * @description * * O componente `po-checkbox-group` exibe uma lista de múltipla escolha onde o usuário pode marcar e desmarcar, * utilizando a tecla de espaço ou o clique do mouse, várias opções. * * > Para seleção única, utilize o [**PO Radio Group**](/documentation/po-radio-group). * * Por padrão, o po-checkbox-group retorna um array com os valores dos itens selecionados para o model. * * ``` * favorites = ['PO', 'Angular']; * ``` * * Na maioria das situações, o array com os objetos setados já atende as necessidades mas, caso o desenvolvedor * tenha necessidade de usar um valor indeterminado (`null`), ou seja, nem marcado (`true`) e nem desmarcado (`false`), * deve setar a propriedade `p-indeterminate` como `true`. * * Nesse caso, o po-checkbox-group vai retornar um objeto com todas as opções disponíveis e seus valores. * * ``` * favorites = { * PO: true, * Angular: true, * VueJS: false, * React: null // indeterminado * }; * ``` */ declare class PoCheckboxGroupBaseComponent implements ControlValueAccessor, Validator { additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** Nome dos checkboxes */ name: string; /** Texto de apoio do campo */ help?: string; /** Label do campo */ label?: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * @optional * * @description * * Função para atualizar o `ngModel` do componente, necessário quando não for utilizado dentro da tag form. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` * */ ngModelChange: EventEmitter; /** * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do campo */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; checkboxGroupOptionsView: Array; checkedOptions: any; checkedOptionsList: any; displayAdditionalHelp: boolean; mdColumns: number; propagateChange: any; validatorChange: any; private _columns; private _disabled?; private _indeterminate?; private _options?; private _required?; private _size?; /** * @optional * * @description * * Possibilita definir a quantidade de colunas para exibição dos itens do *checkbox*. * - É possível exibir as opções entre `1` e `4` colunas. * - Para resolução `sm` a colunagem invariavelmente passa para `1` coluna. * - Quando se trata de resolução `md` e o valor estabelecido para colunas for superior a `2`, * o *grid system* será composto por `2` colunas. * - Para evitar a quebra de linha, prefira a utilização de `1` coluna para opções com textos grandes. * * @default `2` * */ set columns(value: number); get columns(): number; /** * @optional * * @description * * Desabilita todos os itens do checkbox. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Caso exista a necessidade de usar o valor indeterminado (`null`) dentro da lista de opções, é necessário setar * a propriedade `p-indeterminate` como `true`, por padrão essa propriedade vem desabilitada (`false`). * * Quando essa propriedade é setada como `true`, o *po-checkbox-group* passa a devolver um objeto completo para o * `ngModel`, diferente do array que contém apenas os valores selecionados. * * @default `false` */ set indeterminate(indeterminate: boolean); get indeterminate(): boolean; /** * @optional * * @description * Lista de opções que serão exibidas * Nesta propriedade deve ser definido um array de objetos que implementam a interface PoCheckboxGroupOption */ set options(value: Array); get options(): Array; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho dos checkboxes do componente: * - `small`: 16x16 (disponível apenas para acessibilidade AA). * - `medium`: 24x24. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` * */ set size(value: string); get size(): string; changeValue(): void; checkIndeterminate(): any; checkOption(value: PoCheckboxGroupOption): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; writeValue(optionsModel: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; protected validateModel(model: any): void; private checkColumnsRange; private checkOptionModel; private generateCheckOptions; private getGridSystemColumns; private isInvalidIndeterminate; private removeDuplicatedOptions; private setCheckboxGroupOptionsView; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; } /** * @docsExtends PoCheckboxGroupBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent implements AfterViewChecked, AfterViewInit, OnChanges { private changeDetector; checkboxLabels: QueryList; helperEl?: PoHelperComponent; private el; ngOnChanges(changes: SimpleChanges): void; ngAfterViewChecked(): void; ngAfterViewInit(): void; onBlur(checkbox: PoCheckboxComponent): void; emitAdditionalHelp(): void; /** * 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 { PoCheckboxGroupComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild(PoCheckboxGroupComponent, { static: true }) checkbox: PoCheckboxGroupComponent; * * focusCheckbox() { * this.checkbox.focus(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; getErrorPattern(): string; hasInvalidClass(): any; onKeyDown(event: KeyboardEvent, option: PoCheckboxGroupOption, checkbox?: PoCheckboxComponent): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoCheckboxGroupComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; trackByFn(index: any): any; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; private isAdditionalHelpEventTriggered; private isCheckboxOptionFocused; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type Direction = 'up' | 'down'; declare class PoTableListManagerComponent extends PoCheckboxGroupComponent { private _componentsSize?; private changePosition; private changeColumnFixed; columnsManager: Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no table: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; hideActionFixedColumns: boolean; literals: any; constructor(languageService: PoLanguageService, changeDetector: ChangeDetectorRef); emitChangePosition(option: any, direction: Direction): void; verifyArrowDisabled(option: any, direction: Direction): boolean; emitFixed(option: any): void; isFixed(option: any): boolean; existedFixedItem(): boolean; checksIfHasFiveFixed(option: any): boolean; clickSwitch(option: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideActionFixedColumns: any; } /** * @docsPrivate * * @description * * Componente responsável por apresentar o detalhe de cada linha da tabela. */ declare class PoTableDetailComponent { private decimalPipe; private _componentsSize?; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no table: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * Lista de itens do _detail_ da tabela. */ items: Array; /** * Linha do registro pai correspondente ao item de detalhe selecionado. Utilizado para gerenciar o estado de seleção do elemento pai, * permitindo que o mesmo seja atualizado para refletir a seleção de todos os filhos ou estado indeterminado. */ parentRow: PoTableDetail; /** * Define se a tabela possui a opção de `selectable` habilitada. */ isSelectable?: boolean; /** * @optional * * @description * * Ação executada ao selecionar ou desmarcar a seleção de uma linha de detalhe do `po-table`. */ selectRow: EventEmitter; private _detail; /** * Configuração da linha de detalhes. */ set detail(value: PoTableDetail); get detail(): PoTableDetail; constructor(decimalPipe: DecimalPipe); get detailColumns(): Array; get typeHeaderInline(): boolean; get typeHeaderTop(): boolean; formatNumberDetail(value: any, format: string): any; getColumnTitleLabel(detail: PoTableDetailColumn): string; getDetailData(item: any, detail: PoTableDetailColumn): any; onSelectRow(item: any): void; private returnPoTableDetailObject; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por exibir um ícone na tabela. */ declare class PoTableIconComponent { /** Define se o ícone é clicável. */ clickable: boolean; /** Cor do ícone. */ color: string; /** Desabilitado. */ disabled: boolean; /** Classe css do ícone. */ icon: string | TemplateRef; /** Texto do tooltip. */ iconTooltip: string; /** Output click. */ click: EventEmitter; tooltip: string; private get allowTooltip(); onClick(event: any): void; tooltipMouseEnter(): void; tooltipMouseLeave(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente para a criação de um botão e modal para visualização de todas as legendas. */ declare class PoTableShowSubtitleComponent { /** Objeto com os dados da legenda. */ subtitles: Array; /** Propriedade que recebe as literais definidas no `po-table`. */ literals: any; /** Define o tamanho dos elementos que possuem `p-size` dentro do componente. */ componentsSize: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoColorPaletteService { getColor(value: { color?: string; type?: string; }): string; private getColorFromType; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsPrivate * * @description * * Componente para a criação da representação da legenda, em formato de círculo. */ declare class PoTableSubtitleCircleComponent { private poColorPaletteService; /** Esconde a tooltip. */ hideTitle: boolean; private _subtitle; /** Objeto com os dados da legenda. */ set subtitle(subtitle: PoTableSubtitleColumn); get subtitle(): PoTableSubtitleColumn; constructor(poColorPaletteService: PoColorPaletteService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente para a criação de um conjunto de legendas. */ declare class PoTableSubtitleFooterComponent implements AfterViewInit, DoCheck, OnDestroy { private element; renderer: Renderer2; /** Define o tamanho dos elementos que possuem `p-size` dentro do componente. */ componentsSize: string; /** Propriedade que recebe as literais definidas no `po-table`. */ literals: any; /** Propriedade que recebe as legendas definidas no `PoTableSubtitleCircleComponent`. */ subtitles: Array; showSubtitle: boolean; protected resizeListener: () => void; private isVisible; private timeoutResize; constructor(element: ElementRef, renderer: Renderer2); ngAfterViewInit(): void; ngDoCheck(): void; ngOnDestroy(): void; private debounceResize; private getContainerSize; private getItemsSize; private initializeResizeListener; private removeResizeListener; private toggleShowCompleteSubtitle; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-checkbox-group`. */ declare class PoCheckboxGroupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * O `po-container` é um componente que visa facilitar o agrupamento de conteúdos. * Por padrão o mesmo exibe uma borda, um efeito de sombra ao seu redor e um espaçamento em sua parte interna, os quais * podem ser desabilitados. Ao remover sua borda a sombra também será removida. Além disso, sua altura acompanha a * quantidade do conteúdo, porém pode ser fixada. Para controlar sua largura, utilize o [Grid System](/guides/grid-system), * assim possibilitando o tratamento para diferentes resoluçõ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 - CONTENT** | | | * | `--padding`   | Preenchimento | `var(--spacing-sm)` | * | `--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 de background | `var(--color-neutral-light-00)` | * | **Default Values - TITLE** | | | * | `--font-family`   | Font aplicado ao titulo | `var(--font-family-theme)` | * | `--line-weight`   | Espessura da Fonte a ser aplicada do titulo | `var(--font-weight-semibold)` | * | `--line-height`   | tamanho da linha do titulo | `var(--line-height-md)` | * | `--text-color`   | Cor do Texto do titulo | `var(--color-neutral-dark-90)` | * | `--font-size`   | Tamanho da fonte do titulo | `1.125rem` | * | `--letter-spacing`   | distancia entre letras do titulo | `0.017rem` | * | `--margin`   | Margin entre o titulo e o conteudo | `0 0 var(--spacing-xs)` | * */ declare class PoContainerBaseComponent { private _height?; private _noBorder?; private _noPadding?; /** * @optional * * @description * * Define a altura do `po-container`. * * > Caso não seja definido um valor, a altura se ajustará de acordo com o conteúdo. */ set height(value: number); get height(): number; /** * @optional * * @description * * Desabilita a borda e a sombra em torno do `po-container`. * * @default `false` */ set noBorder(value: boolean); get noBorder(): boolean; /** * @optional * * @description * * Desabilita o espaçamento interno do `po-container`. * * @default `false` */ set noPadding(value: boolean); get noPadding(): boolean; /** * @optional * * @description * * Título do Container. */ title: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoContainerBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoContainerComponent extends PoContainerBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-container`. */ declare class PoContainerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * Pipe responsável por apresentar um horário baseado no formato de entrada definido na API do PO UI. */ declare class PoTimePipe implements PipeTransform { transform(time: string, format?: string): string; private addDotMiliseconds; private formatValue; private getFormatMiliseconds; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** * @description * * Módulo do pipe `po-time`. */ declare class PoTimeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare abstract class PoFieldModel implements ControlValueAccessor { private readonly cd; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox: boolean; /** Rótulo exibido pelo componente. */ label: string; /** Nome do componente. */ name: string; /** Texto de apoio para o campo. */ help: string; /** * @optional * * @description * * Indica se o campo será desabilitado. * * @default `false` */ disabled: boolean; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do campo. */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; displayAdditionalHelp: boolean; value: T; protected onTouched: any; private propagateChange; constructor(cd: ChangeDetectorRef); setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; writeValue(value: T): void; emitAdditionalHelp(): void; emitChange(value: any): void; getAdditionalHelpTooltip(): 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 `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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoNomeDoComponente): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(helperHtmlElement?: PoHelperComponent, poHelperComponent?: string | PoHelperOptions): boolean; protected isAdditionalHelpEventTriggered(): boolean; protected updateModel(value: T): void; abstract onWriteValue(value: T): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "additionalHelpEventTrigger": { "alias": "additionalHelpEventTrigger"; "required": false; }; "additionalHelpTooltip": { "alias": "p-additional-help-tooltip"; "required": false; }; "appendBox": { "alias": "p-append-in-body"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "help": { "alias": "p-help"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; }, { "additionalHelp": "p-additional-help"; "change": "p-change"; "keydown": "p-keydown"; }, never, never, true, never>; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_disabled: any; } declare class PoRadioComponent extends PoFieldModel { private changeDetector; private renderer; radio: ElementRef; radioInput: ElementRef; value: boolean; private _size?; /** Define o valor do *radio* */ radioValue: string; /** Define o tamanho do radio. */ set size(value: string); get size(): string; required?: boolean; /** * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap?: boolean; /** Define o status do *radio* */ checked: boolean; blur: EventEmitter; /** Emite evento para a tabela ao selecionar ou desselecionar */ changeSelected: EventEmitter; /** * Função que atribui foco ao *radio*. * * 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 { PoRadioComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild(PoRadioComponent, { static: true }) radio: PoRadioComponent; * * focusRadio() { * this.radio.focus(); * } * ``` * */ focus(): void; onBlur(): void; onKeyDown(event: KeyboardEvent): void; changeValue(value: any): void; eventClick(): void; onWriteValue(value: any): void; focusOut(): void; onKeyup(): void; onKeydown(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_required: any; static ngAcceptInputType_labelTextWrap: any; } declare class PoRadioModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoSwitchComponent * * @description * * Enum para posicionar o label do valor do po-switch. */ declare enum PoSwitchLabelPosition { /** Posiciona o label do lado esquerdo do switch. */ Right = 0, /** Posiciona o label do lado direito do switch. */ Left = 1 } /** * @docsExtends PoFieldModel * * @description * * 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)` | * * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoSwitchComponent extends PoFieldModel implements Validator, AfterViewInit, OnDestroy, OnChanges { private readonly changeDetector; private readonly injector; switchContainer: ElementRef; helperEl?: PoHelperComponent; id: string; value: boolean; private _labelOff; private _labelOn; private _labelPosition; private _loading; private _formatModel; private _size?; private statusChangesSubscription; /** * @optional * * @description * * Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou * apenas o valor puro (sem formatação). * * > Por padrão será atribuído `false`. * @default `false` */ set formatModel(format: boolean); get formatModel(): boolean; /** * @optional * * @description * * Indica se o status do `model` será escondido visualmente ao lado do switch. * * > Por padrão será atribuído `false`. * @default `false` */ hideLabelStatus: boolean; /** * @optional * * @description * * Posição de exibição do rótulo que fica ao lado do switch. * * > Por padrão exibe à direita. */ set labelPosition(position: PoSwitchLabelPosition); get labelPosition(): PoSwitchLabelPosition; /** * Texto exibido quando o valor do componente for `false`. * * @default `false` */ set labelOff(label: string); get labelOff(): string; /** * Texto exibido quando o valor do componente for `true`. * * @default `true` */ set labelOn(label: string); get labelOn(): string; /** * @optional * * @description * Exibe um ícone de carregamento substituindo o switch para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Exibe a mensagem de erro configurada quando o campo estiver desligado(off/false). * * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será exibida quando o campo estiver ligado(on/true). * * @default `false` */ invalidValue: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura de 16px (disponível apenas para acessibilidade AA). * - `medium`: altura de 24px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` * */ set size(value: string); get size(): string; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; private readonly el; private readonly injectOptions; private control; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * 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 { PoSwitchComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild(PoSwitchComponent, { static: true }) switch: PoSwitchComponent; * * focusSwitch() { * this.switch.focus(); * } * ``` */ focus(): void; onBlur(): void; getLabelPosition(): "right" | "left"; onKeyDown(event: any): void; changeValue(value: any): void; eventClick(): void; onWriteValue(value: any): void; validate(control: AbstractControl): ValidationErrors | null; ngAfterViewInit(): void; private setControl; mapSizeToIcon(size: string): string; getErrorPattern(): string; hasInvalidClass(): boolean; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; /** * 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 * * ``` * ```typescript * onKeyDown(event: KeyboardEvent, inp: PoSwitchComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_value: any; static ngAcceptInputType_formatModel: any; static ngAcceptInputType_hideLabelStatus: any; static ngAcceptInputType_loading: any; } declare class PoSwitchModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * O componente `po-dropdown` pode ser utilizado como um agrupador de ações e / ou opções. * * > Caso não haja configuração de rotas em sua aplicação, se faz necessário importar o `RouterModule` * no módulo principal para o correto funcionamento deste componente: * * ``` * import { RouterModule } from '@angular/router'; * * @NgModule({ * imports: [ * ... * RouterModule.forRoot([]), * PoModule * ], * declarations: [ * AppComponent * ], * exports: [], * providers: [], * bootstrap: [ * AppComponent * ] * }) * export class AppModule { } * ``` * > Para maiores dúvidas referente à configuração de rotas, acesse em nosso portal /Guias /Começando * [/Configurando as rotas do po-menu](/guides/getting-started). * * #### 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)` | * | `--color` | Cor principal do dropdown | `var(--color-action-default)` | * | `--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` | * | **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)` | * */ declare class PoDropdownBaseComponent { /** Adiciona um rótulo ao `dropdown`. */ label: string; icon: string; open: boolean; private _actions; private _disabled; private _size?; /** Lista de ações que serão exibidas no componente. */ set actions(value: Array); get actions(): Array; /** * @optional * * @description * * Desabilita o campo. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do button como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do button como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoDropdownBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoDropdownComponent extends PoDropdownBaseComponent { private renderer; private changeDetector; dropdownRef: ElementRef; popupRef: any; private clickoutListener; private resizeListener; onKeyDown(event: any): void; toggleDropdown(): void; private checkClickArea; private hideDropdown; private initializeListeners; private onScroll; private isDropdownClosed; private removeListeners; private showDropdown; private wasClickedOnDropdown; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-dropdown. */ declare class PoDropdownModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoSearchComponent * * @description * * Interface que define as opções que serão exibidas no dropdown do `po-search`, ao usar a propriedade `p-filter-select`. */ interface PoSearchFilterSelect { /** Descrição exibida nas opções da lista. */ label: string; /** Valores que serão atribuídos ao `p-filter-keys` */ value: Array | string; } /** * @usedBy PoSearchComponent * * @description * * Interface que define as opções que serão exibidas na lista ao procurar do `po-search`. */ interface PoSearchOption { /** * @optional * * @description * * Descrição exibida nas opções da lista. * * > Caso não seja definida será assumido o valor definido na propriedade `value`. */ label?: string; /** Valor do objeto que será atribuído ao *model*. */ value: string | number; } /** * @usedBy PoSearchComponent * * @description * * Interface para definição das literais usadas no `po-search`. */ interface PoSearchLiterals { /** Texto exibido como *placeholder* no campo de busca. */ search?: string; /** Texto alternativo (aria-label) para o botão de limpar o campo de busca, usado por leitores de tela. */ clean?: string; /** * Texto exibido no dropdown de tipo de filtro, representando todos os tipos disponíveis. * * > Exibido apenas quando a propriedade `p-filter-select` estiver habilitada. */ all?: string; /** * Texto alternativo (aria-label) para a palavra "de" no contador de resultados (ex: "Resultado 1 de 4"). * * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada. * */ of?: string; /** * Texto alternativo (aria-label) para navegação até o próximo resultado da busca. * * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada. */ next?: string; /** * Texto alternativo (aria-label) para navegação até o resultado anterior da busca. * * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada. */ previous?: string; /** * Texto alternativo (aria-label) para a label "Resultado" que acompanha o contador. * * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada. */ result?: string; /** * Texto exibido na ação do rodapé da lista de resultados. */ footerActionListbox?: string; /** * Texto exibido como *placeholder* na lista de resultados. */ placeholderListbox?: string; } /** * @usedBy PoSearchComponent * * @description * * Interface que define o resumo de localização do filtro `p-filter-locate`. */ interface PoSearchLocateSummary { /** Índice atual da ocorrência localizada. */ currentIndex: number; /** Total de ocorrências encontradas. */ total: number; } type searchMode = 'action' | 'trigger' | 'locate' | 'execute'; /** * @description * * O componente search, também conhecido como barra de pesquisa, é utilizado para ajudar os usuários a localizar um determinado conteúdo. * * Normalmente localizado no canto superior direito, junto com o ícone de lupa, uma vez que este ícone é amplamente reconhecido. * * #### Boas práticas * * Foram estruturados os padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência * aos usuários. Portanto, é de extrema importância que, ao utilizar este componente, as pessoas responsáveis por seu * desenvolvimento considerem os seguintes critérios: * - Utilize labels para apresentar resultados que estão sendo exibidos e apresente os resultados mais relevantes * primeiro. * - Exiba uma mensagem clara quando não forem encontrados resultados para busca e sempre que possível ofereça outras * sugestões de busca. * - Mantenha o texto original no campo de input, que facilita a ação do usuário caso queira fazer uma nova busca com * alguma modificação na pesquisa. * - Caso seja possível detectar um erro de digitação, mostre os resultados para a palavra "corrigida", isso evita a * frustração de não obter resultados e não força o usuário a realizar uma nova busca. * - Quando apropriado, destaque os termos da busca nos resultados. * - A entrada do campo de pesquisa deve caber em uma linha. Não use entradas de pesquisa de várias linhas. * - Recomenda-se ter apenas uma pesquisa por página. Se você precisar de várias pesquisas, rotule-as claramente para * indicar sua finalidade. * - Se possível, forneça sugestões de pesquisa, seja em um helptext ou sugestão de pesquisa que é um autocomplete. Isso * ajuda os usuários a encontrar o que estão procurando, especialmente se os itens pesquisáveis forem complexos. * * #### 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: * - Permitir a interação via teclado (2.1.1: Keyboard (A)); * - Alteração entre os estados precisa ser indicada por mais de um elemento além da cor (1.4.1: 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 do campo | `var(--font-family-theme)` | * | `--font-size` | Tamanho da fonte do campo | `var(--font-size-default)` | * | `--text-color-placeholder` | Cor do texto no placeholder | `var(--color-neutral-light-30)` | * | `--color` | Cor das bordas | `var(--color-neutral-dark-70)` | * | `--border-radius` | Raio das bordas | `var(--border-radius-md)` | * | `--background` | Cor de background | `var(--color-neutral-light-05)` | * | `--text-color` | Cor do texto editável | `var(--color-neutral-dark-90)` | * | `--color-clear` | Cor do ícone close | `var(--color-action-default)` | * | `--color-controls` | Cor dos ícones de controle do mode location | `var(--color-action-default)` | * | `--transition-property` | Atributo da transição | `all` | * | `--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(--timing-standart)` | * | **Icon** | | | * | `--color-icon-read` | Cor do ícone de busca no modo action | `var(--color-neutral-dark-70)` | * | `--color-icon` | Cor do ícone de busca no modo trigger | `var(--color-action-default)` | * | **Hover** | | | * | `--color-hover` | Cor das bordas no estado hover | `var(--color-action-hover)` | * | `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` | * | **Focused** | | | * | `--color-focused` | Cor das bordas no estado de focus | `var(--color-action-default)` | * | `--outline-color-focused` | Cor do outline no 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)` | * */ declare class PoSearchBaseComponent { protected language: string; private _literals?; private _ariaLabel?; private _filterSelect?; private _size?; private _keysLabel?; private _disabled?; private _loading; /** * @optional * * @description * * Define um aria-label para o po-search. * * > Devido o componente não possuir uma label assim como outros campos de texto, o `aria-label` é utilizado para * acessibilidade. */ set ariaLabel(value: string); get ariaLabel(): string; /** * @optional * * @description * * Desabilita o po-search e não permite que o usuário interaja com o mesmo. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @description * * Define os nomes das propriedades do objeto que serão utilizados para busca em `p-items`. Cada valor definido no * array será considerado durante a apresentação e filtragem dos itens. * Exemplo de uso: * ```typescript * const filterKeys: Array = ['name', 'gender', 'planet', 'father']; * ``` * * > Esta propriedade é ignorada quando utilizado com `p-filter-select` e incompatível com a propriedade * `p-search-type` do tipo `locate`. */ filterKeys: Array; /** * @description * * Habilita um seletor de filtros à esquerda do campo, permitindo a aplicação de filtros agrupados na busca ou sobre * os itens fornecidos em `p-items`. Automaticamente adiciona a opção **Todos**, com um mapeamento de todas as opções passadas. * * Exemplo de uso: * ```typescript * const filterSelect = [ * { label: 'personal', value: ['name', 'email', 'nickname'] }, * { label: 'address', value: ['country', 'state', 'city', 'street'] }, * { label: 'family', value: ['father', 'mother', 'dependents'] } * ]; * ``` * * > Ao ser habilitada, a propriedade `p-filter-keys` será ignorada. Esta propriedade é incompatível com a propriedade * `p-search-type` do tipo `locate`. */ set filterSelect(values: Array); get filterSelect(): Array; /** * @optional * * @description * * Define o modo de pesquisa utilizado no campo de busca. Os valores permitidos são definidos pelo enum * **PoSearchFilterMode**. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. * * @default `startsWith` */ filterType: PoSearchFilterMode; /** * @optional * * @description * * Permite customizar o ícone de busca que acompanha o campo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones PO UI](https://po-ui.io/icons), conforme exemplo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca * esteja carregada no projeto: * ``` * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` */ icon: string | TemplateRef; id: string; /** * @optional * * @description * * Lista de itens que serão utilizados para pesquisa. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. */ items: Array; /** * @optional * * @description * * Objeto com as literais usadas no `po-search`, permitindo personalizar os textos exibidos no componente. * * Para utilizar basta passar a literal que deseja customizar: * * ``` * const customLiterals: PoSearchLiterals = { * search: 'Pesquisar', * clean: 'Limpar', * }; * ``` * * E para carregar a literal customizada, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do [`PoI18nService`](/documentation/po-i18n) ou * do browser. */ set literals(value: PoSearchLiterals); get literals(): PoSearchLiterals; /** * @optional * * @description * * Define os valores do contador exibido ao usar a propriedade `p-search-type` do tipo `locate`, indicando a posição * atual e o total de ocorrências encontradas. * Exemplo de uso: * ```ts * locateSummary: PoSearchLocateSummary = { currentIndex: 0, total: 5 }; * ``` * * > Compatível com a propriedade `p-search-type` do tipo `locate`. */ locateSummary: PoSearchLocateSummary; /** * @optional * * @description * Nome e identificador do campo. * */ name: string; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ noAutocomplete: boolean; /** * @optional * * @description * * Determina a forma de realizar a pesquisa no componente. Valores aceitos: * - `action`: Realiza a busca a cada caractere digitado. * - `trigger`: Realiza a busca ao pressionar `enter` ou clicar no ícone de busca. * - `locate`: Modo manual. Exibe botões e contador, mas não executa buscas — controle é do desenvolvedor. * - `execute`: Executa uma ação ou realiza um redirecionamento ao selecionar um item no `listbox`. * Para este tipo, é necessário informar as propriedades `action` ou `url` nos itens definidos em `p-items`. * * @default `action` */ type: searchMode; /** * @optional * * @description * * Exibe uma lista (auto-complete) com as opções definidas em `p-filter-keys` ou `p-filter-select` enquanto realiza * uma busca, respeitando o `p-filter-type` como modo de pesquisa. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. * * @default `false` */ showListbox?: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * * Define os nomes das propriedades do objeto que serão exibidos como rótulos (labels) no `listbox` quando a propriedade * `p-show-listbox` estiver habilitada. * * Deve ser informado um array de strings contendo até **3 propriedades**. * * Exemplo de uso: * ```ts * keysLabel: Array = ['nome', 'email', 'country']; * ``` */ set keysLabel(value: Array); get keysLabel(): Array; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do model. */ changeModel: EventEmitter; /** * @optional * * @description * * Pode ser informada uma função que será disparada quando houver alterações nos filtros. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. */ filter: EventEmitter; /** * @optional * * @description * * Pode ser informada uma função que será disparada quando houver alterações no input. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. */ filteredItemsChange: EventEmitter; /** * @optional * * @description * * Evento emitido quando o campo de entrada (input) recebe foco. */ focusEvent: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Pode ser informada uma função que será disparada quando houver click no listbox. * * > Incompatível com a propriedade `p-search-type` do tipo `locate`. */ listboxOnClick: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar no controle "Próximo resultado". * * > Compatível com a propriedade `p-search-type` do tipo `locate`. */ locateNext: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar no controle "Resultado anterior". * * > Compatível com a propriedade `p-search-type` do tipo `locate`. */ locatePrevious: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar no botão de ação exibido no rodapé do `listbox`. * O texto exibido pode ser configurado por meio do literal `footerActionListbox`. */ footerAction: EventEmitter; constructor(languageService: PoLanguageService); ensureFilterSelectOption(values: any): any[]; mapSizeToIcon(size: string): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_noAutocomplete: any; static ngAcceptInputType_showListbox: any; } /** * @docsExtends PoSearchBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoSearchComponent extends PoSearchBaseComponent implements OnInit, OnDestroy, OnChanges { languageService: PoLanguageService; protected renderer: Renderer2; protected changeDetector: ChangeDetectorRef; protected controlPosition: PoControlPositionService; private clickoutListener; private eventResizeListener; private _locateCounter; set locateCounter(element: ElementRef); get locateCounter(): ElementRef; poSearchInput: ElementRef; poListboxContainerElement: ElementRef; poListboxElement: ElementRef; poListbox: PoListBoxComponent; basePaddingRightSmall: number; basePaddingRightMedium: number; dynamicPaddingRight: number; listboxFilteredItems: Array; filteredItems: Array; listboxOpen: boolean; shouldMarkLetters: boolean; isFiltering: boolean; isInputFocused: boolean; listboxItemclicked: boolean; showSearchLocateControls: boolean; showNoResults: boolean; locateCounterResize: ResizeObserver; searchFilter: {}; searchFilterSelectLabel: string; searchFilterSelectActions: Array; idSearchButtonClean: string; protected showFooterActionListbox: boolean; protected showSeparator: boolean; protected placeholderListbox: string | null; protected modelSelected: string; constructor(); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; private configureSearchModeExecute; ngOnDestroy(): void; clearSearch(): void; onCleanKeydown(event: KeyboardEvent): void; onEnterKey(event: any): void; onSearchChange(searchText: string, activated: boolean, buttonClick?: boolean): void; private updateFilteredItems; private getFilteredItems; private itemMatchesFilter; getListboxFilteredItems(searchText: string): any[]; private filterValue; get listboxItems(): { label: string; value: string; }[]; get autocomplete(): string; onCloseListbox(): void; onListboxClick(option: PoSearchOption | any, event?: any): void; onBlur(): void; onFocus(): void; onInputHandler(value: string): void; onKeyDown(event?: KeyboardEvent): void; private focusItem; private setContainerPosition; private adjustContainerPosition; private openListbox; closeListbox(): void; clickedOutsideInput(event: MouseEvent): void; private initializeListeners; private removeListeners; private updatePaddingRightLocate; private updateShowSearchLocateControls; private readonly onScroll; getInputValue(): any; createDropdownFilterSelect(): void; isSelected(filterOption: PoSearchFilterSelect): boolean; changeFilterSelect(filterOption: PoSearchFilterSelect, focus?: boolean): void; handlerFooterActionListbox(): void; private openListboxFooterAction; private handlerPlaceholderListbox; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-search. */ declare class PoSearchModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * Módulo do componente po-table */ declare class PoTableModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoChartComponent * * @description * * Interface que define as propriedades de exibição dos rótulos das séries no `po-chart`. * */ interface PoChartDataLabel { /** * @optional * * @description * * Indica se o texto associado aos pontos da série deve permanecer fixo na exibição do gráfico. * * - Quando definido como `true`: * - O *tooltip* não será exibido. * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa. * * > Disponível para os tipo de gráfico `PoChartType.Line`, `PoChartType.Area`, `PoChartType.Column`, `PoChartType.Bar e PoChartType.Radar`. */ fixed?: boolean; } /** * @usedBy PoChartComponent * * @description * * Interface para definição dos literais usadas no `po-chart`. */ interface PoChartLiterals { /** * @optional * * @description * * Texto exibido para a ação de download de dados em formato CSV. */ downloadCSV?: string; /** * @optional * * @description * * Texto do botão para exportar o gráfico em CSV. */ exportCSV?: string; /** * @optional * * @description * * Texto do botão para exportar o gráfico como imagem JPG. */ exportJPG?: string; /** * @optional * * @description * * Texto do botão para exportar o gráfico como imagem PNG. */ exportPNG?: string; /** * @optional * * @description * * Texto da primeira coluna da tabela quando o gráfico é do tipo `Gauge`. */ value?: string; /** * @optional * * @description * * Texto dos títulos das colunas `Gauge` e não possui label. */ item?: string; /** * @optional * * @description * * Texto da primeira coluna da tabela em todos os gráficos com exceção do `Bar` e `Gauge`. */ serie?: string; /** * @optional * * @description * * Texto da primeira coluna da tabela no gráfico do tipo `Bar`. */ category?: string; } /** * @usedBy PoChartComponent * * @description * * Interface para configurações dos indicadores do gráfico `radar`. */ interface PoChartIndicatorOptions { /** * @optional * * @description * * Cor do texto do indicator. * Recomendamos avaliar o contraste da cor definida para garantir melhor acessibilidade. * * > Nome da cor, hexadecimal ou RGB. */ color?: string; /** * @optional * * @description * * Nome do indicator. */ name?: string; /** * @optional * * @description * * Valor máximo do indicator. * * A propriedade `max` não impede que a série contenha valores superiores ao máximo definido. * Caso isso ocorra, os valores poderão extrapolar os limites do gráfico. */ max?: number; /** * @optional * * @description * * Valor mínimo do indicator, com valor padrão de 0. * * A propriedade `min` não impede que a série contenha valores inferiores ao mínimo definido. * Caso isso ocorra, os valores serão apresentados ao centro do gráfico. */ min?: number; } /** * @usedBy PoChartComponent * * @description * * *Interface* para configurações do gráfico `radar`. */ interface PoChartRadarOptions { /** * @optional * * @description * * Define as configurações dos indicadores do gráfico, como nome, cor, valor mínimo e valor máximo. */ indicator?: Array; /** * @optional * * @description * * Define o formato da grid, podendo ser exibida como polígono ou círculo. * * @default `polygon` */ shape?: 'polygon' | 'circle'; /** * @optional * * @description * * Define o efeito zebrado na grid. * * @default 'false' */ splitArea?: boolean; } /** * @usedBy PoChartComponent * * @description * * *Enum* `PoChartLabelFormat` para especificação dos tipos de formatação do eixo de valor no gráfico. */ declare enum PoChartLabelFormat { /** * 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). */ Number = "number", /** * 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: * ``` * import { LOCALE_ID } from '@angular/core'; * import { registerLocaleData } from '@angular/common'; * import localePt from '@angular/common/locales/pt'; * * registerLocaleData(localePt); * * @NgModule({ * providers: [ * { provide: LOCALE_ID, useValue: 'pt-BR' }, * { provide: DEFAULT_CURRENCY_CODE, useValue: 'BRL' } * ] * }) * export class AppModule { } * ``` */ Currency = "currency" } /** * @usedBy PoChartComponent * * @description * * *Interface* que define os eixos do grid. */ interface PoChartAxisOptions { /** * Define a quantidade de linhas exibidas no grid. * Para os gráficos dos tipos `Area`, `Line` e `Column`, as linhas modificadas serão as horizontais (eixo X). * Já para gráficos do tipo `Bar`, tratará as linhas verticais (eixo Y). * * A propriedade contém as seguintes diretrizes para seu correto funcionamento: * - Quantidade padrão de linhas: '5'; * - Quantidade mínima permitida: '2'; */ gridLines?: number; /** * Define o alcance de valor máximo exibido no eixo Y. * Caso não seja definido valor, o valor de alcance máximo exibido será o maior existente entre as séries. * * > Esta definição não deve refletir na plotagem das séries. Os valores máximos e mínimos encontrados nas séries serão as bases para seus alcance. */ maxRange?: number; /** * Define o alcance mínimo exibido no eixo Y. * Caso não seja definido valor, o valor-base de alcance mínimo será o menor encontrado entre as séries. * Se houver valores negativos nas séries, o menor deles será a base mínima. * * > Esta definição não deve refletir na plotagem das séries. Os valores máximos e mínimos encontrados nas séries serão as bases para seus alcance. */ minRange?: number; /** * @optional * * @description * * Define o tipo do label e a formatação exibida no eixo de valor. */ labelType?: PoChartLabelFormat; /** * @optional * * @description * * Permite aumentar ou diminuir o espaço inferior do gráfico. * */ paddingBottom?: number; /** * @optional * * @description * * Permite aumentar ou diminuir o espaço esquerdo do gráfico. * * @default `16` */ paddingLeft?: number; /** * @optional * * @description * * Permite aumentar ou diminuir o espaço direito do gráfico. * * @default `32` */ paddingRight?: number; /** * @optional * * @description * * Define o ângulo de rotação da legenda do gráfico. * Aceita valores entre -90 e 90 graus, onde: * - Valores negativos giram a legenda para a esquerda. * - Valores positivos giram a legenda para a direita. * * Se não for definido, a legenda será exibida sem rotação. */ rotateLegend?: number; /** * @optional * * @description * * Exibe a linha do eixo X * * @default `false` */ showXAxis?: boolean; /** * @optional * * @description * * Exibe a linha do eixo Y * * @default `true` */ showYAxis?: boolean; /** * @optional * * @description * * Exibe a linha de detalhes que acompanha o mouse * * @default `false` */ showAxisDetails?: boolean; } /** * @usedBy PoChartComponent * * @description * * *Interface* para configuração das ações disponíveis no cabeçalho. */ interface PoChartHeaderOptions { /** * @optional * * @description * * Define se o botão responsável por expandir o gráfico deve ser ocultado. * * @default `false` */ hideExpand?: boolean; /** * @optional * * @description * * Define se o botão responsável por exibir os detalhes do gráfico em formato de tabela deve ser ocultado. * * @default `false` */ hideTableDetails?: boolean; /** * @optional * * @description * * Define se a opção de exportação do gráfico em formato CSV deve ser ocultada. * * @default `false` */ hideExportCsv?: boolean; /** * @optional * * @description * * Define se a opção de exportação do gráfico nos formatos JPG e PNG deve ser ocultada. * * @default `false` */ hideExportImage?: boolean; } /** * @usedBy PoChartComponent * * @description * * *Interface* para configurações dos elementos do gráfico. */ interface PoChartOptions { [key: string]: any; /** * @optional * * @description * * Define um objeto do tipo `PoChartAxisOptions` para configuração dos eixos. */ axis?: PoChartAxisOptions; /** * @optional * * @description * * Define um objeto do tipo `PoChartHeaderOptions` para configurar a exibição de botões no cabeçalho do gráfico. */ header?: PoChartHeaderOptions; /** * @optional * * @description * * Permite aplicar zoom ao gráfico com o scroll do mouse; * * @default `false` */ dataZoom?: boolean; /** * @optional * * @description * * Define se os pontos do gráfico serão preenchidos. * Quando true, os pontos são totalmente coloridos. Quando false, apenas a borda dos pontos será exibida, mantendo o interior transparente. * * > Esta propriedade é utilizável para os gráficos dos tipos `Area`, `Line` e `Radar`. * > Para o tipo `Radar`, o valor padrão é `true`. * * @default `false` */ fillPoints?: boolean; /** * @optional * * @description * * Define se as séries terão sua área preenchida. * * > Esta propriedade tem precedência sobre a definição de `areaStyle` em cada série, `fillpoints` não funciona quando `areaStyle` está definido como `true`. * * @default `false` */ areaStyle?: boolean; /** * @optional * * @description * * Valor que permite customizar o nome da `TH` da primeira coluna da tabela descritiva. * * @default `Série` */ firstColumnName?: string; /** * @optional * * @description * * Define o diâmetro, em valor percentual entre `0` e `100`, da área central para gráficos do tipo `donut`. * Se passado um percentual que torne a espessura do gráfico menor do que `40px`, * os textos internos do gráficos serão ocultados para que não haja quebra de layout. */ innerRadius?: number; /** * @optional * * @description * * Define borda entre os itens do gráfico. Válido para os gráficos `Donut`, `Pie`. * > Valores válidos entre 0 e 100, * * @default `0` */ borderRadius?: number; /** * @optional * * @description * * Aplica texto centralizado customizado nos gráficos de `Donut`. */ textCenterGraph?: string; /** * @optional * * @description * * Define a exibição da legenda do gráfico. Valor padrão é `true` * * @default `true` */ legend?: boolean; /** * @optional * * @description * * Define o alinhamento horizontal da legenda. * * > Propriedade inválida para o gráfico do tipo `Gauge`. * * @default `center` */ legendPosition?: 'left' | 'center' | 'right'; /** * @optional * * @description * * Define a posição vertical da legenda no gráfico. * > Quando utilizada com o valor `top`, recomenda-se configurar também a propriedade `bottomDataZoom` caso o `dataZoom` esteja habilitado, para evitar sobreposição entre os elementos. * > Propriedade inválida para o gráfico do tipo `Gauge`. * * @default `bottom` */ legendVerticalPosition?: 'top' | 'bottom'; /** * @optional * * @description * * Define a distância inferior do componente DataZoom. * * Esta propriedade aceita os seguintes valores: * * - `false` (padrão): não aplica ajustes. * * - `true`: aplica um valor automático com base no posicionamento da legenda: * - `8` pixels quando o DataZoom estiver habilitado e não houver legenda, ou quando a legenda estiver posicionada no topo. * - `32` pixels quando o DataZoom estiver habilitado e a legenda estiver posicionada na parte inferior. * * - `number`: aplica o valor numérico informado como distância inferior. Este valor tem prioridade sobre a configuração booleana. * * > Esta configuração é considerada apenas quando o DataZoom estiver habilitado (`dataZoom: true`). * * @default `false` */ bottomDataZoom?: boolean | number; /** * @optional * * @description * * Define como o gráfico será renderizado. * * > Recomenda-se não modificar o valor da propriedade `rendererOption` após a inicialização da aplicação, uma vez que tal alteração pode ocasionar comportamentos inconsistentes na renderização do gráfico. * * @default `canvas` */ rendererOption?: 'canvas' | 'svg'; /** * @optional * * @description * * Transforma os gráficos do tipo `Donut` ou `Pie` num gráfico de área polar. * * > Válido para os gráficos `Donut` e `Pie`. * * @default `false` */ roseType?: boolean; /** * @optional * * @description * * Exibe os valores das propriedades `from` e `to` no gráfico do no texto da legenda entre parênteses. * * > Válido para gráfico do tipo `Gauge`. * */ showFromToLegend?: boolean; /** * @optional * * @description * * Define a exibição do ponteiro. * * > Válido para gráfico do tipo `Gauge`. * * @default `true` */ pointer?: boolean; /** * @optional * * @description * * Define a descrição do gráfico exibido acima do gráfico. * */ descriptionChart?: string; /** * @optional * * @description * * Agrupa todas as séries numa única coluna ou barra por categoria. Essa propriedade sobrescreve a propriedade `stackGroupName` da interface `PoChartSerie` * * > Válido para gráfico do tipo `Column` e `Bar`. * * > Essa propriedade habilita a propriedade `p-data-label` por padrão, podendo ser desabilitada passando `[p-data-label]={ fixed: false }`. * * @default `false` */ stacked?: boolean; /** * @optional * * @description * * Define um subtítulo para o Gauge. Indicamos um subtítulo pequeno, com uma quantidade máxima de 32 caracteres na altura padrão. * * > Válido para gráfico do tipo `Gauge`. * */ subtitleGauge?: string; /** * @optional * * @description * * Esconde a estilização do container em volta do gráfico. * * > Válido para gráfico do tipo `Gauge`. * * @default `false` */ showContainerGauge?: boolean; } /** * @usedBy PoChartComponent * * @description * * *Enum* `PoChartType` para especificação dos tipos de gráficos. */ declare enum PoChartType { /** * 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. * Similar ao gráfico de linha, diferencia-se pela área localizada abaixo da linha das séries, que é preenchida com cores para um destaque explícita da evolução e mudança dos dados. */ Area = "area", /** * Exibe os dados em formato de rosca, dividindo em partes proporcionais. */ Donut = "donut", /** * Exibe os dados em formato circular, dividindo proporcionalmente em fatias. */ Pie = "pie", /** * 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. * Pode ser utilizado em conjunto com gráficos dos tipos `column` e `area`, definindo-se o tipo através da propriedade `PoChartSerie.type`. */ Line = "line", /** * 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. * As séries são exibidas lado-a-lado, com um pequeno espaço entre elas. */ Column = "column", /** * 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. */ Bar = "bar", /** * Gráfico que provê a representação de um valor através de um arco. Possui dois tipos de tratamentos: * - É possível demonstrar um dado percentual simples em conjunto com uma descrição resumida em seu interior; * - Para um demonstrativo mais elaborado, consegue-se definir alcances em cores, um breve texto descritivo e um ponteiro indicando o valor desejado. */ Gauge = "gauge", /** * Tipo de gráfico utilizado para visualizar e comparar o desempenho de diferentes itens em múltiplas categorias. */ Radar = "radar" } /** * @usedBy PoChartComponent * * @description * * Interface das series dinâmicas do `po-chart` que possibilita desenhar gráficos dos tipos `area`, `bar`, `column`, `line`, `donut`, `pie` e `radar` */ interface PoChartSerie { /** * @description * * Determina a cor da série. As maneiras de customizar o *preset* padrão de cores são: * * Hexadecimal, por exemplo `#c64840`; * * RGB, por exemplo `rgb(0, 0, 165)` * * O nome da cor, por exemplo `blue`; * * Variáveis CSS, por exemplo `var(--color-01)`; * * Usando uma das cores do tema do PO: * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * - A partir da 13° série o valor da cor será preta caso não seja enviada uma cor customizada. */ color?: string; /** * @optional * * @description * * Define a lista de valores para a série. Os tipos esperados são de acordo com o tipo de gráfico: * - Para gráficos dos tipos `donut` e `pie`, espera-se *number*; * - Para gráficos dos tipos `area`, `bar`, `column`, `line` e `radar`, espera-se um *array* de `data`. * * > Se passado valor `null` em determinado item da lista, a iteração irá ignorá-lo. */ data?: number | Array; /** * @optional * * @description * * Define se a série terá sua área preenchida. * * > Propriedade válida para gráficos do tipo `Radar`, `fillpoints` não funciona quando `areaStyle` está definido como `true`. */ areaStyle?: boolean; /** Rótulo referência da série. */ label?: string; /** * @optional * * @description * * Define o texto que será exibido na tooltip ao passar o mouse por cima das séries do *chart*. * * Formatos aceitos: * * - **string**: pode conter marcadores dinâmicos e HTML simples. * - Marcadores disponíveis: * - `{name}` → Nome do item/categoria. * - `{seriesName}` → Nome da série. * - `{value}` → Valor correspondente. * * - **function**: função que recebe o objeto `params` e deve retornar uma *string* com o conteúdo da tooltip. * * > É possível utilizar marcação HTML simples (``, ``, `
`, `
`, etc.) que será interpretada via `innerHTML`. * * > Formatação customizada (será convertido internamente para HTML): * - `\n` → quebra de linha (`
`). * - `**texto**` → negrito (``). * - `__texto__` → itálico (``). * * > Caso não seja informado um valor para o *tooltip*, será exibido da seguinte forma: * - `donut`, `label`: valor proporcional ao total em porcentagem. * - `radar`: nome da série, o nome do indicator e os valores correspondentes. * - `area`, `bar`, `column`, `line` e `pie`: `label`: `data`. * * ### Exemplos: * * **Usando string com placeholders:** * ```ts * tooltip: 'Ano: {name}
Série: {seriesName}
Valor: {value}' * ``` * * **Usando função de callback:** * ```ts * tooltip = (params) => { * return `Ano: ${params.name}
Valor: ${params.value}`; * } * ``` */ tooltip?: string | ((params: any) => string); /** * @optional * * @description * * 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: * - Serie A: `{ type: ChartType.Column, data: ... }`; * - Série B: `{ type: ChartType.Line, data: ... }`. * * Se tanto `p-type` quanto `{ type }` forem ignorados, o padrão gerado pelo componente será: * - `column`: se `data` receber `Array`; * - `pie`: se `data` for *number*. * * > Se utilizada a propriedade `p-type`, dispensa-se a definição desta propriedade. Porém, se houver declaração para ambas, o valor `{type}` da primeira série sobrescreverá o valor definido em `p-type`. * * > O componente só exibirá as séries que tiverem o mesmo `type` definido, exceto para mesclagem para tipos `column` e `line`. */ type?: PoChartType; /** * Alcance inicial da cor. * * > Propriedade válida para gráfico do tipo `Gauge`. */ from?: number; /** * Alcance final da cor. * * > Propriedade válida para gráfico do tipo `Gauge`. */ to?: number; /** * @optional * * @description * * Agrupa as séries em barras ou colunas que receberem o mesmo `stackGroupName`. Exemplo: * - Serie A: `{ data: 500, stackGroupName: 'group1' ... }`; * - Série B: `{ data: 200, stackGroupName: 'group1' ... }`. * - Série C: `{ data: 100, stackGroupName: 'group2' ... }`. * - Série D: `{ data: 400, stackGroupName: 'group2' ... }`. * * Nesse caso será criado duas barras ou colunas com duas series agrupadas em cada uma por categoria. * > Válido para gráfico do tipo `Column` e `Bar`. Essa propriedade é ignorada caso a propriedade `stacked` da interface `PoChartOptions` esteja como `true`. * * > Essa propriedade habilita a propriedade `p-data-label` por padrão, podendo ser desabilitada passando `[p-data-label]={ fixed: false }`. */ stackGroupName?: string; } /** * @description * * 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)` | * | `--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)` | */ declare abstract class PoChartBaseComponent implements OnInit { private _literals?; private setHeightGauge; private readonly language; id: string; /** Define o título do gráfico. */ title?: string; /** * @description * * Define os elementos do gráfico que serão criados dinamicamente. */ series: Array; /** * @description * * Define o valor do gráfico do tipo `Gauge` quando utliza as propriedades `From` `To`. */ valueGaugeMultiple?: number; /** * @optional * * @description * * Define os valores utilizados na construção das categorias do gráfico. * * Para gráficos dos tipos *bar*, *area*, *column* e *line*, representa os nomes das categorias exibidas no eixo. * * Para gráficos do tipo *radar*, representa a configuração dos indicadores, formato (shape), áreas de divisão (splitArea) * e demais opções específicas do gráfico `Radar`. * * > Caso nenhum valor seja informado, será utilizado um hífen como categoria * correspondente para cada série. * * > Gráficos do tipo bar dimensionam sua área considerando a largura do maior texto * da categoria, sendo recomendável utilizar rótulos curtos para facilitar a leitura. */ categories?: Array | PoChartRadarOptions; /** * @optional * * @description * * 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. */ customActions?: Array; /** * @optional * * @description * * Objeto com as configurações usadas no `po-chart`. * * É possível, por exemplo, definir as configurações de exibição das legendas, * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column`, `bar` e `radar` da seguinte forma: * * ``` * chartOptions: PoChartOptions = { * legend: true, * axis: { * minRange: 0, * maxRange: 100, * gridLines: 5, * }, * }; * ``` */ options?: PoChartOptions; /** * @optional * * @description * * Permite configurar as propriedades de exibição dos rótulos das séries no gráfico. * * Essa configuração possibilita fixar os valores das séries diretamente no gráfico, alterando o comportamento visual: * - Os valores das séries permanecem visíveis, sem a necessidade de hover. * - O *tooltip* não será exibido. * - Os marcadores (*bullets*) terão seu estilo ajustado. * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa. * * > Disponível para gráficos do tipo `line` e `radar`. * * #### Exemplo de utilização: * ```typescript * dataLabel: PoChartDataLabel = { * fixed: true, * }; * ``` */ dataLabel?: PoChartDataLabel; /** * @optional * * @description * * Define a altura do gráfico em px. * * > No caso do tipo `Gauge`, o valor padrão é `300` e esse é seu valor minimo aceito. Nos outros tipos, o valor mínimo aceito nesta propriedade é 200. * * @default `400` */ set height(value: number); get height(): number; private _height; /** * @optional * * @description * * Define o tipo de gráfico. * * É possível também combinar gráficos dos tipos linha e coluna. Para isso, opte pela declaração de `type` conforme a interface `PoChartSerie`. * * > Note que, se houver declaração de tipo de gráfico tanto em `p-type` quanto em `PochartSerie.type`, o valor `{ type }` da primeira série anulará o valor definido em `p-type`. * * Se não passado valor, o padrão será relativo à primeira série passada em `p-series`: * - Se `p-series = [{ data: [1,2,3] }]`: será `PoChartType.Column`. * - Se `p-series = [{ data: 1 }]`: será `PoChartType.Pie`. * * > Veja os valores válidos no *enum* `PoChartType`. */ type: PoChartType; /** * @optional * * @description * * Objeto com as literais usadas no `po-chart`. * * Para utilizar basta passar a literal que deseja customizar: * * ``` * const customLiterals: PoChartLiterals = { * downloadCSV: 'Obter CSV', * }; * ``` * * E para carregar a literal customizada, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoChartLiterals); get literals(): PoChartLiterals; /** * @optional * * @description * * Evento executado quando o usuário clicar sobre um elemento do gráfico. * * O evento emitirá o seguinte parâmetro: * - *donut* e *pie*: um objeto contendo a categoria e valor da série. * - *radar*: um objeto contendo o nome da série e os valores. * - *area*, *line*, *column* e *bar*: um objeto contendo o nome da série, valor e categoria do eixo do gráfico. */ seriesClick: EventEmitter; /** * @optional * * @description * * Evento executado quando o usuário passar o *mouse* sobre um elemento do gráfico. * * O evento emitirá o seguinte parâmetro de acordo com o tipo de gráfico: * - *donut* e *pie*: um objeto contendo a categoria e valor da série. * - *radar*: um objeto contendo o nome da série e os valores. * - *area*, *line*, *column* e *bar*: um objeto contendo a categoria, valor da série e categoria do eixo do gráfico. */ seriesHover: EventEmitter; constructor(languageService: PoLanguageService); ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class PoChartGridUtils { private readonly component; isTypeDonut: boolean; textCenterDonut: {}; constructor(component: PoChartComponent); setGridOption(options: any): void; setOptionsAxis(options: any): void; setOptionDataZoom(options: any): void; setShowAxisDetails(options: any): void; setSerieTypeLine(serie: any, tokenBorderWidthMd: number, color: string): void; setSerieTypeArea(serie: any, index: number): void; setSerieTypeBarColumn(serie: any, color: string): void; setSerieTypeDonutPie(serie: any, color: string): void; setListTypeDonutPie(type: PoChartType): void; private setTextCenterDonut; private getAdjustedRadius; private normalizeToPercentage; resolvePx(size: string, selector?: string): number; private getPaddingBottomGrid; private hasTopLegendOrNoZoom; private hasBottomLegendWithZoom; private getPaddingTopGrid; private isRadarOptions; convertRadarConfig(indicators: Array): { shape: string; splitArea: boolean; indicator: { name: string; }[]; }; setListTypeRadar(): { shape: string; radius: string; splitLine: { show: boolean; lineStyle: { color: string[]; width: number; }; }; axisLine: { show: boolean; lineStyle: { color: string; width: number; }; }; splitArea: { show: boolean; areaStyle: { color: string[]; }; }; indicator: { name: any; max: any; min: any; color: any; }[]; }; setSerieTypeRadar(serie: any, tokenBorderWidthMd: number, color: string): any; setTooltipRadar(params: any): void; buildRadarTooltip(params: any): string; finalizeSerieTypeRadar(seriesUpdated: any): { type: string; data: any; }[]; } declare class PoChartGaugeUtils { private readonly component; constructor(component: PoChartComponent); setGaugeOptions(options: any, fontSizeText: any): void; setListTypeGauge(serie: any, fontSizes: { fontSizeMd: number; fontSizeLg: number; fontSizeSubtitle: number; }): any; private setPropertiesGauge; setPropertiesDefaultHeight(center: [string, string]): { radius: string; lengthPointer: string; center: [string, string]; widthSubtitle: number; }; setSerieTypeGauge(serie: any, color: string): void; private normalizeToRelativePercentage; finalizeSerieTypeGauge(serie: any): any[]; private buildGaugeAxisLineColorsWithGaps; } /** * @docsExtends PoChartBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoChartComponent extends PoChartBaseComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { el: ElementRef; private readonly currencyPipe; private readonly decimalPipe; private readonly colorService; private readonly cdr; poTooltip: QueryList; targetRef: ElementRef; chartContainer: ElementRef; tooltipText: string; originalHeight: number; originalRadiusGauge: any; chartMarginTop: string; isTypeBar: boolean; isTypeRadar: boolean; boundaryGap: boolean; listTypePieDonut: Array; itemsTypeDonut: Array; isGaugeSingle: boolean; itemsTypeGauge: Array; itemsColorTypeGauge: any[]; protected actionModal: PoModalAction; showPopup: boolean; protected itemsTable: any[]; protected columnsTable: Array; protected isExpanded: boolean; protected legendData: Array<{ name: string; color: string; }>; protected headerHeight: number; protected paddingContainerGauge: number; protected descriptionHeight: number; protected positionTooltip: string; protected tooltipTitle: any; protected tooltipDescriptionGauge: any; protected chartGridUtils: PoChartGridUtils; protected chartGaugeUtils: PoChartGaugeUtils; protected isTypeGauge: boolean; protected popupActions: Array; private chartInstance; private currentRenderer; private resizeObserver; private intersectionObserver; private hideDomEchartsDiv; private readonly vcr; get showHeader(): string | boolean; constructor(); changeTheme: (event: any) => void; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; ngOnDestroy(): void; showTooltipTitle(e: MouseEvent): void; showTooltipDescription(e: MouseEvent): void; getCSSVariable(variable: string, selector?: string): string; openModal(): Promise; toggleExpand(): void; private applyStringFormatter; private observeContainerResize; private checkShowCEcharts; private setInitialPopupActions; private setHeightProperties; private initECharts; private initEChartsEvents; private parseTooltipText; private resolveCustomTooltip; private setTooltipProperties; private setChartsProperties; private setOptions; private formatLabelOption; private setOptionLegend; private setSeries; private setSerieEmphasis; private setTypeSerie; private setTableProperties; private setTablePropertiesTypeBar; private setTablePropertiesTypeGauge; private setTablePropertiesTypeRadar; private setTableColumns; private downloadCsv; private exportImage; private exportSvgAsImage; private configureImageCanvas; private setHeaderProperties; private setPopupActions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-chart`. */ declare class PoChartModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoDisclaimerGroupComponent, PoPageListComponent * * @description * * Interface que representa o objeto `po-disclaimer`. */ interface PoDisclaimer { /** Se verdadeiro, oculta o botão para fechar o *disclaimer*. */ hideClose?: boolean; /** Texto de exibição do objeto. */ label?: string; /** Nome da propriedade vinculada ao objeto *disclaimer*. */ property?: string; /** Valor do objeto. */ value: any; } /** * @description * * O componente `po-disclaimer-group` é recomendado para manipular palavras-chave de filtros aplicados em uma pesquisa. * * À partir de dois *disclaimers* com o botão **fechar** habilitado, o componente renderiza de forma automática um novo e destacado * *disclaimer* que possibilita **remover todos**, mas que também pode ser desabilitado. * * Também é possível navegar entre os *disclaimers* através do teclado utilizando a tecla *tab* e, para remoção do *disclaimer* selecionado, * basta pressionar a tecla *enter*. Esta funcionalidade não se aplica caso a propriedade `hideClose` estiver habilitada. * * > Veja a integração destas funcionalidade no componente [po-page-list](/documentation/po-page-list). */ declare class PoDisclaimerGroupBaseComponent implements DoCheck { protected changeDetector: ChangeDetectorRef; /** Título do grupo de *disclaimers*. */ title?: string; /** * @optional * * @description * * Função que será disparada quando a lista de *disclaimers* for modificada. */ change: EventEmitter; /** * @optional * * @description * * Função que será disparada quando um *disclaimer* for removido da lista de *disclaimers* pelo usuário. * * Recebe como parâmetro um objeto conforme a interface `PoDisclaimerGroupRemoveAction`. */ remove: EventEmitter; /** * @optional * * @description * * Função que será disparada quando todos os *disclaimers* forem removidos da lista de *disclaimers* pelo usuário, * utilizando o botão "remover todos". * * Recebe como parâmetro uma lista contendo todos os `disclaimers` removidos. */ removeAll: EventEmitter; literals: any; private _disclaimers; private _hideRemoveAll; private differ; private previousDisclaimers; /** Lista de *disclaimers*. */ /** * @description * * Lista de *disclaimers*. * * Para que a lista de *disclaimers* seja atualizada dinamicamente deve-se passar uma nova referência do array de `PoDisclaimer`. * * Exemplo adicionando um *disclaimer* no array: * * ``` * this.disclaimers = [...this.disclaimers, disclaimer]; * ``` * * ou * * ``` * this.disclaimers = this.disclaimers.concat(disclaimer); * ``` */ set disclaimers(value: Array); get disclaimers(): Array; /** * @optional * * @description * * Oculta o botão para remover todos os *disclaimers* do grupo. * * > Por padrão, o mesmo é exibido à partir de dois ou mais *disclaimers* com a opção `hideClose` habilitada. * * @default `false` */ set hideRemoveAll(value: boolean); get hideRemoveAll(): boolean; constructor(differs: IterableDiffers, languageService: PoLanguageService, changeDetector: ChangeDetectorRef); ngDoCheck(): void; isRemoveAll(): boolean; onKeyPress(event: any): void; removeAllItems(): void; protected removeDisclaimer(disclaimer: any): void; protected emitChangeDisclaimers(): void; private checkChanges; private checkDisclaimers; private disclaimersAreChanged; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoDisclaimerGroupBaseComponent * * @example * * * * * * * * * * * * * * * * * */ declare class PoDisclaimerGroupComponent extends PoDisclaimerGroupBaseComponent implements AfterViewInit, OnChanges { private subscription; private el; constructor(); ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; onCloseAction(disclaimer: PoDisclaimer, event?: any): void; focusOnNextTag(indexClosed: number, clickOrEnter: string): void; handleKeyboardNavigationTag(initialIndex?: number): void; private handleArrowLeft; private handleArrowRight; private setTabIndex; private initializeTagRemoveElements; private handleKeyDown; private focusOnRemoveTag; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Este é um componente interno utilizado pelo po-disclaimer-group, se comporta como um botão e recebe uma ação para remover todos os * po-disclaimers do grupo. */ declare class PoDisclaimerRemoveComponent { /** Texto exibido. */ label?: string; /** Ação para remover todos. */ removeAllAction: EventEmitter; removeAction(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * O componente po-disclaimer é responsável por representar tags. * Seu uso é recomendado em buscas e em campos onde é necessário representar objetos selecionados, * como por exemplo, no po-multi-select. * */ declare class PoDisclaimerBaseComponent { private languageService; /** * Label que aparecerá dentro do po-disclaimer. * Quando não for definido um label será apresentada a propriedade p-value. */ label?: string; /** Valor do po-disclaimer. */ value: string; /** Nome da propriedade vinculada à este po-disclaimer. */ property?: string; disclaimerCustomWidth: number; lastDisclaimer: boolean; appendInBody: boolean; tooltipPosition: string; /** * @optional * * @description * * Evento disparado ao fechar o disclaimer. * Para este evento será passado como parâmetro um objeto com value, label e property. */ closeAction: EventEmitter; clickNumber: EventEmitter; literals: any; showDisclaimer: boolean; private _type; private _hideClose?; /** * @description * * Esta propriedade esconde o botão para fechamento do po-disclaimer, ao utilizar esta propriedade * sem passar valor a mesma é setada como false, onde o botão de fechamento está visível. * * @default false */ set hideClose(value: boolean); get hideClose(): boolean; /** * @description * * Tipo do po-disclaimer. Pode ser 'default' ou 'danger'. * * @default default * @optional */ set type(type: string); get type(): string; constructor(languageService: PoLanguageService); close(): void; getLabel(): string; setAriaLabel(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsPrivate * * @docsExtends PoDisclaimerBaseComponent * * @examplePrivate * * * * * */ declare class PoDisclaimerComponent extends PoDisclaimerBaseComponent { disclaimerContainer: ElementRef; onKeyPress(event: any): void; emitLastDisclaimer(isLast: any): void; getWidthDisclaimer(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-disclaimer. */ declare class PoDisclaimerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente po-disclaimer-group. */ declare class PoDisclaimerGroupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA. */ declare enum PoCheckboxSize { /** Define a caixa de seleção como 16px. */ Small = "small", /** Define a caixa de seleção comoc24px. */ Medium = "medium", /** Define a caixa de seleção comoc32px. */ Large = "large" } /** * @usedBy PoDatepickerComponent * * @description * * *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. */ declare enum PoDatepickerIsoFormat { /** Padrão **E8601DAw** (*yyyy-mm-dd*). */ Basic = "basic", /** Padrão **E8601DZw** (*yyyy-mm-ddThh:mm:ss+|-hh:mm*). */ Extended = "extended" } /** * Para usar o po-mask é preciso instanciar esta classe passando a máscara como * primeiro parâmetro, e no segundo parâmetro, deve se informado true, caso queira * que o model seja formatado ou false para o que o model seja limpo. */ declare class PoMask { mask: string; formatModel: boolean; initialPosition: number; finalPosition: number; pattern: string; get getPattern(): string; valueToInput: string; get getValueToInput(): string; set setValueToInput(value: string); valueToModel: string; get getValueToModel(): string; set setValueToModel(value: string); formattingEnds: boolean; constructor(mask: string, formatModel: boolean); keyup($event: any): void; setPositionNotShiftKey($event: any): void; setSelectionRange($event: any): void; keydown($event: any): void; clearRangeSelection(value: string, $event: any, isBackspace: boolean): void; click($event: any): void; blur($event: any): void; revertPositions(initialPosition: number, finalPosition: number): void; resetPositions($event: any): void; setPositions($event: any): void; changePosition($event: any, value: number): void; getPosition($event: any): void; controlFormatting(value: string): any; formatValue(value: string, mask: string): string; checkMaskBefore($event: any, position: number): void; checkMaskAfter($event: any, position: number): void; replaceOptionalNumber(mask: string): string; isFixedCharacterGuide(key: any): any; getFixedCharacterGuide(): RegExp; listValidKeys(): RegExp; isKeyValid(keyCode: any): boolean; isKeyCodeValid(keyCode: number): boolean; isKeyValidMask(key: any, keyMask: any): any; testRegex(key: any, regex: any): any; removeFormattingValue(value: string): string; hasOptionalNumber(mask: string): RegExpMatchArray; replaceMask(char: string): RegExp; getRegexFromMask(mask: string): any; } /** * @description * * 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)` | * | **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)` | * */ declare abstract class PoDatepickerBaseComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator { protected languageService: PoLanguageService; protected cd: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. * */ additionalHelpTooltip?: string; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Função executada para realizar a validação assíncrona personalizada. * Executada ao disparar o output `change`. * * @param value Valor atual preenchido no campo. * * @returns Retorna Observable com o valor `true` para sinalizar o erro `false` para indicar que não há erro. */ errorAsync: (value: any) => Observable; name: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * Mensagem apresentada quando a data for inválida ou fora do período. * * > Por padrão, esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido. * Para exibir a mensagem com o campo vazio, utilize a propriedade `p-required-field-error-message` em conjunto. */ errorPattern?: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * * @default `false` */ showErrorMessageRequired: boolean; /** * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao sair do campo. */ onblur: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do campo. */ onchange: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; offset: number; protected firstStart: boolean; protected hour: string; protected isExtendedISO: boolean; protected objMask: any; protected onChangeModel: any; protected validatorChange: any; protected onTouchedModel: any; protected shortLanguage: string; protected isInvalid: boolean; protected hasValidatorRequired: boolean; private _format?; private _isoFormat; private _maxDate; private _minDate; private _noAutocomplete?; private _placeholder?; private _loading?; private previousValue; private _size?; private subscription; private _date; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. */ set placeholder(placeholder: string); get placeholder(): string; /** Desabilita o campo. */ disabled?: boolean; set setDisabled(disabled: string); /** Torna o elemento somente leitura. */ readonly?: boolean; set setReadonly(readonly: string); /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ required?: boolean; set setRequired(required: string); /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** Habilita ação para limpar o campo. */ clean?: boolean; set setClean(clean: string); /** * @optional * * @description * * Define uma data mínima para o `po-datepicker`. */ set minDate(value: string | Date); get minDate(): string | Date; /** * @optional * * @description * * Define uma data máxima para o `po-datepicker`. */ set maxDate(value: string | Date); get maxDate(): string | Date; /** * @optional * * @description * * Formato de exibição da data. * * Valores válidos: * - `dd/mm/yyyy` * - `mm/dd/yyyy` * - `yyyy/mm/dd` * * @default `dd/mm/yyyy` */ set format(value: string); get format(): string; /** * @optional * * @description * * Padrão de formatação para saída do *model*, independentemente do formato de entrada. * * > Veja os valores válidos no *enum* `PoDatepickerIsoFormat`. */ set isoFormat(value: PoDatepickerIsoFormat); get isoFormat(): PoDatepickerIsoFormat; /** * @optional * * @description * * Idioma do Datepicker. * * > O locale padrão sera recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ _locale?: string; set locale(value: string); get locale(): string; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Define que o `calendar` e/ou tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) serão incluídos no body da * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox: boolean; constructor(languageService: PoLanguageService, cd: ChangeDetectorRef); set date(value: any); get date(): any; ngOnInit(): void; ngOnDestroy(): void; getDateFromString(dateString: string): Date; formatToDate(value: Date): string; controlModel(date: Date): void; callOnChange(value: any, retry?: boolean): void; mapSizeToIcon(size: string): string; setDisabledState(isDisabled: boolean): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(fn: () => void): void; validate(c: AbstractControl): { [key: string]: any; }; protected validateModel(model: any): void; protected buildMask(format?: string): PoMask; formatTimezoneAndHour(offset: number): void; abstract writeValue(value: any): void; abstract refreshValue(value: Date): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_appendBox: any; } /** * @docsExtends PoDatepickerBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoDatepickerComponent extends PoDatepickerBaseComponent implements AfterViewInit, OnDestroy, OnChanges { private controlPosition; private renderer; calendar: PoCalendarComponent; dialogPicker: ElementRef; iconDatepicker: PoButtonComponent; inputEl: ElementRef; iconClean: ElementRef; helperEl?: PoHelperComponent; /** Rótulo do campo. */ label?: string; /** Texto de apoio do campo. */ help?: string; displayAdditionalHelp: boolean; el: ElementRef; hour: string; id: string; visible: boolean; literals: any; eventListenerFunction: () => void; eventResizeListener: () => void; private clickListener; private readonly dateRegex; private readonly isoRegex; private timeoutChange; private valueBeforeChange; private subscriptionValidator; get autocomplete(): "on" | "off"; get dateInputValue(): string; constructor(); onKeyup($event: any): void; onKeydown($event?: any): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; emitAdditionalHelp(): void; /** * 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(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; togglePicker(focusInput?: boolean): void; closeCalendar(focusInput?: boolean): void; dateSelected(event?: string): void; wasClickedOnPicker(event: any): void; hasInvalidClass(): boolean; getErrorPattern(): string; clear(): void; clearAndFocus(): void; eventOnBlur($event: any): void; eventOnClick($event: any): void; onKeyDown(event: KeyboardEvent): void; onKeyPress(event: any): void; formatToDate(value: Date): string; refreshValue(value: Date): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoDatepickerComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; writeValue(value: any): void; isValidDateIso(value: string): boolean; isValidExtendedIso(value: any): boolean; hasOverlayClass(element: any): any; verifyErrorAsync(value: any): void; verifyMobile(): RegExpMatchArray; private controlChangeEmitter; private hasAttrCalendar; private initializeListeners; private isAdditionalHelpEventTriggered; private isFocusOnFirstCombo; private isFocusOnLastCombo; private onScroll; private removeListeners; private setDialogPickerStyleDisplay; private setCalendarPosition; protected adjustCalendarPosition(): void; handleCleanKeyboardTab(event: KeyboardEvent): void; private shouldHandleTab; private focusCalendar; onCalendarKeyDown(event: KeyboardEvent): void; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoDatepickerRangeComponent * * @description * * 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). */ interface PoDatepickerRange { /** Data inicial */ start: string | Date; /** Data final */ end: string | Date; } /** * @usedBy PoDatepickerRangeComponent * * @description * * Interface para definição das literais usadas no `po-datepicker-range`. */ interface PoDatepickerRangeLiterals { /** Data em formato inválido. */ invalidFormat?: string; /** Data inicial maior que data final. */ startDateGreaterThanEndDate?: string; /** Data inválida. */ invalidDate?: string; /** Data fora do período. */ dateOutOfPeriod?: string; /** Abrir calendário. */ open?: string; /** Data inicial. */ startDate?: string; /** Data final. */ endDate?: string; /** Limpar campo. */ clean?: string; } /** * @description * * O `po-datepicker-range` é um componente para seleção de um período entre duas datas, onde é possível informar apenas * a data inicial ou a data final. * * O componente `[(ngModel)]` do `po-datepicker-range` trabalha com um objeto que implementa a interface * `PoDatepickerRange`, contendo as seguintes propriedades: * ``` * { "start": '2017-11-28', "end": '2017-11-30' } * ``` * * * Este componente pode receber os seguintes formatos de data: * * - **Data e hora combinados (E8601DZw): yyyy-mm-ddThh:mm:ss+|-hh:mm** * ``` * '2017-11-28T00:00:00-02:00'; * ``` * * - **Data (E8601DAw.): yyyy-mm-dd** * ``` * '2017-11-28'; * ``` * * - **JavaScript Date Object:** * ``` * new Date(2017, 10, 28); * ``` * * > O componente respeitará o formato passado para o *model* via codificação. Porém, caso seja feita alteração em algum * dos valores de data em tela, o componente atribuirá o formato **Data (E8601DAw.): yyyy-mm-dd** ao model. * * Importante: * * - Quando preenchidas a data inicial e final, a data inicial deve ser sempre menor ou igual a data final; * - Ao passar uma data inválida via codificação, o valor será mantido no *model* e o `input` da tela aparecerá vazio; * - Permite trabalhar com as duas datas separadamente através das propriedades `p-start-date` e `p-end-date` no lugar do * `[(ngModel)]`, no entanto sem a validação do formulário; * - Para a validação do formulário, utilize o `[(ngModel)]`. */ declare abstract class PoDatepickerRangeBaseComponent implements ControlValueAccessor, Validator, OnDestroy { protected changeDetector: ChangeDetectorRef; protected poDateService: PoDateService; private languageService; additionalHelpEventTrigger: string | undefined; name: string; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o `calendar` e/ou tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) serão incluídos no body da * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Texto de apoio do campo. */ help?: string; /** * @optional * * @description * * Rótulo do campo. */ label?: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. */ set placeholder(value: string | PoDatepickerRange); get placeholder(): PoDatepickerRange; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * @optional * * @description * * Evento disparado ao alterar valor do campo. */ onChange: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; errorMessage: string; dateRange: PoDatepickerRange; displayAdditionalHelp: boolean; protected format: any; protected isDateRangeInputFormatValid: boolean; protected isStartDateRangeInputValid: boolean; protected onTouchedModel: any; protected poMaskObject: PoMask; protected hasValidatorRequired: boolean; private _clean?; private _disabled?; private _endDate?; private _literals?; private _maxDate; private _minDate; private _noAutocomplete?; private _readonly; private _required?; private _loading?; private _startDate?; private _locale?; private _size?; private _placeholder; private language; private onChangeModel; private validatorChange; private subscription; get isDateRangeInputValid(): boolean; /** * @optional * * @description * * Habilita ação para limpar o campo. * * @default `false` */ set clean(clean: boolean); get clean(): boolean; /** * @optional * * @description * * Desabilita o campo. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Data final. */ set endDate(date: string | Date); get endDate(): string | Date; /** * @optional * * @description * * Objeto com as literais usadas no `po-datepicker-range`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoDatepickerRangeLiterals = { * invalidFormat: 'Date in inconsistent format', * startDateGreaterThanEndDate: 'End date less than start date' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoDatepickerRangeLiterals = { * invalidFormat: 'Date in inconsistent format' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoDatepickerRangeLiterals); get literals(): PoDatepickerRangeLiterals; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Define uma data mínima para o `po-datepicker-range`. */ set minDate(value: string | Date); get minDate(): string | Date; /** * @optional * * @description * * Define uma data máxima para o `po-datepicker-range`. */ set maxDate(value: string | Date); get maxDate(): string | Date; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Indica que o campo será somente leitura. * * @default `false` */ set readonly(value: boolean); get readonly(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * * Data inicial. */ set startDate(date: string | Date); get startDate(): string | Date; /** * @optional * * @description * * Idioma que o calendário utilizará para exibir as datas. * * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set locale(value: string); get locale(): string; constructor(changeDetector: ChangeDetectorRef, poDateService: PoDateService, languageService: PoLanguageService); ngOnDestroy(): void; setDisabledState(isDisabled: boolean): void; mapSizeToIcon(size: string): string; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange?(fn: () => void): void; validate(control: AbstractControl): ValidationErrors; validateDateInRange(startDate: any): boolean; writeValue(dateRange: PoDatepickerRange): void; protected buildMask(format?: string): PoMask; protected dateFormatFailed(value: string): boolean; protected updateModel(value: any): void; protected validateModel(value: any): void; protected verifyValidDate(startDate: string, endDate: string): boolean; private convertPatternDateFormat; private dateRangeFailed; private dateRangeFormatFailed; private dateRangeObjectFailed; private isDateRangeObject; private requiredDateRangeFailed; private dateIsValid; protected abstract resetDateRangeInputValidation(): void; protected abstract updateScreenByModel(dateRange: PoDatepickerRange): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; } /** * @docsExtends PoDatepickerRangeBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * */ declare class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent implements AfterViewInit, OnInit, OnDestroy, OnChanges { private controlPosition; private renderer; private cd; private poLanguageService; dateRangeField: ElementRef; endDateInput: ElementRef; startDateInput: ElementRef; iconCalendar: PoButtonComponent; calendarPicker: ElementRef; helperEl?: PoHelperComponent; iconClean: ElementRef; id: string; isCalendarVisible: boolean; private clickListener; private eventResizeListener; private poDatepickerRangeElement; get autocomplete(): "on" | "off"; get enableCleaner(): boolean; get endDateInputName(): string; get endDateInputValue(): string; get getErrorMessage(): string; get isDateRangeInputUncompleted(): boolean; get isDirtyDateRangeInput(): boolean; get startDateInputName(): string; get startDateInputValue(): string; constructor(); static getKeyCode(event: KeyboardEvent): number; static getTargetElement(event: any): any; static isValidKey(keyCode: number): boolean; ngAfterViewInit(): void; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; clear(): void; clearAndFocus(): void; emitAdditionalHelp(): void; eventOnClick($event: any): void; /** * 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(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; onBlur(event: any): void; onCalendarChange({ start, end }: { start: any; end: any; }): void; onFocus(event: any): void; onKeydown(event?: any): void; onKeyPress(event: any): void; onKeydownDatepickerRange($event?: any): void; onKeyup(event: any): void; resetDateRangeInputValidation(): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoDatepickerRangeComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; toggleCalendar(): void; updateScreenByModel(model: PoDatepickerRange): void; onCalendarKeyDown(event: KeyboardEvent): void; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; setCalendarPosition(): void; private applyFocusOnDatePickerRangeField; private formatDate; private formatScreenToModel; private formatModelToScreen; private getDateRangeFormatValidation; private getValidatedModel; private hasAttrCalendar; private hasInvalidClass; private initializeListeners; private isAdditionalHelpEventTriggered; private isEqualBeforeValue; private isFocusOnFirstCombo; private isSetFocusOnBackspace; private onScroll; private removeFocusFromDatePickerRangeField; private setDateRangeInputValidation; private setFocus; private setFocusAndPosition; private focusOnElement; private removeListeners; private setFocusOnArrowLeft; private setFocusOnArrowRight; private setFocusOnBackspace; private setFocusOnStartDateCompleted; private updateModelWhenComplete; private updateModelByScreen; private verifyFormattedDates; private wasClickedOnPicker; closeCalendar(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoInputComponent, PoDecimalComponent, PoNumberComponent, PoEmailComponent, PoLoginComponent, PoPasswordComponent, PoUrlComponent, PoDynamicFormComponent * * @description * * Interface para realizar uma validação assíncrona no componente. */ interface ErrorAsyncProperties { /** * @description * * Função obrigatória executada para realizar a validação assíncrona personalizada. * Executada ao disparar o output `change` ou `change-model`, dependendo do valor da propriedade `triggerMode`. * * @param value Valor atual preenchido no campo. * * @returns Retorna `Observable com o valor true` para sinalizar o erro `false` para indicar que não há erro. */ errorAsync: (value: any) => Observable; /** * @optional * * @description * * Controla se o método será executado no disparo do output `change` ou `change-model`. * * @default `change` */ triggerMode?: 'change' | 'changeModel'; } /** * @description * * 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)` | * | **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)` | * *
*/ declare abstract class PoInputBaseComponent implements ControlValueAccessor, Validator, OnDestroy { protected cd?: ChangeDetectorRef; fieldContainer?: PoFieldContainerComponent; helperEl?: PoHelperComponent; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Define o ícone que será exibido no início do campo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ icon?: string | TemplateRef; /** * @optional * * @description * * Sempre emite as alterações do model mesmo quando o valor atual for igual ao valor anterior. * * @default `false` */ emitAllChanges: boolean; /** Rótulo do campo. */ label?: string; /** Texto de apoio do campo. */ help?: string; /** Nome e identificador do campo. */ name: string; /** * @optional * * @description * * Realiza alguma validação customizada assíncrona no componente. * Aconselhamos a utilização dessa propriedade somente em componentes que não estejam * utilizando `Reactive Forms`. Em formulários reativos, pode-se utilizar o próprio `asyncValidators`. */ errorAsyncProperties: ErrorAsyncProperties; /** * @description * * Mensagem que será apresentada quando o `pattern` ou a máscara não for satisfeita. * * > Por padrão, esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido. * Para exibir a mensagem com o campo vazio, utilize a propriedade `p-required-field-error-message` em conjunto. */ errorPattern?: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * * @default `false` */ showErrorMessageRequired: boolean; /** * @description * * Converte o conteúdo do campo em maiúsulo automaticamente. * */ upperCase: boolean; _maskNoLengthValidation: boolean; /** * @description * * 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. * * - Quando `true`, apenas os caracteres alfanuméricos serão contabilizados para a validação dos comprimentos. * - Quando `false`, todos os caracteres, incluindo os especiais da máscara, serão considerados na validação. * * > Esta propriedade é ignorada quando utilizada em conjunto com `p-mask-format-model`. * * Exemplo: * ``` * * ``` * - Entrada: `123-456` → Validação será aplicada somente aos números, ignorando o caractere especial `-`. * * @default `false` */ set maskNoLengthValidation(value: boolean); get maskNoLengthValidation(): boolean; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Evento disparado ao entrar do campo. */ enter: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor e deixar o campo. */ change: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do model. */ changeModel: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; displayAdditionalHelp: boolean; type: string; onChangePropagate: any; objMask: any; modelLastUpdate: any; isInvalid: boolean; hasValidatorRequired: boolean; private subscription; protected onTouched: any; protected passedWriteValue: boolean; protected validatorChange: any; private _loading; private _maxlength?; private _minlength?; private _noAutocomplete?; private _placeholder?; private _size?; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * > No componente `po-password` será definido como `new-password`. * * Nos componentes `po-password` e `po-login` o valor padrão será `true`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. * * @default '' */ set placeholder(value: string); get placeholder(): string; /** * @description * * Se verdadeiro, desabilita o campo. * * @default `false` */ disabled?: boolean; set setDisabled(disabled: string); /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** Indica que o campo será somente leitura. */ readonly?: boolean; set setReadonly(readonly: string); /** * @optional * * @description * * Define que o campo será obrigatório. * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @default `false` */ required?: boolean; set setRequired(required: string); /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** Se verdadeiro, o campo receberá um botão para ser limpo. */ clean?: boolean; set setClean(clean: string); /** * @description * * Expressão regular para validar o campo. * Quando o campo possuir uma máscara `(p-mask)` será automaticamente validado por ela, porém * é possível definir um p-pattern para substituir a validação da máscara. */ pattern?: string; set setPattern(pattern: string); /** * @optional * * @description * * Indica a quantidade máxima de caracteres que o campo aceita. */ set maxlength(value: number); get maxlength(): number; /** * @optional * * @description * * Indica a quantidade mínima de caracteres que o campo aceita. */ set minlength(value: number); get minlength(): number; /** * @description * * Indica uma máscara para o campo. Exemplos: (+99) (99) 99999?-9999, 99999-999, 999.999.999-99. * A máscara gera uma validação automática do campo, podendo esta ser substituída por um REGEX específico * através da propriedade p-pattern. * O campo será sinalizado e o formulário ficará inválido quando o valor informado estiver fora do padrão definido, * mesmo quando desabilitado. */ mask?: string; set setMask(mask: string); /** * @description * * Indica se o `model` receberá o valor formatado pela máscara ou apenas o valor puro (sem formatação). * * @default `false` */ maskFormatModel?: boolean; set setMaskFormatModel(maskFormatModel: string); /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; constructor(cd?: ChangeDetectorRef); ngOnDestroy(): void; callOnChange(value: any): void; callUpdateModelWithTimeout(value: any): void; controlChangeModelEmitter(value: any): void; emitAdditionalHelp(): void; getAdditionalHelpTooltip(): string; setDisabledState(isDisabled: boolean): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(fn: () => void): void; /** * 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 * * ``` * * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoNomeDoComponente): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; updateModel(value: any): void; validate(c: AbstractControl): { [key: string]: any; }; writeValue(value: any): void; protected validateModel(): void; protected isAdditionalHelpEventTriggered(): boolean; mapSizeToIcon(size: string): string; private validatePatternOnWriteValue; /** * 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 { PoNomeDoComponenteComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild(PoNomeDoComponenteComponent, { static: true }) nomeDoComponente: PoNomeDoComponenteComponent; * * focusComponent() { * this.nomeDoComponente.focus(); * } * ``` */ abstract focus(): void; abstract writeValueModel(value: any): void; abstract extraValidation(c: AbstractControl): { [key: string]: any; }; abstract getScreenValue(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_emitAllChanges: any; static ngAcceptInputType_upperCase: any; } /** * * @docsExtends PoInputBaseComponent * * @description * * - O `po-decimal` é um *input* específico para receber apenas números decimais, por isso recebe as seguintes características: * + Aceita apenas números; * + Utiliza ',' como separador de decimal; * + Utiliza '.' para separação de milhar; * + É possível configurar a quantidade de casas decimais e a quantidade de digitos do campo. * * > **Importante:** * Atualmente o JavaScript limita-se a um conjunto de dados de `32 bits`, e para que os valores comportem-se devidamente, * o `po-decimal` contém um tratamento que limita em 16 o número total de casas antes e após a vírgula. * Veja abaixo as demais regras nas documentações de `p-decimals-length` e `p-thousand-maxlength`. * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoDecimalComponent extends PoInputBaseComponent implements AfterViewInit, OnInit, OnDestroy, OnChanges { private el; private poLanguageService; inputEl: ElementRef; id: string; private _decimalsLength?; private _thousandMaxlength?; private _locale?; private _min?; private _max?; private decimalSeparator; private fireChange; private isKeyboardAndroid; private minusSign; private oldDotsLength; private thousandSeparator; private valueBeforeChange; private subscriptionValidator; private regex; get autocomplete(): "on" | "off"; /** * @optional * * @description * * Quantidade máxima de casas decimais. * * > **Importante:** * - O valor máximo permitido é 15; * - A soma total de `p-decimals-length` com `p-thousand-maxlength` limita-se à 16; * - Esta propriedade sobrepõe apenas o valor **padrão** de `p-thousand-maxlength`; * - Caso `p-thousand-maxlength` tenha um valor definido, esta propriedade poderá receber apenas o valor restante do limite total (16). * * @default `2` */ set decimalsLength(value: number); get decimalsLength(): number; /** * @optional * * @description * * Quantidade máxima de dígitos antes do separador decimal. * * > **Importante:** * - O valor máximo permitido é 13; * - A soma total de `p-decimals-length` com `p-thousand-maxlength` limita-se à 16; * - Esta propriedade sobrepõe o valor definido em `p-decimals-length`. * * @default `13` */ set thousandMaxlength(value: number); get thousandMaxlength(): number; /** * @optional * * @description * * Informa o locale(país) para a formatação do valor. * Por padrão o valor será configurado segundo a o módulo [`I18n`](documentation/po-i18n) * * > Para ver quais linguagens suportadas acesse [`I18n`](documentation/po-i18n) * */ set locale(locale: string); /** * @optional * * @description * * Valor mínimo. */ set min(value: number); get min(): number; /** * @optional * * @description * * Valor máximo. */ set max(value: number); get max(): number; constructor(); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; setNumbersSeparators(): void; ngAfterViewInit(): void; ngOnDestroy(): void; clear(value: any): void; extraValidation(abstractControl: AbstractControl): { [key: string]: any; }; focus(): void; getScreenValue(): any; hasInvalidClass(): boolean; hasLetters(value?: string): RegExpMatchArray; hasNotSpace(value?: string): RegExpMatchArray; isValidNumber(event: any): boolean; onBlur(event: any): void; onFocus(event: FocusEvent): void; onInput(event: any): void; onInputKeyboardAndroid(event: any): any; onKeyDown(event: KeyboardEvent): void; onKeyPress(event: KeyboardEvent): void; writeValueModel(value: any): void; getErrorPatternMessage(): string; private addZeroBefore; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; private containsComma; private containsMoreThanOneDecimalSeparator; private controlChangeEmitter; private formatMask; private formatToModelValue; private formatToViewValue; private formatValueWithoutThousandSeparator; private getValueAfterSeparator; private getValueBeforeSeparator; private hasLessDot; private hasMoreDot; private hasMinusSignInvalidPosition; private isInvalidKey; private isGreaterThanTotalLengthLimit; private isKeyDecimalSeparator; private isPositionAfterDecimalSeparator; private isSelectionStartDifferentSelectionEnd; private isValidKey; private isValueBetweenAllowed; private verifyDecimalLengthIsZeroAndKeyPressedIsComma; private verifyAutoFocus; private setInitialSelectionRange; private replaceAt; private replaceCommaToDot; private setCursorInput; private setPositionValue; private setViewValue; private validateCursorPositionBeforeSeparator; private verifyErrorAsync; private verifyThousandLength; private verifyInsertComma; private verifyInsertMinusSign; private verifyValueAfterComma; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class PoInputGeneric extends PoInputBaseComponent implements AfterViewInit, OnDestroy { inputEl: ElementRef; type: string; el: ElementRef; valueBeforeChange: any; timeoutChange: any; private subscriptionValidator; get autocomplete(): string; constructor(el: ElementRef, cd?: ChangeDetectorRef); onKeydown(e: any): void; onKeyup(e: any): void; ngAfterViewInit(): void; afterViewInit(): void; ngOnDestroy(): void; focus(): void; onKeyDown(event: KeyboardEvent): void; verifyAutoFocus(): void; eventOnInput(e: any): void; validMaxLength(maxlength: number, value: string): string; eventOnFocus(e: any): void; eventOnBlur(e: any): void; controlChangeEmitter(): void; eventOnClick(e: any): void; hasInvalidClass(): boolean; verifyErrorAsync(): void; getErrorPattern(): string; validateClassesForPattern(): void; validateClassesForMask(keyDown?: boolean): void; verifyPattern(pattern: string, value: any): boolean; clear(value: any): void; writeValueModel(value: any): void; getScreenValue(): any; validateInitMask(): void; abstract extraValidation(c: AbstractControl): { [key: string]: any; }; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoInputBaseComponent * * @description * * O `po-email` é um input específico para receber E-mail, com o pattern já configurado. * * @example * * * * * * * * * * * * * * * */ declare class PoEmailComponent extends PoInputGeneric implements AfterViewInit, OnDestroy, OnChanges { id: string; icon: string; type: string; pattern: string; mask: string; private listener; constructor(); ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; ngOnDestroy(): void; extraValidation(c: AbstractControl): { [key: string]: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoInputBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoInputComponent extends PoInputGeneric implements OnChanges { inp: ElementRef; id: string; constructor(); ngOnChanges(changes: SimpleChanges): void; extraValidation(c: AbstractControl): { [key: string]: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoInputBaseComponent * * @description * O `po-login` é um input específico para login. Já possui tipo, estilo e ícone predefinidos. * * @example * * * * * * * * * * * * * * * * */ declare class PoLoginComponent extends PoInputGeneric implements OnChanges { id: string; type: string; private _noAutocompleteLogin?; set noAutocomplete(value: boolean); get noAutocomplete(): boolean; get autocomplete(): string; constructor(); ngOnChanges(changes: SimpleChanges): void; extraValidation(c: AbstractControl): { [key: string]: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoLookupComponent * * @description * * Interface para configuração das colunas do po-lookup. */ interface PoLookupColumn { /** * Indica que a coluna será utilizada como valor do campo e como filtro dentro da modal. * * Se houver mais de uma configuração habilitada, é exibido os valores no campo concatenados separados * por um traço("-"). Por exemplo: "Joinville - SC". * * Importante * Esta configuração se torna obsoleta caso os atributos `p-field-format` ou `p-field-label` forem configurados no componente. */ fieldLabel?: boolean; /** * Formato de exibição do valor da coluna: * - Formato para moeda (currency). Exemplos: 'BRL', 'USD'. * - Formato para data (date): aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy), * valor padrão é 'dd/MM/yyyy'. Exemplos: 'dd/MM/yyyy', 'dd-MM-yy', 'mm/dd/yyyy'. */ format?: string; /** * Texto para título da coluna. * * Caso não seja informado, será utilizado como *label* o valor da propriedade *property* com a primeira letra em maiúsculo. */ label?: string; /** Nome identificador da coluna. */ property?: string; /** * Tipo da coluna: * - string (padrão): textos * - number: valores numéricos * - date: data * - currency: valores monetários * - dateTime: data e hora */ type?: string; /** A largura da coluna pode ser informada em pixels ou porcentagem. Exemplo: '100px' ou '20%' */ width?: string; } /** * @usedBy PoLookupComponent * * @description * * Interface do objeto enviado como parâmetro na função `getFilteredItems`. */ interface PoLookupFilteredItemsParams { /** * Conteúdo utilizado para filtrar a lista de itens. */ filter?: string; /** * Controla a paginação dos dados e recebe valor automaticamente a cada clique no botão 'Carregar mais resultados'. */ page?: number; /** * Quantidade de itens retornados cada vez que o serviço é chamado, por padrão é 10. */ pageSize?: number; /** * Valor informado através da propriedade `p-filter-params`. */ filterParams?: any; /** * Coluna que está sendo ordenada na tabela. * * - Coluna decrescente será informada da seguinte forma: `-`, por exemplo `-name`. * - Coluna ascendente será informada da seguinte forma: ``, por exemplo `name`. */ order?: string; /** * * Valores informados nos campos de busca avançada, que serão utilizados para filtrar a lista de itens. * */ advancedFilters?: { [key: string]: any; }; } /** * @docsExtends PoResponseApi * * @usedBy PoLookupComponent */ interface PoLookupResponseApi extends PoResponseApi { } /** * @usedBy PoLookupComponent * * @description * * Define o tipo de busca utilizado no po-lookup. */ interface PoLookupFilter { /** * 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`. * * @param {PoLookupFilteredItemsParams} params Objeto enviado por parâmetro que implementa a interface `PoLookupFilteredItemsParams`. */ getFilteredItems?(params: PoLookupFilteredItemsParams): Observable; /** * 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. * * @param {string|Array} value Valor único a ser buscado na fonte de dados. * @param {any} filterParams Valor informado através da propriedade `p-filter-params`. */ getObjectByValue(value: string | Array, filterParams?: any): Observable; } /** * @usedBy PoLookupComponent * * @description * * Interface para definição das literais usadas no `po-lookup`. */ interface PoLookupLiterals { /** Texto exibido no label do botão de ação primária da modal. */ modalPrimaryActionLabel?: string; /** Texto exibido no label do botão de ação secundária da modal. */ modalSecondaryActionLabel?: string; /** Texto exibido no placeholder do input da modal. */ modalPlaceholder?: string; /** Texto exibido quando não existem colunas definidas para a tabela. */ modalTableNoColumns?: string; /** Texto exibido quando não existem itens para serem exibidos na tabela. */ modalTableNoData?: string; /** Texto exibido enquanto uma requisição está sendo executada para carregar dados na tabela. */ modalTableLoadingData?: string; /** Label do `button` que deve carregar mais resultados na tabela, ou seja, exibir mais itens. */ modalTableLoadMoreData?: string; /** Texto exibido no título da modal. */ modalTitle?: string; /** * Texto do link de busca avançada. * * Importante * Caso seja passado uma literal muito comprida poderá quebrar o layout. */ modalAdvancedSearch?: string; /** Texto exibido no título da modal de busca avançada. */ modalAdvancedSearchTitle?: string; /** Texto exibido no label do botão de ação primária da modal de busca avançada. */ modalAdvancedSearchPrimaryActionLabel?: string; /** Texto exibido no label do botão de ação secundária da modal de busca avançada. */ modalAdvancedSearchSecondaryActionLabel?: string; /** Texto exibido no título do disclaimer. */ modalDisclaimerGroupTitle?: string; /** Texto usado no leitor de tela para acessibilidade. Aplica-se ao ícone de pesquisa. */ search?: string; /** Texto usado no leitor de tela para acessibilidade. Aplica-se ao ícone de limpar. */ clean?: string; } /** * @docsExtends PoDynamicFormField * * @usedBy PoLookupComponent */ interface PoLookupAdvancedFilter extends PoDynamicFormField { } /** * @usedBy * * PoPageListComponent * * @description * * Interface que representa o objeto `po-disclaimer-group`. */ interface PoDisclaimerGroup { /** * @optional * * @description * * Função que será disparada quando a lista de *disclaimers* for modificada. * Será passado por parâmetro a nova lista de *disclaimers*. */ change?: Function; /** * * @description * * Lista de *disclaimers*. * * Exemplo: * ``` * disclaimers: [ * { property: 'type', label: 'Hotel', value: 'hotel' }, * { property: 'cost', label: '$500,00', value: '500' }, * { property: 'dates', label: '10/05/2018 - 15/05/2018', value: '10/05/2018|15/05/2018' } * ] * ``` * * Para que a lista de *disclaimers* seja atualizada dinamicamente deve-se passar uma nova referência do array de `PoDisclaimer`. * * Exemplo: * ``` * this.disclaimerGroup.disclaimers = [...this.disclaimers]; * ``` */ disclaimers: Array; /** * @optional * * @description * * Oculta o botão para remover todos os *disclaimers* do grupo. * * > Por padrão, o mesmo é exibido à partir de dois ou mais *disclaimers* com a opção `hideClose` habilitada. * * @default `false` */ hideRemoveAll?: boolean; /** * @optional * * @description * * Título do grupo de *disclaimers*. */ title: string; /** * Função que será disparada quando um *disclaimer* for removido da lista de * *disclaimers* pelo usuário. * * Recebe como parâmetro um objeto conforme a interface `PoDisclaimerGroupRemoveAction`. */ remove?: Function; /** * Função que será disparada quando todos os *disclaimers* forem removidos da lista de *disclaimers* pelo usuário, * utilizando o botão "remover todos". * * Recebe como parâmetro uma lista contendo todos os `disclaimers` removidos. */ removeAll?: Function; } /** * @docsPrivate * * Classe base do componente Po Lookup Modal. */ declare abstract class PoLookupModalBaseComponent implements OnDestroy, OnInit { protected changeDetector: ChangeDetectorRef; poModal: PoModalComponent; poTable: PoTableComponent; /** * Objeto com os campos que serão criados no busca avançada. * * > Caso não seja passado um objeto ou então ele esteja em branco o link de busca avançada ficará escondido. * * Exemplo de URL com busca avançada: http://localhost:3000/v1/heroes?filter=&page=1&pageSize=10`&name=Tony%20Stark&nickname=Homem%20de%20Ferro&email=irnman@marvel.com` * * Caso algum parâmetro seja uma lista, a concatenação é feita utilizando virgula. * Exemplo: http://localhost:3000/v1/heroes?filter=&page=1&pageSize=10`&name=Tony%20Stark,Peter%20Parker,Gohan` * */ advancedFilters: Array; /** * Lista das colunas da tabela. * Essa propriedade deve receber um array de objetos que implementam a interface PoLookupColumn. */ columns: Array; /** Lista de itens da tabela. */ items: Array; /** Classe de serviço com a implementação do cliente. */ filterService: PoLookupFilter; /** Classe de serviço com a implementação do cliente. */ filterParams: any; /** Se verdadeiro, esconde o gerenciador de tarefas, responsável pela definição de quais colunas serão exibidas. */ hideColumnsManager: boolean; /** Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela exibida no retorno da consulta. */ infiniteScroll: boolean; /** Se verdadeiro, ativa a funcionalidade de multipla seleção. */ multiple: boolean; /** Evento utilizado ao selecionar um registro da tabela. */ model: EventEmitter; /** Classe de serviço com items selecionados */ selectedItems: any; /** Indica a coluna que será utilizada como descrição do campo e como filtro dentro da janela. */ fieldLabel: string; /** * @description * * Indica a coluna que será utilizada como valor do campo. * * > Atenção: Caso não seja passada ou tenha o conteúdo incorreto, não irá atualizar o model do formulário. */ fieldValue: string; /** * Define o espaçamento interno das células, impactando diretamente na altura das linhas do table dentro do modal. Os * valores permitidos são definidos pelo enum **PoTableColumnSpacing**. */ spacing: PoTableColumnSpacing; /** Define o tamanho do componente. */ size: string; /** * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * */ textWrap?: boolean; /** * @optional * * @description * * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. * A altura da tabela já é pré-definida, portanto o `virtual-scroll` será ativado automaticamente. * * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. * * @default `true` */ virtualScroll?: boolean; /** * @optional * * @description * Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. * * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ changeVisibleColumns: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ columnRestoreManager: EventEmitter; hasNext: boolean; isLoading: boolean; page: number; pageSize: number; searchValue: string; appliedSearchValue: string; tableLiterals: any; advancedFilterModalTitle: string; dynamicFormValue: {}; disclaimer: PoDisclaimer; disclaimerGroup: PoDisclaimerGroup; isAdvancedFilter: boolean; primaryActionAdvancedFilter: PoModalAction; secondaryActionAdvancedFilter: PoModalAction; selecteds: Array; protected sort: PoTableColumnSort; private filterSubscription; private searchSubscription; private showMoreSubscription; private disclaimerLabel; private _literals; private _title; private language; primaryAction: PoModalAction; secondaryAction: PoModalAction; /** Objeto com as literais usadas no `po-lookup-modal`. */ set literals(value: PoLookupLiterals); get literals(): PoLookupLiterals; /** Título da modal. */ set title(value: string); get title(): string; constructor(languageService: PoLanguageService, changeDetector: ChangeDetectorRef); ngOnDestroy(): void; ngOnInit(): void; createDisclaimer(): void; addDisclaimer(value: any, property: string): void; onChangeDisclaimerGroup(): void; search(): void; searchFilteredItems(): void; showMoreEvent(): void; setSelectedItems(): void; setDisclaimersItems(): void; private applyDisclaimerLabelValue; private formatValueToCurrency; private formatValueToBoolean; private setAdvancedFilterModalProperties; private getAdvancedFilters; private getFilteredItems; private getFilteredParams; private getOrderParam; private initializeData; private setLookupResponseProperties; private setTableLiterals; abstract openModal(): void; abstract destroyDynamicForm(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideColumnsManager: any; static ngAcceptInputType_infiniteScroll: any; static ngAcceptInputType_multiple: any; static ngAcceptInputType_textWrap: any; static ngAcceptInputType_virtualScroll: any; } /** * @docsPrivate * * @docsExtends PoLookupModalBaseComponent */ declare class PoLookupModalComponent extends PoLookupModalBaseComponent implements OnInit { inputSearchEl: ElementRef; container: ViewContainerRef; keyUpObservable: Observable; tableHeight: number; componentRef: ComponentRef; dynamicForm: NgForm; constructor(); ngOnInit(): void; onSelect(item: any): void; onUnselect(unselectedItem: any): void; onUnselectFromDisclaimer(removedDisclaimer: any): void; onAllSelected(items: any): void; onAllUnselected(items: any): void; onAllUnselectedTag(items: any): void; openModal(): void; sortBy(sort: PoTableColumnSort): void; destroyDynamicForm(): void; onAdvancedFilter(): void; private setTableHeight; private setupModalAdvancedFilter; private createDynamicForm; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Serviço padrão utilizado para filtrar os dados do componente po-lookup. */ declare class PoLookupFilterService implements PoLookupFilter { private httpClient; readonly headers: HttpHeaders; private url; private fieldValue; private multiple; constructor(httpClient: HttpClient); getFilteredItems(filteredItemsParams: PoLookupFilteredItemsParams): Observable; getObjectByValue(value: any, filterParams?: any): Observable | { [key: string]: any; }>; setConfig(url: string, fieldValue: string, multiple: boolean): void; private validateParams; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsPrivate * * Serviço responsável por controlar a abertura do componente Po Lookup Modal. */ declare class PoLookupModalService { private poComponentInjector; selectValueEvent: EventEmitter; private componentRef; /** * Método responsável por abrir a modal de busca das informações. * * @param advancedFilters {Array} Objeto utilizado para criar o busca avançada. * @param service {PoLookupFilter} Serviço responsável por realizar a busca no serviço dos dados. * @param columns {Array} Definição das colunas na modal de busca. * @param filterParams {any} Valor que será repassado aos métodos do serviço para auxiliar no filtro dos dados. * @param title {string} Definição do título da modal. * @param literals {PoLookupLiterals} Literais utilizadas no componente. * @param selectedItems {any} Valor que está selecionado que será repassado para o modal para apresentar na tabela. * @param fieldLabel {string} Valor que será utilizado como descrição do campo. * @param fieldValue {string} Valor que será utilizado como valor do campo. * @param changeVisibleColumns {function} Função que será executada quando for alterada a visibilidade das colunas. * @param columnRestoreManager {function} Função que será executada quando for restaurar as colunas padrão. */ openModal(params: { advancedFilters: Array; service: PoLookupFilter; columns: Array; filterParams: any; hideColumnsManager: boolean; title: string; literals: PoLookupLiterals; infiniteScroll: boolean; multiple: boolean; selectedItems: Array; fieldLabel: string; fieldValue: string; size: string; spacing: string; textWrap: boolean; virtualScroll: boolean; changeVisibleColumns: Function; columnRestoreManager: Function; }): void; setChangeColumns(columns: any): void; selectValue(value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * Componente utilizado para abrir uma janela de busca com uma tabela que lista dados de um serviço. Nesta janela é possível buscar e * selecionar um ou mais registros que serão enviados para o campo. O `po-lookup` permite que o usuário digite um valor e pressione a tecla *TAB* para * buscar um registro. * * > Caso o campo seja iniciado ou preenchido com um valor inexistente na busca, o mesmo será limpado. * No segundo caso ocorrerá após este perder o foco; ambos os casos o campo ficará inválido quando requerido. * * > Enquanto o componente realiza a requisição ao servidor, o componente ficará desabilitado e com o status interno do * [modelo](https://angular.io/guide/form-validation#creating-asynchronous-validators) como `pending`. * * Este componente não é recomendado quando a busca dos dados possuir poucas informações, para isso utilize outros componentes como o * `po-select` ou o `po-combo`. */ declare abstract class PoLookupBaseComponent implements ControlValueAccessor, OnDestroy, OnInit, Validator, AfterViewInit, OnChanges { private readonly defaultService; private readonly injector; poLookupModalService: PoLookupModalService; private _literals?; private readonly language; private _size?; private _spacing; inputEl: ElementRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * Label do campo. * * > Quando utilizar esta propriedade o seu valor será utilizado como título da modal do componente caso não tenha * sido definido um `modalTitle` na propriedade `p-literals`. */ label?: string; /** * @description * * Objeto com as literais usadas no `po-lookup`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoLookupLiterals = { * modalPrimaryActionLabel: 'Select', * modalSecondaryActionLabel: 'Cancel', * modalPlaceholder: 'Search Value', * modalTableNoColumns: 'No columns', * modalTableNoData: 'No data', * modalTableLoadingData: 'Loading data', * modalTableLoadMoreData: 'Load more', * modalTitle: 'Select a user', * modalAdvancedSearch: 'Advanced search', * modalAdvancedSearchTitle: 'Advanced search', * modalAdvancedSearchPrimaryActionLabel: 'Filter', * modalAdvancedSearchSecondaryActionLabel: 'Return', * modalDisclaimerGroupTitle: 'Presenting results filtered by:' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoLookupLiterals = { * modalPrimaryActionLabel: 'Select' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoLookupLiterals); get literals(): PoLookupLiterals; /** Texto de apoio do campo. */ help?: string; /** Mensagem que aparecerá enquanto o campo não estiver preenchido. */ set placeholder(value: string); get placeholder(): string; /** Nome e Id do componente. */ name: string; /** * @description * * Indica a coluna que será utilizada como valor do campo. * * > Atenção: Caso não seja passada ou tenha o conteúdo incorreto, não irá atualizar o model do formulário. */ fieldValue: string; /** Indica a coluna que será utilizada como descrição do campo e como filtro dentro da janela. */ set fieldLabel(value: string); get fieldLabel(): string; /** Valor que será repassado como parâmetro para a URL ou aos métodos do serviço que implementam a interface `PoLookupFilter`. */ filterParams?: any; /** * @optional * * @description * * Formato de exibição do campo. * * Recebe uma função que deve retornar uma *string* com o/os valores do objeto formatados para exibição, por exemplo: * * ``` * fieldFormat(obj) { * return `${obj.id} - ${obj.name}`; * } * ``` * > Esta propriedade sobrepõe o valor da propriedade `p-field-label` na descrição do campo. * * Pode-se informar uma lista de propriedades que deseja exibir como descrição do campo, Por exemplo: * ``` * * * Objeto retornado: * { * id:123, * name: 'Kakaroto', * nickname: 'Goku', * } * Apresentação no campo: 123 - Goku * ``` * * > Será utilizado ` - ` como separador. */ fieldFormat?: ((value: any) => string) | Array; /** * Lista das colunas da tabela. * Essa propriedade deve receber um array de objetos que implementam a interface PoLookupColumn. */ columns?: Array; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * * @optional * * @description * * Lista de objetos dos campos que serão criados na busca avançada. * * > Caso não seja passado um objeto ou então ele esteja em branco o link de busca avançada ficará escondido. * * Exemplo de URL com busca avançada: * * ``` * url + ?page=1&pageSize=20&name=Tony%20Stark&nickname=Homem%20de%20Ferro * ``` * * Caso algum parâmetro seja uma lista, a concatenação é feita utilizando vírgula. * Exemplo: * * ``` * url + ?page=1&pageSize=20&name=Tony%20Stark,Peter%20Parker,Gohan * ``` * */ advancedFilters: Array; /** * @optional * * @description * * Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. * * @default `false` */ hideColumnsManager: boolean; /** * @optional * * @description * * Ativa a funcionalidade de scroll infinito para a tabela exibida no retorno da consulta. * * @default `false` */ infiniteScroll: boolean; /** Exibe um ícone que permite limpar o campo. */ clean: boolean; /** * @optional * * @description * * Permite a seleção de múltiplos itens. * * > Quando habilitado o valor do campo passará a ser uma lista de valores, por exemplo: `[ 12345, 67890 ]` * * @default `false` */ multiple: boolean; /** * @optional * * @description * * 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. * * @default `false` */ autoHeight: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * * Define o espaçamento interno das células, impactando diretamente na altura das linhas do table dentro do modal. Os * valores permitidos são definidos pelo enum **PoTableColumnSpacing**. * * > Em nível de acessibilidade **AA**, caso o valor de `p-spacing` não seja definido, o valor padrão será `extraSmall` * > nos seguintes cenários: * > - Quando o valor de `p-size` for `small`; * > - Quando o valor padrão dos componentes for configurado como `small` no * > [serviço de tema](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set spacing(value: string); get spacing(): string; /** * @optional * * @description * * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * Esta propriedade aplica-se ao texto contido nas células da tabela. * * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * * @default `false` */ textWrap?: boolean; /** * @optional * * @description * * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. * A altura da tabela já é pré-definida, portanto o `virtual-scroll` será ativado automaticamente. * * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. * * @default `true` */ virtualScroll?: boolean; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * Evento será disparado quando ocorrer algum erro na requisição de busca do item. * Será passado por parâmetro o objeto de erro retornado. */ onError: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Evento será disparado quando ocorrer alguma seleção. * Será passado por parâmetro o objeto com o valor selecionado. */ selected: EventEmitter; /** * @optional * * @description * * Evento que será disparado ao alterar o model. * Por parâmetro será passado o novo valor. */ change: EventEmitter; /** * @optional * * @description * Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. * * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ changeVisibleColumns: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ columnRestoreManager: EventEmitter; displayAdditionalHelp: boolean; service: any; protected selectedOptions: any[]; protected getSubscription: Subscription; protected keysDescription: Array; protected oldValue: string; protected valueToModel: any; protected oldValueToModel: any; protected onTouched: any; protected resizeListener: () => void; protected isExpandedHeight: boolean; private _disabled?; private _fieldLabel; private _filterService; private _loading; private _noAutocomplete; private _placeholder; private _required?; private readonly _autoHeight; private readonly autoHeightInitialValue; private onChangePropagate; private validatorChange; private control; private readonly injectOptions; /** * Serviço responsável por buscar os dados da tabela na janela. Pode ser informado um serviço que implemente a interface * `PoLookupFilter` ou uma URL. * * Quando utilizada uma URL de um serviço, será concatenada nesta URL o valor que deseja-se filtrar, por exemplo: * * ``` * url + ?page=1&pageSize=20&filter=Peter * ``` * * Caso utilizar ordenação, a coluna ordenada será enviada através do parâmetro `order`, por exemplo: * - Coluna decrescente: * ``` * url + ?page=1&pageSize=20&filter=Peter&order=-name * ``` * * - Coluna ascendente: * ``` * url + ?page=1&pageSize=20&filter=Peter&order=name * ``` * * Se for definido a propriedade `p-filter-params`, o mesmo também será concatenado. Por exemplo, para o * parâmetro `{ age: 23 }` a URL ficaria: * * ``` * url + ?page=1&pageSize=20&age=23&filter=Peter * ``` * * Ao iniciar o campo com valor, os registros serão buscados da seguinte forma: * ``` * model = 1234; * * GET url/1234 * ``` * * Caso estiver com múltipla seleção habilitada: * ``` * model = [1234, 5678] * * GET url?${fieldValue}=1234,5678 * ``` * * > Esta URL deve retornar e receber os dados no padrão de [API do PO UI](https://po-ui.io/guides/api) e utiliza os valores * definidos nas propriedades `p-field-label` e `p-field-value` para a construção do `po-lookup`. * * Caso o usuário digite um valor e pressione a tecla *TAB* para realizar a busca de um registro específico, o valor que se * deseja filtrar será codificado utilizando a função [encodeURIComponent](https://tc39.es/ecma262/#sec-encodeuricomponent-uricomponent) * e concatenado na URL da seguinte forma: * * ``` * url/valor%20que%20se%20deseja%20filtrar * ``` * * > Quando informado um serviço que implemente a interface `PoLookupFilter` o tratamento de encoding do valor a ser filtrado ficará a cargo do desenvolvedor. * */ set filterService(filterService: PoLookupFilter | string); get filterService(): PoLookupFilter | string; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório seré exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @description * * Indica que o campo será desabilitado. * * @default false * @optional */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; constructor(defaultService: PoLookupFilterService, injector: Injector, poLookupModalService: PoLookupModalService, languageService: PoLanguageService); ngOnDestroy(): void; ngOnInit(): void; ngAfterViewInit(): void; cleanModel(): void; ngOnChanges(changes: SimpleChanges): void; setDisabledState(isDisabled: boolean): void; registerOnValidatorChange(fn: () => void): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; selectValue(valueSelected: any): void; callOnChange(value: any): void; mapSizeToIcon(size: string): string; searchById(value: any): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(value: any): void; getSubscriptionFunction(): Subscription; protected cleanViewValue(): void; protected getFormattedLabel(value: any): string; protected selectModel(options: Array): void; protected validateModel(model: any): void; private setService; private setControl; private initializeColumn; private updateLookupInputHeight; abstract setViewValue(value: any, object: any): void; abstract openLookup(): void; abstract setDisclaimers(a: any): any; abstract updateVisibleItems(): any; protected abstract getDefaultSpacing(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_hideColumnsManager: any; static ngAcceptInputType_infiniteScroll: any; static ngAcceptInputType_clean: any; static ngAcceptInputType_multiple: any; static ngAcceptInputType_autoHeight: any; static ngAcceptInputType_textWrap: any; static ngAcceptInputType_virtualScroll: any; } /** * @docsExtends PoLookupBaseComponent * * @description * * Quando existe muitos dados o po-lookup por padrão traz apenas 10 itens na tabela e os demais são carregados por demanda através do * botão 'Carregar mais resultados'. Para que funcione corretamente, é importante que o serviço siga o * [Guia de implementação das APIs TOTVS](https://po-ui.io/guides/api). * * Importante: * * - Caso o po-lookup contenha o [(ngModel)] sem o atributo name, ocorrerá um erro de angular. * Então será necessário informar o atributo name ou o atributo [ngModelOptions]="{standalone: true}". * ``` * * * ``` * * #### 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)` | * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoLookupComponent extends PoLookupBaseComponent implements AfterViewInit, OnDestroy, OnInit, DoCheck, OnChanges { private renderer; private cd; private el; helperEl?: PoHelperComponent; initialized: boolean; timeoutResize: any; visibleElement: boolean; heightGroupButtons: number; disclaimers: any[]; visibleDisclaimers: any[]; id: string; private modalSubscription; private isCalculateVisibleItems; get autocomplete(): "on" | "off"; constructor(); ngAfterViewInit(): void; ngDoCheck(): void; ngOnDestroy(): void; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; /** * 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(); * } * ``` */ focus(): void; emitAdditionalHelp(): void; getAdditionalHelpTooltip(): string; openLookup(): void; checkSelectedItems(): any; setDisclaimers(selectedOptions: Array): void; setViewValue(value: any, object: any): void; getViewValue(): string; getErrorPattern(): string; hasInvalidClass(): any; onBlur(): void; searchEvent(): void; closeDisclaimer(value: any): void; updateVisibleItems(): void; debounceResize(): void; debounce(func: () => void, delay: number): void; getInputWidth(): number; getDisclaimersWidth(): any[]; calculateVisibleItems(): void; onKeyDown(event: KeyboardEvent): void; /** * * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoLookupComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; protected getDefaultSpacing(): PoTableColumnSpacing; private isAdditionalHelpEventTriggered; private isAllowedOpenModal; private formatFields; private setInputValueWipoieldFormat; private initializeListeners; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoMultiselectComponent * * @description * * 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: * * ``` * ... * * * *
* * * * ... * ``` * */ declare class PoMultiselectOptionTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @usedBy PoMultiselectComponent * * @description * * Define o tipo de busca usado no po-multiselect. */ declare enum PoMultiselectFilterMode { /** Verifica se o texto *inicia* com o valor pesquisado. */ startsWith = 0, /** Verifica se o texto *contém* o valor pesquisado. */ contains = 1, /** Verifica se o texto *finaliza* com o valor pesquisado. */ endsWith = 2 } /** * @usedBy PoMultiselectComponent * * @description * * Interface para definição das literais usadas no `po-multiselect`. */ interface PoMultiselectLiterals { /** Texto exibido quando não houver dados encontrados na busca. */ noData?: string; /** Texto do *placeholder* do campo de busca. */ placeholderSearch?: string; /** Texto exibido no botão de selecionar todos. */ selectAll?: string; /** Texto exibido na propriedade placeholder. */ selectItem?: string; } /** * @usedBy PoMultiselectComponent * * @description * * Interface dos itens da coleção que será exibida no dropdown do po-multiselect. */ interface PoMultiselectOption { /** Label exibido nos itens da lista. */ label: string; /** Valor do objeto que será atribuído ao model. */ value: string | number; } /** * @usedBy PoMultiselectComponent * * @description * * Interface para os serviços que serão utilizados no po-multiselect. */ interface PoMultiselectFilter { /** * 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. * * @param {{ property: string, value: string }} params Objeto contendo a propriedade e o valor responsável por realizar o filtro. */ getFilteredData(params: { property: string; value: string; }): Observable>; /** * 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. * * @param {Array} values Array com os valores a serem buscados. */ getObjectsByValues(values: Array): Observable>; } declare class PoMultiselectFilterService implements PoMultiselectFilter { private http; fieldLabel: string; fieldValue: string; private _url; private messages; get url(): string; getFilteredData({ value }: any): Observable>; getObjectsByValues(value: Array): Observable>; configProperties(url: string, fieldLabel: string, fieldValue: string): void; private parseToArrayMultiselectOptions; private parseToMultiselectOption; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * 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)` | * | **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)` | * */ declare abstract class PoMultiselectBaseComponent implements ControlValueAccessor, OnInit, Validator { protected cd?: ChangeDetectorRef; inputElement: ElementRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** Label no componente. */ label?: string; /** Texto de apoio para o campo. */ help?: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** Mensagem apresentada enquanto o campo estiver vazio. */ placeholder?: string; /** * @description * * Placeholder do campo de pesquisa. * * > Caso o mesmo não seja informado, o valor padrão será traduzido com base no idioma do navegador (pt, es e en). * * @default `Buscar` */ placeholderSearch?: string; /** Nome do componente. */ name: string; /** * @optional * * @description * * Indica se o campo "Selecionar todos" será escondido. * * @default `false` */ hideSelectAll?: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Pode ser informada uma função que será disparada quando houver alterações no ngModel. */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @docsPrivate * * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any} */ controlValueWithLabel?: boolean; /** * @optional * * @description * * Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). * Útil em casos onde o posicionamento automático não se comporta como esperado, como quando o componente está próximo * ao final do formulário ou do container visível. Na maioria dos casos, essa direção será respeitada; no entanto, * pode ser ajustada automaticamente conforme o espaço disponível na tela. * * @default `bottom` */ listboxControlPosition: 'top' | 'bottom'; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; selectedOptions: Array; visibleOptionsDropdown: Array; visibleTags: any[]; isServerSearching: boolean; isFirstFilter: boolean; filterSubject: Subject; service: PoMultiselectFilterService; defaultService: PoMultiselectFilterService; displayAdditionalHelp: boolean; protected onModelTouched: any; protected clickOutListener: () => void; protected resizeListener: () => void; protected getObjectsByValuesSubscription: Subscription; protected isExpandedHeight: boolean; private _filterService?; private _debounceTime?; private _disabled?; private _filterMode?; private _hideSearch?; private _literals; private _loading; private _options; private _required?; private _sort?; private _autoHeight; private _fieldLabel?; private _fieldValue?; private _size?; private language; private lastLengthModel; private onModelChange; private validatorChange; private autoHeightInitialValue; /** * @optional * * @description * Nesta propriedade pode ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de itens no componente. * *Também existe a possibilidade de informar um serviço implementando a interface `PoMultiselectFilter`. * *Caso utilizado uma URL, o serviço deve ser retornado no padrão [API PO UI](https://po-ui.io/guides/api) e utilizar as propriedades `p-field-label` e `p-field-value` para a construção da lista de itens. * *Quando utilizada uma URL de serviço, então será concatenada nesta URL o valor que deseja-se filtrar da seguinte forma: * *``` * // caso filtrar por "Peter" * https://localhost:8080/api/heroes?filter=Peter *``` * *E caso iniciar o campo com valor, os itens serão buscados da seguinte forma: * *``` * // caso o valor do campo for [1234, 5678]; * https://localhost:8080/api/heroes?value=1234,5678 * * //O *value* é referente ao `fieldValue`. *``` * */ set filterService(value: PoMultiselectFilter | string); get filterService(): PoMultiselectFilter | string; /** * @optional * * @description * * 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. * * > O valor padrão será `true` quando houver serviço (`p-filter-service`). * * @default `false` */ set autoHeight(value: boolean); get autoHeight(): boolean; /** * @optional * * @description * 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`) e somente será aceito valor maior do que *zero*. * * @default `400` */ set debounceTime(value: number); get debounceTime(): number; /** * @optional * * @description * * Objeto com as literais usadas no `po-multiselect`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoMultiselectLiterals = { * noData: 'Nenhum dado encontrado', * placeholderSearch: 'Buscar', * selectAll: 'Select all', * selectItem: 'Select items' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoMultiselectLiterals = { * noData: 'Sem dados' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente: * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoMultiselectLiterals); get literals(): PoMultiselectLiterals; /** * @optional * * @description * * Define que o campo será obrigatório. * * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * * Indica que o campo será desabilitado. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Esconde o campo de pesquisa existente dentro do dropdown do po-multiselect. * * @default `false` */ set hideSearch(hideSearch: boolean); get hideSearch(): boolean; /** * @description * * Nesta propriedade deve ser definida uma lista de objetos que será exibida no multiselect. * Esta lista deve conter os valores e os labels que serão apresentados na tela. * * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis * atualize a referência do objeto: * * ``` * // atualiza a referência do objeto garantindo a atualização do template * this.options = [...this.options, { value: 'x', label: 'Nova opção' }]; * * // evite, pois não atualiza a referência do objeto podendo gerar atrasos na atualização do template * this.options.push({ value: 'x', label: 'Nova opção' }); * ``` * > A lista pode ser definida utilizando um array com o valor representando `value` e `label` das seguintes formas: * * ``` * * ``` * * ``` * * ``` * * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens. */ set options(options: Array); get options(): Array; /** * @optional * * @description * * Indica que a lista definida na propriedade p-options será ordenada pelo label antes de ser apresentada no * dropdown. * * @default `false` */ set sort(sort: boolean); get sort(): boolean; /** * @optional * * @description * * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. * Valores definidos no enum: PoMultiselectFilterMode * * @default `startsWith` */ set filterMode(filterMode: PoMultiselectFilterMode); get filterMode(): PoMultiselectFilterMode; /** * @optional * * @description * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente * (`p-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista. * * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface * `PoMultiSelectOption`. * * @default `label` */ set fieldLabel(value: string); get fieldLabel(): string; /** * @optional * * @description * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente * (`p-options`), esta propriedade será responsável pelo valor de cada item da lista. * * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface * `PoMultiSelectOption`. * * @default `value` */ set fieldValue(value: string); get fieldValue(): string; constructor(languageService: PoLanguageService, cd?: ChangeDetectorRef); ngOnInit(): void; setService(service: PoMultiselectFilter | string): void; validAndSortOptions(): void; setUndefinedLabels(options: any): void; updateList(options: Array): void; callOnChange(selectedOptions: Array): void; eventChange(selectedOptions: any): void; getValuesFromOptions(selectedOptions: Array): any[]; getLabelByValue(value: any): any; mapSizeToIcon(size: string): string; searchByLabel(search: string, options: Array, filterMode: PoMultiselectFilterMode): void; compareMethod(search: string, option: PoMultiselectOption, filterMode: PoMultiselectFilterMode): any; startsWith(search: string, option: PoMultiselectOption): any; contains(search: string, option: PoMultiselectOption): boolean; endsWith(search: string, option: PoMultiselectOption): any; validate(c: AbstractControl): { [key: string]: any; }; updateSelectedOptions(newOptions: Array, options?: any[]): void; writeValue(values: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: () => void): void; private getValueUpdate; private getValueWrite; private setLabelsAndValuesOptions; private validateModel; private updateInputHeight; abstract applyFilter(value?: string): Observable>; abstract updateVisibleItems(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_hideSelectAll: any; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_controlValueWithLabel: any; static ngAcceptInputType_autoHeight: any; } /** * @docsExtends PoMultiselectBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoMultiselectComponent extends PoMultiselectBaseComponent implements AfterViewInit, DoCheck, OnDestroy, OnChanges { private renderer; private changeDetector; private el; private controlPosition; defaultService: PoMultiselectFilterService; multiselectOptionTemplate: PoMultiselectOptionTemplateDirective; dropdownElement: ElementRef; dropdown: any; iconElement: ElementRef; outerContainer: ElementRef; helperEl?: PoHelperComponent; literalsTag: any; dropdownIcon: string; dropdownOpen: boolean; initialized: boolean; hasMoreTag: boolean; timeoutResize: any; visibleElement: boolean; containerWidth: number; private subscription; private enterCloseTag; private initCalculateItems; private isCalculateVisibleItems; private cacheOptions; private focusOnTag; constructor(); ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngDoCheck(): void; ngOnDestroy(): void; emitAdditionalHelp(): void; /** * 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(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; getInputWidth(): number; getTagsWidth(): any[]; getErrorPattern(): string; hasInvalidClass(): any; calculateVisibleItems(): void; changeItems(changedItems: any): void; updateVisibleItems(): void; debounceResize(): void; onBlur(event: any): void; onKeyDown(event?: any): void; toggleDropdownVisibility(): void; onKeyDownDropdown(event: KeyboardEvent, index: number): void; openDropdown(toOpen: any): void; controlDropdownVisibility(toOpen: boolean): void; scrollToSelectedOptions(): void; setVisibleOptionsDropdown(options: any): void; changeSearch(event: any): void; focusOnFirstItem(): void; closeTag(value: any, event: any): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoMultiselectComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; wasClickedOnToggle(event: MouseEvent): void; applyFilter(value?: string): Observable>; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; private applyFilterInFirstClick; private setOptionsByApplyFilter; private adjustContainerPosition; private close; private focusOnNextTag; private focusOnRemoveTag; handleKeyboardNavigationTag(initialIndex?: number): void; private setTabIndex; private handleArrowLeft; private handleArrowRight; private handleKeyDown; private initializeTagRemoveElements; private initializeListeners; private isAdditionalHelpEventTriggered; private onScroll; private open; private removeListeners; private setContainerWidth; private setPositionDropdown; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class PoNumberBaseComponent extends PoInputGeneric { type: string; protected invalidInputValueOnBlur: boolean; constructor(elementRef: ElementRef, cd: ChangeDetectorRef); eventOnInput(e: any): void; onBlur(event: any): void; onKeyDown(event: any): void; validMaxLength(maxlength: number, value: string): string; writeValueModel(value: any): void; private isEndWithDot; private formatNumber; private isKeyAllowed; private isInvalidKey; private isShortcut; private isControlKeys; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoInputBaseComponent * * @description * * 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. * * @example * * * * * * * * * * * * * * * */ declare class PoNumberComponent extends PoNumberBaseComponent implements OnChanges { /** * @optional * * @description * * Indica uma máscara para o campo, porém é incompatível com o `po-number`. * > **Componentes compatíveis:** `po-input`,`po-decimal`. * * @override */ mask?: string; /** * @optional * * @description * * Intervalo. * * @default 1 */ step?: string; /** Valor mínimo. * * > Quando o valor mínimo for um número com decimais aconselha-se utilizar junto da propriedade `p-step` também passando a ela um valor decimal. */ min?: number; set setMin(min: number); /** Valor máximo. * * > Quando o valor máximo for um número com decimais aconselha-se utilizar junto da propriedade `p-step` também passando a ela um valor decimal. */ max?: number; set setMax(max: number); id: string; constructor(); onWheel(event: Event): void; ngOnChanges(changes: SimpleChanges): void; extraValidation(abstractControl: AbstractControl): { [key: string]: any; }; getErrorPatternMessage(): string; private containsInvalidClass; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoInputBaseComponent * * @description * O `po-password` é um input específico para senhas. Já possui tipo, estilo e ícone predefinidos. * * @example * * * * * * * * * * * * * * * */ declare class PoPasswordComponent extends PoInputGeneric implements OnChanges { id: string; type: string; visiblePassword: boolean; private _hidePasswordPeek?; private _noAutocompletePassword?; /** * @optional * * @description * * Permite esconder a função de espiar a senha digitada. * * @default `false` */ set hidePasswordPeek(value: boolean); set noAutocomplete(value: boolean); get noAutocomplete(): boolean; get hidePasswordPeek(): boolean; get autocomplete(): string; constructor(); ngOnChanges(changes: SimpleChanges): void; extraValidation(c: AbstractControl): { [key: string]: any; }; showPassword(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoRadioGroupComponent * * @description * * Interface para as ações do componente po-radio-group. */ interface PoRadioGroupOption { /** Texto do radio. */ label: string; /** Valor do radio. */ value: string | number; /** Desabilita o radio. */ disabled?: boolean; } /** * @description * * 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)` | * | **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)` | * */ declare abstract class PoRadioGroupBaseComponent implements ControlValueAccessor, Validator { additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** Nome das opções. */ name: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento ao alterar valor do campo. */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; displayAdditionalHelp: boolean; mdColumns: number; value: any; protected onTouched: any; private _columns; private _disabled?; private _options; private _required?; private _size?; private onChangePropagate; private validatorChange; /** * @optional * * @description * * Define a quantidade de colunas para exibição das opções. * * **Considerações:** * - É possível exibir as opções entre `1` e `4` colunas. * - O número máximo de colunas é invariável nas seguintes resoluções: * + `sm`: `1` * + `md`: `2` * * @default `2` */ set columns(value: number); get columns(): number; /** * @optional * * @description * * Indica que o campo será desabilitado. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * Lista de opções que serão exibidas. * Nesta propriedade deve ser definido um array de objetos que implementam a interface PoRadioGroupOption. */ set options(value: Array); get options(): Array; /** * @optional * * @description * * Define o tamanho dos radios do componente: * - `small`: 16x16 (disponível apenas para acessibilidade AA). * - `medium`: 24x24. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` * */ set size(value: string); get size(): string; changeValue(changedValue: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: any): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(modelValue: any): void; private checkColumnsRange; private getGridSystemColumns; private validateModel; abstract getElementByValue(value: any): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; } /** * @docsExtends PoRadioGroupBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * */ declare class PoRadioGroupComponent extends PoRadioGroupBaseComponent implements AfterViewInit, DoCheck, OnChanges { private el; private cd; /** Label do campo. */ label?: string; /** Texto de apoio do campo. */ help?: string; inputEl: ElementRef; radioLabels: QueryList; helperEl?: PoHelperComponent; differ: any; constructor(); ngAfterViewInit(): void; ngDoCheck(): void; ngOnChanges(changes: SimpleChanges): void; emitAdditionalHelp(): void; eventClick(value: any, disabled: any): void; /** * 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(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; getElementByValue(value: any): any; getErrorPattern(): string; hasInvalidClass(): any; onBlur(radio: PoRadioComponent): void; onKeyDown(event: KeyboardEvent, radio?: PoRadioComponent): void; onKeyUp(event: KeyboardEvent, value: any): void; /** * * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoRadioGroupComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; private isAdditionalHelpEventTriggered; private isArrowKey; private isRadioOptionFocused; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoRichTextComponent * * @description * 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. */ declare enum PoRichTextToolbarActions { /** * Seletor de cores, Ação que permite que o usuário altere a cor do texto selecionado. */ Color = "color", /** * Alinhamento de texto, incluindo alinhamento à esquerda, centralizado, à direita e justificado. */ Align = "align", /** * Formatação de texto, como aplicar negrito, itálico ou sublinhado ao texto selecionado. */ Format = "format", /** * Listas com marcadores (bullet points) ou listas numeradas. */ List = "list", /** * Links no conteúdo, aplica partes do texto para serem clicáveis e direcionem para URLs especificadas. */ Link = "link", /** * Mídias, como imagens, no conteúdo do editor. */ Media = "media" } declare class PoRichTextService { private model; emitModel(value: string): void; getModel(): rxjs.Observable; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * O componente `po-rich-text` é um editor de textos enriquecidos. * * Para edição de texto simples sem formatação recomenda-se o uso do componente [**po-textarea**](/documentation/po-textarea). * * > No navegador Internet Explorer não é possível alterar a cor do texto. */ declare abstract class PoRichTextBaseComponent implements ControlValueAccessor, Validator { private richTextService; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Define se o alinhamento de texto será desabilitado. * * @default `false` */ disabledTextAlign: boolean; /** * @description * * Mensagem que será apresentada quando a propriedade required estiver habilitada e o campo for limpo após algo ser digitado. */ errorMessage?: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Texto de apoio do campo. */ help?: string; /** * @optional * * @description * * Rótulo do campo. */ label?: string; /** Nome e identificador do campo. */ name: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; private _hideToolbarActions; /** * @optional * * @description * * Define as ações da barra de ferramentas do `PoRichTextComponent` que serão ocultadas. * Aceita um único valor do tipo `PoRichTextToolbarActions` ou uma lista de valores. * * > Esta propriedade sobrepõe a configuração da propriedade `p-disabled-text-align` quando for passada como `false`, caso sejam definidas simultaneamente. * * @default `[]` * * @example * ``` * // Oculta apenas o seletor de cores * component.hideToolbarActions = PoRichTextToolbarActions.Color; * * // Oculta as opções de alinhamento e link * component.hideToolbarActions = [PoRichTextToolbarActions.Align, PoRichTextToolbarActions.Link]; * ``` */ set hideToolbarActions(actions: Array | PoRichTextToolbarActions); get hideToolbarActions(): Array; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao deixar o campo e que recebe como parâmetro o valor alterado. */ change: EventEmitter; /** * @optional * * @description * * Evento disparado ao modificar valor do model e que recebe como parâmetro o valor alterado. */ changeModel: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; displayAdditionalHelp: boolean; invalid: boolean; onChangeModel: any; value: string; private _height?; private _placeholder; private _readonly; private _required; private _size?; private validatorChange; protected onTouched: any; /** * @optional * * @description * * Define a altura da área de edição de texto. * * > Altura mínima do componente é `94` e a altura máxima é `262`. */ set height(height: number); get height(): number; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. * * @default '' */ set placeholder(value: string); get placeholder(): string; /** * @optional * * @description * * Indica que o campo será somente leitura. * * @default `false` */ set readonly(value: boolean); get readonly(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(value: boolean); get required(): boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura dos buttons como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura dos buttons como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; constructor(richTextService: PoRichTextService); registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(value: string): void; protected updateModel(value: any): void; protected validateModel(value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_disabledTextAlign: any; } declare class PoRichTextBodyComponent implements OnInit, OnDestroy { private richTextService; bodyElement: ElementRef; height?: string; label: string; modelValue?: string; placeholder?: string; readonly?: string; change: EventEmitter; commands: EventEmitter; keydown: EventEmitter; selectedLink: EventEmitter; size: string; shortcutCommand: EventEmitter; value: EventEmitter; blur: EventEmitter; private isLinkEditing; private linkElement; private timeoutChange; private valueBeforeChange; private modelSubscription; ngOnInit(): void; ngOnDestroy(): void; executeCommand(command: string | { command: any; value: string | any; }): void; linkEditing(event: any): void; onBlur(): void; focus(): void; onClick(): void; onFocus(): void; onKeyDown(event: any): void; onKeyUp(event: any): void; onPaste(): void; update(): void; private addClickListenerOnAnchorElements; private emitSelectionCommands; private getTextSelection; private handleCommandLink; private insertHtmlLinkElement; private isCursorPositionedInALink; private isParentNodeAnchor; private makeLinkTag; private onAnchorClick; private removeBrElement; private rgbToHex; private toggleCursorOnLink; private updateModel; private updateValueWithModelValue; private verifyCursorPositionInFirefoxIEEdge; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoButtonGroupComponent * * @description * * Tipos de seleção (`p-toggle`) disponíveis para o componente. */ declare enum PoButtonGroupToggle { /** Seleção múltipla. */ Multiple = "multiple", /** Seleção desabilitada. */ None = "none", /** Seleção única. */ Single = "single" } interface PoRichTextToolbarButtonGroupItem extends PoButtonGroupItem { command?: string; } /** * @usedBy PoUploadComponent * * @description * * Interface que define as restrições dos arquivos a serem selecionados com base em regras predefinidas * para o seu tamanho, extensão e quantidade. */ interface PoUploadFileRestrictions { /** * Extensões permitidas de arquivos que serão enviados ao servidor, devendo ser informada uma coleção de extensões, por exemplo: * ``` * allowedExtensions = ['.png', '.jpg', '.pdf']; * ``` */ allowedExtensions?: Array; /** * Quantidade máxima de arquivos para o *upload*. * * > Esta propriedade será válida somente se a propriedade `p-multiple` estiver habilitada e seu valor for maior do que zero. */ maxFiles?: number; /** * Tamanho máximo do arquivo a ser enviado ao servidor. * * Deve ser informado um valor em *bytes*, por exemplo: `31457280` (30MB). * * > Por padrão o valor é `30 MB`. */ maxFileSize?: number; /** * Tamanho mínimo em *bytes* do arquivo que será enviado ao servidor. * * > Por padrão o valor é `0`. */ minFileSize?: number; } /** * @usedBy PoProgressComponent * * @description * * *Enum* `PoProgressStatus` para os status de barra de progresso. */ declare enum PoProgressStatus { /** Define o status `default` para a barra de progresso. */ Default = "default", /** Define o status de `error` para a barra de progresso. */ Error = "error", /** Define o status de `success` para a barra de progresso. */ Success = "success" } /** * @usedBy PoProgressComponent * * @description * * Enum para configurar a expessura (`p-size`) da barra de progresso do componente. */ declare enum PoProgressSize { /** Tamanho médio com 4px. */ medium = "medium", /** Tamanho grande com 8px. */ large = "large" } /** * @description * Interface para as ações dos componentes po-progress e po-upload. * * @usedBy PoProgressComponent, PoUploadComponent */ interface PoProgressAction { /** Rótulo da ação. */ label?: string; /** * @description * * Define um ícone que será exibido ao lado esquerdo do rótulo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * * myProperty = [ * { * label: 'FA ICON', * icon: this.iconTemplate * } * ]; * ``` */ icon?: string | TemplateRef; /** * Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado. * * Também é possível informar diretamente um valor booleano que vai habilitar ou desabilitar a ação para todos os registros. */ disabled?: boolean | Function; /** * @description * * Define a cor do item, sendo `default` o padrão. * * Valores válidos: * - `default` * - `danger` - indicado para ações exclusivas (excluir, sair). */ type?: string; /** * @description * * Define se a ação será visível. * * > Caso o valor não seja especificado a ação será visível. * * Opções para tornar a ação visível ou não: * * - Função que deve retornar um booleano. * * - Informar diretamente um valor booleano. * */ visible?: boolean | Function; } /** * @description * * 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)` | * */ declare class PoProgressBaseComponent { /** * @optional * * @description * * Desabilita botão de cancelamento na parte inferior da barra de progresso. * * > Se nenhuma função for passada para o evento `(p-cancel)` ou a barra de progresso estiver com o status `PoProgressStatus.Success`, * o ícone de cancelamento não será exibido. * * @default `false` */ disabledCancel: boolean; /** * @optional * * @description * * Informação adicional que aparecerá abaixo da barra de progresso ao lado direito. */ info?: string; /** * @optional * * @description * * Ícone que aparecerá ao lado do texto da propriedade `p-info`. * * Exemplo: `an an-check`. */ infoIcon?: string | TemplateRef; /** * @optional * * @description * * Status da barra de progresso que indicará visualmente ao usuário * o andamento, por exemplo, se a mesma foi concluída com sucesso. * * @default `PoProgressStatus.Default` */ status: PoProgressStatus; /** * @optional * * @description * * Texto principal que aparecerá abaixo da barra de progresso no lado esquerdo. */ text?: string; /** * @optional * * @description * * Permite definir uma ação personalizada no componente `po-progress`, exibindo um botão no canto inferior direito * da barra de progresso. A ação deve implementar a interface **PoProgressAction**, possibilitando configurar: * * - **`label`**: Texto exibido no botão (opcional). * - **`icon`**: Ícone exibido no botão (opcional). * - **`type`**: Tipo do botão (`default` ou `danger`) para indicar a intenção da ação (opcional). * - **`disabled`**: Indica se o botão deve estar desabilitado (opcional). * - **`visible`**: Determina se o botão será exibido. Pode ser um valor booleano ou uma função que retorna um booleano (opcional). * * @example * **Exemplo de uso:** * ```html * * ``` * * ```typescript * customAction: PoProgressAction = { * label: 'Baixar', * icon: 'an an-download', * type: 'default', * visible: () => true * }; * * onCustomActionClick() { * console.log('Custom action triggered!'); * } * ``` * * **Cenários comuns:** * 1. **Download de Arquivos**: Exibir um botão para realizar o download de um arquivo associado à barra de progresso. * 2. **Cancelamento Personalizado**: Adicionar uma ação para interromper ou reverter uma operação em andamento. */ customAction?: PoProgressAction; /** * @optional * * @description * * Evento emitido quando o botão definido em `p-custom-action` é clicado. Este evento retorna informações * relacionadas à barra de progresso ou ao arquivo/processo associado, permitindo executar ações específicas. * * @example * **Exemplo de uso:** * * ```html * * ``` * * ```typescript * customAction: PoProgressAction = { * label: 'Cancelar', * icon: 'an an-x', * type: 'danger', * visible: true * }; * * onCustomActionClick() { * console.log('Custom action triggered!'); * } * ``` * * **Cenários comuns:** * 1. **Botão de Download**: Disparar o download do arquivo associado à barra de progresso. * 2. **Ação Condicional**: Realizar uma validação ou chamada de API antes de prosseguir com a ação. */ customActionClick: EventEmitter; /** * @optional * * @description * * Evento que será disparado ao clicar no ícone de cancelamento ("x") na parte inferior da barra de progresso. * * Ao ser disparado, a função receberá como parâmetro o status atual da barra de progresso. * * > Se nenhuma função for passada para o evento ou a barra de progresso estiver com o status `PoProgressStatus.Success`, * o ícone de cancelamento não será exibido. */ cancel: EventEmitter; /** * @optional * * @description * * Evento que será disparado ao clicar no ícone de tentar novamente na parte inferior da barra de progresso. * * > o ícone será exibido apenas se informar uma função neste evento e o status da barra de progresso for * `PoProgressStatus.Error`. */ retry: EventEmitter; private _indeterminate?; private _value?; private _size; private _sizeActions; /** * @optional * * @description * * Habilita o modo indeterminado na barra de progresso, que mostra uma animação fixa sem um valor estabelecido. * * Esta opção pode ser utilizada quando não souber quanto tempo levará para que um processo seja concluído. * * > Caso esta propriedade e a `p-value` seja habilitada, a propriedade `p-value` será ignorada. * * @default `false` */ set indeterminate(indeterminate: boolean); get indeterminate(): boolean; /** * @optional * * @description * * Valor que representará o progresso. * * > Os valores aceitos são números inteiros de `0` à `100`. * * @default `0` */ set value(value: number); get value(): number; /** * @optional * * @description * * Define a expessura da barra de progresso. * * Valores válidos: * - medium * - large * * @default `large` */ set size(value: string); get size(): string; /** * @optional * * @description * * 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`: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set sizeActions(value: string); get sizeActions(): string; /** * @optional * * @description * * Ativa a exibição da porcentagem atual da barra de progresso. * * @default `false` */ showPercentage: boolean; private isProgressRangeValue; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabledCancel: any; static ngAcceptInputType_showPercentage: any; } /** * @docsExtends PoProgressBaseComponent * * @example * * * * * * * * * * * * * * */ declare class PoProgressComponent extends PoProgressBaseComponent implements OnInit { language: any; literals: any; get isAllowCancel(): boolean; get isAllowInfoError(): boolean; get isAllowRetry(): boolean; get statusClass(): string; private poLanguageService; private router; ngOnInit(): void; emitCancellation(): void; emitRetry(): void; actionIsDisabled(action: any): any; callAction(): void; isActionVisible(action: any): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoProgressBarComponent { indeterminate: boolean; value: number; get valueScale(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-progress`. */ declare class PoProgressModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoUploadComponent * * @description * * Interface para definição das literais usadas no `po-upload`. */ interface PoUploadLiterals { /** Texto indicativo para a área onde os arquivos devem ser arrastados quando utilizada a propriedade `p-drag-drop`. */ dragFilesHere?: string; /** Texto indicativo para a área onde os diretórios devem ser arrastados quando utilizada a propriedade `p-drag-drop`. */ dragFoldersHere?: string; /** Texto indicativo para a área onde os arquivos devem ser soltos quando utilizada a propriedade `p-drag-drop` */ dropFilesHere?: string; /** Texto indicativo para a área onde os diretórios devem ser soltos quando utilizada a propriedade `p-drag-drop`. */ dropFoldersHere?: string; /** Parâmetro *files* para o texto de exibição quando arrastado um arquivo para um local inválido com a opção de *dragDrop*. */ files?: string; /** Parâmetro *folders* para o texto de exibição quando arrastado um arquivo para um local inválido com a opção de *dragDrop*. */ folders?: string; /** Texto exibido caso o usuário arrastar um arquivo para um local inválido ao utilizar a opção de *dragDrop*. */ invalidDropArea?: string; /** Texto exibido no label do botão de seleção dos arquivos. */ selectFile?: string; /** Texto exibido no label do botão de seleção dos arquivos ao utilizar a propriedade `p-multiple`. */ selectFiles?: string; /** Texto exibido no label do botão de seleção dos arquivos ao utilizar a propriedade `p-directory`. */ selectFolder?: string; /** * Texto utilizado para indicar a possibilidade de seleção de arquivos na área onde podem ser arrastados os arquivos * ao utilizar a opção de *dragDrop*. */ selectFilesOnComputer?: string; /** * Texto utilizado para indicar a possibilidade de seleção de diretório na área onde podem ser arrastados os arquivos * ao utilizar a opção de *dragDrop*. */ selectFolderOnComputer?: string; /** Texto exibido no label do botão para iniciar o envio dos arquivos. */ startSending?: string; /** Texto a ser exibido quando ocorrer erro no envio do arquivo. */ errorOccurred?: string; /** Texto a ser exibido quando o envio do arquivo for realizado com sucesso. */ sentWithSuccess?: string; /** Texto a ser exibido no container de informação quando o estado for de sucesso. */ doneText?: string; /** Texto a ser exibido no container de informação quando o estado for enviando. */ uploadingText?: string; /** Texto de Tente novamente ao ocorrer erro ao enviar. */ tryAgain?: string; /** Texto do leitor de tela ao focar no ícone de fechar. */ close?: string; /** Título do modal de pré-visualizar. */ preview?: string; /** Texto do leitor da miniatura da imagem. */ thumbnail?: string; /** Texto do botão padrão do modal de pré-visualizar. */ continue?: string; } declare enum PoUploadStatus { Uploaded = 0, Uploading = 1, Error = 2, None = 3 } declare class PoUploadFile { name: string; rawFile: File; status?: PoUploadStatus; uid: string; extension: string; size: number; displayName?: string; percent?: number; sizeNotAllowed?: boolean; extensionNotAllowed?: boolean; hideDoneContent?: boolean; errorMessage?: string; thumbnailUrl?: string; imageError?: boolean; constructor(file: any); private getExtension; private generateUUID; private getFileSize; } declare class PoUploadBaseService { private http; formField: string; requests: Array; /** * Método responsável por enviar os arquivos ao servidor, conforme o parâmetro URL. * * @param url URL da requisição a ser efetuada. * @param files Arquivos a serem enviados. * @param tOnUpload Função a ser executada quando o arquivo for enviado ao servidor. * @param uploadCallback Função que será executada enquanto os arquivos estiverem sendo enviados. * @param successCallback Função a ser executada quando a requisição for efetuada com sucesso. * @param errorCallback Função a ser executada quando a requisição foi efetuada com sucesso. */ upload(url: string, files: Array, headers: { [name: string]: string | Array; }, tOnUpload: EventEmitter, uploadCallback: (file: PoUploadFile, percent: number) => void, successCallback: (file: PoUploadFile, event: any) => void, errorCallback: (file: PoUploadFile, event: any) => void): void; sendFile(url: string, file: PoUploadFile, headers: { [name: string]: string | Array; }, formData: FormData, uploadCallback: (file: PoUploadFile, percent: number) => void, successCallback: (file: PoUploadFile, event: any) => void, errorCallback: (file: PoUploadFile, event: any) => void): void; getRequest(url: string, headers: { [name: string]: string | Array; }, formData: FormData): Observable; stopRequestByFile(file: any, callback: () => void): void; removeRequest(requestObj: any): void; addRequest(file: PoUploadFile, request: Subscription): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class PoUploadService extends PoUploadBaseService { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * 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 | * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------| * | **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)` | */ declare abstract class PoUploadBaseComponent implements ControlValueAccessor, Validator { protected uploadService: PoUploadService; protected cd: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper`) será incluído no body da página e não dentro do componente. Essa * opção pode ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o * posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * * Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. * * > Esta propriedade funciona somente se a propriedade `p-drag-drop` estiver habilitada. * * @default `320` */ dragDropHeight: number; /** Rótulo do campo. */ label?: string; /** Texto de apoio para o campo. */ help?: string; /** URL que deve ser feita a requisição com os arquivos selecionados. */ url: string; /** Define o valor do atributo `name` do componente. */ name: string; /** * @optional * * @description * * Define se o envio do arquivo será automático ao selecionar o mesmo. * * > Esta propriedade funciona somente se a propriedade `p-url` tiver um valor atribuído. * * @default `false` */ autoUpload?: boolean; /** * @optional * * @description * * Desabilita botão de remover o(s) arquivo(s) selecionado(s). * * @default `false` */ disabledRemoveFile: boolean; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a pré-visualização de imagens ao anexá-las. * * > Propriedade funciona apenas em arquivos de formato de imagem (`.png`, `.jpg`, `.jpeg` e `.gif`). * Será ignorada em outros tipos de arquivo. * * @default `true` */ showThumbnail: boolean; /** Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. */ headers: { [name: string]: string | Array; }; /** * @optional * * @description * * Define se a propriedade `p-url` é obrigatória. * * Caso a propriedade seja definida como `false`: * - o botão de "Selecionar arquivo" ficará habilitado mesmo sem a propriedade `p-url` definida. * - o botão "Iniciar envio" ficará oculto até que a propriedade `p-url` seja definida. * * > Se utilizada com a propriedade `p-auto-upload` definida como `true` será necessário definir a propriedade `p-url`. * * @default `true` */ requiredUrl: boolean; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito * de cada barra de progresso associada aos arquivos enviados ou em envio. * * A ação deve implementar a interface **PoProgressAction**, permitindo configurar propriedades como: * - `label`: Texto do botão. * - `icon`: Ícone a ser exibido no botão. * - `type`: Tipo de botão (ex.: `danger` ou `default`). * - `disabled`: Indica se o botão deve estar desabilitado. * - `visible`: Indica se o botão deve estar visível. * * **Exemplo de uso:** * * ```html * * * ``` * * ```typescript * customAction: PoProgressAction = { * label: 'Baixar', * icon: 'an an-download', * type: 'default', * visible: true * }; * * onCustomActionClick(file: PoUploadFile) { * console.log(`Ação personalizada clicada para o arquivo: ${file.name}`); * } * ``` */ customAction?: PoProgressAction; /** * @optional * * @description * * 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 * do modal. * * A ação deve implementar a interface **PoModalAction**, permitindo configurar propriedades como: * - `label`: Texto do botão. * - `action`: Ícone a ser exibido no botão. * - `danger`: Define a propriedade `p-danger` do botão. * - `disabled`: Indica se o botão deve estar desabilitado. * - `visible`: Indica se o botão deve estar visível. * * **Exemplo de uso:** * * ```html * * ``` * * ```typescript * customActions: Array = [ * { label: 'Confirmar', action: this.confirmModal.bind(this) }, * { label: 'Cancelar', action: this.closeModal.bind(this) } *]; * * ``` */ customModalActions?: Array; /** * @optional * * @description * * Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. * * O evento retorna o arquivo associado à barra de progresso onde a ação foi clicada, * permitindo executar operações específicas para aquele arquivo. * * **Exemplo de uso:** * * ```html * * * ``` * * ```typescript * customAction: PoProgressAction = { * label: 'Baixar', * icon: 'an an-download', * type: 'default', * visible: true * }; * * onCustomActionClick(file: PoUploadFile) { * console.log(`Ação personalizada clicada para o arquivo: ${file.name}`); * // Lógica para download do arquivo * this.downloadFile(file); * } * * downloadFile(file: PoUploadFile) { * // Exemplo de download * console.log(`Iniciando o download do arquivo: ${file.name}`); * } * ``` */ customActionClick: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Função que será executada no momento de realizar o envio do arquivo, * onde será possível adicionar informações ao parâmetro que será enviado na requisição. * É passado por parâmetro um objeto com o arquivo e as propriedades data e extraFormData, * que serão enviadas em conjunto com o arquivo na requisição, por exemplo: * * > data, nesta propriedade pode ser informado algum dado * ``` * event.data = {id: 'id do usuário'}; * ``` * > extraFormData, nesta propriedade pode ser informado algum dado solicitado pela API * > que não possa estar no objeto `data`, assim o conteúdo sará extraído do objeto e * > enviado como parâmetro * ``` * event.extraFormData = {id: 'id do usuário'}; * ``` */ onUpload: EventEmitter; /** * @optional * * @description * * Evento será disparado ao clicar no ícone de fechar. * > Por parâmetro será passado o objeto do arquivo. */ onCancel: EventEmitter; /** * @optional * * @description * * Evento será disparado ao abrir o modal de pré-visualização. * > Por parâmetro será passado o objeto do arquivo. */ onOpenModalPreview: EventEmitter; /** * @optional * * @description * * Evento será disparado ao clicar no ícone de remover. * > Por parâmetro será passado o objeto do arquivo. */ onRemove: EventEmitter; /** * @optional * * @description * * Evento será disparado quando ocorrer algum erro no envio do arquivo. * > Por parâmetro será passado o objeto do retorno que é do tipo `HttpErrorResponse`. */ onError: EventEmitter; /** * @optional * * @description * * Evento será disparado quando o envio do arquivo for realizado com sucesso. * > Por parâmetro será passado o objeto do retorno que é do tipo `HttpResponse`. */ onSuccess: EventEmitter; /** * @optional * * @description * * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da *tag* `form`. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` * */ ngModelChange: EventEmitter; allowedExtensions: string; currentFiles: Array; canHandleDirectory: boolean; displayAdditionalHelp: boolean; onModelChange: any; protected extensionNotAllowed: number; protected quantityNotAllowed: number; protected sizeNotAllowed: number; protected onModelTouched: any; private _directory?; private _disabled?; private _dragDrop?; private _fileRestrictions?; private _formField?; private _hideRestrictionsInfo?; private _hideSelectButton?; private _hideSendButton?; private _isMultiple?; private _literals?; private _required?; private _size?; private language; private validatorChange; /** * @optional * * @description * * Permite a seleção de diretórios contendo um ou mais arquivos para envio. * * > A habilitação desta propriedade se restringe apenas à seleção de diretórios. * * > Definição não suportada pelo browser **Internet Explorer**, todavia será possível a seleção de arquivos padrão. * * @default `false` */ set directory(value: boolean); get directory(): boolean; /** * @optional * * @description * * Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos * automaticamente. * * > Recomendamos utilizar apenas um `po-upload` com esta funcionalidade por tela. * * @default `false` */ set dragDrop(value: boolean); get dragDrop(): boolean; /** * @optional * * @description * * Oculta visualmente as informações de restrições para o upload. * * @default `false` */ set hideRestrictionsInfo(value: boolean); get hideRestrictionsInfo(): boolean; /** * @optional * * @description * * Omite o botão de seleção de arquivos. * * > Caso o valor definido seja `true`, caberá ao desenvolvedor a responsabilidade * pela chamada do método `selectFiles()` para seleção de arquivos. * * @default `false` */ set hideSelectButton(value: boolean); get hideSelectButton(): boolean; /** * @optional * * @description * * Omite o botão de envio de arquivos. * * > Caso o valor definido seja `true`, caberá ao desenvolvedor a responsabilidade * pela chamada do método `sendFiles()` para envio do(s) arquivo(s) selecionado(s). * * @default `false` */ set hideSendButton(value: boolean); get hideSendButton(): boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-upload`. * * Existem duas maneiras de customizar o componente: * * - passando um objeto implementando a interface `PoUploadLiterals` com todas as literais disponíveis; * - passando apenas as literais que deseja customizar: * ``` * const customLiterals: PoUploadLiterals = { * folders: 'Pastas', * selectFile: 'Buscar arquivo', * startSending: 'Enviar' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente: * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do *browser* (pt, en, es, ru). */ set literals(value: PoUploadLiterals); get literals(): PoUploadLiterals; /** * @optional * * @description * * Objeto que segue a definição da interface `PoUploadFileRestrictions`, * que possibilita definir tamanho máximo/mínimo e extensão dos arquivos permitidos. */ set fileRestrictions(restrictions: PoUploadFileRestrictions); get fileRestrictions(): PoUploadFileRestrictions; /** * @optional * * @description * * Nome do campo de formulário que será enviado para o serviço informado na propriedade `p-url`. * * @default `files` */ set formField(value: string); get formField(): string; /** * @optional * * @description * * Indica que o campo será desabilitado. */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Define se pode selecionar mais de um arquivo. * * > Se utilizada a `p-directory`, habilita-se automaticamente esta propriedade. */ set isMultiple(value: boolean); get isMultiple(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho e as ações do componente: * - `small`: altura do button como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do button como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; constructor(uploadService: PoUploadService, languageService: PoLanguageService, cd: ChangeDetectorRef); setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(model: any): void; protected isExceededFileLimit(currentFilesLength: number): boolean; protected parseFiles(files: Array): Array; protected validateModel(model: any): void; private checkRestrictions; private existsFileSameName; private getUploadService; private insertFileInFiles; private isAllowedExtension; private setAllowedExtensions; private initRestrictions; private updateExistsFileInFiles; abstract sendFeedback(file?: any): void; abstract setDirectoryAttribute(value: boolean): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; static ngAcceptInputType_disabledRemoveFile: any; static ngAcceptInputType_requiredUrl: any; } /** * @docsExtends PoUploadBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoUploadComponent extends PoUploadBaseComponent implements AfterViewInit, OnChanges { renderer: Renderer2; private i18nPipe; private notification; private inputFile; private poUploadDragDropComponent; uploadButton: PoButtonComponent; modalComponent: PoModalComponent; helperEl?: PoHelperComponent; id: string; infoByUploadStatus: { [key: string]: { text: (percent?: number) => string; icon?: string; }; }; progressStatusByFileStatus: { 0: PoProgressStatus; 2: PoProgressStatus; }; private calledByCleanInputValue; protected modalPrimaryAction: PoModalAction; protected modalSecondaryAction: PoModalAction; protected errorMessage: string; protected tooltipTitle: string; protected modalImageUrl: string; protected errorModalImage: boolean; constructor(); get displayDragDrop(): boolean; get displaySendButton(): boolean; get selectFileButtonLabel(): string; get hasMoreThanFourItems(): boolean; get hasMultipleFiles(): boolean; get hasFileNotUploaded(): boolean; get isDisabled(): boolean; get maxFiles(): number; cancel(file: PoUploadFile, keydown?: KeyboardEvent): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; /** Método responsável por **limpar** o(s) arquivo(s) selecionado(s). */ clear(): void; emitAdditionalHelp(): void; /** * 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(); * } * ``` */ focus(): void; getAdditionalHelpTooltip(): string; hasAnyFileUploading(files: Array): boolean; isAllowCancelEvent(status: PoUploadStatus): status is PoUploadStatus.Uploading | PoUploadStatus.Error | PoUploadStatus.None; onFileChange(event: any): void; onFileChangeDragDrop(files: any): void; onKeyDown(event: KeyboardEvent): void; /** * Método responsável por fechar o modal. */ closeModal(): void; openModal(file: PoUploadFile, keydown?: KeyboardEvent): void; removeFile(file: any): void; /** Método responsável por **abrir** a janela para seleção de arquivo(s). */ selectFiles(): void; sendFeedback(file?: any): void; /** Método responsável por **enviar** o(s) arquivo(s) selecionado(s). */ sendFiles(): void; setDirectoryAttribute(canHandleDirectory: boolean): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoUploadComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; stopUpload(file: PoUploadFile): void; trackByFn(index: any, file: PoUploadFile): string; uploadFiles(files: Array): void; customClick(file: PoUploadFile): void; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; protected actionIsDisabled(action: any): any; protected isActionVisible(action: any): boolean; protected onImageError(file: any): void; protected showTooltipText(e: MouseEvent, text: string): void; private cleanInputValue; private isAdditionalHelpEventTriggered; private isUploadButtonFocused; private responseHandler; private setPipeArguments; private setPrimaryActionModal; private stopUploadHandler; private updateFiles; private updateModel; private uploadingHandler; private mapCleanUploadFiles; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoRichTextImageModalComponent { private languageService; modal: PoModalComponent; modalImageForm: NgForm; upload: PoUploadComponent; size: string; command: EventEmitter; savedCursorPosition: any; selection: Selection; uploadModel: Array; uploadRestrictions: PoUploadFileRestrictions; urlImage: string; readonly literals: any; modalCancelAction: PoModalAction; modalConfirmAction: PoModalAction; get isUploadValid(): boolean; get isUrlValid(): boolean; constructor(); openModal(): void; private cleanUpFields; private convertToBase64; private emitCommand; private insertElementRef; private retrieveCursorPosition; private saveCursorPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoRichTextLinkModalComponent implements OnInit { private languageService; modal: PoModalComponent; modalLinkForm: NgForm; size: string; command: EventEmitter; linkEditing: EventEmitter; savedCursorPosition: any; selection: Selection; urlLink: string; urlLinkText: string; readonly literals: any; modalCancelAction: PoModalAction; modalConfirmAction: PoModalAction; private isLinkEditing; private isSelectedLink; private linkElement; private savedSelection; constructor(); ngOnInit(): void; linkConfirmAction(): string; formModelValidate(): boolean; openModal(selectedLinkElement: ElementRef): void; private selectedLink; private checkIfIsEmpty; private cleanUpFields; private formReset; private prepareModalForLink; private restoreSelection; private retrieveCursorPosition; private saveCursorPosition; private saveSelectionText; private setLinkEditableForModal; private setModalCancelAction; private setModalConfirmAction; private toEditLink; private toInsertLink; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoRichTextToolbarComponent implements AfterViewInit { private languageService; colorPickerInput: ElementRef; toolbarElement: ElementRef; richTextImageModal: PoRichTextImageModalComponent; richTextLinkModal: PoRichTextLinkModalComponent; command: EventEmitter; modal: EventEmitter; linkEditing: EventEmitter; readonly literals?: any; alignButtons: Array; formatButtons: Array; listButtons: Array; linkButtons: Array; mediaButtons: Array; private _readonly; private selectedLinkElement; private _hideToolbarActions; formatToolbarAction: PoRichTextToolbarActions; colorToolbarAction: PoRichTextToolbarActions; alignToolbarAction: PoRichTextToolbarActions; listToolbarAction: PoRichTextToolbarActions; linkToolbarAction: PoRichTextToolbarActions; mediaToolbarAction: PoRichTextToolbarActions; /** * @optional * * @description * * Define as ações da barra de ferramentas do `PoRichTextComponent` que serão ocultadas. * Aceita um único valor do tipo `PoRichTextToolbarActions` ou uma lista de valores. * * > Esta propriedade sobrepõe a configuração da propriedade `p-disabled-text-align` quando for passada como `false`, caso sejam definidas simultaneamente. * * @default `[]` * * @example * ``` * // Oculta apenas o seletor de cores * component.hideToolbarActions = PoRichTextToolbarActions.Color; * * // Oculta as opções de alinhamento e link * component.hideToolbarActions = [PoRichTextToolbarActions.Align, PoRichTextToolbarActions.Link]; * ``` */ set hideToolbarActions(actions: Array | PoRichTextToolbarActions); get hideToolbarActions(): Array; set readonly(value: boolean); get readonly(): boolean; get isInternetExplorer(): boolean; size: string; constructor(); ngAfterViewInit(): void; changeTextColor(value: any): void; emitLinkEditing(isLinkEdit: boolean): void; selectedLink(selectedLinkElement: any): void; setButtonsStates(obj: { commands: Array; hexColor: string; }): void; isActionHidden(action: PoRichTextToolbarActions): boolean; showColor(): boolean; shortcutTrigger(): void; emitCommand(command: string): void; private emitAlignCommand; private removeButtonFocus; private setColorInColorPicker; private toggleDisableButtons; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoRichTextBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoRichTextComponent extends PoRichTextBaseComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges { private element; bodyElement: PoRichTextBodyComponent; richTextToolbar: PoRichTextToolbarComponent; helperEl?: PoHelperComponent; private listener; private modelLastUpdate; toolbarActions: Array; get errorMsg(): string; constructor(); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** * 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(); * } * ``` */ focus(): void; onBlur(): void; onChangeValue(value: any): void; onKeyDown(event: KeyboardEvent): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoRichTextComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; updateValue(value: string): void; private addKeyListeners; private controlChangeModelEmitter; private verifyAutoFocus; private validateClassesForRequired; isAllActionsHidden(): boolean; updateAlignOnHideToolbarActionsList(): void; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoSelectComponent * * @description * * Interface da coleções de itens que deve ser informado no componente po-select */ interface PoSelectOption { /** Label a ser utilizada nos itens da lista. */ label: string; /** Valor do objeto que será atribuído ao model. */ value: string | number; } /** * @usedBy PoSelectComponent * * @description * * Interface da coleções de itens em grupo, utilizando uma label para o grupo e as opções do tipo `PoSelectOption`. */ interface PoSelectOptionGroup { /** Label para denominar o nome do grupo. */ label: string; /** Lista com as opções disponíveis em cada grupo. */ options: Array; } /** * @docsExtends PoFieldModel */ declare abstract class PoFieldValidateModel extends PoFieldModel implements Validator { changeDetector: ChangeDetectorRef; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ required: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; protected hasValidatorRequired: boolean; private onValidatorChange; constructor(changeDetector: ChangeDetectorRef); validate(abstractControl: AbstractControl): ValidationErrors; registerOnValidatorChange(fn: any): void; validateModel(): void; abstract extraValidation(c: AbstractControl): { [key: string]: any; }; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "optional": { "alias": "p-optional"; "required": false; }; "required": { "alias": "p-required"; "required": false; }; "fieldErrorMessage": { "alias": "p-field-error-message"; "required": false; }; "errorLimit": { "alias": "p-error-limit"; "required": false; }; "showRequired": { "alias": "p-show-required"; "required": false; }; }, {}, never, never, true, never>; static ngAcceptInputType_optional: any; static ngAcceptInputType_required: any; } /** * @docsExtends PoFieldValidateModel * * @example * * * * * * * * * * * * * * * * * * * * * * * @description * * 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` | * | **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)` | * */ declare class PoSelectComponent extends PoFieldValidateModel implements OnChanges { private el; renderer: Renderer2; selectElement: ElementRef; helperEl?: PoHelperComponent; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` */ ngModelChange: EventEmitter; /** * @optional * * @description * * Indica que o campo será somente para leitura. * * @default `false` */ readonly: boolean; /** Mensagem que aparecerá enquanto nenhuma opção estiver selecionada. */ placeholder?: string; displayValue: any; id: string; modelValue: any; selectedValue: any; optionsDefault: any[]; listGroupOptions: any[]; optionWithoutGroup: any[]; isSafari: boolean; protected onModelTouched: any; private _fieldLabel?; private _fieldValue?; private _loading; private _options; private _size?; /** * Nesta propriedade deve ser definido uma coleção de objetos que implementam a interface `PoSelectOption`, * ou uma coleção de objetos dentro de grupos diferentes, que seriam da interface `PoSelectOptionGroup`. * * Caso esta lista estiver vazia, o model será `undefined`. * * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis * atualize a referência do objeto: * * ``` * // atualiza a referência do objeto garantindo a atualização do template * this.options = [...this.options, { value: 'x', label: 'Nova opção' }]; * * // evite, pois não atualiza a referência do objeto podendo gerar atrasos na atualização do template * this.options.push({ value: 'x', label: 'Nova opção' }); * ``` * * > Para coleção de objetos dentro de grupos distintos será exibido a label e opções somente se a propriedade `options` possua valores. * Sendo assim, a estrutura seguiria dessa forma: * * ``` * this.options = [{ * label: 'Opções', * options: [ * { value: 1, label: 'opção 1' }, * { value: 2, label: 'opção 2' } * ], * }]; * ``` * * É possível a utilização de opções agrupadas e desagrupadas em conjunto, porém será feita a ordenação de exibir as opções * desagrupadas acima. * */ set options(options: Array); get options(): Array; /** * @optional * * @description * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente * (`p-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista. * * @default `label` */ set fieldLabel(value: string); get fieldLabel(): string; /** * @optional * * @description * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente * (`p-options`), esta propriedade será responsável pelo valor de cada item da lista. * * @default `value` */ set fieldValue(value: string); /** * @docsPrivate * * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any} */ controlValueWithLabel?: boolean; get fieldValue(): string; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; constructor(); ngOnChanges(changes: SimpleChanges): void; /** * 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(); * } * ``` */ focus(): void; getErrorPattern(): string; hasInvalidClass(): any; mapSizeToIcon(size: string): string; onBlur(event: any): void; onSelectChange(value: any): void; onUpdateOptions(): void; updateValues(option: any): void; onWriteValue(value: any): void; extraValidation(c: AbstractControl): { [key: string]: any; }; isItemGroup(item: PoSelectOption | PoSelectOptionGroup | any): boolean; onKeyDown(event: KeyboardEvent): void; registerOnTouched(fn: any): void; /** * 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 * * ``` * ```typescript * onKeyDown(event: KeyboardEvent, inp: PoSelectComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; private isEqual; private findOptionValue; private getValueUpdate; private getValueWrite; private transformInArray; private separateOptions; private validateOptions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_readonly: any; static ngAcceptInputType_controlValueWithLabel: any; } /** * @description * * 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)` | * */ declare abstract class PoTextareaBaseComponent implements ControlValueAccessor, Validator { cd: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** Label do campo. */ label?: string; /** Texto de apoio do campo. */ help?: string; /** Nome e Id do componente. */ name: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @Input * * @optional * * @description * * 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`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: i0.InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: i0.InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Evento disparado ao entrar do campo. */ enter: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor e deixar o campo. */ change: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do model. */ changeModel: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; displayAdditionalHelp: boolean; private _disabled; private _maxlength; private _minlength; private _placeholder; private _readonly; private _required; private _rows; private _size?; private modelLastUpdate; private onChangePropagate; private validatorChange; protected onTouched: any; protected hasValidatorRequired: boolean; /** Placeholder, mensagem que aparecerá enquanto o campo não estiver preenchido. */ set placeholder(value: string); get placeholder(): string; /** * @optional * * @description * * Indica que o campo será desabilitado. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * * Indica que o campo será somente leitura. * * @default `false` */ set readonly(readonly: boolean); get readonly(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Indica a quantidade mínima de caracteres que o campo aceita. */ set minlength(minlength: number); get minlength(): number; /** * @optional * * @description * * Indica a quantidade máxima de caracteres que o campo aceita. */ set maxlength(maxlength: number); get maxlength(): number; /** * @optional * * @description * * Indica a quantidade de linhas que serão exibidas. * * @default `3` */ set rows(value: number); get rows(): number; /** * @optional * * @description * * Define o tamanho do componente: * - `small` (disponível apenas para acessibilidade AA) * - `medium` * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; constructor(cd: ChangeDetectorRef); callOnChange(value: any): void; controlChangeModelEmitter(value: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(func: any): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(value: any): void; protected validateModel(): void; abstract writeValueModel(value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_appendBox: any; static ngAcceptInputType_autoFocus: any; } /** * @docsExtends PoTextareaBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * */ declare class PoTextareaComponent extends PoTextareaBaseComponent implements AfterViewInit, OnChanges { private el; inputEl: ElementRef; helperEl?: PoHelperComponent; id: string; valueBeforeChange: any; fireChange: boolean; constructor(); emitAdditionalHelp(): void; /** * 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(); * } * ``` */ focus(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; getAdditionalHelpTooltip(): string; getErrorPattern(): string; hasInvalidClass(): boolean; writeValueModel(value: any): void; validMaxLength(maxlength: number, value: string): string; eventOnInput(event: any): void; eventOnFocus(): void; eventOnBlur(): void; controlChangeEmitter(): void; onKeyDown(event: KeyboardEvent): void; /** * 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 * * ``` * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoTextareaComponent): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; private isAdditionalHelpEventTriggered; setHelper(label?: string, additionalHelpTooltip?: string): { hideAdditionalHelp: boolean; helperSettings?: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoInputBaseComponent * * @description * * O `po-url` é um input específico para receber URL, com o pattern já configurado. * * @example * * * * * * * * * * * * * * * * */ declare class PoUrlComponent extends PoInputGeneric implements AfterViewInit, OnDestroy, OnChanges { id: string; icon: string; type: string; pattern: string; mask: string; private listener; constructor(); ngAfterViewInit(): void; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; extraValidation(c: AbstractControl): { [key: string]: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-datepicker`. */ declare class PoDatepickerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente `po-radio-group`. */ declare class PoRadioGroupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * Componente que construíra o dropdown, contendo o campo de pesquisa e os itens para seleção. */ declare class PoMultiselectDropdownComponent { private cd; /** Propriedade que indica se deve exibir o loading. */ isServerSearching?: boolean; /** Propriedade que indica se o campo de pesquisa deverá ser escondido. */ hideSearch?: boolean; /** Propriedade que que recebe as literais definidas no componente `po-multiselect`. */ literals?: PoMultiselectLiterals; /** Placeholder do campo de pesquisa. */ placeholderSearch: string; /** Propriedade que recebe a lista de opções selecionadas. */ selectedOptions: Array; /** Propriedade que recebe a lista com todas as opções. */ options: Array; /** Propriedade que recebe a lista de opções que deverão ser criadas no dropdown. */ visibleOptions: Array; /** Propriedade que indica se o campo "Selecionar todos" deverá ser escondido. */ hideSelectAll?: boolean; fieldValue: string; fieldLabel: string; multiselectTemplate: TemplateRef | any; containerWidth: number; /** Tamanho do componente. */ size: string; /** Evento disparado a cada tecla digitada na pesquisa. */ changeSearch: EventEmitter; /** Evento disparado a cada alteração na lista das opções selecionadas. */ change: EventEmitter; /** * Evento disparado quando for detectada uma ação que necessite fechar o dropdown. * Por exemplo, no caso de ser teclado TAB dentro do dropdown, então é disparado este evento * para notificar o componente principal que deve fechar o dropdown. */ closeDropdown: EventEmitter; container: ElementRef; divElement: ElementRef; listbox: PoListBoxComponent; scrollTop: number; show: boolean; get hasOptions(): boolean; scrollTo(index: any): void; isSelectedItem(option: PoMultiselectOption): boolean; clickItem(check: any, options?: any): void; onClickSelectAll(): void; updateSelectedValues(checked: any, option: any): void; everyVisibleOptionsSelected(selectedValues: any): boolean; someVisibleOptionsSelected(selectedValues: any): boolean; getStateSelectAll(): boolean; callChangeSearch(event: any): void; controlVisibility(toOpen: any): void; private uniqueSelectedOptions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoUploadDragDropAreaComponent { elementRef: ElementRef; directoryCompatible: boolean; disabled: boolean; height: number; literals: PoUploadLiterals; overlay: boolean; selectFiles: EventEmitter; selectFilesLinkElement: ElementRef; focus(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoUploadDragDropComponent { private changeDetector; dragDropOverlayElement: ElementRef; dragDropAreaComponent: PoUploadDragDropAreaComponent; directoryCompatible: boolean; disabled: boolean; literals: PoUploadLiterals; fileChange: EventEmitter; selectFiles: EventEmitter; areaElement: HTMLElement; isDragOver: boolean; private _dragDropHeight?; set dragDropHeight(value: number); get dragDropHeight(): number; focus(): void; onAreaElement(element: HTMLElement): void; onDragLeave(): void; onDragOver(): void; onFileChange(files: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoUploadDragDropDirective { private i18nPipe; private notification; areaElement: HTMLElement; directoryCompatible: boolean; disabled: boolean; literals: PoUploadLiterals; dragLeave: EventEmitter; dragOver: EventEmitter; fileChange: EventEmitter; timeout: any; private files; private invalidFileType; onDragLeave(event: any): void; onDragOver(event: any): void; onDrop(event: any): void; private getFilesFromDataTransferItems; private getFilesFromEntry; private getOnlyDirectories; private getOnlyFiles; private readFile; private readDirectory; private readDirectoryEntries; private sendFeedback; private sendFiles; private setPipeArguments; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class PoUploadDragDropAreaOverlayComponent implements AfterViewInit { private renderer; DragDropAreaFixed: ElementRef; directoryCompatible: boolean; disabled: boolean; literals: PoUploadLiterals; target: ElementRef; areaElement: EventEmitter; ngAfterViewInit(): void; private setPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoUploadFileRestrictionsComponent implements OnInit { private changeDetector; maxFiles: number; literals: any; private _allowedExtensions; private _maxFileSize; private _minFileSize; private language; set allowedExtensions(value: string); get allowedExtensions(): string; set maxFileSize(value: string); get maxFileSize(): string; set minFileSize(value: string); get minFileSize(): string; constructor(); ngOnInit(): void; private formatAllowedExtensions; private setLiterals; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * O pipe po-i18n é responsável por tratar literais parâmetrizadas, dando mais flexibilidade as literais de tradução. * O número de parâmetros inseridos nas literais deve coincidir com a quantia de parâmetros passados por parâmetro, * os parâmetros serão substituidos de acordo com a ordem informada. * * Para inserir um parâmetro em uma literal, o mesmo deverá ser inserido entre chaves dentro da literal e posicionado * de acordo como deve ser exibido após a sua transformação. * * ``` * const i18nPT = { * pagination: 'Página {1} de {2} páginas.', * totalPages: 'Total de {totalPages} encontradas.' * }; * ``` * * É possível passar um valor ou um array de valores para o pipe, caso seja passado um array, os valores devem obedecer a ordem * informada na literal. * * ``` * {{ i18nPT.pagination | poI18n:[1,10] }} * {{ i18nPT.totalPages | poI18n:10 }} * ``` */ declare class PoI18nBasePipe implements PipeTransform { transform(value: string, args: any): string; } /** * @docsExtends PoI18nBasePipe * * @example * * * * * * */ declare class PoI18nPipe extends PoI18nBasePipe implements PipeTransform { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** * @description * * Módulo do serviço `po-color-palette`. */ declare class PoColorPaletteModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoComponentInjectorModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do serviço po-control-position. */ declare class PoControlPositionModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @usedBy PoDialogService * * @description * Enums para as ações do componente po-dialog-base.service. */ declare enum PoDialogType { Alert = 0, Confirm = 1 } /** * @usedBy PoDialogService * * @description * * Interface para definição das literais usadas no serviço `po-dialog` para o tipo alerta. */ interface PoDialogAlertLiterals { /** Rótulo do botão de "Ok". */ ok?: string; } /** * @usedBy PoDialogService * * @description * * Interface para definição das literais usadas no serviço `po-dialog` para o tipo confirmação. */ interface PoDialogConfirmLiterals { /** Rótulo do botão de "Cancelar". */ cancel?: string; /** Rótulo do botão de "Confirmar". */ confirm?: string; } /** * @docsPrivate * * @usedBy PoDialogService * * @description * * Interface para o título e a mensagem do serviço po-dialog. */ interface PoDialogOptions { /** Título da caixa de diálogo. */ title: string; /** Mensagem da caixa de diálogo. * > Pode-se informar um conteúdo HTML na mensagem. */ message: string; /** * Define o tamanho dos componentes de formulário no dialog: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ componentsSize?: string; } /** * @usedBy PoDialogService * * @docsExtends PoDialogOptions * * @description * * Interface com as propriedades da caixa de diálogo de alerta do serviço po-dialog. */ interface PoDialogAlertOptions extends PoDialogOptions { /** Ação executada ao fechar o alerta pelo botão "Ok". */ ok?: Function; /** * Objeto com as literais usadas no `po-dialog` do tipo alerta. * * Para customizar o *label*, pode ser enviado o objeto da seguinte forma: * * ```typescript * this.poDialog.alert({ * literals: { ok: 'Close' }, * title: 'Info message', * message: 'Message body dialog' * }); * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do *browser* (pt, en, es). */ literals?: PoDialogAlertLiterals; } /** * @usedBy PoDialogService * * @docsExtends PoDialogOptions * * @description * * Interface com as propriedades da caixa de diálogo de confirmação do serviço po-dialog. */ interface PoDialogConfirmOptions extends PoDialogOptions { /** Ação de confirmação da caixa de diálogo. */ confirm: Function; /** Ação de cancelamento da caixa de diálogo. */ cancel?: Function; /** Ação de fechamento da caixa de diálogo. */ close?: Function; /** * Objeto com as literais usadas no `po-dialog` do tipo confirmação. * * Para customizar os *labels*, pode ser enviado o objeto da seguinte forma: * * ```typescript * this.poDialog.confirm({ * literals: { cancel: 'No', confirm: 'Yes' }, * title: 'Confirm', * message: 'Message body dialog', * confirm: () => this.confirmOperation() * }); * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do *browser* (pt, en, es). */ literals?: PoDialogConfirmLiterals; } declare const poDialogAlertLiteralsDefault: { en: PoDialogAlertLiterals; es: PoDialogAlertLiterals; pt: PoDialogAlertLiterals; ru: PoDialogAlertLiterals; }; declare const poDialogConfirmLiteralsDefault: { en: PoDialogConfirmLiterals; es: PoDialogConfirmLiterals; pt: PoDialogConfirmLiterals; ru: PoDialogConfirmLiterals; }; /** * @docsPrivate * * @description * * Componente que serve como container do po-dialog.service */ declare class PoDialogComponent implements OnDestroy, OnInit { poModal: PoModalComponent; title: string; message: string; primaryAction: PoModalAction; secondaryAction: PoModalAction; closeAction: Function; literalsAlert: PoDialogAlertLiterals; literalsConfirm: PoDialogConfirmLiterals; private componentRef; private closeSubscription; private _componentsSize?; private language; set componentsSize(value: string); get componentsSize(): string; constructor(languageService: PoLanguageService); ngOnDestroy(): void; ngOnInit(): void; close(xClosed?: boolean): void; destroy(): void; configDialog(primaryLabel?: any, primaryAction?: any, secondaryLabel?: any, secondaryAction?: any, closeAction?: any): void; open(dialogOptions: PoDialogConfirmOptions | PoDialogAlertOptions, dialogType: PoDialogType, componentRef?: ComponentRef): void; private setDialogLiterals; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoDialogModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do serviço `po-media-query`. */ declare class PoMediaQueryModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * Módulo do serviço PoThemeService. */ declare class PoThemeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoServicesModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo dos componentes: po-checkbox, po-checkbox-group, po-combo, po-datepicker, po-datepicker-range, po-email, po-input, * po-lookup, po-number, po-multiselect, po-password, po-radio-group, po-select, po-switch, po-textarea, po-upload * e po-url. * * > Não esqueça de importar o módulo `FormsModule` para usar os componentes de formulários e caso esteja trabalhando com * > formulários reativos, importe o módulo `ReactiveFormsModule`, ambos nativos do Angular. */ declare class PoFieldModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoDynamicFormComponent * * @description * * Enum para definição do tipo de componente a ser renderizado. */ declare enum ForceBooleanComponentEnum { /** Força a renderização de um po-switch */ switch = "switch", /** Força a renderização de um po-checkbox */ checkbox = "checkbox" } /** * @usedBy PoDynamicFormComponent * * @description * * Enum para definição do tipo de componente a ser renderizado. */ declare enum ForceOptionComponentEnum { /** Força a renderização de um po-radio-group independente da quantidade do opções */ radioGroup = "radioGroup", /** Força a renderização de um po-select independente da quantidade do opções */ select = "select" } /** * @usedBy PoDynamicFormComponent * * @description * * Enum para definição do tipo de campo que será criado dinamicamente. */ declare enum PoDynamicFieldType { /** Valor booleano. */ Boolean = "boolean", /** Valor numérico que contém casas decimais e milhar. */ Currency = "currency", /** Valor numérico que contém casas decimais e milhar. */ Decimal = "decimal", /** Valor para data. */ Date = "date", /** Valor para data e hora. */ DateTime = "datetime", /** Utilizado para informar/exibir hora. */ Time = "time", /** Valor numérico. */ Number = "number", /** Texto. */ String = "string", /** Utilizado para fazer uploads de arquivos. */ Upload = "upload" } interface PoDynamicField { /** Identificador */ key?: boolean; /** Nome de referência do campo. */ property: string; /** * Rótulo do campo exibido. * * Caso não seja informado, será utilizado como `label` o valor da propriedade `property` com a primeira letra em maiúsculo. */ label?: string; /** * Tamanho de exibição do campo em telas. * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade é generica, aplica o valor em todos os tamanhos de telas. */ gridColumns?: number; /** * Tamanho de exibição do campo em telas menores (sm). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `gridColumns`. * * @default `12` */ gridSmColumns?: number; /** * Tamanho de exibição do campo em telas médias (md). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `gridColumns`. * * @default `6` */ gridMdColumns?: number; /** * Tamanho de exibição do campo em telas grandes (lg). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `gridColumns`. * * @default `4` */ gridLgColumns?: number; /** * Tamanho de exibição do campo em telas extra grandes (xl). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `gridColumns`. * * @default `3` */ gridXlColumns?: number; /** * Tamanho do espaço de exibição do campo em telas. * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade é genérica, aplica o valor em todos os tamanhos de telas. */ offsetColumns?: number; /** * Tamanho do espaço de exibição do campo em telas menores (sm). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `offsetColumns`. * */ offsetSmColumns?: number; /** * Tamanho do espaço de exibição do campo em telas médias (md). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `offsetColumns`. * */ offsetMdColumns?: number; /** * Tamanho do espaço de exibição do campo em telas grandes (lg). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `offsetColumns`. * */ offsetLgColumns?: number; /** * Tamanho do espaço de exibição do campo em telas extra grandes (xl). * * Deve ser usado o sistema de **grid** do PO (1 ... 12 colunas). * * > Esta propriedade sobrescreve o valor definido para o tamanho dela na `offsetColumns`. * */ offsetXlColumns?: number; /** * Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas menores (sm). * * Deve ser usado o sistema de **grid** do PO (1 ... 11 colunas). * * > Esta propriedade não funciona com a propriedade `gridColumns`. Deve-se especificar o tamanho da tela. * * @default `0` */ gridSmPull?: number; /** * Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas médias (md). * * Deve ser usado o sistema de **grid** do PO (1 ... 11 colunas). * * > Esta propriedade não funciona com a propriedade `gridColumns`. Deve-se especificar o tamanho da tela. * * @default `0` */ gridMdPull?: number; /** * Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas grandes (lg). * * Deve ser usado o sistema de **grid** do PO (1 ... 11 colunas). * * > Esta propriedade não funciona com a propriedade `gridColumns`. Deve-se especificar o tamanho da tela. * * @default `0` */ gridLgPull?: number; /** * Tamanho do espaçamento após o campo antes da exibição do próximo campo em telas extra grandes (xl). * * Deve ser usado o sistema de **grid** do PO (1 ... 11 colunas). * * > Esta propriedade não funciona com a propriedade `gridColumns`. Deve-se especificar o tamanho da tela. * * @default `0` */ gridXlPull?: number; /** * Indica se o campo será visível. * * @default `true` */ visible?: boolean; /** Exibirá um divisor acima, utilizando o seu conteudo como título. */ divider?: string; /** * Tipo do valor campo. * * Valores válidos: * * - `boolean`: Valores *booleanos*. * - `currency`: Valores monetários. * - `decimal`: Valores decimais. * - `date`: Valores de datas. * + Aceita os tipos **string** e **Date** padrão do Javascript, * por exemplo: `'2017-11-28'` ou `new Date(2017, 10, 28)`. * - `dateTime`: Valor de data com horário. * + Aceita o tipo _string_ no formato **ISO-8601** extendido **'yyyy-mm-ddThh:mm:ss+|-hh:mm'** * e o tipo **Date** padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'` ou `new Date(2017, 10, 28)`. * - `number`: Valores numéricos. * - `string`: Textos. * - `time`: Valor do horário. * + Aceita o tipo **string** nos formatos **'HH:mm:ss'** ou **'HH:mm:ss.ffffff'**, por exemplo: `'23:12:45'`. * * @default `string` */ type?: string | PoDynamicFieldType; /** * Exibirá um container para todos os campos abaixo dessa propriedade. * Esta propriedade configura o layout dos componentes dynamic-view e dynamic-edit, deixando todos os items dentro de containers * * Está propriedade é do tipo string, o valor que será titulo do contianer * */ container?: string; } /** * @usedBy PoDynamicFormComponent, PoAdvancedFilterComponent, PoPageDynamicSearchComponent * * @docsExtends PoDynamicField * * @description * * Interface para definição das propriedades dos campos de entrada que serão criados dinamicamente. */ interface PoDynamicFormField extends PoDynamicField { /** * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está depreciada e será removida na versão 23.x.x. Recomendamos utilizar a propriedade p-helper que oferece mais recursos e flexibilidade. */ additionalHelp?: Function; /** * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * * > Essa propriedade está depreciada e será removida na versão 23.x.x. Recomendamos utilizar a propriedade p-helper que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da * página e não dentro do componente. Essa opção é necessária para cenários com containers que possuem scroll ou * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. */ appendBox?: boolean; /** * Define as colunas para utilização da busca avançada. Usada somente em conjunto com a propriedade `searchService`, * essa propriedade deve receber um array de objetos que implementam a interface [`PoLookupColumn`](/documentation/po-lookup). * * > Caso sejam informadas colunas, deve-se obrigatoriamente conter colunas definidas como *label* e *value* para valores * de tela e do model respectivamente. * * **Componentes compatíveis:** `po-radio-group`, `po-lookup`, `po-checkbox-group`. */ columns?: Array | number; /** * Função executada quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown?: Function; /** Define a obrigatoriedade do campo. */ required?: boolean; /** * * Exibe a mensagem setada na propriedade `errorMessage` se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `required` esteja habilitada. * * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`. */ requiredFieldErrorMessage?: boolean; /** * Define se a indicação de campo opcional será exibida. * * > A indicação não será exibida, se: * - O campo for `required`, ou; * - Não possuir `help` e `label`. */ optional?: boolean; /** * Lista de opções que serão exibidos em um componente, podendo selecionar uma opção. * * **Componentes compatíveis:** `po-select`, `po-radio-group`, `po-checkbox-group`, `po-multiselect`. * */ options?: Array | Array | Array | Array | Array; /** * Permite que o usuário faça múltipla seleção dentro da lista de opções. */ optionsMulti?: boolean; /** * Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. * Pode ser informada uma URL ou uma instancia do serviço baseado em PoComboFilter. * **Importante** * > Para que funcione corretamente, é importante que o serviço siga o * [guia de API do PO UI](https://po-ui.io/guides/api). */ optionsService?: string | PoComboFilter | PoMultiselectFilter; /** * Serviço que será utilizado para realizar a busca avançada. Pode ser utilizado em conjunto com a propriedade `columns`. * Pode ser ser informada uma URL ou uma instancia do serviço baseado em PoLookupFilter. * **Importante:** * > Caso utilizar a propriedade `optionsService` esta propriedade será ignorada. * > Para que funcione corretamente, é importante que o serviço siga o * [guia de API do PO UI](https://po-ui.io/guides/api). */ searchService?: string | PoLookupFilter; /** * Máscara para o campo. * * **Componente compatível:** `po-input`. * > também é atribuído ao utilizar a propriedade `type: time`. */ mask?: string; /** * Define que o valor do componente será conforme especificado na mascára. O valor padrão é `false`. * * **Componente compatível:** `po-input`. * > também é atribuído ao utilizar a propriedade `type: time`. * */ maskFormatModel?: boolean; /** * 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. * * - Quando `true`, apenas os caracteres alfanuméricos serão contabilizados para a validação dos comprimentos. * - Quando `false`, todos os caracteres, incluindo os especiais da máscara, serão considerados na validação. * * **Componentes compatíveis:** `po-input`, `po-decimal`. * * > Esta propriedade é ignorada quando utilizada em conjunto com `p-mask-format-model`. * * Exemplo: * ``` * fields:Array = [ * { * property: 'CNPJ maskNoLengthValidation TRUE', * required: true, * showRequired: true, * mask: '99.999.999/9999-99', * pattern: '([0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9])', * maskNoLengthValidation: true, * maxLength: 14, * minLength: 0 * } * ``` * - Entrada: `11.111.111/1111-11` → Validação será aplicada somente aos números, ignorando os caracteres especiais. */ maskNoLengthValidation?: boolean; /** Define o ícone que será exibido no início do campo. * > Esta propriedade só pode ser utilizado nos campos: * - Input; * - Number; * - Decimal; * - Combo; * - Password; * * > Veja a disponibilidade de ícones em [biblioteca de ícones](https://po-ui.io/icons). */ icon?: string | TemplateRef; /** Quantidade máxima de casas decimais. * * > Esta propriedade só pode ser utilizada quando o `type` for *currency* ou *decimal*. */ decimalsLength?: number; /** Quantidade máxima de dígitos antes do separador decimal. O valor máximo permitido é 13 * * > Esta propriedade só pode ser utilizada quando o `type` for *currency* ou *decimal*. */ thousandMaxlength?: number; /** * Regex para validação do campo. * * **Componentes compatíveis:** `po-input`, `po-password`. * */ pattern?: string; /** * Tamanho mínimo de caracteres. * * **Componentes compatíveis:** `po-input`, `po-number`, `po-decimal`, `po-textarea`, `po-password`. * */ minLength?: number; /** * Tamanho máximo de caracteres. * * **Componentes compatíveis:** `po-input`, `po-number`, `po-decimal`, `po-textarea`, `po-password`. */ maxLength?: number; /** Desabilita o campo caso informar o valor *true*. */ disabled?: boolean; /** Texto de ajuda. */ help?: string; /** Texto simples que será apresentado como auxílio ao campo ou objeto com as definições do po-helper. */ helper?: string | PoHelperOptions; /** Texto exibido quando o valor do componente for *true*. */ booleanTrue?: string; /** Texto exibido quando o valor do componente for *false*. */ booleanFalse?: string; /** Indica se o status do `model` será escondido visualmente ao lado do switch */ hideLabelStatus?: boolean; /** * Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou * apenas o valor puro (sem formatação). * * O valor padrão é: `false`. * * > Esta propriedade está disponivel apenas para o `swicth`. */ formatModel?: boolean; /** * Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). * Útil em casos onde o posicionamento automático não se comporta como esperado, como quando o componente está próximo * ao final do formulário ou do container visível. Na maioria dos casos, essa direção será respeitada; no entanto, * pode ser ajustada automaticamente conforme o espaço disponível na tela. * * **Componentes compatíveis:** `po-multiselect`, `po-combo`. * * @default `bottom` */ listboxControlPosition?: 'top' | 'bottom'; /** * Valor máximo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date* ou *dateTime*. * * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-number`, `po-decimal` * */ maxValue?: string | number; /** * Valor mínimo a ser informado no componente, podendo ser utilizado quando o tipo de dado por *number*, *date* ou *dateTime*. * * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-number`, `po-decimal` */ minValue?: string | number; /** Quantidade de linhas exibidas no `po-textarea`. */ rows?: number; /** Esconde a informação estilo *password*, pode ser utilizado quando o tipo de dado for *string*. */ secret?: boolean; /** * Função ou serviço para validar as **mudanças do campo**. * * * A propriedade aceita os seguintes tipos: * - **String**: Endpoint usado pelo componente para requisição via `POST`. * - **Function**: Método que será executado. * * Ao ser executado, irá receber como parâmetro um objeto com o nome da propriedade * alterada e o novo valor, conforme a interface `PoDynamicFormFieldChanged`: * * `` * { property: 'property name', value: 'new value' } * `` * * O retorno desta função deve ser do tipo [PoDynamicFormFieldValidation](documentation/po-dynamic-form#po-dynamic-form-field-validation), * onde o usuário poderá determinar as novas propriedades do campo. * Por exemplo: * * ``` * onChangeField(changeValue): PoDynamicFormFieldValidation { * * if (changeValue.property === 'birthday' && !this.validate('birthday')) { * return { * value: '', * field: { property: 'birthday', required: true }, * focus: true * }; * } * ``` * * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * `` * { property: 'state', gridColumns: 6, validate: this.myFunction.bind(this) } * `` */ validate?: string | Function; /** * Objeto que será enviado como parâmetro nas requisições de busca usados pelos componentes `po-lookup` e * `po-combo`. * * Por exemplo, para o parâmetro `{ age: 23 }` a URL da requisição ficaria: * * `` * url + ?age=23&filter=Peter * `` */ params?: any; /** * Mensagem que será apresentada quando o campo ficar inválido. * * O campo fica inválido quando as seguintes propriedades não forem respeitadas: * - pattern; * - minValue; * - maxValue; * - required; * * > Esta mensagem pode ser exibida quando o campo estiver vazio, caso seja requerido. Em casos de componentes como * `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, é necessário que a propriedade * `requiredFieldErrorMessage` esteja como `true` para que a mensagem seja exibida com o campo vazio. Componentes * como `po-datepicker-range`, `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`, * `po-lookup` e `po-textarea` não é necessário passar a propriedade `requiredFieldErrorMessage`. * * * **Componentes compatíveis:** `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`, * `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`, `po-switch`, `po-textarea`. */ errorMessage?: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * **Componentes compatíveis:** `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`, * `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`, `po-switch`, `po-textarea`. * * @default `false` */ errorLimit?: boolean; /** * Função executada para realizar a validação assíncrona personalizada. * Executada ao disparar o output `change` ou `change-model`, dependendo do valor da propriedade `triggerMode`. * * * > Retorna `Observable com o valor true` para sinalizar o erro `false` para indicar que não há erro. * * **Componente compatível**: `po-datepicker` */ errorAsyncFunction?: (value: any) => Observable; /** * Realiza alguma validação customizada assíncrona no componente. * * **Componentes compatíveis:** `po-input`, `po-number`, `po-decimal`, `po-password`. */ errorAsyncProperties?: ErrorAsyncProperties; /** * Formato de exibição no campo. * * Ao utilizar esta propriedade com o `type` *PoDynamicFieldType.Date* ou *PoDynamicFieldType.DateTime*, * pode ser utilizada para formatação de exibição da data: * * Valores válidos: * * - dd/mm/yyyy * - mm/dd/yyyy * - yyyy/mm/dd * * * Também pode-se utilizar em conjunto com `searchService`, informando uma lista de propriedades que será utilizado * para formatação da exibição no campo, por exemplo: ["id", "name"]. */ format?: string | Array; /** * Nome da propriedade do objeto retornado que será utilizado como descrição do campo. * * O valor padrão é: `label`. * * > Esta propriedade pode ser utilizada em conjunto com: `options`, `optionsService` e `searchService`. */ fieldLabel?: string; /** * Nome da propriedade do objeto retornado que será utilizado como valor do campo. * * O valor padrão é: `value`. * * > Esta propriedade pode ser utilizada em conjunto com: `options`, `optionsService` e `searchService`. */ fieldValue?: string; /** * Informa a ordem de exibição do campo. * * Exemplo de utilização: * * `` * [ * { property: 'test 1', order: 2 }, * { property: 'test 2', order: 1 }, * { property: 'test 3' }, * { property: 'test 4', order: 3 } * ]; * `` * * Na exibição a ordem ficará dessa forma: * `` * [ * { property: 'test 2', order: 1 }, * { property: 'test 1', order: 2 }, * { property: 'test 4', order: 3 }, * { property: 'test 3' } * ]; * `` * * Só serão aceitos valores com números inteiros maiores do que zero. * * Campos sem `order` ou com valores negativos, zerados ou inválidos * serão os últimos a serem renderizados e seguirão o posicionamento dentro do * array. */ order?: number; /** Mensagem que será exibida enquanto o campo não estiver preenchido. */ placeholder?: string; /** * Define a localidade a ser utilizada no componente. * Por padrão o valor será configurado segundo o módulo [`I18n`](documentation/po-i18n) * * Exemplo de utilização: * ``` * [ * { property: 'birthday', locale: 'en', type: 'date' }, * { property: 'wage', locale: 'ru', type: 'currency' } * ]; * ``` * * > Para ver quais linguagens suportadas acesse [`I18n`](documentation/po-i18n) * > A propriedade será repassada para os componentes que suportam a mesma. */ locale?: string; /** * O controle passa a permitir a entrada de um intervalo ao invés de um único valor. * * > Atualmente essa propriedade está disponível apenas para o tipo 'date' e 'dateTime'. */ range?: boolean; /** Indica que o campo será somente leitura. * * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`, `po-select`, `po-textarea`, `po-password` */ readonly?: boolean; /** * Permite a seleção de múltiplos itens. * * **Componentes compatíveis:** `po-lookup`, `po-upload` */ multiple?: boolean; /** Se verdadeiro, o campo receberá um botão para ser limpo. * * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`, `po-combo`, `po-lookup`, `po-password` */ clean?: boolean; /** * Define a propriedade nativa `autocomplete` do campo como off. * * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`, `po-lookup`, `po-password` */ noAutocomplete?: boolean; /** * Posição de exibição do rótulo do PoSwitch. * > Por padrão exibe à direita. */ labelPosition?: PoSwitchLabelPosition; /** * Permite esconder a função de espiar a senha digitada no `po-password`. */ hidePasswordPeek?: boolean; /** * Padrão de formatação para saída do model, independentemente do formato de entrada. * * > Veja os valores válidos no `enumPoDatepickerIsoFormat`. * * **Componente compatível:** po-datepicker */ isoFormat?: PoDatepickerIsoFormat; /** * Objeto com as literais usadas para os seguintes componentes: `po-lookup`, `po-multiselect`, `po-combo` e `po-datepicker-range`. * * > O objeto padrão de literais será traduzido de acordo com o idioma do PoI18nService ou do browser. * * **Componentes compatíveis:** `po-lookup`, `po-multiselect`, `po-combo`, `po-datepicker-range` */ literals?: PoLookupLiterals | PoMultiselectLiterals | PoComboLiterals | PoDatepickerRangeLiterals | PoUploadLiterals; /** * 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. * * **Componentes compatíveis:** `po-combo`, `po-lookup`. */ infiniteScroll?: boolean; /** * 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%. * **Exemplos** * `{ infiniteScrollDistance: 80 }`: Quando atingir 80% do scroll do combo, o show-more será disparado. * * **Componente compatível:** `po-combo`. */ infiniteScrollDistance?: number; /** * 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. * * **Componentes compatíveis:** `po-multiselect`, `po-lookup`. */ autoHeight?: boolean; /** * Intervalo utilizado no `po-number`. */ step?: number; /** * Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. * > Quando utilizar a propriedade p-filter-service esta propriedade será ignorada. * * **Componente compatível:** `po-multiselect`. */ filterMode?: PoMultiselectFilterMode; /** * Valor mínimo de caracteres para realizar o filtro no serviço do `po-combo`. */ filterMinlength?: number; /** * Desabilita o filtro inicial no serviço do `po-combo`, que é executado no primeiro clique no campo. */ disabledInitFilter?: boolean; /** * Se verdadeiro, desabilitará a busca de um item via TAB no `po-combo`. */ disabledTabFilter?: boolean; /** * 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`). * * **Componentes compatíveis:** `po-combo`, `po-multiselect`. */ debounceTime?: number; /** * Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada no `po-combo`. */ changeOnEnter?: boolean; /** * Indica que a lista definida na propriedade p-options será ordenada pela descrição. * * **Componentes compatíveis:** `po-combo`, po-multiselect */ sort?: boolean; /** * Placeholder do campo de pesquisa do `po-multiselect`. * * > Caso o mesmo não seja informado, o valor padrão será traduzido com base no idioma do navegador (pt, es e en). */ placeholderSearch?: string; /** * Esconde o campo de pesquisa existente dentro do dropdown do `po-multiselect`. */ hideSearch?: boolean; /** * Indica se o campo "Selecionar todos" do `po-multiselect` será escondido. */ hideSelectAll?: boolean; /** * Lista de objetos dos campos que serão criados na busca avançada. * * > Caso não seja passado um objeto ou então ele esteja em branco o link de busca avançada ficará escondido. * * Exemplo de URL com busca avançada: * * `url + ?page=1&pageSize=20&name=Tony%20Stark&nickname=Homem%20de%20Ferro` * * Caso algum parâmetro seja uma lista, a concatenação é feita utilizando vírgula. Exemplo: * * `url + ?page=1&pageSize=20&name=Tony%20Stark,Peter%20Parker,Gohan` */ advancedFilters?: Array; /** * Valores aceitos: * - ForceBooleanComponentEnum.switch * - ForceBooleanComponentEnum.checkbox * */ forceBooleanComponentType?: ForceBooleanComponentEnum; /** * pode ser utilizada em conjunto com a propriedade `options` forçando o componente a renderizar um `po-select` ou `po-radio-group`. * * Valores aceitos: * - ForceOptionComponentEnum.radioGroup * - ForceOptionComponentEnum.select * * >Essa propriedade será ignorada caso seja utilizada em conjunto com a propriedade `optionsMulti` e `optionsService`. */ forceOptionsComponentType?: ForceOptionComponentEnum; /** * Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. * * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. * * **Componente compatível**: `po-lookup` */ changeVisibleColumns?: Function; /** * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. * * **Componente compatível**: `po-lookup` */ columnRestoreManager?: Function; /** * URL que deve ser feita a requisição com os arquivos selecionados. * * **Componente compatível**: `po-upload` */ url?: string; /** * Define se o envio do arquivo será automático ao selecionar o mesmo. * * **Componente compatível**: `po-upload` */ autoUpload?: boolean; /** * Permite a seleção de diretórios contendo um ou mais arquivos para envio. * * > A habilitação desta propriedade se restringe apenas à seleção de diretórios. * * > Definição não suportada pelo browser **Internet Explorer**, todavia será possível a seleção de arquivos padrão. * * **Componente compatível**: `po-upload` */ directory?: boolean; /** * Exibe a área onde é possível arrastar e selecionar os arquivos. Quando estiver definida, omite o botão para seleção de arquivos * automaticamente. * * > Recomendamos utilizar apenas um `po-upload` com esta funcionalidade por tela. * * **Componente compatível**: `po-upload` */ dragDrop?: boolean; /** * Define em *pixels* a altura da área onde podem ser arrastados os arquivos. A altura mínima aceita é `160px`. * * > Esta propriedade funciona somente se a propriedade `p-drag-drop` estiver habilitada. * * **Componente compatível**: `po-upload` */ dragDropHeight?: number; /** * Objeto que segue a definição da interface `PoUploadFileRestrictions`, * que possibilita definir tamanho máximo/mínimo e extensão dos arquivos permitidos. * * **Componente compatível**: `po-upload` */ restrictions?: PoUploadFileRestrictions; /** * Nome do campo de formulário que será enviado para o serviço informado na propriedade `url`. * * > O valor default é `files` * * **Componente compatível**: `po-upload` */ formField?: string; /** * Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. * * **Componente compatível**: `po-upload` */ headers?: { [name: string]: string | Array; }; /** * Oculta visualmente as informações de restrições para o upload. * * **Componente compatível**: `po-upload` */ hideRestrictionsInfo?: boolean; /** * Omite o botão de seleção de arquivos. * * > Caso o valor definido seja `true`, caberá ao desenvolvedor a responsabilidade * pela chamada do método `selectFiles()` para seleção de arquivos. * * **Componente compatível**: `po-upload` */ hideSelectButton?: boolean; /** * Omite o botão de envio de arquivos. * * > Caso o valor definido seja `true`, caberá ao desenvolvedor a responsabilidade * pela chamada do método `sendFiles()` para envio do(s) arquivo(s) selecionado(s). * * **Componente compatível**: `po-upload` */ hideSendButton?: boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired?: boolean; /** * Exibe a pré-visualização de imagens ao anexá-las. * * > Propriedade funciona apenas em arquivos de formato de imagem (`.png`, `.jpg`, `.jpeg` e `.gif`). * * **Componente compatível**: `po-upload` */ showThumbnail?: boolean; /** * Define uma ação personalizada no componente `po-upload`, adicionando um botão no canto inferior direito * de cada barra de progresso associada aos arquivos enviados ou em envio. * * **Componente compatível**: `po-upload`, * * **Exemplo de configuração**: * ```typescript * customAction: { * label: 'Baixar', * icon: 'an-download', * type: 'default', * visible: true, * disabled: false * }; * ``` */ customAction?: PoProgressAction; /** * Evento emitido ao clicar na ação personalizada configurada no `p-custom-action`. * * **Componente compatível**: `po-upload`, * * Este evento é emitido quando o botão de ação personalizada é clicado na barra de progresso associada a um arquivo. * O arquivo relacionado à barra de progresso será passado como parâmetro do evento, permitindo executar operações específicas para aquele arquivo. * * **Parâmetro do evento**: * - `file`: O arquivo associado ao botão de ação. Este objeto é da classe `PoUploadFile` e contém informações sobre o arquivo, como nome, status e progresso. * * **Exemplo de uso**: * ```typescript * customActionClick: (file: PoUploadFile) => { * console.log('Ação personalizada clicada para o arquivo:', file.name); * // Lógica de download ou outra ação relacionada ao arquivo * } * ``` */ customActionClick?: (file: PoUploadFile) => void; /** * Evento será disparado quando ocorrer algum erro no envio do arquivo. * > Por parâmetro será passado o objeto do retorno que é do tipo `HttpErrorResponse`. * * **Componente compatível**: `po-upload` */ onError?: Function; /** * Evento será disparado quando o envio do arquivo for realizado com sucesso. * > Por parâmetro será passado o objeto do retorno que é do tipo `HttpResponse`. * * **Componente compatível**: `po-upload` */ onSuccess?: Function; /** * Função que será executada no momento de realizar o envio do arquivo, * onde será possível adicionar informações ao parâmetro que será enviado na requisição. * É passado por parâmetro um objeto com o arquivo e a propriedade data nesta propriedade pode ser informado algum dado, * que será enviado em conjunto com o arquivo na requisição, por exemplo: * * ``` * event.data = {id: 'id do usuário'}; * ``` * * **Componente compatível**: `po-upload` */ onUpload?: Function; /** * * Define que o filtro no primeiro clique será removido. * * > Caso o combo tenha um valor padrão de inicialização, o primeiro clique * no componente retornará todos os itens da lista e não apenas o item inicialiazado. * * **Componente compatível**: `po-combo` */ removeInitialFilter?: boolean; /** * Define o tamanho dos componentes de formulário no template conforme suas respectivas documentações: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * - `large`: aplica a medida large de cada componente (disponível para `po-checkbox` e `po-radio-group`). * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ size?: string; /** * Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será exibida quando o campo estiver ligado(on/true). * * **Componente compatível**: `po-switch` * * @default `false` */ invalidValue?: boolean; } /** * * @description * * Componente para criação de formulários dinâmicos a partir de uma lista de objetos. * * Também é possível verificar se o formulário está válido e informar valores para a exibição de informações. */ declare class PoDynamicFormBaseComponent { /** * @optional * * @description * * Nome da propriedade, atribuída ao `PoDynamicFormField.property`, que iniciará o campo com foco. */ autoFocus?: string; /** * @description * * Coleção de objetos que implementam a interface `PoDynamicFormField`, para definição dos campos que serão criados * dinamicamente. * * > Ex: `[ { property: 'name' } ]` * * Regras de tipagem e criação dos componentes: * * - Caso o *type* informado seja *boolean* o componente criado será o `po-switch`. * - Caso o *type* informado seja *currency* e não seja informado um *mask* ou *pattern* o componente criado será o `po-decimal`, * caso seja informado um *mask* ou *pattern* o componente criado será o `po-input`. * - Caso o *type* informado seja *number* e não seja informado um *mask* ou *pattern* o componente criado será o `po-number`, caso seja * informado um *mask* ou *pattern* o componente criado será o `po-input`. * - Caso a lista possua a propriedade `options` e a mesma possua até 3 itens o componente criado será o `po-radio-group` * ou `po-checkbox-group` se informar a propriedade `optionsMulti`. * - Caso a mesma possua 3 ou mais itens, será criado o componente `po-select` ou, `po-multiselect` se a propriedade `optionsMulti` * for verdadeira. * - Caso o *type* informado seja *date* ou *datetime* o componente criado será o `po-datepicker`. * - Caso seja informado a propriedade `optionsService` o componente criado será o `po-combo`. * - Caso o *type* informado seja *time* o componente criado será um `po-input` podendo receber um *mask* para formatar * o valor exibido, caso não seja informado um *mask* o componente será criado com a máscara '99:99' por padrão. * - Caso a lista possua a propriedade `rows` e esta seja definida com valor maior ou igual a 3 o componente criado será * o `po-textarea`, caso o valor da propriedade `rows` seja menor que 3 o componente criado será o `po-input`. * - Caso seja informada a propriedade `secret` o componente criado será o `po-password`. * - Caso o *type* informado seja *string* o componente criado será o `po-input`. * > Ao alterar o valor das `properties`, visibilidade e/ou agrupamentos via container, os `fields` que utilizam serviço podem refazer as chamadas para as API's. * @default `[]` */ fields: Array; /** * Objeto que será utilizado como valor para exibir as informações, será recuperado e preenchido através do atributo *property* * dos objetos contidos na propridade `p-fields`. * * Pode iniciar com valor ou apenas com um objeto vazio que será preenchido conforme descrito acima. * * > Ex: `{ name: 'po' }` */ value: any; /** * @optional * * @description * * Na inicialização do componente será repassado o objeto de formulário utilizado no componente, * podendo ser utilizado para validações e/ou detecção de mudança dos valores. * * Portanto existem duas maneiras de recuperar o formulário, * através de *template reference* e através do *output*, veja os exemplos abaixo: * * > *template reference* * * ```html * * * * * * * ``` * * > *Output* * * ```html * ... * * * * * * ... * * ``` * * ```ts * ... * * export class AppComponent { * * dynamicForm: NgForm; * * getForm(form: NgForm) { * this.dynamicForm = form; * } * * } * ``` * * > Caso a propriedade `p-group-form` for verdadeira não será repassado o formulário, pois o mesmo utilizará * o formulário pai. */ formOutput: EventEmitter; /** * Função ou serviço que será executado na inicialização do componente. * * A propriedade aceita os seguintes tipos: * - `string`: *Endpoint* usado pelo componente para requisição via `POST`. * - `function`: Método que será executado. * * Ao ser executado, irá receber como parâmetro o objeto informado no `p-value`. * * O retorno desta função deve ser do tipo [PoDynamicFormLoad](documentation/po-dynamic-form#po-dynamic-form-load), * onde o usuário poderá determinar as novas atualizações dos campos, valores e determinar o campo a ser focado. * * Por exemplo: * * ``` * onLoadFields(): PoDynamicFormLoad { * * return { * value: { cpf: undefined }, * fields: [ * { property: 'cpf' } * ], * focus: 'cpf' * }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-load]="onLoadFields.bind(this)" * ``` */ load?: string | Function; /** * Função ou serviço para validar as **mudanças do formulário**. * * A propriedade aceita os seguintes tipos: * - `string`: *Endpoint* usado pelo componente para requisição via `POST`. * - `function`: Método que será executado. * * Ao ser executado, irá receber como parâmetro um objeto com o nome da propriedade * alterada e os valores atualizados do formulario, conforme a interface `PoDynamicFormFieldChanged` * * * O retorno desta função deve ser do tipo [PoDynamicFormValidation](documentation/po-dynamic-form#po-dynamic-form-validation), * onde o usuário poderá determinar as novas atualizações dos campos. * Por exemplo: * * ``` * onChangeFields(changeValue): PoDynamicFormValidation { * * if (changeValue.property === 'state') { * * return { * value: { city: undefined }, * fields: [ * { property: 'city', options: this.getCity(changeValue.value.state) } * ], * focus: 'city' * }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-validate]="this.myFunction.bind(this)" * ``` * * > Se houver uma lista de campos para validação definida em `p-validate-fields`, a propriedade `validate` só receberá o disparo para os campos equivalentes. */ validate?: string | Function; /** * @optional * * @description * * Lista que define os campos que irão disparar o validate do form. */ validateFields?: Array; private _componentsSize?; private _groupForm?; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * Ao informar esta propriedade, o componente passará a utilizar o formulário pai para criar os `FormControl` * e com isso é possível recuperar o valor do formulário e suas validações a partir do formulário pai. * * ```html *
* * * * *
* ``` */ set groupForm(value: boolean); get groupForm(): boolean; /** * @optional * * @description * * Ao informar esta propriedade, o componente passará a emitir o valor a cada caractere digitado. * * Pode ser aplicado nos seguintes componentes: * - po-input * - po-number * - po-decimal * - po-textarea * - po-password * * Deve informar os campos que deseja receber as emissões na propriedade `p-validate-fields`. * * */ validateOnInput: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_validateOnInput: any; } interface PoDynamicFormResponse { fields?: Array; /** * Nome do campo que receberá o foco. * * Exemplo: * * ``` * focus: 'name' * ``` */ focus?: string; /** * Objeto contendo os novos valores. * * Exemplo: * * ``` * { * name: 'new name', * age: 10 * } * ``` * * > Não é necessário colocar os valores de todos os campos, apenas os que foram alterados. */ value?: any; } /** * @usedBy PoDynamicFormComponent * * @description * * * Estrutura de retorno no carregamento do formulário. * * @docsExtends PoDynamicFormResponse */ interface PoDynamicFormLoad extends PoDynamicFormResponse { /** * Lista com as novas definições dos campos. * * > Não é necessário colocar todas as propriedades e campos, apenas as que precisam ser alteradas ou adicionadas. */ fields?: Array; } /** * @usedBy PoDynamicFormComponent * * @description * * * Estrutura de retorno da validação do formulário. * * @docsExtends PoDynamicFormResponse */ interface PoDynamicFormValidation extends PoDynamicFormResponse { /** * Lista com as novas definições dos campos. * * > Não é necessário colocar todas as propriedades e campos, apenas as que foram alteradas. */ fields?: Array; } declare class PoDynamicFormOperation { private http; constructor(http: HttpClient); protected execute(action: Function | string, param: any): rxjs.Observable; protected post(url: string, body: PoDynamicFormValidation | any): rxjs.Observable; protected setFormDefaultIfEmpty(validateFields: any): PoDynamicFormValidation | PoDynamicFormLoad; } declare class PoDynamicFormLoadService extends PoDynamicFormOperation { constructor(); createAndUpdateFieldsForm(loadedFields?: Array, fields?: Array): PoDynamicFormField[]; executeLoad(load: Function | string, value: any): rxjs.Observable<_po_ui_ng_components.PoDynamicFormLoad | _po_ui_ng_components.PoDynamicFormValidation>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class PoDynamicFormValidationService extends PoDynamicFormOperation { constructor(); sendFieldChange(field: PoDynamicFormField, value: any): Observable; sendFormChange(validate: Function | string, field: PoDynamicFormField, value: any): Observable; updateFieldsForm(validatedFields?: Array, fields?: Array): PoDynamicFormField[]; private setFieldDefaultIfEmpty; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsExtends PoDynamicFormBaseComponent * * @example * * * * * * * * * * * * * * * * * * */ declare class PoDynamicFormComponent extends PoDynamicFormBaseComponent implements OnInit, OnDestroy { private changes; private loadService; private validationService; fieldsComponent: { focus: (property: string) => void; updatePreviousValue: () => void; showAdditionalHelp: (property: string) => void; }; disabledForm: boolean; displayAdditionalHelp: boolean; private _form; private onLoadSubscription; private sendFormSubscription; private comboOptionSubject; set form(value: NgForm); get form(): NgForm; constructor(changes: ChangeDetectorRef, loadService: PoDynamicFormLoadService, validationService: PoDynamicFormValidationService); ngOnDestroy(): void; ngOnInit(): void; /** * Função que atribui foco ao campo desejado. * * Para utilizá-la é necessário capturar a instância do `dynamic form`, como por exemplo: * * ``` html * * ``` * * ``` javascript * import { PoDynamicFormComponent, PoDynamicFormField } from '@po-ui/ng-components'; * * ... * * @ViewChild('dynamicForm', { static: true }) dynamicForm: PoDynamicFormComponent; * * fields: Array = [ * { property: 'fieldOne' }, * { property: 'fieldTwo' } * ]; * * fieldFocus() { * this.dynamicForm.focus('fieldTwo'); * } * ``` * * @param {string} property Nome da propriedade atribuída ao `PoDynamicFormField.property`. */ focus(property: string): void; getObjectValue(): Observable; sendObjectValue(objectValue: any): void; /** * 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); * } * } * ``` * * @param { string } property Identificador da coluna. */ showAdditionalHelp(property: string): void; validateForm(field: PoDynamicFormField): void; private applyFormUpdatesOnLoad; private applyFormValidation; private disableForm; private emitForm; private loadDataOnInitialize; private removeListeners; private setFocusOnFieldByProperty; private updateModelOnLoad; private updateModelWithValidation; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoDynamicViewComponent * * @description * * Define o tipo de busca customizada para um campo em específico. */ interface PoDynamicViewRequest { /** * Método responsável por enviar um valor que será buscado no serviço. * * * @param {string|Array} value Valor único a ser buscado na fonte de dados. * @param {any} filterParams Valor opcional para informar filtros customizados. */ getObjectByValue(value: string | Array, filterParams?: any): Observable; } /** * @usedBy PoDynamicViewComponent * * @docsExtends PoDynamicField * * @description * * Interface para definição das propriedades dos campos de visualização que serão criados dinamicamente. */ interface PoDynamicViewField extends PoDynamicField { /** * Indica se o campo será um `po-tag`. * * @default `false` */ tag?: boolean; /** * Determina a cor da tag. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; * - Usando uma das cores do tema do PO: * - Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` */ color?: string; /** * Determina a cor do texto da tag. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; */ textColor?: string; /** * Permite que seja exibido em tela, de forma concatenada as propriedades `fieldLabel` + `fieldValue`. * A ordem sempre será `fieldLabel` e depois `fieldValue`, não sendo possível alterar. * * > Propriedade funciona corretamente caso as propriedades `fieldLabel` e `fielValue` sejam válidas. * * @default `false` */ concatLabelValue?: boolean; /** * Nome da propriedade do objeto retornado que será utilizado como descrição do campo. * * O valor padrão é: `label`. * */ fieldLabel?: string; /** * Nome da propriedade do objeto retornado que será utilizado como valor do campo. * * O valor padrão é: `value`. * */ fieldValue?: string; /** * Define um ícone que será exibido ao lado do valor para o campo do tipo *tag*. * * > Veja os valores válidos na [biblioteca de ícones](https://po-ui.io/icons). */ icon?: string; /** * Define que a propriedade `property` é uma lista ou um objeto. * * > Por padrão, espera-se que a lista ou o objeto esteja com as propriedades `label` e `value`. * Caso estejam com nomes diferentes, deve-se usar as propriedades `fieldLabel` e `fieldValue`. * > É ignorada caso a propriedade `searchService` esteja sendo utilizada. * * @default `false` */ isArrayOrObject?: boolean; /** * Define o formato de exibição para o valor de um campo. * * - Quando `format` é uma `string`, o formato aplicado depende da propriedade **type** segue como usar cada tipo: * - `currency`: Utiliza códigos de moeda definidos pelo [CurrencyPipe](https://angular.io/api/common/CurrencyPipe). * Exemplos: Use 'BRL' para Real Brasileiro e 'USD' para Dólar Americano. * - `date`: Adota formatos de data especificados pelo [DatePipe](https://angular.io/api/common/DatePipe). * Suporta formatos personalizados, como dia (dd), mês (MM) e ano (yyyy ou yy). * Formato padrão é 'dd/MM/yyyy'. Exemplos: 'dd/MM/yyyy', 'dd-MM-yy', 'mm/dd/yyyy'. * - `time`: Aceita formatos de tempo, incluindo hora (HH), minutos (mm), segundos (ss) e opcionalmente * milisegundos (f-ffffff). Formato padrão é 'HH:mm:ss'. Exemplos: 'HH:mm', 'HH:mm:ss.ffffff', 'HH:mm:ss.ff'. * - `number`: Usa especificações do [DecimalPipe](https://angular.io/api/common/DecimalPipe) para formatação numérica. * Na ausência de um formato específico, o número é exibido como fornecido. * Exemplo: Entrada `50`, formato `'1.2-5'`, resulta em `50.00`. * * - Quando `format` é um `Array`: * - Cada elemento do array representa uma propriedade do objeto. * - Os valores dessas propriedades são concatenados, separados pelo padrão ' - '. * - Exemplo: Para `format: ["id", "name"]` e um objeto `{ id: 1, name: 'Carlos Diego' }`, * o resultado será `'1 - Carlos Diego'`. * * @example Para formatar um campo de moeda, use format: "BRL". * Para um campo de data, use format: "dd/MM/yyyy". * Para combinar propriedades de um objeto em um campo, use format: ["id", "name"]. */ format?: string | Array; /** * Informa a ordem de exibição do campo. * * Exemplo de utilização: * * ``` * [ * { property: 'test 1', order: 2 }, * { property: 'test 2', order: 1 }, * { property: 'test 3' }, * { property: 'test 4', order: 3 } * ]; * ``` * * Na exibição a ordem ficará dessa forma: * ``` * [ * { property: 'test 2', order: 1 }, * { property: 'test 1', order: 2 }, * { property: 'test 4', order: 3 }, * { property: 'test 3' } * ]; * ``` * * Só serão aceitos valores com números inteiros maiores do que zero. * * Campos sem `order` ou com valores negativos, zerados ou inválidos * serão os últimos a serem renderizados e seguirão o posicionamento dentro do * array. */ order?: number; /** * Defini o texto alternativo descrevendo a imagem. * * Exemplo de utilização: * * ``` * [ * { property: 'imagem 1', image:'string', alt:'string', height:'300'}, * ]; * ``` * **Componentes compatíveis:** `po-image`. * */ alt?: string; /** * Defini o texto alternativo descrevendo a imagem. * * Exemplo de utilização: * * ``` * [ * { property: 'imagem 1', image:'string', alt:'string', height:'number'}, * ]; * ``` * **Componentes compatíveis:** `po-image`. * */ height?: string; /** * Possibilita a utilização de imagem. * * Exemplo de utilização: * * ``` * [ * { property: 'imagem 1', image:'string', alt:'string', height:'300'}, * ]; * ``` * * @default `false` * * **Componentes compatíveis:** `po-image`. */ image?: boolean; /** * Lista de opções que podem ser vinculadas à propriedade p-value. * Quando uma opção de valor é passada, sua propriedade label será atribuída à propriedade p-value. * * Exemplo de utilização: * * ``` * fields = [ * { * property: 'name', options: [ * {label: 'Anna', value: '1'}, * {label: 'Jhon', value: '2'}, * {label: 'Mark', value: '3'} * ] * } * ]; * ``` * * ``` * * * ``` * */ options?: Array<{ label: string; value: string | number; }>; /** * Serviço que será utilizado para buscar os itens e preencher a lista de opções dinamicamente. * Pode ser informada uma URL ou uma instancia do serviço baseado em PoComboFilter. * **Importante** * > Para que funcione corretamente, é importante que o serviço siga o * [guia de API do PO UI](https://po-ui.io/guides/api). */ optionsService?: string | PoComboFilter | PoMultiselectFilter; /** * Habilita a visualização de múltiplos itens. * Útil para exibir dados em formatos semelhantes aos componentes que suportam seleção múltipla. */ optionsMulti?: boolean; /** * Serviço customizado para um campo em específico. * Pode ser ser informada uma URL ou uma instancia do serviço baseado em PoDynamicViewRequest. * **Importante:** * > A propriedade `property` deve receber um valor válido independente de sua utilização para * execução correta. * > Para que funcione corretamente, é importante que o serviço siga o * [guia de API do PO UI](https://po-ui.io/guides/api). */ searchService?: string | PoDynamicViewRequest; /** Texto exibido quando o valor do componente for *true*. */ booleanTrue?: string; /** Texto exibido quando o valor do componente for *false*. */ booleanFalse?: string; /** * Objeto que será enviado como parâmetro nas requisições de busca `searchService` ou `optionsService` * utilizadas pelos campos que dependem de serviços para carregar seus dados. * * Por exemplo, para o parâmetro `{ age: 23 }` a URL da requisição ficaria: * * `` * url + /1?age=23 * `` */ params?: any; } /** * @usedBy PoDynamicViewComponent, PoDynamicFormComponent * @description * Componente para listar dados compartilhados entre o dynamic-view e o dynamic-form */ declare class PoDynamicSharedBase { visibleFields: Array; containerFields: any[]; hasContainers: boolean; ensureFieldHasContainer(fields: Array | Array): void; setContainerFields(): void; private groupFieldsIntoContainers; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class PoDynamicFormFieldsBaseComponent extends PoDynamicSharedBase { private titleCasePipe; autoFocus?: string; disabledForm: boolean; validate?: string | Function; formValidate: EventEmitter; fieldsChange: EventEmitter; objectValue: EventEmitter; validateOnInput: boolean; private _componentsSize?; private _fields; private _validateFields; private _value?; set componentsSize(value: string); get componentsSize(): string; set fields(value: Array); get fields(): Array; set value(value: any); get value(): any; set validateFields(value: Array); get validateFields(): Array; constructor(titleCasePipe: TitleCasePipe); compareTo(value: any, compareTo: any): boolean; protected getVisibleFields(): any[]; private convertOptions; private createField; private existsProperty; private getComponentControl; private hasFocus; private isCheckboxGroup; private isCombo; private isCurrencyType; private isLookupFilter; private isComboFilter; private isLookup; private isMultiselect; private isNumberType; private isPassword; private isRadioGroup; private isUpload; private verifyForceOptionComponent; private isSelect; private isTextarea; private printError; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsPrivate * * @description * * Componente de criação dos campos dinâmicos. */ declare class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent implements OnChanges { private readonly validationService; private readonly changes; private readonly form; components: QueryList<{ name: string; focus: () => void; showAdditionalHelp: () => void; }>; private previousValue; constructor(); ngOnChanges(changes: SimpleChanges): void; focus(property: string): void; isDisabled(field: PoDynamicFormField): boolean; onChangeField(visibleField: PoDynamicFormField, objectValue?: any): Promise; onChangeFieldModel(visibleField: PoDynamicFormField): void; showAdditionalHelp(property: string): void; updatePreviousValue(): void; trackBy(index: number, field: PoDynamicFormField): string; private applyFieldValidation; private getField; private triggerValidationOnForm; private updateFields; private validateFieldsChecker; private validateField; private hasChangeContainer; private updateFieldContainer; private diffObjectsArray; private hasContainer; private handleChangesContainer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Serviço padrão utilizado para filtrar os dados dos campos que utilizam a propriedade `searchService`. */ declare class PoDynamicViewService { private httpClient; readonly headers: HttpHeaders; url: string; getObjectByValue(value: any, filterParams?: any): Observable | { [key: string]: any; }>; onLoad(url: string, value: any): Promise<{ value?: any; fields?: Array; }>; setConfig(url: string): void; private validateParams; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * * @description * * 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 }. * */ declare class PoDynamicViewBaseComponent extends PoDynamicSharedBase { private currencyPipe; private datePipe; private decimalPipe; private timePipe; private titleCasePipe; protected dynamicViewService: PoDynamicViewService; protected comboFilterService: PoComboFilterService; protected multiselectFilterService: PoMultiselectFilterService; /** * @optional * * @description * * Possibilita executar uma função quando o componente é inicializado. * * A propriedade aceita os seguintes tipos: * - **String**: Endpoint usado pelo componente para requisição via `POST`. * - **Function**: Método que será executado na inicialização do componente. * * Para os dois tipos de utilização da propriedade espera-se o seguinte retorno: * * ``` * { * value: { * cnpj: '**************', // altera valor do campo * updated: (new Date()).toString() // atribui valor ao campo novo * }, * fields: [ * { property: 'updated', tag: true } // inclui campo novo * ] * } * ``` * > **value**: any = atribui novo valor do model. * * > **fields**: `Array` = Lista de campos que deseja alterar as propriedades, * caso enviar um campo a mais será criado um novo campo. * * - Para esconder/remover campos precisa informar no field a propriedade `visible = false`. * */ load: string | Function; service: any; private _componentsSize?; private _fields; private _showAllValue; private _value; /** * @optional * * @description * * Define o tamanho dos componentes no template entre `small` ou `medium`. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Lista de objetos que implementam a interface `PoDynamicView`. * * > Ex: `[ { property: 'age' } ]` * * Regras de tipagem e formatação dos valores exibidos: * * - Caso o *type* informado seja *currency* e não seja informado o *format* o mesmo recebe "'BRL', 'symbol', '1.2-2'" * como formato padrão. * - Caso o *type* informado seja *date* e não seja informado o *format* o mesmo recebe 'dd/MM/yyyy' como formato padrão. * - Caso o *type* informado seja *dateTime* e não seja informado o *format* o mesmo recebe 'dd/MM/yyyy HH:mm:ss' como formato padrão. * - Caso o *type* informado seja *number* e não seja informado o *format* o mesmo não será formatado. * - Caso o *type* informado seja *time* e não seja informado o *format* o mesmo recebe 'HH:mm:ss.ffffff' como formato padrão. * * > As propriedades informadas serão exibidas mesmo não contendo valor de referência no objeto da propriedade `p-value`. * * @default `[]` */ set fields(fields: Array); get fields(): Array; /** * @optional * * @description * * Indica se exibirá todas as informações contidas dentro do objeto informado na propriedade `p-value`. * * @default `false` */ set showAllValue(value: boolean); get showAllValue(): boolean; /** * @optional * * @description * * Permite a quebra de linha no texto do `p-value`, aplicando-a onde há `\n`. * * ``` * * ``` * * Saída: * ``` * Primeira linha * Segunda linha * ``` * @default `false` */ textWrap: boolean; /** * @description * * Objeto que será utilizado para exibir as informações dinâmicas, o valor será recuperado através do atributo *property* * dos objetos contidos na propridade `p-fields`. * * > Ex: `{ age: '35' }` */ set value(value: object); get value(): object; constructor(currencyPipe: CurrencyPipe, datePipe: DatePipe, decimalPipe: DecimalPipe, timePipe: PoTimePipe, titleCasePipe: TitleCasePipe, dynamicViewService: PoDynamicViewService, comboFilterService: PoComboFilterService, multiselectFilterService: PoMultiselectFilterService); protected getFieldOrderRetroactive(position: number, index?: number): number; protected getFieldOrder(field: PoDynamicViewField, index: number): number; protected getConfiguredFields(useSearchService?: boolean): any[]; protected getMergedFields(): any[]; protected getValueFields(): { tag?: boolean; color?: string; textColor?: string; concatLabelValue?: boolean; fieldLabel?: string; fieldValue?: string; icon?: string; isArrayOrObject?: boolean; format?: string | Array; order?: number; alt?: string; height?: string; image?: boolean; options?: Array<{ label: string; value: string | number; }>; optionsService?: string | _po_ui_ng_components.PoComboFilter | _po_ui_ng_components.PoMultiselectFilter; optionsMulti?: boolean; searchService?: string | _po_ui_ng_components.PoDynamicViewRequest; booleanTrue?: string; booleanFalse?: string; params?: any; key?: boolean; property: string; label: string; gridColumns?: number; gridSmColumns?: number; gridMdColumns?: number; gridLgColumns?: number; gridXlColumns?: number; offsetColumns?: number; offsetSmColumns?: number; offsetMdColumns?: number; offsetLgColumns?: number; offsetXlColumns?: number; gridSmPull?: number; gridMdPull?: number; gridLgPull?: number; gridXlPull?: number; visible?: boolean; divider?: string; type?: string | _po_ui_ng_components.PoDynamicFieldType; container?: string; value: any; cssClass: string; }[]; private createField; private createFieldWithService; private returnValues; private searchById; private transformArrayValue; private transformFieldLabel; private transformValue; private formatField; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoDynamicViewBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * */ declare class PoDynamicViewComponent extends PoDynamicViewBaseComponent implements OnChanges, OnInit { initChanges: any; constructor(); ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; setFieldValue(field: any): any; protected containsLineBreak(value: string): boolean; private getValuesAndFieldsFromLoad; private getVisibleFields; private setFieldOnLoad; private setFieldsOnLoad; private setValueOnLoad; private updateValuesAndFieldsOnLoad; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoDynamicContainerComponent { content: TemplateRef | any; fields: Array; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoInfoComponent * * @description * * Define os tipos de orientações disponíveis para o `po-info`. */ declare enum PoInfoOrientation { /** O valor será exibido na horizontal, ao lado direito em relação ao label. */ Horizontal = "horizontal", /** Exibe o valor na vertical, ou seja, abaixo do label. */ Vertical = "vertical" } declare class PoInfoBaseComponent { /** Valor do rótulo a ser exibido. */ label: string; /** * Ao informar uma URL, o conteúdo será exibido na forma de um *link* e ao ser clicado será redirecionado para a URL informada. * * > Caso informar `http://` será aberto uma nova aba. * Caso informar um caminho relativo, exemplo: `/customers`, será aberto na aba atual. * */ url?: string; /** Valor do conteúdo a ser exibido. */ value?: string; readonly poInfoOrientation: typeof PoInfoOrientation; private _labelSize; private _orientation; private _size?; /** * @optional * * @description * * Quantidade de [colunas](/guides/grid-system) usadas para a exibição da `p-label` quando o componente for * utilizado na orientação horizontal. * * Valores válidos: * - `[1 .. 11]` * * > A propriedade `p-value` recebe o número de colunas restantes, por exemplo, se definido 3 colunas a mesma assume 9 colunas. */ set labelSize(value: number); get labelSize(): number; /** * @optional * * @description * * Define o layout de exibição. * * > Quando definido na horizontal, pode-se utilizar a propriedade `p-label-size` para um maior controle das informações exibidas. * * @default `vertical` */ set orientation(value: PoInfoOrientation); get orientation(): PoInfoOrientation; /** * @optional * * @description * * Define o tamanho do componente entre `small` ou `medium`. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoInfoBaseComponent * * @description * * Este componente tem como objetivo renderizar valores na tela no estilo label na parte superior e * valor na parte inferior. Facilita a exibição de dados pois vem com layout padrão PO. * * @example * * * * * * * * * * */ declare class PoInfoComponent extends PoInfoBaseComponent { get isExternalLink(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-info. */ declare class PoInfoModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } type PoImageLoading = 'lazy' | 'eager' | 'auto'; /** * @description * * As imagens têm a função de traduzir visualmente ideias específicas ou mensagens complexas, mostrar um produto ou contar uma história, estabelecendo empatia e se conectando com os usuários. * * #### Boas Práticas * * O componente image foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1. Também foram estruturadas padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência para os usuários. Por isso, é muito importante que, ao aplicar esse componente, o proprietário do conteúdo leve em consideração alguns critérios e práticas: * ##### Uso * - Ao utilizar imagens, mantenha uma coerência entre elas no produto, de modo que compartilhem um mesmo estilo e intenção entre si. * - Utilize imagens que expressem a mensagem e estilo do produto, respeitando as diretrizes e guia da marca. * - Ao utilizar fotografias, é recomendável o uso de proporções de aspecto padrão, como 1:1, 3:1, 3:2, 16:9. * - Mantenha um ponto focal na imagem, pois isso influencia em como ela se comportará em diferentes formatos. Isso também ajuda a transmitir a mensagem de forma objetiva e consistente. * * ##### Imagem como plano de fundo * - Avalie se é realmente necessário o uso de imagem como plano de fundo e evite sempre que possível, pois pode ocasionar em um baixo contraste entre texto e imagem. * - Caso utilize, redobre a atenção na escolha da imagem e certifique-se de que ela está adequada para a leitura do texto e não está sendo apenas um ruído. * - Tenha especial atenção em telas menores. Embora seja possível posicionar o texto em uma área mais vazia ou escurecida, o texto e imagem se ajustam aos diferentes espaços, de acordo com o dispositivo. Muitas vezes acaba resultando no comprometimento tanto da leitura do texto e quando na visualização da imagem. * - Verifique a taxa de contraste do texto em relação ao fundo. Deve ser suficiente para atender aos padrões de acessibilidade, sendo 4,5:1 para textos acima de 18pt ou bold e 7,1: 1 para textos menores que 18pt. * - Se não tiver controle sobre qual imagem será colocada por trás do texto, o recomendado é não utilizar nesse formato. * * #### Acessibilidade tratada no componente * As boas práticas de acessibilidade variam de acordo com tipo da imagem, que podem ser divididas em: * - Imagem informativa simples, como por exemplo uma fotografia de um produto. * - Imagem complexa, como um gráfico, infográfico ou diagrama. * - Imagem decorativa, como um plano de fundo ou uma fotografia que ilustra um assunto, mas não é essencial para compreender a informação. */ declare class PoImageBaseComponent { isBase64: boolean; private _source; /** * @optional * * @description * * Define a altura da imagem em *pixels*. Caso não seja definida, * atribui o tamanho da imagem */ height: number; /** * @optional * * @description * * Defini o texto alternativo descrevendo a imagem. */ alternate: string; /** * @optional * * @description * * Fonte da imagem que pode ser um caminho local (`./assets/images/logo-black-small.png`) * ou um servidor externo (`https://po-ui.io/assets/images/logo-black-small.png`). */ set source(value: string); get source(): string; /** * @optional * * @description * * Defini a prioridade de carregamento da imagem. * > Para as imagens com carregamento prioritátio ativo é necessário incluir * > uma tag link no head do arquivo index.html da sua aplicação. * * ``` * * ``` * * @default `false` */ priority: boolean; /** * @optional * * @description * * Defini o carregamento que pode ser dos tipo: * * — lazy * — eager * — auto * * > Não é permitido definir esta propriedade em conjunto com a propriedade `p-priority`. */ loading?: PoImageLoading; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoImageBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoImageComponent extends PoImageBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-image */ declare class PoImageModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoDynamicModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare const poChartLiteralsDefault: { en: PoChartLiterals; es: PoChartLiterals; pt: PoChartLiterals; ru: PoChartLiterals; }; /** * @usedBy PoGaugeComponent * * @description * * Interface que define os alcances das cores do gauge. */ interface PoGaugeRanges { /** Alcance inicial da cor. O valor padrão é 0. */ from?: number; /** Alcance final da cor. O valor padrão é 100. */ to?: number; /** * @description * * O texto para a legenda do alcance. * * > Se desejar ocultar a legenda basta ignorar esta propriedade. */ label?: string; /** * @description * * Determina a cor do alcance. As maneiras de customizar o *preset* padrão de cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)` * - O nome da cor, por exemplo *blue*); * - Usando uma das cores do tema do PO: * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` */ color?: string; } /** * @usedBy PoGaugeComponent * * @description * * *Interface* para configurações dos elementos do gráfico. */ interface PoGaugeOptions { /** * @optional * * @description * * Define a descrição do gráfico exibido acima do gráfico. * */ descriptionChart?: string; /** * @optional * * @description * * Define um objeto do tipo `PoChartHeaderOptions` para configurar a exibição de botões no cabeçalho do gráfico. */ header?: PoChartHeaderOptions; /** * @optional * * @description * * Esconde a estilização do container em volta do gráfico. * * @default `true` */ showContainerGauge?: boolean; /** * @optional * * @description * * Exibe os valores das propriedades `from` e `to` no gráfico do no texto da legenda entre parênteses. * * > Válido para gráfico do tipo `Gauge`. * */ showFromToLegend?: boolean; /** * @optional * * @description * * Define um subtítulo para o Gauge. Indicamos um subtítulo pequeno, com uma quantidade máxima de 32 caracteres na altura padrão. * */ subtitleGauge?: string; /** * @optional * * @description * * Define a exibição do ponteiro. * * > Válido para gráfico do tipo `Gauge`. * * @default `true` */ pointer?: boolean; } /** * @description * * > ESSE COMPONENTE ESTÁ DEPRECIADO E SERÁ REMOVIDO NA v22.x.x. Indicamos a utilização do `po-chart` com `type` Gauge. * * O componente `po-gauge` provê a representação de um valor através de um arco. É muito comum, por exemplo, para demonstrar o desempenho ou progresso de algo. * O `po-gauge` possui dois tipos de tratamentos: * - É possível demonstrar um dado percentual simples em conjunto com uma descrição resumida em seu interior; * - Para um demonstrativo mais elaborado, consegue-se definir alcances em cores, um breve texto descritivo e um ponteiro indicando o valor desejado. * * #### 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. */ declare abstract class PoGaugeBaseComponent { private _description; private _height; private _ranges; private _title; private _value; /** * @optional * * @description * * Define a exibição dos valores de `from` - `to` entre parênteses caso haja definição de `p-ranges`. * * @default `false` */ showFromToLegend: boolean; /** * @optional * * @description * * Define a exibição do ponteiro caso haja definição de `p-ranges`. * * @default `true` */ showPointer: boolean; /** * @optional * * @description * * Objeto com as configurações usadas no `po-gauge`. * * É possível, por exemplo, esconder as funcionalidades do header, * ou habilitar uma legenda com `From` `To` da seguinte forma: * * ``` * chartOptions: PoGaugeOptions = { * showFromToLegend: true, * header: { * hideExpand: true, * }, * }; * ``` */ options: PoGaugeOptions; /** * @optional * * @description * * Define o texto que será exibido no gauge. * Há dois posicionamentos para ele: * - Se houver definição para `p-ranges`, o descritivo será exibido no topo do container, ficando acima do gauge; * - Na ausência de `p-ranges`, será incorporado dentro do arco do gauge, e abaixo de `p-value`. * * > Para uma melhor experiência do usuário, é recomendado um descritivo breve e com poucas palavras. * > Indicamos a utilização da nova propriedade `descriptionChart` em `p-options`. */ set description(value: string); get description(): string; /** * @optional * * @description * * Define a altura do gauge. * * O valor mínimo aceito é 300px. * * @default `300px` */ set height(value: number); get height(): number; /** * @optional * * @description * * Definição para o alcance de cores. Ao adicionar pelo menos um item na lista, * incorpora-se o ponteiro que assinala o valor passado em `p-value`. * Se o valor de `p-value` for inferior ao mínimo valor definido em `PoGaugeRanges.from`, o domínio mínimo do gauge será `p-value`. * A mesma regra prevalece para valores máximos. */ set ranges(value: Array); get ranges(): Array; /** * @optional * * @description * * Define o título do gauge. */ set title(value: string); get title(): string; /** * @optional * * @description * * Valor referente ao valor da série. Seu comportamento segue a seguintes regras: * * - Sem `p-ranges`: Os valores passados para `p-value` e `p-description` serão centralizados no interior do arco. * A base do valor será percentual tendo como base os alcances entre zero e 100%. Se passado um valor superior a 100, * A colorização do gauge será completa e o valor passado será exibido no interior do arco. * - Com `p-ranges`: A descrição será exibida acima do gauge e haverá um ponteiro marcando o valor passado em `p-value`. * Considerando que o alcance em `ranges` é aberto, então a escala de `p-value` será em relação ao menor/maior alcance * absoluto definido em `p-ranges`. * Se passado um `p-value` inferior em relação ao mínimo valor definido em `p-ranges`, o domínio mínimo do gauge partirá de `p-value`. * A mesma regra prevalece para valores máximos. * */ set value(gaugeValue: number); get value(): number; private setGaugeHeight; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoGaugeBaseComponent * * @example * * * * * * * * * * * * * * * @deprecated v22.x.x * Utilize o `po-chart` com `type="gauge"` como alternativa recomendada. */ declare class PoGaugeComponent extends PoGaugeBaseComponent implements OnChanges, OnInit { series: Array; valuesMultiple: number; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-gauge. */ declare class PoGaugeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoGridCellActionComponent { position?: string; value?: string; constructor(); onKeyDownContent(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoGridCellComponent { private changeDetectorRef; align?: string; freeze?: boolean; tabIndex?: number; position?: string; readonly?: boolean; required?: boolean; valueChange: EventEmitter; inputElement: ElementRef; contentElement: ElementRef; _value: any; edit: boolean; editValue: string; private _width; set width(value: string | number); get width(): string | number; set value(value: any); get value(): any; onKeyDownContent(event: any): void; dblclick(event: any): void; onBlurInput(): void; onKeyDownInput(event: any): void; private onEditCell; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoGridComponent * * @description * * Ações executadas durante a manipulação das linhas do grid. */ interface PoGridRowActions { /** Método executado após uma linha do grid ser removida. */ afterRemove?: () => void; /** * @description * * 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. */ afterSave?: (row: any) => void; /** * @description * * Método executado antes de uma nova linha ser inserida no grid, se o método retornar algo diferente de `true` a ação * será cancelada e a linha não será inserida. * * Ao ser executado o método irá receber a referência do objeto que será inserido, dessa forma é possível informar valores * para esse objeto. * * ``` * rowActions: PoGridRowActions = { * beforeInsert: this.onBeforeInsert.bind(this); * ... * }; * * // Inicia a linha já com as propriedades `name` e `created` preenchidas. * onBeforeInsert(row: any) { * row.name = 'Fulano'; * row.created = '2018-20-12'; * ... * * return true; * } * ``` */ beforeInsert?: (row: any) => boolean; /** * @description * * Método executado antes de uma linha ser removida do grid, ao ser executado, o método irá receber uma cópia do objeto * com os dados da linha que será removida, se o método retornar algo diferente de `true` a ação será cancelada e a linha * não será removida. */ beforeRemove?: (row: any) => boolean; /** * @description * * Método executado antes de uma linha ser atualizada, ao ser executado, o método irá receber um objeto com os dados atualizados * e um objeto com uma cópia dos dados originais, se o método retornar algo diferente de `true` a ação será cancelada e * a linha não será atualizada permanecendo em edição / inserção. * * > Caso não seja permitido a atualização da linha, a sugestão é que seja apresentada uma mensagem ao usuário informando * > o motivo. * * ``` * rowActions: PoGridRowActions = { * beforeSave: this.onBeforeSave.bind(this); * ... * }; * * onBeforeSave(updatedRow: any, originalRow: any) { * // Verifica se a propriedade `name` foi alterada. * if (updatedRow.name !== originalRow.name) { * return false; * } * * // Verifica se é menor de idade * if (updatedRow.age < 18) { * return false; * } * ... * * updatedRow.updated = '2018-20-12'; * * return true; * } * ``` */ beforeSave?: (updatedRow: any, originalRow: any) => boolean; } /** * @description * * > 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. * * @example * * * * * */ declare class PoGridComponent implements OnDestroy { private changeDetectorRef; private elRef; tableElement: ElementRef; tableWrapper: ElementRef; /** * @description * * Ações disparadas quando uma linha do grid é manipulada. */ rowActions: PoGridRowActions; /** * Lista com os dados que serão exibidos no grid. */ data: Array; lastCell: string; lastRow: number; lastColumn: number; currencyCell: string; currencyRow: number; currencyColumn: number; currencyObj: any; logger: boolean; width: string; widporeeze: number; widthActions: number; private resizeListener; private timeoutResize; private _columns; /** * Colunas exibidas no grid. */ set columns(value: Array); get columns(): Array; constructor(); ngOnDestroy(): void; get freezeColumns(): any[]; get actionColumns(): any[]; cancelRow(event: any, row: any): void; removeRow(event: any, row: any): boolean; tableKeydown(event: any, direction: string): void; tableClick(event: any): void; saveRow(row: number): boolean; insertRow(): boolean; isEmptyRow(row: number): boolean; selectCell(row: number, col: number): void; private debounceResize; private getEventPath; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoGridHeadComponent { align?: string; boolean?: boolean; position?: string; tabIndex?: number; title?: string; private _width; set width(value: string | number); get width(): string | number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-grid. */ declare class PoGridModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Interface que define as ações do componente `po-list-view`. * * > As propriedades `separator`, `url` e `selected` serão vistas a partir da terceira ação e somente quando * definir quatro ações ou mais. * * @docsExtends PoPopupAction * * @usedBy PoListViewComponent */ interface PoListViewAction extends PoPopupAction { } /** * @usedBy PoListViewComponent * * @description * * Interface para definição das literais usadas no `po-list-view`. */ interface PoListViewLiterals { /** Rótulo do botão que oculta os detalhes do item. */ hideDetails?: string; /** Rótulo do botão que deve carregar mais resultados. */ loadMoreData?: string; /** Rótulo exibido quando não existem itens para serem exibidos na lista. */ noData?: string; /** Rótulo do `checkbox` da opção de selecionar todos. */ selectAll?: string; /** Rótulo do botão que exibe os detalhes do item. */ showDetails?: string; } /** * @description * * Componente de lista que recebe um array de objetos e renderiza de forma dinâmica os dados de * acordo com a necessidade de cada tela e deve ser utilizado em conjunto com as diretivas de *templates* * **[p-list-view-content-template](/documentation/po-list-view-content-template)** e * **[p-list-view-detail-template](/documentation/po-list-view-detail-template)**. * * O componente disponibiliza uma área específica para exibição informações adicionais, * através da diretiva **[p-list-view-detail-template](/documentation/po-list-view-detail-template)**. */ declare class PoListViewBaseComponent { /** Recebe uma propriedade que será utilizada para recuperar o valor do objeto que será usado como link para o título. */ propertyLink?: string; /** Recebe uma propriedade que será utilizada para recuperar o valor do objeto que será exibido como o título de cada item. */ propertyTitle?: string; /** * @optional * * @description * * Recebe uma ação, que será executada quando clicar no botão "Carregar mais resultados". * * > Caso nenhuma ação for definida o mesmo não ficará visível. */ showMore: EventEmitter; /** * @optional * * @description * * Ação que será executada ao clicar no título. * * Ao ser disparado, o método inserido na ação irá receber como parâmetro o item da lista clicado. */ titleAction: EventEmitter; /** * @optional * * @description * * Ação que será executada ao clicar no botão exibir detalhes. * * Ao ser disparado, o método passa como parâmetros os detalhes que serão exibidos. */ showDetail: EventEmitter; popupTarget: any; selectAll: boolean; showHeader: boolean; private _actions; private _componentsSize; private _height; private _hideSelectAll; private _items; private _literals; private _select; private _showMoreDisabled; private language; /** * @optional * * @description * * Lista de ações que serão exibidas no componente. */ set actions(value: Array); get actions(): Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Define a altura do `po-list-view` em *pixels*. */ set height(height: number); get height(): number; /** * @description * * Esconde o *checkbox* para seleção de todos os itens. * * @default `false` */ set hideSelectAll(hideSelectAll: boolean); get hideSelectAll(): boolean; /** Lista de itens que serão exibidos no componente. */ set items(value: Array); get items(): Array; /** * @optional * * @description * * Objeto com as literais usadas no `po-list-view`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoListViewLiterals = { * hideDetail: 'Ocultar detalhes completamente', * loadMoreData: 'Mais dados', * showDetail: 'Mostrar mais detalhes', * selectAll: 'Selecionar todos os itens' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoListViewLiterals = { * showDetail: 'Mostrar mais detalhes' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoListViewLiterals); get literals(): PoListViewLiterals; /** * @optional * * @description * * Habilita um *checkbox* para cada item da lista. Todos os items possuem a propriedade dinâmica `$selected` para identificar se o * item está selecionado, por exemplo: * * ``` * item.$selected * * // ou * * item['$selected'] * ``` * * @default `false` */ set select(select: boolean); get select(): boolean; /** * @optional * * @description * * Indica que o botão `Carregar Mais Resultados` será desabilitado. */ set showMoreDisabled(value: boolean); get showMoreDisabled(): boolean; constructor(languageService: PoLanguageService); onClickAction(listViewAction: PoListViewAction, item: any): void; onShowMore(): void; runTitleAction(listItem: any): void; selectAllListItems(): void; selectListItem(row: any): void; private deleteInternalAttrs; private checkIfItemsAreSelected; private showMainHeader; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @usedBy PoListViewComponent * * @description * * 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}`; * } * } * ``` */ declare class PoListViewContentTemplateDirective { templateRef: TemplateRef; /** * @optional * * @description * * Função que deve retornar um valor do tipo `string`, que será utilizado como o título de cada item da lista. * * > Por parâmetro será enviado o item corrente, onde poderá utilizá-lo para recuperar dados sobre o mesmo. */ title: (item: any) => string; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @usedBy PoListViewComponent * * @description * * 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: * * ``` * ... * * * *
* * *
* * * * * ... * ``` * * ``` * ... * *
* *
* * ... * * ``` */ declare class PoListViewDetailTemplateDirective { templateRef: TemplateRef; /** * @optional * * @description * * Função que deve retornar um valor do tipo `boolean`, que será utilizado como a validação para que o detalhe de item * da lista inicie aberto ou fechado. * */ showDetail: (item: any) => boolean; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoListViewBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoListViewComponent extends PoListViewBaseComponent implements AfterContentInit, DoCheck { private changeDetector; listViewContentTemplate: PoListViewContentTemplateDirective; listViewDetailTemplate: PoListViewDetailTemplateDirective; poPopupComponent: PoPopupComponent; private differ; constructor(); get hasContentTemplate(): boolean; get hasDetailTemplate(): boolean; get displayShowMoreButton(): boolean; get showButtonsActions(): boolean; get showPopupActions(): boolean; get titleHasAction(): boolean; get visibleActions(): PoListViewAction[]; ngAfterContentInit(): void; ngDoCheck(): void; checkTitleType(item: any): "externalLink" | "internalLink" | "noLink"; getItemTitle(item: any): any; hasItems(): boolean; returnBooleanValue(listViewAction: PoListViewAction, item: any, property: string): any; trackBy(index: any): any; togglePopup(item: any, targetRef: HTMLElement): void; onAnimationEvent(event: AnimationEvent, detail: any): void; private checkItemsChange; private initShowDetail; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-list-view`. * * > Para o correto funcionamento do componente `po-list-view`, 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)); * ``` */ declare class PoListViewModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoLogoComponent { poLanguageService: PoLanguageService; readonly literals: any; private _logo?; private _logoAlt; private _link; /** * Define uma classe para o elemento `img` do componente. * * > **Importante** * > A classe deve ser definida apenas quando houver necessidade de ajustar o componente dentro de outro componente. * */ className: string; /** * Define se o componente terá o elemento âncora para uma rota específica. * * > Caso seja definido como false, o componente apenas renderizará o elemento `img`. * > Caso seja definido como true, a rota será `./`. * > Caso seja definido como string, a rota será a string passada. * * @default `true` */ set link(value: boolean | string); get link(): boolean | string; /** * Definie o caminho para a imagem, que será exibida como logomarca. * */ set logo(value: string); get logo(): string; /** * Define o texto alternativo para a logomarca. * * > **Importante** * > Caso esta propriedade não seja definida o texto padrão será "Logomarca início". */ set logoAlt(value: string); get logoAlt(): string; constructor(poLanguageService: PoLanguageService); private maxLength; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoLogoModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoMenuComponent * * @description * * Interface do objeto que deve conter na coleção de itens filtrados no componente `po-menu`. */ interface PoMenuItemFiltered { /** Texto do item de menu. */ label: string; /** *Link* para redirecionamento no clique do item do menu, podendo ser um *link* interno ou externo. */ link: string; /** Ação a ser executada quando o item de menu for clicado. */ action: () => void; } /** * @usedBy PoMenuComponent * * @description * * Interface do serviço utilizado no componente `po-menu`. */ interface PoMenuFilter { /** * 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`. * * @param {string} search Valor informado no campo de busca dos itens de menus. * @param {any} params Valor informado através da propriedade `p-params`. */ getFilteredData(search: string, params?: any): Observable>; } /** * @usedBy PoMenuComponent * * @description * * Interface do *badge* utilizado no `po-menu`. */ interface PoMenuItemBadge { /** * @optional * * @description * * Define a cor do *badge* e aceita os valores: * * `color-01` * * `color-02` * * `color-03` * * `color-04` * * `color-05` * * `color-06` * * `color-07` * * `color-08` * * `color-09` * * `color-10` * * `color-11` * * `color-12` * * @default `color-07` */ color?: string; /** * @description * * Número exibido no *badge*, caso o mesmo seja maior que **9** o mesmo exibe **9+**. */ value: number; } /** * @usedBy PoMenuComponent * * @description * * Interface para os itens de menu do componente po-menu. * */ interface PoMenuItem { /** * @optional * * @description * * Badge do item de menu. * * Ao adicioná-lo em um subitem (filho) todos os itens ascendentes (pai) serão marcados com um ponto vermelho. * * > O `po-badge` só será exibido caso o item do menu não possua `subItems` e seu valor seja maior ou igual a 0. */ badge?: PoMenuItemBadge; /** Texto do item de menu. */ label: string; /** Link para redirecionamento no click do item do menu, podendo ser um link interno ou externo. */ link?: string; /** Ação personalizada para clique do item de menu. */ action?: Function; /** * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * * myProperty = [ * { * link: '/', * label: 'Icon', * icon: this.iconTemplate * } * ]; * ``` * > São exibidos apenas no primeiro nível de menu e serão visíveis apenas se todos os itens de primeiro nível possuírem ícones. * O menu colapsado também aparecerá somente se todos os itens de primeiro nível de menu possuírem ícones e textos curtos. */ icon?: string | TemplateRef; /** * Texto curto exibido através de um tooltip para o item que aparece quando o menu estiver colapsado. * Se colapsado, aparecerá somente se todos os itens de primeiro nível de menu que possuírem ícones e textos curtos. */ shortLabel?: string; /** Lista de sub-items, criando novos níveis dentro do menu. O número máximo de níveis do menu é igual a 4. */ subItems?: Array; id?: string; level?: any; badgeAlert?: any; type?: any; } declare class PoMenuGlobalService { private applicationMenu; private menus; private removedApplicationMenu; private menuId; private menuChanges; receiveApplicationMenu$: Observable; receiveMenus$: Observable; receiveId$: Observable; receiveOnChange$: Observable; receiveRemovedApplicationMenu$: Observable; sendApplicationMenu(menu: PoMenuComponent): void; sendMenus(menus: Array): void; sendId(id: string): void; sendChanges(menus: Array): void; sendRemovedApplicationMenu(id: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsPrivate * * @description * * Serviço que implementa a interface `PoMenuFilter`, utilizado para fazer requisições ao serviço informado pelo usuário, * caso for uma URL, no componente `po-menu`. */ declare class PoMenuService implements PoMenuFilter { private http; private _url; get url(): string; configProperties(url: string): void; getFilteredData(search: string, params?: any): Observable>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * Este é um componente de menu lateral que é utilizado para navegação nas páginas de uma aplicação. * * O componente po-menu recebe uma lista de objetos do tipo `MenuItem` com as informações dos itens de menu como * textos, links para redirecionamento, ações, até 4 níveis de menu e ícones para o primeiro nível de menu. * * #### 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-color` | Cor da borda | `var(--color-neutral-light-20)` | * | `--background-color` | Cor de background | `Var(----color-neutral-light-05)` | * | **Menu Footer** | | | * | `--color` | Cor principla do menu footer | `var(--color-action-default)` | * | `--font-size` | Tamanho da fonte | `var(--font-size-default)` | * | `--line-height` | Tamanho da label | `var(--line-height-md)` | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | `--font-weight-lvl0` | Peso da fonte | `var(--font-weight-bold)` | * | **po-menu-item** | | | * | `--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)` | * | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-radius-md)` | * | `--color` | Cor principal do item | `var(--color-action-default)` | * | `--background-color` | Cor do background | `transparent` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-darkest)` | * | `--background-color-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-color-pressed`   | Cor de background no estado de pressionado  | `var(--color-brand-01-light)` | * | **Actived** | | | * | `--background-color-actived` | Cor de background no estado actived | `var(--color-brand-01-darkest)` | * | `--color-actived` | Cor principal no estado actived | `var(--color-brand-01-lighter)` | * | **Font** | | | * | `--font-weight-lvl0` | Peso da fonte bold | `var(--font-weight-bold)` | * | `--font-weight-lvl1` | Peso da fonte | `var(--font-weight-normal)` | * *
*/ declare abstract class PoMenuBaseComponent { menuGlobalService: PoMenuGlobalService; menuService: PoMenuService; languageService: PoLanguageService; allowIcons: boolean; allowCollapseMenu: boolean; allowCollapseHover: boolean; filteredItems: any; filterService: PoMenuFilter; readonly literals: any; private _collapsed; private _componentsSize; private _filter; private _searchTreeItems; private _level; private _maxLevel; private _menus; private _params; private _service; private _logoLink; private _menuId; /** * @optional * * @description * * Expande e Colapsa (retrai) o menu automaticamente. * * @default `false` */ automaticToggle: boolean; /** * @optional * * @description * * Colapsa (retrai) o menu e caso receba o valor `false` expande o menu. * * > Utilize esta propriedade para iniciar o menu colapsado. * * > Ao utilizar os métodos [`colapse`](documentation/po-menu#colapseMethod), [`expand`](documentation/po-menu#expandMethod) e * [`toggle`](documentation/po-menu#toggleMethod) o valor desta propriedade não é alterado. * * **Importante:** * * > O menu será colapsado/expandido apenas se todos os itens de menu tiverem valor nas propriedades `icon` e `shortLabel`. * * @default `false` */ set collapsed(collapsed: boolean); get collapsed(): boolean; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no menu: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** Lista dos itens do menu. Se o valor estiver indefinido ou inválido, será inicializado como um array vazio. */ set menus(menus: Array); get menus(): Array; get maxLevel(): number; /** * @optional * * @description * * Habilita um campo para pesquisa no menu. * A pesquisa é realizada em todos os níveis do menu e busca apenas pelos itens que contém uma ação e/ou link definidos, * ou também, pode ser realizada através de um serviço definido na propriedade `p-service`. * * > O campo de pesquisa é desabilitado se o menu estiver colapsado. * * @default `false` */ set filter(filter: boolean); get filter(): boolean; /** * @optional * * @description * * Quando ativado, a pesquisa também retornará itens agrupadores além dos itens que contêm uma ação e/ou link definidos. * Isso pode ser útil quando se deseja encontrar rapidamente categorias ou seções do menu. * * > É necessário que a propriedade `p-filter` esteja habilitada. * * @default `false` */ set searchTreeItems(searchTreeItems: boolean); get searchTreeItems(): boolean; /** * @optional * * @description * * Nesta propriedade deve ser informada a URL do serviço em que será utilizado para realizar o filtro de itens do * menu quando realizar uma busca. Caso haja a necessidade de customização, pode ser informado um * serviço implementando a interface `PoMenuFilter`. * * Caso utilizada uma URL, o serviço deve retornar os dados conforme o * [Guia de implementação de APIs](https://po-ui.io/guides/api) do PO UI. * * Quando utilizada uma URL de serviço, será realizado um *GET* na URL informada, passando o valor digitado * no parâmetro `search`, veja exemplo: * * > O filtro no serviço será realizado caso contenha no mínimo três caracteres no campo de busca, por exemplo `tot`. * * ``` * * * * Requisição: GET /api/v1/fnd/menu?search=contas * ``` * * > É necessário que propriedade `p-filter` esteja habilitada. */ set service(value: string | PoMenuFilter); get service(): string | PoMenuFilter; /** * @optional * * @description * * Deve ser informado um objeto que deseja-se utilizar na requisição de filtro dos itens de menu. * * Caso utilizado um serviço customizado, implementando a interface `PoMenuFilter`, o valor desta propriedade * será passado como parâmetro, na função `getFilteredData`. * * Quando utilizada uma URL de serviço, será realizado um *GET* na URL informada, passando os valores informados * nesta propriedade em conjunto com o parâmetro `search`, veja exemplo: * * ``` * * * * Requisição: GET /api/v1/fnd/menu?search=contas&company=1&user=297767512 * ``` */ set params(value: any); get params(): any; /** * @optional * * @description * * Caminho para a logomarca, que será exibida quando o componente estiver expandido, localizada na parte superior. * * > **Importante:** * - Caso esta propriedade estiver indefinida ou inválida o espaço para logomarca será removido. * - Como boa prática, indica-se utilizar imagens com até `24px` de altura e `224px` de largura, * caso ultrapassar esses valores a imagem será readequada no espaço disponível. */ logo?: string; set menuid(id: string); get menuid(): string; /** * @optional * * @description * * Define o texto alternativo para a logomarca. * * > **Importante** * > Caso esta propriedade não seja definida o texto padrão será "Logomarca início". * * @default `Logomarca início` */ logoAlt?: string; /** * @optional * * @description * * Caminho para a logomarca, que será exibida quando o componente estiver colapsado, localizada na parte superior. * * > **Importante:** * - Caso esta propriedade estiver indefinida ou inválida passa a assumir o valor informado na propriedade `p-logo` e na ausência desta o * espaço para logomarca será removido. * - Como boa prática, indica-se utilizar imagens com até `48px` de altura e `48px` de largura, * caso ultrapassar esses valores a imagem será readequada no espaço disponível. * - Caso não informar um valor, esta propriedade passa a assumir o valor informado na propriedade `p-logo`. */ shortLogo: string; onlyMenuItem: boolean; /** * @optional * * @description * Define o link para a rota ao clicar no logo do menu. * * - Se o valor for uma string, define a rota para o link informado. * - Se for `false`, o logo não terá link associado. * - Se for `true`, o logo terá a rota padrão `./`. * * @default `true` */ set logoLink(value: boolean | string); get logoLink(): boolean | string; constructor(menuGlobalService: PoMenuGlobalService, menuService: PoMenuService, languageService: PoLanguageService); protected setMenuExtraProperties(): void; protected setMenuItemProperties(menuItem: PoMenuItem): void; protected validateMenus(menus: any): void; protected setMenuType(menuItem: PoMenuItem): string; private configService; private processSubItems; private removeBadgeAlert; private setMenuBadgeAlert; private validateMenu; protected abstract checkActiveMenuByUrl(urlRouter: any): any; protected abstract checkingRouterChildrenFragments(): any; protected abstract validateCollapseClass(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_automaticToggle: any; } /** * @usedBy PoMenuComponent * * @description * * 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. */ declare class PoMenuHeaderTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoMenuBaseComponent * * @description * * Aparece completo em telas com largura maior que 1200px, caso contrário o menu é escondido e chamado por meio de um botão. * * O menu também pode ser colapsado. Essa opção é habilitada quando todos os itens de primeiro nível possuírem ícones e textos curtos. * Se colapsado, somente os itens de primeiro nível serão exibidos e, caso o item selecionado possua sub-níveis, * então o menu alternará novamente para o estado aberto. * * Existe a possibilidade de customizar a logomarca, que é exibida na parte superior do componente. * * E para adicionar um conteúdo personalizado entre a logomarca e o campo de filtro, * basta adicionar este conteúdo com a diretiva [**p-menu-header-template**](/documentation/po-menu-header-template). * * Caso utilizar o filtro de menus, é possível realizar buscas em serviço, apenas informando a URL do serviço ou a instância de * um serviço customizado implementando a interface `PoMenuFilter`. * * Para o menu funcionar corretamente é necessário importar o `RouterModule` e `Routes` do módulo principal de * sua aplicação: * * ``` * import { RouterModule, Routes } from '@angular/router'; * * ... * * @NgModule({ * imports: [ * RouterModule, * Routes, * ... * PoModule, * ... * ], * declarations: [ * AppComponent * ], * providers: [], * bootstrap: [AppComponent] * }) * export class AppModule { } * ``` * * Além disso é necessário criar um módulo configurando as rotas da aplicação. * * ``` * import { NgModule } from '@angular/core'; * * import { RouterModule, Routes } from '@angular/router'; * * import { HelloWorldComponent } from './hello-world/hello-world.component'; * * const routes: Routes = [ * {path: 'hello-world', component: HelloWorldComponent} * ]; * * @NgModule({ * imports: [RouterModule.forRoot(routes, {useHash: true})], * exports: [RouterModule] * }) * export class AppRoutingModule {} * ``` * * @example * * * * * * * * * * * * * * * * */ declare class PoMenuComponent extends PoMenuBaseComponent implements AfterViewInit, OnDestroy, OnInit, DoCheck, OnChanges { changeDetector: ChangeDetectorRef; private element; private renderer; private router; private menuItemsService; menuHeaderTemplate: PoMenuHeaderTemplateDirective; activeMenuItem: PoMenuItem; collapsedMobile: boolean; filterLoading: boolean; groupedMenuItem: PoMenuItem; id: string; linkActive: string; mobileOpened: boolean; noData: boolean; timeoutFilter: any; afterViewInitWasCalled: boolean; private filteringItems; private menuInitialized; private menuPrevious; private resizeListener; private itemSubscription; private routeSubscription; constructor(); private get isActiveItemMenuSubMenu(); get enableCollapse(): boolean; get enableCollapseButton(): boolean; get hasFooter(): boolean; get isCollapsed(): boolean; ngDoCheck(): void; ngOnDestroy(): void; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; activateMenuByUrl(urlPath: string, menus: Array): any; checkActiveMenuByUrl(urlPath: string): void; /** * * * Método para colapsar (retrair) o menu. */ collapse(): void; debounceFilter(filter: string): void; /** * * * Método para expandir (aumentar) o menu. */ expand(): void; subscribeToMenuItem(): void; subscribeToRoute(): void; /** * * Método que colapsa e expande o menu alternadamente. * * > Os métodos apenas vão colapsar/expandir o menu se: * - Todos os itens de menu tiverem valor nas propriedades `icon` e `shortLabel`. */ toggle(): void; toggleMenuMobile(): void; onMouseEnter(): void; onMouseLeave(): void; protected checkingRouterChildrenFragments(): string; protected validateCollapseClass(collapsedMobile?: boolean): void; private activateCollapseSubMenuItem; private activateMenuItem; private areSubMenus; private clearGroupMenuIfFirstLevel; private clickMenuItem; private convertToMenuItemFiltered; private createResizeListener; private executeMenuAction; private filterItems; private filterLocalItems; private filterProcess; private filterOnService; private findItems; private findParent; private findRootParent; private getActiveMenuParent; private groupMenuItem; private isRootMenuEqualGroupedMenu; private openParentMenu; private showNoData; private stringify; private toggleGroupedMenuItem; private toggleMenuCollapse; private toggleResize; private validateToggleMenu; private updateMenu; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente que apresenta o campo de pesquisa no po-menu. */ declare class PoMenuFilterComponent { languageService: PoLanguageService; componentsSize: string; loading: boolean; enableCollapse: boolean; inputFilterElement: ElementRef; filter: EventEmitter; literals: any; constructor(); filterItems(search: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente que implementa cada item do po-menu. */ declare class PoMenuItemComponent implements OnDestroy, OnInit { private menuItemsService; action: Function; badgeAlert: boolean; badgeColor: string; collapsedMenu: boolean; icon: string | TemplateRef; id: string; isOpened: boolean; label: string; level: number; link?: string; shortLabel: string; type: string; menuSubItems: ElementRef; isSelectedSubItem: any; maxHeight: number; private itemSubscription; private _badgeValue; private _isSelected; private _isSubItem; private _subItems; set badgeValue(badgeValue: number); get badgeValue(): number; set isSelected(value: boolean); get isSelected(): boolean; set isSubItem(value: boolean); get isSubItem(): boolean; set subItems(subitems: Array); get subItems(): Array; get canShowBadge(): boolean; ngOnDestroy(): void; ngOnInit(): void; clickMenuItem(event: any): void; private accordionAnimation; private activateMenu; private calcMenuSubItemsMaxHeight; private getMinimumHeight; private groupedMenu; private hasSubItem; private isMenuOpened; private processMenuItem; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type PoBadgeStatus = 'disabled' | 'negative' | 'positive' | 'warning'; type PoBadgeSize = 'small' | 'medium' | 'large'; type PoBadgeIcon = string | boolean | TemplateRef; /** * @description * * Utilizado para exibir a quantidade de notificações. */ declare class PoBadgeBaseComponent { badgeValue: string; customColor: string; private _color; private _value; private _status?; private _ariaLabel; /** * @description * * Define um `aria-label` para o `po-badge` */ set ariaLabel(value: string); get ariaLabel(): string; /** * @optional * * @description * * Determina a cor do `po-badge`. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; * - Usando uma das cores do tema do PO: * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * @default `color-07` */ set color(value: string); get color(): string; /** * @optional * * @description * Ícone exibido no `po-badge`. * * Para exibir icone do status atual declare a propriedade `p-icon`. conforme exemplo abaixo: * ``` * * ``` * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` */ icon: PoBadgeIcon; /** * @description * * Define o estado do `po-badge` * * Valores válidos: * - `positive`: Define a cor do `po-badge` com a cor de feedback positivo.; * - `negative`: Define a cor do `po-badge` com a cor de feedback negative.; * - `warning`: Define a cor do `po-badge` com a cor de feedback warning.; * - `disabled`: Define a cor do `po-badge` com a cor de feedback disabled; * */ set status(value: PoBadgeStatus); get status(): PoBadgeStatus; /** * @description * * Define o tamanho do `po-badge` * * Valores válidos: * - `small`: o `po-badge` fica do tamanho padrão, com 8px de altura.; * - `medium`: o `po-badge` fica do tamanho padrão, com 16px de altura.; * - `large`: o `po-badge` fica do tamanho padrão, com 24px de altura.; * * @default `medium` */ size: PoBadgeSize; /** * @description * * Exibe uma borda para o `po-badge` * * > Pode personalizar cor da bordar com a propriedade `p-color-border` */ showBorder: boolean; /** * @description * * Número exibido no componente, caso o mesmo seja maior que 9 o valor exibido será 9+. */ set value(value: number); get value(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showBorder: any; } /** * @docsPrivate * * @usedBy PoBadgeComponent * * @description * * Interface para definição das literais usadas no `po-badge`. */ interface PoBadgeLiterals { /** Texto utilizado na propriedade `aria-label` do `po-badge` ao ter somente uma notificação. */ notification: string; /** Texto utilizado na propriedade `aria-label` do `po-badge` ao ter mais de uma notificação. */ notifications: string; } /** * @docsExtends PoBadgeBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoBadgeComponent extends PoBadgeBaseComponent implements OnInit, OnChanges { isNotification: boolean; notificationLabel: string; literals: PoBadgeLiterals; badgeIcon: string; isValidValue: boolean; private poLanguageService; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; initialize(): void; getChangeStyle(): string; setLiterals(): void; setStatus(): void; switchIconStatus(): void; private setBadgeNotification; private setBadgeValue; private checkBadgeValue; private formatBadgeValue; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-badge. */ declare class PoBadgeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do componente po-menu. */ declare class PoMenuModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoMenuPanelComponent * * @description * * Interface para os itens de menu do componente `po-menu-panel`. * */ interface PoMenuPanelItem { /** Ação personalizada para clique do item de menu. */ action?: Function; /** Ícone para o item de menu, os [ícones aceitos](https://po-ui.io/icons) são os definidos no guia de estilo da PO. */ icon: string; /** Texto do item de menu. */ label: string; /** Link para redirecionamento no click do item do menu, podendo ser um link interno ou externo. */ link?: string; } /** * @description * * Este é um componente de menu lateral composto apenas por ícones e com um nível, utilizado para navegação * em páginas internas, externas da aplicação ou aciona uma ação. * * O componente `po-menu-panel` recebe uma lista de objetos do tipo `MenuPanelItem` com as informações dos * itens de menu como textos, links para redirecionamento, ações e ícones. */ declare class PoMenuPanelBaseComponent { private _menus; private _logo; /** Lista dos itens do `po-menu-panel`. Se o valor estiver indefinido ou inválido, será inicializado como um array vazio. */ set menus(menus: Array); get menus(): Array; /** * @optional * * @description * * Caminho para a logomarca localizada na parte superior do menu. * * > **Importante** * > Caso seja indefinida será aplicada a imagem default do PO UI. */ set logo(src: string); get logo(): string; /** * Define o texto alternativo para a logomarca. * * > **Importante** * > Caso esta propriedade não seja definida o texto padrão será "Logomarca início". * * @default `Logomarca início` */ logoAlt?: string; private setMenuExtraProperties; private setMenuItemProperties; private setMenuType; private validateMenu; private validateMenus; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoMenuPanelBaseComponent * * @description * * Para o menu funcionar corretamente é necessário importar o `RouterModule` e `Routes` do módulo principal de * sua aplicação: * * ``` * import { RouterModule, Routes } from '@angular/router'; * * ... * * @NgModule({ * imports: [ * RouterModule, * Routes, * ... * PoModule, * ... * ], * declarations: [ * AppComponent * ], * providers: [], * bootstrap: [AppComponent] * }) * export class AppModule { } * ``` * * Além disso é necessário criar um módulo configurando as rotas da aplicação. * * ``` * import { NgModule } from '@angular/core'; * * import { RouterModule, Routes } from '@angular/router'; * * import { HelloWorldComponent } from './hello-world/hello-world.component'; * * const routes: Routes = [ * {path: 'hello-world', component: HelloWorldComponent} * ]; * * @NgModule({ * imports: [RouterModule.forRoot(routes, {useHash: true})], * exports: [RouterModule] * }) * export class AppRoutingModule {} * ``` * * @example * * * * * * * * * * * * * * * */ declare class PoMenuPanelComponent extends PoMenuPanelBaseComponent implements OnDestroy, OnInit { private location; private menuItemsService; private router; activeMenuItem: PoMenuPanelItem; linkActive: string; private routeSubscription; private itemSubscription; ngOnDestroy(): void; ngOnInit(): void; private activateMenuByUrl; private activateMenuItem; private checkActiveMenuByUrl; private clickMenuItem; private subscribeToRoute; private subscribeToMenuItem; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @usedBy PoMenuPanelItem * * @description * * Interface para os itens de menu internos do componente `po-menu-panel`. * */ interface PoMenuPanelItemInternal extends PoMenuPanelItem { id: string; type: string; isSelected?: boolean; } /** * @docsPrivate * * @description * * Componente que implementa cada item do po-menu-panel. */ declare class PoMenuPanelItemComponent implements OnDestroy, OnInit { private menuItemsService; menuItemInternal: PoMenuPanelItemInternal; itemsSubscription: Subscription; ngOnDestroy(): void; ngOnInit(): void; clickMenuItem(event: any): void; private activateMenu; private processMenuItem; private subscribeMenuClickedFromParent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-menu-panel. */ declare class PoMenuPanelModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @deprecated v23.x.x * * @usedBy PoNavbarComponent * * @description * * Interface para lista de ações dos ícones do componente. */ interface PoNavbarIconAction { /** * Ação que será executada, deve-se passar a referência da função. * * > Para que a função seja executada no contexto do elemento filho o mesmo deve ser passado utilizando *bind*. * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * Ícone exibido. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * * ``` * */ icon?: string | TemplateRef; /** Rótulo da ação, será exibido quando o mesmo for aberto no popup. */ label: string; /** link utilizado no redirecionamento das páginas. */ link?: string; /** Mensagem exibida ao passar o mouse no ícone quando o mesmo estiver na navbar. */ tooltip?: string; } /** * @deprecated v23.x.x * * @usedBy PoNavbarComponent * * @description * * Interface para lista de items do componente. */ interface PoNavbarItem { /** * Ação que será executada, deve-se passar a referência da função. * * > Para que a função seja executada no contexto do elemento filho o mesmo deve ser passado utilizando *bind*. * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** Rótulo do item. */ label: string; /** Link utilizado no redirecionamento das páginas. */ link?: string; } /** * @deprecated v23.x.x * * @usedBy PoNavbarComponent * * @description * * Interface para definição das literais usadas no `po-navbar`. */ interface PoNavbarLiterals { /** Texto exibido no item de menu no qual os itens do navbar são agrupados quando está no modo responsivo. */ navbarLinks?: string; } /** * @description * * O componente `po-navbar` é um cabeçalho fixo que permite apresentar uma lista de links para facilitar a navegação pelas * páginas da aplicação. Também possui ícones com ações. * * Quando utilizado em uma resolução menor que `768px`, o componente utilizará o menu corrente da aplicação para * incluir seus itens. * * Ao utilizar Navbar com Menu e ambos tiverem logo, será mantido o logo do Navbar. */ declare abstract class PoNavbarBaseComponent { applicationMenu: PoMenuComponent; private _iconActions; private _items; private _literals; private _logo; private _shadow; private language; /** * @deprecated v23.x.x * * @optional * * @description * * Define uma lista de ações apresentadas em ícones no lado direito do `po-navbar`. */ set iconActions(value: Array); get iconActions(): Array; /** * @deprecated v23.x.x * * @optional * * @description * * Define uma lista de items do `po-navbar`. */ set items(value: Array); get items(): Array; /** * @deprecated v23.x.x * * @optional * * @description * * Objeto com a literal usada na propriedade `p-literals`. * * Para customizar a literal, basta declarar um objeto do tipo `PoNavbarLiterals` conforme exemplo abaixo: * * ``` * const customLiterals: PoNavbarLiterals = { * navbarLinks: 'Itens de navegação' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoNavbarLiterals); get literals(): PoNavbarLiterals; /** * @deprecated v23.x.x * * @optional * * @description * * Define a logo apresentada `po-navbar`. */ set logo(value: string); get logo(): string; /** * @deprecated v23.x.x * * @optional * * @description * * Define o texto alternativo para a logomarca. * * > **Importante** * > Caso esta propriedade não seja definida o texto padrão será "Logomarca início". * * @default `Logomarca início` */ logoAlt?: string; /** * @deprecated v23.x.x * * @optional * * @description * * Aplica uma sombra na parte inferior do `po-navbar`. * * @default `false` */ set shadow(value: boolean); get shadow(): boolean; constructor(languageService: PoLanguageService); protected abstract validateMenuLogo(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class PoNavbarItemsComponent implements OnInit, OnDestroy { private router; navbarItemsContainer: ElementRef; allNavbarItems: QueryList; items: Array; selectedItem: PoNavbarItem; private routeSubscription; ngOnDestroy(): void; ngOnInit(): void; private checkActiveItemByUrl; private checkRouterChildrenFragments; private subscribeToRoute; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @deprecated v23.x.x use `po-header` * * @docsExtends PoNavbarBaseComponent */ declare class PoNavbarComponent extends PoNavbarBaseComponent implements AfterViewInit, OnDestroy, OnInit { private renderer; private builder; private changeDetector; private menuGlobalService; navbarItemsElement: ElementRef; navbarItems: PoNavbarItemsComponent; disableRight: boolean; showItemsNavigation: boolean; protected windowResizeListener: () => void; private _menuComponent; private isNavbarUpdateMenu; private id; private mediaQuery; private offset; private player; private menuItems; private previousMenuComponentId; private previousMenusItems; private applicationMenuSubscription; private menusSubscription; private removedMenuSubscription; get navbarItemNavigationDisableLeft(): boolean; get navbarItemNavigationDisableRight(): boolean; set menuComponent(menu: PoMenuComponent); private get isCollapsedMedia(); constructor(); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; navigateItems(orientation: string): void; protected validateMenuLogo(): void; private allNavbarItemsWidth; private animate; private buildTransitionAnimation; private changeNavbarMenuItems; private calculateLeftNavigation; private calculateRightNavigation; private displayItemsNavigation; private initNavbarMenu; private navbarItemsWidth; private navigateLeft; private navigateRight; private onMediaQueryChange; private setOffsetToZero; private validateMaxOffset; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarLogoComponent { logo?: string; logoAlt?: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarActionComponent { private router; action?: Function; icon: string | TemplateRef; label: string; link?: string; tooltip?: string; click(): void | Promise; private openUrl; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarActionPopupComponent { iconActions: Array; getLastIconAction(): string | i0.TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarActionsComponent { private _iconActions; set iconActions(actions: Array); get iconActions(): Array; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarActionsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoNavbarItemNavigationComponent { disableLeft: boolean; disableRight: boolean; click: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarItemNavigationIconComponent { disabled: boolean; icon: boolean; click: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarItemNavigationModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoNavbarItemComponent { action: Function; clickable?: boolean; label: string; link?: string; click: EventEmitter; get type(): "externalLink" | "internalLink"; itemClick(label?: string, link?: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoNavbarItemsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @deprecated v23.x.x use `po-header` * * @description * * Módulo do componente `po-navbar`. * > Esse componente está **depreciado** e será removido na `v23.x.x`. Recomendamos utilizar o componente * [po-header](https://po-ui.io/documentation/po-header), que oferece compatibilidade com todas as funcionalidades do * `po-navbar`, além de maior flexibilidade, usabilidade e acessibilidade. * > * > Para o correto funcionamento do componente `po-navbar`, 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)); * ``` */ declare class PoNavbarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * O componente **po-page** é utilizado como container principal para os componentes po-page-header, po-page-content * e para as ações dos componentes po-page-edit e po-page-detail. * * Quando estiver sendo utilizado o componente po-menu junto ao po-page, ambos devem estar no mesmo nível * e inseridos em uma div com a classe **po-wrapper**. Esta classe será responsável por fazer os cálculos * necessários de alinhamento dos componentes. * * O componente **po-page** também pode ser utilizado sem o po-menu e neste caso o corpo da página deve ser * definido com a altura de 100% para que o po-page maximize seu tamanho. * ``` * html, body { * height:100%; * } * ``` */ declare class PoPageBaseComponent { } /** * @docsPrivate * * @docsExtends PoPageBaseComponent */ declare class PoPageComponent extends PoPageBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * O componente **po-page-content** é utilizado como o container para o conteúdo da página. */ declare class PoPageContentBaseComponent { protected resizeListener: () => void; } /** * @docsPrivate * * @docsExtends PoPageContentBaseComponent */ declare class PoPageContentComponent extends PoPageContentBaseComponent implements AfterViewInit, OnDestroy { renderer: Renderer2; contentOpacity: number; height: string; overflowY: string; constructor(); ngAfterViewInit(): void; ngOnDestroy(): void; recalculateHeaderSize(): void; setHeightContent(poPageHeader: HTMLElement): void; private initializeListeners; private removeListeners; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Interface para as ações dos componentes po-page-default e po-page-list. * * > Quando o array de actions possui quatro ou mais registros, os dois últimos e os seguintes são automaticamente agrupados no po-dropdown. * A partir desse ponto, as propriedades `selected`, `separator`, `type` e `subItems` passam a ter efeito apenas nas ações exibidas dentro do dropdown, ou seja, a partir da terceira ação. * Dessa forma, o uso de subItems (agrupadores dentro do dropdown) só terá efeito quando houver pelo menos quatro ações definidas. * * @docsExtends PoDropdownAction * * @ignoreExtendedDescription * * @usedBy PoPageDefaultComponent, PoPageListComponent */ interface PoPageAction extends PoDropdownAction { } /** * @usedBy * * PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageDynamicSearchBaseComponent * * @description * * Interface que define o `po-breadcrumb`. */ interface PoBreadcrumb { /** * @optional * * @description * * Permite definir uma URL para favoritar ou desfavoritar. * * > Para maiores informações verificar a propriedade `p-favorite-service` do componente `po-breadcrumb`. * */ favorite?: string; /** * @description * * Lista de itens do _breadcrumb_. * * **Exemplo:** * ``` * { label: 'Po Portal', link: 'portal' } * ``` */ items: Array; /** * @optional * * @description * * Objeto que possibilita o envio de parâmetros adicionais à requisição. */ params?: object; } /** * @usedBy PoPageDefaultComponent * * @description * * Interface para definição das literais usadas no `po-page-default`. */ interface PoPageDefaultLiterals { /** Legenda do `po-dropdown` de ações. */ otherActions?: string; } /** * @description * * O componente `po-page-default` é utilizado como o container principal para as telas sem um template definido. * * #### 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)` | */ declare abstract class PoPageDefaultBaseComponent { poPageContent: PoPageContentComponent; /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; visibleActions: Array; protected language: string; private _actions?; private _componentsSize?; private _literals; private _title; /** * @optional * * @description * * Nesta propriedade deve ser definido um array de objetos que implementam a interface `PoPageAction`. */ set actions(actions: Array); get actions(): Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-default`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageDefaultLiterals = { * otherActions: 'Mais ações' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageDefaultLiterals = { * otherActions: 'Ações da página' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set literals(value: PoPageDefaultLiterals); get literals(): PoPageDefaultLiterals; /** Título da página. */ set title(title: string); get title(): string; /** * @optional * * @description * * Subtitulo do Header da página */ subtitle: string; constructor(languageService: PoLanguageService); abstract setDropdownActions(): any; abstract getVisibleActions(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageDefaultBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoPageDefaultComponent extends PoPageDefaultBaseComponent implements AfterContentInit, OnChanges { private renderer; private router; limitPrimaryActions: number; dropdownActions: Array; isMobile: boolean; private maxWidthMobile; constructor(); ngAfterContentInit(): void; ngOnChanges(changes: { [propName: string]: SimpleChange; }): void; actionIsDisabled(action: any): any; actionIsVisible(action: any): any; callAction(item: PoPageAction): void; hasPageHeader(): boolean; setDropdownActions(): void; getVisibleActions(): PoPageAction[]; private onResize; private setIsMobile; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoPageDetailComponent * * @description * * Interface para definição das literais usadas no `po-page-detail`. */ interface PoPageDetailLiterals { /** Label da ação `back`. */ back?: string; /** Label da ação `edit`. */ edit?: string; /** Label da ação `remove`. */ remove?: string; } /** * @description * * 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)` | */ declare class PoPageDetailBaseComponent { poPageContent: PoPageContentComponent; /** Objeto com propriedades do breadcrumb. */ breadcrumb: PoBreadcrumb; /** * Evento que será disparado ao clicar no botão de "Voltar". * * ``` * * * ``` * * > Caso não utilizar esta propriedade, o botão de "Voltar" não será exibido. */ back: EventEmitter; /** * Evento que será disparado ao clicar no botão de "Editar". * * ``` * * * ``` * * > Caso não utilizar esta propriedade, o botão de "Editar" não será exibido. */ edit: EventEmitter; /** * Evento que será disparado ao clicar no botão de "Remover". * * ``` * * * ``` * * > Caso não utilizar esta propriedade, o botão de "Remover" não será exibido. */ remove: EventEmitter; private _componentsSize?; private _literals; private _title; private language; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-detail`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageDetailLiterals = { * edit: 'Edição', * remove: 'Exclusão', * back: 'Menu' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageDetailLiterals = { * remove: 'Excluir registro permanentemente' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoPageDetailLiterals); get literals(): PoPageDetailLiterals; /** Título da página. */ set title(title: string); get title(): string; /** * @optional * * @description * * Subtitulo do Header da página */ subtitle: string; constructor(languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageDetailBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoPageDetailComponent extends PoPageDetailBaseComponent { hasAnyAction(): boolean; hasEditFn(property: string): string; hasEditOrRemoveFn(property: string): string; hasEvent(event: string): boolean; hasPageHeader(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoPageEditComponent * * @description * * Interface para definição das literais usadas no `po-page-edit`. */ interface PoPageEditLiterals { /** Label da ação `cancel`. */ cancel?: string; /** Label da ação `save`. */ save?: string; /** Label da ação `saveNew`. */ saveNew?: string; } /** * @description * * 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)` | */ declare class PoPageEditBaseComponent { poPageContent: PoPageContentComponent; /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** Desabilita botões de submissão (save e saveNew) */ disableSubmit?: boolean; /** * Evento que será disparado ao clicar no botão de "Cancelar". * * ``` * * * ``` * * > Caso não utilizar esta propriedade, o botão de "Cancelar" não será exibido. */ cancel: EventEmitter; /** * Evento que será disparado ao clicar no botão de "Salvar". * * ``` * * * ``` * * > Caso não utilizar esta propriedade, o botão de "Salvar" não será exibido. */ save: EventEmitter; /** * Evento que será disparado ao clicar no botão de "Salvar e Novo". * * ``` * * * ``` * * > Caso não utilizar esta propriedade, o botão de "Salvar e Novo" não será exibido. */ saveNew: EventEmitter; private _componentsSize?; private _literals; private _title; private language; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-edit`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageEditLiterals = { * cancel: 'Voltar', * save: 'Confirmar', * saveNew: 'Confirmar e criar um novo' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageEditLiterals = { * cancel: 'Cancelar processo' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoPageEditLiterals); get literals(): PoPageEditLiterals; /** Título da página. */ set title(title: string); get title(): string; /** * @optional * * @description * * Subtitulo do Header da página */ subtitle: string; constructor(languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageEditBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoPageEditComponent extends PoPageEditBaseComponent { getIcon(icon: string): string; getType(type: string): string; hasAnyAction(): boolean; hasPageHeader(): boolean; hasEvent(event: string): boolean; private isPrimaryAction; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * O componente **po-page-header** é responsável pelo título da página e container dos botões de ações dos componentes * po-page-list e po-page-base. */ declare class PoPageHeaderBaseComponent { /** Título da página. */ title: string; /** Define o tamanho dos componentes no header. */ size: string; /** Subtítulo da página. */ subtitle: string; private _breadcrumb; /** Objeto com propriedades do breadcrumb. */ set breadcrumb(value: PoBreadcrumb); get breadcrumb(): PoBreadcrumb; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsPrivate * @docsExtends PoPageHeaderBaseComponent */ declare class PoPageHeaderComponent extends PoPageHeaderBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Define o nível de densidade (espaçamento) aplicado em componentes agrupadores. Pode ser ajustado conforme a * preferência do usuário ou requisitos de acessibilidade. */ declare enum PoDensityMode { /** Define espaçamentos mais compactos entre os elementos. */ Small = "small", /** Define espaçamentos mais amplos e confortáveis. */ Medium = "medium" } /** * @usedBy PoThemeService * * @description * 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); * ``` */ declare enum PoThemeA11yEnum { /** Nível de acessibilidade AA. * - Define a espessura do `outline` para **2px**. * - Disponibiliza o tamanho `small` para componentes de formulário (buttons, inputs, checkboxes, radios e switches) * conforme suas documentações. */ AA = "AA", /** Nível de acessibilidade AAA. * - Define a espessura do `outline` para **4px**. * - Não disponibiliza o tamanho `small` para componentes de formulário. */ AAA = "AAA" } /** * @usedBy PoThemeService * * @description * 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); * ``` */ declare enum PoThemeTypeEnum { /** Define o tema como claro. */ light = 0, /** Define o tema como escuro. */ dark = 1 } /** * Interface para representar as cores do tema. * * @usedBy PoThemeService */ interface PoThemeColor { /** * Cores da Brand a serem aplicadas. * * Exemplo de uso: * ```typescript * PoThemeColor.brand = { * 01: PoThemeColorTone, * 02: PoThemeColorTone, * 03: PoThemeColorTone * } * ``` */ 'brand'?: poThemeColorBrand; /** * Cores da Action a serem aplicadas. * * Exemplo de uso: * ```javascript * PoThemeColor.action = { * default: 'var(--color-brand-01-base)', * hover: 'var(--color-brand-01-dark)', * pressed: 'var(--color-brand-01-darker)', * disabled: 'var(--color-neutral-light-30)', * focus: 'var(--color-brand-01-darkest)' * } * ``` */ 'action'?: PoThemeColorAction; /** * Cores Neutrals a serem aplicadas. * * Exemplo de uso: * ```typescript * PoThemeColor.neutral = { * light: { '00': string, '05': string, '10': string, '20': string, '30': string }, * mid: { '40': string, '60': string }, * dark: { '70': string, '80': string, '90': string, '95': string }, * } * ``` */ 'neutral'?: PoThemeColorNeutral; 'feedback'?: PoThemeColorFeedback; /** * Cores da Categorical a serem aplicadas. * * Exemplo de uso: * ```typescript * PoThemeColor.categorical = { * 01: string, * 02: string, * 03: string * } * ``` */ 'categorical'?: PoThemeColorCategorical; /** * Cores da Categorical a serem aplicadas. * * Exemplo de uso: * ```typescript * PoThemeColor.categorical = { * 01: string, * 02: string, * 03: string * } * ``` */ 'categorical-overlay'?: PoThemeColorCategorical; } /** * Interface para as variantes de cor da marca. * * @docsPrivate */ interface poThemeColorBrand { /** * Cores da Brand Primaria` * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * lightest: '#f2eaf6', * lighter: '#d9c2e5', * light: '#bd94d1', * base: '#753399', * dark: '#5b1c7d', * darker: '#400e58', * darkest: '#260538' * } * ``` */ '01'?: PoThemeColorTone; /** * Cores da Brand Secundária` * * Exemplo de uso: * ```typescript * PoThemeColor.brand['02'] = { * base: '#b92f72', * } * ``` */ '02'?: PoThemeColorTone; /** * Cores da Brand Terciária` * * Exemplo de uso: * ```typescript * PoThemeColor.brand['03'] = { * base: '#ffd464', * } * ``` */ '03'?: PoThemeColorTone; } /** * Interface para as cores de ação do tema. * * @usedBy PoThemeService */ interface PoThemeColorAction { /** * Cores da Action 'Default'. * * Exemplo de uso: * ```typescript * PoThemeColor.action = { * default: 'var(--color-brand-01-base)', * } * ``` */ 'default'?: string; /** * Cores da Action para 'hover'. * * Exemplo de uso: * ```typescript * PoThemeColor.action = { * hover: 'var(--color-brand-01-dark)', * } * ``` */ 'hover'?: string; /** * Cores da Action para 'pressed'. * * Exemplo de uso: * ```typescript * PoThemeColor.action = { * pressed: 'var(--color-brand-01-darker)', * } * ``` */ 'pressed'?: string; /** * Cores da Action de 'disabled'. * * Exemplo de uso: * ```typescript * PoThemeColor.action = { * disabled: 'var(--color-neutral-light-30)', * } * ``` */ 'disabled'?: string; /** * Cores da Action para 'focus'. * * Exemplo de uso: * ```typescript * PoThemeColor.action = { * focus: 'var(--color-brand-01-darkest)' * } * ``` */ 'focus'?: string; } interface PoThemeColorFeedback { /** * Cores da Feedback para 'negative' * * Exemplo de uso: * ```typescript * PoThemeColor.feedback.negative = { * lightest: '#f6e6e5', * lighter: '#e3aeab', * light: '#d58581', * base: '#be3e37', * dark: '#9b2d27', * darker: '#72211d', * darkest: '#4a1512', * } * ``` */ 'negative'?: PoThemeColorTone; /** * Cores da Feedback para 'info' * * Exemplo de uso: * ```typescript * PoThemeColor.feedback.info = { * lightest: '#e3e9f7', * lighter: '#b0c1e8', * light: '#7996d7', * base: '#23489f', * dark: '#173782', * darker: '#0f2557', * darkest: '#081536', * } * ``` */ 'info'?: PoThemeColorTone; /** * Cores da Feedback para 'positive' * * Exemplo de uso: * ```typescript * PoThemeColor.feedback.positive = { * lightest: '#def7ed', * lighter: '#7ecead', * light: '#41b483', * base: '#107048', * dark: '#0f5236', * darker: '#083a25', * darkest: '#002415', * } * ``` */ 'positive'?: PoThemeColorTone; /** * Cores da Feedback para 'warning' * * Exemplo de uso: * ```typescript * PoThemeColor.feedback.warning = { * lightest: '#fcf6e3', * lighter: '#f7dd97', * light: '#f1cd6a', * base: '#efba2a', * dark: '#d8a20e', * darker: '#705200', * darkest: '#473400', * } * ``` */ 'warning'?: PoThemeColorTone; } /** * Interface para representar as variantes de tons de cor. * * @docsPrivate */ interface PoThemeColorTone { /** * Cores de Tom do tipo 'lightest'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * lightest: '#f2eaf6', * } * ``` */ 'lightest'?: string; /** * Cores de Tom do tipo 'lighter'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * lighter: '#d9c2e5', * } * ``` */ 'lighter'?: string; /** * Cores de Tom do tipo 'light'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * light: '#bd94d1', * } * ``` */ 'light'?: string; /** * Cores de Tom do tipo 'base'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * base: '#753399', * } * ``` */ 'base'?: string; /** * Cores de Tom do tipo 'dark'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * dark: '#5b1c7d', * } * ``` */ 'dark'?: string; /** * Cores de Tom do tipo 'darker'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * darker: '#400e58', * } * ``` */ 'darker'?: string; /** * Cores de Tom do tipo 'darkest'. * * Exemplo de uso: * ```typescript * PoThemeColor.brand['01'] = { * darkest: '#260538' * } * ``` */ 'darkest'?: string; } /** * Interface para as cores neutras do tema. * * @usedBy PoThemeService */ interface PoThemeColorNeutral { /** * Cores Neutrals do tipo 'light'. * * Exemplo de uso: * ```typescript * PoThemeColor.neutral.light = { * '00': '#ffffff', * '05': '#fbfbfb', * '10': '#eceeee', * '20': '#dadedf', * '30': '#b6bdbf' * } * ``` */ 'light'?: { '00'?: string; '05'?: string; '10'?: string; '20'?: string; '30'?: string; }; /** * Cores Neutrals do tipo 'mid'. * * Exemplo de uso: * ```typescript * PoThemeColor.neutral.mid = { * '40': '#9da7a9', * '60': '#6e7c7f', * } * ``` */ 'mid'?: { '40'?: string; '60'?: string; }; /** * Cores Neutrals do tipo 'dark'. * * Exemplo de uso: * ```typescript * PoThemeColor.neutral.dark = { * '70': '#4a5c60', * '80': '#2c3739', * '90': '#1d2426', * '95': '#0b0e0e', * } * ``` */ 'dark'?: { '70'?: string; '80'?: string; '90'?: string; '95'?: string; }; } interface PoThemeColorCategorical { '01'?: string; '02'?: string; '03'?: string; '04'?: string; '05'?: string; '06'?: string; '07'?: string; '08'?: string; } /** * @usedBy PoThemeService * @docsExtends PoThemeToken, Partial * @description * Interface para o tema da aplicação. */ interface PoThemeTokens extends PoThemeToken, Partial { } /** * @usedBy PoThemeService * @description * Interface para os tokens do Tema. */ interface PoThemeToken { /** Tokens do tipo 'color' */ 'color'?: PoThemeColor; /** * Tokens do tipo 'perComponent' * * Exemplo de uso: * * ```typescript * perComponent: { * 'po-badge': { * '--color': 'var(--color-neutral-dark-95)', * }, * 'po-container': { * '--background': '#121212', * }, * }, * ``` * @Optional */ 'perComponent'?: DynamicProperties; /** * Tokens do tipo 'onRoot' * Esta propriedade adicionará todos os tokens passados e adicionado direto no `:root` * * Exemplo de uso: * * ```typescript * onRoot: { * '--color-page-background-color-page': '#121212', * '--color-toolbar-color-badge-text': 'var(--color-neutral-dark-95)', * }, * ``` * @Optional */ 'onRoot'?: DynamicProperties; } /** * @docsPrivate * @description * Interface para as variantes da cor de Brand. * Tipo com index signature para aceitar propriedades dinâmicas */ interface DynamicProperties { [key: string]: any; } /** * @usedBy PoThemeService * * @description * Interface para o método `setTheme()`. */ interface PoTheme { /** Nome para o tema: * Ex.: default, totvs, sunset... */ name: string; /** Tipo de tema: * - light * - dark */ type: PoThemeType | Array; /** Tipo e nível de acessibilidade de tema ativo */ active?: PoThemeTypeEnum | PoThemeActive; } /** * @docsPrivate * @description * Interface para os tipos de tema ('light' | 'dark'). */ interface PoThemeType { /** Tema claro */ light?: PoThemeTokens; /** Tema escuro */ dark?: PoThemeTokens; /** Nível de acessibilidade dos componentes: * - AA * - AAA */ a11y?: PoThemeA11yEnum; } /** * @docsPrivate * @description * Interface para o tema ativo. */ interface PoThemeActive { /** Tipo de tema: * - light * - dark */ type?: PoThemeTypeEnum; /** Nível de acessibilidade dos componentes: * - AA * - AAA */ a11y?: PoThemeA11yEnum; } /** * @description * * 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`. */ /** * @example * * * * * * */ declare class PoThemeService { private document; private renderer; private theme; constructor(document: Document, rendererFactory: RendererFactory2); /** * 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. * * @param {PoTheme} themeConfig - Configuração de tema a ser aplicada ao componente. * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema, podendo ser 'light' (claro) ou 'dark' (escuro). O tema claro é o padrão. * @param {PoThemeA11yEnum} [a11yLevel=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade dos componentes, podendo ser AA ou AAA. Padrão é AAA. * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no * localStorage para persistência. Por padrão é `true`, ou seja, a preferência será salva automaticamente. */ setTheme(themeConfig: PoTheme, themeType?: PoThemeTypeEnum, a11yLevel?: PoThemeA11yEnum, persistPreference?: boolean): void; private setDataDefaultSizeHTML; /** * Retorna o nível de acessibilidade configurado no tema. * Se não estiver configurado, retorna `AAA` como padrão. * @returns {PoThemeA11yEnum} O nível de acessibilidade, que pode ser `AA` ou `AAA`. */ getA11yLevel(): PoThemeA11yEnum; /** * Define o tamanho `small` como padrão para componentes de formulário 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`. * * > 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**. * Se for aplicada em tempo de execução, será necessário recarregar a aplicação (`reload`) * para que os estilos sejam aplicados corretamente. * > Para ajustar a densidade visual dos componentes agrupadores (como pages, container, etc.), utilize também * o método `setDensityMode` conforme necessário. * * @param {boolean} enable Habilita ou desabilita o tamanho `small` globalmente. */ setA11yDefaultSizeSmall(enable: boolean): boolean; /** * Retorna o modo de adensamento dos componentes agrupadores. * Se não estiver configurado, retorna `medium` como padrão. * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`. */ getDensityMode(): PoDensityMode; /** * 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`. * * @param {'small' | 'medium'} mode Define o modo de densidade: `small` para compacto, `medium` para espaçoso. * O valor padrão é `medium`. */ setDensityMode(mode: string): void; /** * @docsPrivate * Retorna a preferência global de tamanho dos componentes. * * @returns `'small'` ou `'medium'`. */ getA11yDefaultSize(): string; /** * @docsPrivate * * Aplica estilos customizados para o componente e para o root HTML, utilizando os tokens definidos. * * Esse método é chamado para inserir ou atualizar estilos no DOM, aplicando tanto tokens de `onRoot` (ex: `--font-family: 'Roboto'`) * quanto estilos específicos de componentes (`perComponent`, como `po-listbox [hidden]: { display: 'flex !important' }`). * * O seletor CSS gerado leva em consideração o tema (`type`) e as configurações de acessibilidade (`a11y`) do tema ativo. * A classe do tema é aplicada no HTML e pode ser formatada como `html[class*="-light-AA"]` para personalizações * em temas específicos. * * @param {PoThemeActive} active - Configuração do tema ativo: * @param {any} perComponent - Objeto contendo os estilos específicos para componentes a serem aplicados. * @param {any} onRoot - Objeto contendo tokens de estilo que serão aplicados diretamente no seletor `:root` do HTML. * @param {string | Array} [classPrefix] - Prefixo(s) de classe para direcionamento preciso. * * @example * #### 1. Com prefixo único * ```typescript * setPerComponentAndOnRoot( * { type: 'dark', a11y: 'AA' }, * { 'po-input': { background: '#222' } }, * { '--text-color': '#fff' }, * 'myTheme' * ); * ``` * **Saída:** * ```css * :root[class*="-dark-AA"][class*="myTheme"] { * --text-color: #fff; * po-input { background: #222; } * } * ``` * * #### 2. Com múltiplos prefixos * ```typescript * setPerComponentAndOnRoot( * { type: 'light' }, * null, * { '--primary': '#3e8ed0' }, * ['myTheme', 'portal-v2'] * ); * ``` * **Saída:** * ```css * :root[class*="-light"][class*="myTheme"], * :root[class*="-light"][class*="portal-v2"] { * --primary: #3e8ed0; * } * ``` * * - Quando usado com array, gera um seletor CSS com múltiplos targets (separados por vírgula). * - Mantém a especificidade original do tema (`[class*="-type-a11y"]`) combinada com cada prefixo. * */ setPerComponentAndOnRoot(active: PoThemeActive, perComponent: any, onRoot: any, classPrefix?: string | Array): void; /** * @docsPrivate * * Gera estilos adicionais com base nos tokens de tema fornecidos, excluindo os tokens de cor. * @param theme Os tokens de tema contendo os estilos adicionais a serem gerados. * @returns Uma string contendo os estilos adicionais formatados. */ private generateAdditionalStyles; /** * @docsPrivate * * Aplica os estilos de tema ao documento. * @param styleCss Os estilos CSS a serem aplicados. */ private applyThemeStyles; private changeThemeType; /** * 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. * * @returns {PoTheme} O tema atualmente aplicado. */ persistThemeActive(): PoTheme; private formatTheme; applyTheme(theme?: any): any; /** * 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) * * @param {PoThemeTypeEnum} themeType O tipo de tema a ser aplicado, light ou dark. */ changeCurrentThemeType(type: PoThemeTypeEnum): void; /** * Método remove o tema armazenado e limpa todos os estilos de tema * aplicados ao documento. * * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema não deve ser mantida no localStorage para persistência. `true` para remover, `false` para manter. */ cleanThemeActive(persistPreference?: boolean): void; private getActiveTypeFromTheme; private getActiveA11yFromTheme; private isValidA11yLevel; /** * @docsPrivate * * Este método define um dados do tema e o armazena. * @param theme Os tokens de tema contendo os estilos adicionais a serem gerados. */ private setThemeLocal; /** * Retorna o tema ativo como um observable. Este método funcionará apenas se o tema estiver armazenado no `localStorage`. * * @returns {PoTheme} Tema ativo. */ getThemeActive(): PoTheme; /** * @docsPrivate * * Gera estilos CSS com base nos tokens de cores fornecidos. * @param css Os tokens de cor a serem usados para gerar os estilos. * @param id id do style a ser aplicado. * @returns Uma string contendo os estilos CSS gerados. */ private createStyleElement; /** * @docsPrivate * * Gera estilos CSS com base nos tokens de cores fornecidos. * @param themeColor Os tokens de cor a serem usados para gerar os estilos. * @returns Uma string contendo os estilos CSS gerados. */ private generateThemeStyles; /** * @docsPrivate * * Gera estilos CSS com base nos tokens per Component fornecidos. * @param themePerComponent Os tokens de cor a serem usados para gerar os estilos. * @returns Uma string contendo os estilos CSS gerados. */ private generatePerComponentStyles; /** * Define o tema atual como o tema "PoUI Padrão". * * @param {PoThemeTypeEnum} type O tipo de Tema a ser aplicado, light / dark. */ setDefaultTheme(type: PoThemeTypeEnum): void; /** * @docsPrivate * * Retorna o estilo CSS para o fundo dos ícones do componente po-select, com base nas cores do tema. * * @param {PoThemeColor} themeColor - Objeto contendo as cores do tema. * @returns {string} - Estilo CSS para o fundo dos ícones do po-select. */ private getSelectBgIconsStyle; /** * @docsPrivate * * Retorna a imagem SVG utilizada como fundo do po-select. * * @param {string} color Cor da Imagem - Utilizada no atributo 'fill'. * @returns {string} Imagem SVG utilizada no po-select. */ private getSelectBgIcon; private dispatchEvent; /** * Define o tipo (light/dark) quando um tema está sendo aplicado. * * @param {PoTheme} theme - Objeto contendo as definições de tema a serem aplicadas no componente. * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema a ser aplicado, podendo ser 'light' (claro) ou 'dark' (escuro). Por padrão, o tema claro é aplicado. */ setThemeType(theme: PoTheme, themeType?: PoThemeTypeEnum): void; /** * Define o tipo (light/dark) para um tema já ativo. * * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema a ser aplicado, podendo ser 'light' (claro) ou 'dark' (escuro). Por padrão, o tema claro é aplicado. */ setCurrentThemeType(themeType?: PoThemeTypeEnum): void; /** * Define o nível de acessibilidade quando um tema está sendo aplicado. * * @param {PoTheme} theme - Objeto contendo as definições de tema a serem aplicadas no componente. * @param {PoThemeA11yEnum} [a11y=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade dos componentes podendo ser * AA ou AAA. Por padrão a acessibilidade é AAA. */ setThemeA11y(theme: PoTheme, a11y?: PoThemeA11yEnum): void; /** * Define o nível de acessibilidade para um tema já ativo. * * @param {PoThemeA11yEnum} [a11y=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade dos componentes podendo ser * AA ou AAA. Por padrão a acessibilidade é AAA. */ setCurrentThemeA11y(a11y?: PoThemeA11yEnum): void; resetBaseTheme(): void; private setDefaultBaseStyle; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * * @param fn Função que será executada dentro do contexto. Podendo ser o nome da função * ou a referência da mesma. * * @param context Contexto do qual a função será executada. */ declare function callFunction(fn: any, context: any, param?: any): void; /** * @usedBy PoDisclaimerGroupComponent, PoPageListComponent * * @description * * Estrutura do objeto representando o estado dos *disclaimers* após a remoção. */ interface PoDisclaimerGroupRemoveAction { /** * *Disclaimer* que foi removido. */ removedDisclaimer: PoDisclaimer; /** * Lista com os *disclaimers* atuais (restantes). */ currentDisclaimers: Array; } /** * @usedBy PoPageListComponent * * @description * * Interface para o atributo `filter` do componente `po-page-list`. */ interface PoPageFilter { /** Ação a ser executada. */ action?: Function; /** * @description * * Ação a ser executada quando for disparado o * evento de *click* através do rótulo **Busca Avançada**. */ advancedAction?: Function; /** Texto de instrução exibido dentro do campo de filtro. */ placeholder?: string; /** * Tamanho do filtro em tela, utilizando o *Grid System*, * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado * conforme resolução de tela para manter a consistência do layout. */ width?: number; } /** * @usedBy PoPageListComponent * * @description * * Interface para definição das literais usadas no `po-page-list`. */ interface PoPageListLiterals { /** Legenda do `po-dropdown` de ações. */ otherActions?: string; } /** * @description * * 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)` | */ declare abstract class PoPageListBaseComponent { poPageContent: PoPageContentComponent; /** * @optional * * @description * * Objeto que implementa as propriedades da interface `PoBreadcrumb`. */ breadcrumb?: PoBreadcrumb; /** * @description * * Objeto que implementa as propriedades da interface `PoPageFilter`. */ filter: PoPageFilter; /** * @optional * * @description * * Valor padrão na busca rápida ao inicializar o componente * */ quickSearchValue: string; visibleActions: Array; protected language: string; protected resizeListener: () => void; private _actions?; private _disclaimerGroup?; private _componentsSize?; private _literals; private _title; /** * @optional * * @description * * Nesta propriedade deve ser definido um array de objetos que implementam a interface `PoPageAction`. */ set actions(actions: Array); get actions(): Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Objeto que implementa as propriedades da interface `PoDisclaimerGroup`. */ set disclaimerGroup(value: PoDisclaimerGroup); get disclaimerGroup(): PoDisclaimerGroup; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-list`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageListLiterals = { * otherActions: 'Mais ações' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageListLiterals = { * otherActions: 'Ações da página' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set literals(value: PoPageListLiterals); get literals(): PoPageListLiterals; /** Título da página. */ set title(title: string); get title(): string; /** * @optional * * @description * * Subtitulo do Header da página */ subtitle: string; constructor(languageService: PoLanguageService); abstract setDropdownActions(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageListBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoPageListComponent extends PoPageListBaseComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit { renderer: Renderer2; private router; private changeDetector; filterInput: ElementRef; advancedSearch: string; dropdownActions: Array; isMobile: boolean; limitPrimaryActions: number; callFunction: typeof callFunction; private isRecalculate; private maxWidthMobile; constructor(); ngOnInit(): void; ngAfterContentInit(): void; ngOnChanges(changes: { [propName: string]: SimpleChange; }): void; ngOnDestroy(): void; actionIsDisabled(action: any): any; callAction(item: PoPageAction): void; hasPageHeader(): boolean; hasCustomFilterSize(): boolean; filterSizeClass(width: number): string; setDropdownActions(): void; callActionFilter(field: string): void; /** * Limpa o campo de pesquisa. */ clearInputSearch(): void; onkeypress(key: any): void; onChangeDisclaimerGroup(disclaimers: any): void; onRemoveDisclaimer(removeData: PoDisclaimerGroupRemoveAction): void; onRemoveAllDisclaimers(removedDisclaimers: Array): void; private initializeFixedLiterals; private initializeListeners; private removeListeners; private onResize; private setIsMobile; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo dos componentes po-page-default, po-page-detail, po-page-edit, * po-page-list e po-page-slide. */ declare class PoPageModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * Componente para o conjunto de círculos que faz a passagem de itens do `po-slide`. */ declare class PoSlideCirclesComponent { /** Index do slide atual. */ currentSlideIndex: number; /** Itens do slide. */ items: Array; /** Evento emitido ao clicar em um controle. */ click: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoSlideComponent * * @description * * Interface que define cada objeto do `PoSlideItem`. */ interface PoSlideItem { /** Ação executada ao clicar no slide caso não tenha link definido. */ action?: Function; /** Define o caminho da imagem. */ image: string; /** Texto que aparece quando a imagem não é encontrada. */ alt?: string; /** Link interno ou externo que será aberto ao clicar no slide. */ link?: string; } /** * @description * * Componente de slide para visualização e controle de elementos de forma cíclica. Exibe um conjunto de imagens ou dados que permitem * customizar sua visualização utilizando a diretiva **[p-slide-content-template](/documentation/po-slide-content-template)**. * * #### Boas práticas: * - Utilizar imagens no slide, mesmo quando possui conteúdo personalizado. * - Evitar utilizar apenas um slide isolado, utilize pelo menos dois. * - Evitar utilizar mais de 5 slides, pois a ideia do componente é destacar apenas informações importantes. */ declare abstract class PoSlideBaseComponent { /** * @optional * * @description * * Define a exibição das setas de navegação. * * @default `false` */ hideArrows: boolean; private _interval; private _height?; private _slides; /** * @optional * * @description * Altura do po-slide, caso seja slide com template customizado, não assume o valor `default`. * * @default `336` */ set height(value: number); get height(): number; /** * @optional * * @description * * Valor em milissegundos que define o tempo de troca dos slides, caso o valor seja menor que `1000` os slides não trocam automaticamente. * * @default `4000` */ set interval(value: number); get interval(): number; /** * @description * * Array de imagens ou dados para o slide, pode ser de três formas: * * - Array implementando objetos da interface `PoSlideItem`: * ``` * [{ image: '/assets/image-1', action: 'imageClick.bind(this)'}, { image: '/assets/image-2' }] * ``` * - Array de `strings` com os caminhos das imagens: * ``` * ['/assets/image-1', '/assets/image-2' ] * ``` * - Array com lista de itens (para utilizar template): * ``` * [{ label: '1', img: '/assets/image-1' }, { label: '2', img: '/assets/image-1' }] * ``` * * > As setas de navegação e o controle com círculos apenas serão renderizados caso possua mais de um slide. */ set slides(value: Array); get slides(): Array; abstract setSlideHeight(height: number): void; protected abstract cancelInterval(): void; protected abstract setSlideItems(value: Array): void; protected abstract startSlide(): void; protected abstract startInterval(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideArrows: any; } /** * @usedBy PoSlideComponent * * @description * * 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: * * ``` * ... * * * *
* * *
* * * * * ... * ``` * * ``` * ... * * *
* *
* * ... * * ``` */ declare class PoSlideContentTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoSlideBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoSlideComponent extends PoSlideBaseComponent implements OnInit, DoCheck, OnChanges, OnDestroy { private builder; slideContentTemplate: PoSlideContentTemplateDirective; private slide; private itemsElements; currentSlideIndex: number; imageHeight: number; slideItems: Array; slideItemWidth: number; private isLoaded; private player; private setInterval; private resize$; private resizeSubscription; private get hasElements(); private get isImageSlide(); private get offset(); get hasSlides(): boolean; onResize(): void; ngOnInit(): void; ngDoCheck(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * Método que retorna o index do slide atual * * ``` * @ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent; * myFunction() { * let currentIndex = this.slideComponent.getCurrentSlideIndex(); * } * * ``` */ getCurrentSlideIndex(): number; goToItem(index: number): void; nextControl(): void; /** * Método para chamar o próximo slide. * * ``` * @ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent; * * myFunction() { * this.slideComponent.next(); * } * ``` */ next(): void; /** * Método para chamar o slide anterior. * * ``` * @ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent; * * myFunction() { * this.slideComponent.previous(); * } * ``` */ previous(): void; previousControl(): void; setSlideHeight(height: number): void; protected cancelInterval(): void; protected setSlideItems(slides: Array): void; protected startSlide(): void; protected startInterval(): void; private animate; private buildTransitionAnimation; private createArrayForTemplate; private createArrayFromSlides; private setDefaultHeight; private setHeight; private setSlideItemWidth; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente para a seta que controla a passagem de itens do `po-slide`. */ declare class PoSlideControlComponent { /** Tipo de controle que aceita os valores: 'previous' e 'next'. */ control: string; /** Evento emitido ao clicar em um controle. */ click: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente para cada item do po-slide. */ declare class PoSlideItemComponent { itemElement: ElementRef; /** Ação executada ao clicar em uma imagem */ action: Function; /** Texto alternativo quando a imagem não é encontrada */ alt: string; /** Dados para o template customizado */ data: Array; /** Caminho da imagem */ image: string; /** Altura da imagem */ imageHeight: number; /** Template customizado */ template: PoSlideContentTemplateDirective; /** Link executado ao clicar em uma imagem */ link: string; isIEOrEdge: any; setLinkType(): "externalLink" | "internalLink" | "noLink"; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-slide`. * * > Para o correto funcionamento do componente `po-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)); * ``` */ declare class PoSlideModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoStepperComponent * * @description * * * * *Enums* para os status do `po-stepper` quando utilizada a propriedade `p-steps`. */ declare enum PoStepperStatus { /** Define o estado do *step* como ativo. */ Active = "active", /** Define o estado do *step* como padrão. */ Default = "default", /** Define o estado do *step* como desabilitado. */ Disabled = "disabled", /** Define o estado do *step* como concluído. */ Done = "done", /** Define o estado do *step* com erro. */ Error = "error" } /** * @description * * 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. */ declare class PoStepComponent implements AfterContentInit { private elementRef; /** * @optional * * @description * * Função chamada quando o próximo *step* for clicado ou quando o método `PoStepperComponent.next()` for chamado. * Ao retornar `true` define que esse *step* ficará ativo e o atual como concluído (*done*). * Também aceita funções que retornem `Observable`. Ao retornar um `Observable`, * garanta que esse `Observable` será completado, caso houver algum erro durante o processo não será possível prosseguir * ao próximo *step*. * * Ao ser disparada, a mesma receberá por parâmetro o `PoStepComponent` atual. * * O contexto da função que será chamada, será o mesmo que o do `PoStepComponent`, então para poder alterar * para o contexto do componente que o está utilizando, pode ser utilizado a propriedade `bind` do Javascript. * Por exemplo, para a função `validate`: * * ``` * * ... * * ``` */ canActiveNextStep: ((currentStep: any) => boolean) | ((currentStep: any) => Observable); /** Título que será exibido descrevendo o passo (*step*). */ label: string; id?: string; private _status?; set status(status: PoStepperStatus); get status(): PoStepperStatus; /** * @optional * * @description * Define o ícone padrão do step em seu status *default*. * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons). * ``` * * ... * * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * ... * * * * * * Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente. */ iconDefault?: string | TemplateRef; ngAfterContentInit(): void; protected setDisplayOnActiveOrError(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por exibir os círculos dos *steps*. */ declare class PoStepperCircleComponent { alignCenter: boolean; content: any; iconActive?: string | TemplateRef; iconDone?: string | TemplateRef; iconDefault?: string | TemplateRef; icons: boolean; size: number; status: string; get isActive(): boolean; get isDefault(): boolean; get isDisabled(): boolean; get isDone(): boolean; get isError(): boolean; get isLargeStep(): boolean; get isMediumStep(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoStepperComponent * * @description * * Interface para definição dos *steps* do componente `po-stepper` quando utilizada a propriedade `p-steps`. */ interface PoStepperItem { /** Identificador único do step. */ id?: string; /** Define o ícone do *step* ativo. */ iconActive?: string | TemplateRef; /** Define o ícone do *step* concluído. */ iconDone?: string | TemplateRef; /** Define o ícone do *step* default. */ iconDefault?: string | TemplateRef; /** Texto do item do stepper. */ label?: string; /** Define o estado de exibição do *step*. */ status?: PoStepperStatus; } /** * * @usedBy PoStepperComponent * * @description * * * * *Enums* para definição da orientação do `po-stepper`. */ declare enum PoStepperOrientation { /** Define a exibição do componente na horizontal. */ Horizontal = "horizontal", /** Define a exibição do componente na vertical. */ Vertical = "vertical" } /** * @description * * 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)` | */ declare class PoStepperBaseComponent { /** * @optional * * @description * * * * Habilita a exibição de ícone ao invés de número no centro do círculo dos *steps*. * * @default `false` */ stepIcons: boolean; /** * @optional * * @description * * Define o tamanho dos *steps* em *pixels*, possibilitando um maior destaque. * * O valor informado deve ser entre `24` e `64`. * * > Valores que não se enquadrarem a esta regra serão ignorados, mantendo-se o valor *default*. * * @default `24` */ stepSize: number; /** Ação que será executada quando o usuário mudar o passo do `po-stepper`. */ onChangeStep: EventEmitter; private _alignCenter?; private _orientation?; private _sequential?; private _step; private _steps; /** * @optional * * @description * * Define o alinhamento dos *steps* e *labels* no *stepper*, dependendo da orientação. * * - Quando `true`, ficam centralizados em ambas as orientações (horizontal e vertical). * - Quando `false`, ficam alinhados à esquerda na orientação horizontal e ao topo na orientação vertical. * * @default `true` */ set alignCenter(alignCenter: boolean); get alignCenter(): boolean; /** * @optional * * @description * * Define a orientação de exibição do `po-stepper`. * * > Veja os valores válidos no *enum* [PoStepperOrientation](documentation/po-stepper#stepperOrientation). * * @default `PoStepperOrientation.Horizontal` */ set orientation(value: PoStepperOrientation); get orientation(): PoStepperOrientation; /** * @optional * * @description * * Controla o passo atual do `po-stepper`. * * > Ao utilizar esta propriedade e também utilizar o componente [**po-step**](/documentation/po-step), * o valor desta propriedade será ignorada permanecendo a definição do [**po-step**](/documentation/po-step). * * @default `1` */ set step(step: number); get step(): number; /** * @optional * * @description * * Lista dos itens do stepper. Se o valor estiver indefinido ou inválido, será inicializado como um array vazio. * * > Ao utilizar esta propriedade e também utilizar o componente [**po-step**](/documentation/po-step), * o valor desta propriedade será ignorada permanecendo a definição do [**po-step**](/documentation/po-step). */ set steps(steps: Array); get steps(): Array; /** * @optional * * @description * * Define se o `po-stepper` será sequencial ou aleatório. * * > Ao utilizar o componente [**po-step**](/documentation/po-step), o valor desta propriedade sempre será verdadeiro. * * @default `true` */ set sequential(sequential: boolean); get sequential(): boolean; /** * @optional * * @description * Permite definir o ícone do step no status concluído. * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons) * ``` * * ... * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * ... * * * * * * ``` * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente. * * @default `po-icon-ok` */ iconDone?: string | TemplateRef; /** * @optional * * @description * Permite definir o ícone do step no status ativo. * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons). * ``` * * ... * * ``` * Para customizar o ícone através do `TemplateRef`, veja a documentação da propriedade `p-step-icon-done`. * * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente. * * @default `po-icon-edit` */ iconActive?: string | TemplateRef; /** * @optional * * @description * * Desabilita o clique nos steps. * * @default `false` */ disabledClick: boolean; private initializeSteps; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoStepperBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoStepperComponent extends PoStepperBaseComponent implements AfterContentInit { private changeDetector; poSteps: QueryList; private currentActiveStep; private previousActiveStepIndex; get currentStepIndex(): number; get isVerticalOrientation(): boolean; get stepList(): QueryList | Array; get stepSizeCircle(): number; get usePoSteps(): boolean; ngAfterContentInit(): void; /** * 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). * * @param {number} index Índice do `po-step` que se deseja ativar. */ active(index: number): void; /** * Ativa o primeiro *step*. * * > Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step). */ first(): void; /** * Ativa o próximo *step*. * * > Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step). */ next(): void; /** * Ativa o *step* anterior. * * > Este método é valido apenas para as implementações que utilizam o componente [**po-step**](/documentation/po-step). */ previous(): void; changeStep(stepIndex: number, step?: PoStepComponent): void; getNextPoSteps(stepIndex: number): PoStepComponent; getNextSteps(stepIndex: number): PoStepperItem; getPreviousPoSteps(stepIndex: number): PoStepComponent; getPreviousSteps(stepIndex: number): PoStepperItem; isDashedBorder(step: PoStepComponent, index: number): boolean; isDashedBorderTop(step: PoStepComponent, index: number): boolean; onStepActive(step: PoStepComponent): void; trackByFn(step: PoStepComponent): string; private activeFirstStep; private allowNextStep; private canActiveNextStep; private checkAllowNextStep; private getCanActiveNextStepObservable; private hasDefaultBeforeDone; private isCurrentStep; private controlStepsStatus; private calculateDividerPosition; private getStepperStatusByCanActive; private getStepsAndIndex; private getPoSteps; private handleNextStep; private hasStepWithCanActiveNextStep; private isBeforeStep; private setFinalSteppersAsDisabled; private setStepAsActive; private setNextStepAsDefault; private updatePreviousStepStatus; private updateStepStatus; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por exibir as legendas dos *steps*. */ declare class PoStepperLabelComponent implements AfterViewInit, OnChanges { private renderer; private changeDetectorRef; alignCenter: boolean; content: string; status: string; isVerticalOrientation: boolean; labelElement: ElementRef; disabledClick: boolean; displayedContent: string; tooltipContent: string; private maxLabelLength; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; onMouseOver(): void; onMouseOut(): void; private updateLabel; private updateTooltip; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente que representa um *step* contendo as ligações das laterais (`po-stepper-step-bar`) e a label. */ declare class PoStepperStepComponent implements OnChanges { alignCenter: boolean; circleContent: any; nextStatus: any; orientation: PoStepperOrientation; set label(value: string); get label(): string; set status(value: PoStepperStatus); get status(): PoStepperStatus; set stepIcons(stepIcons: boolean); get stepIcons(): boolean; set stepSize(value: number); get stepSize(): number; set iconDefault(value: string | TemplateRef); get iconDefault(): string | TemplateRef; set iconDone(value: string | TemplateRef); get iconDone(): string | TemplateRef; set iconActive(value: string | TemplateRef); get iconActive(): string | TemplateRef; isVerticalOrientation: boolean; activated: EventEmitter; click: EventEmitter; enter: EventEmitter; disabledClick: boolean; readonly literals: any; stepSizeOriginal: number; private _label; private _status; private _stepIcons?; private _stepSize; private _iconDefault?; private _iconDone?; private _iconActive?; get minHeightCircle(): number | null; get minWidthCircle(): number | null; ngOnChanges(changes: SimpleChanges): void; getStatusClass(status: string): string; onClick(): void; onEnter(): void; setDefaultStepSize(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-stepper */ declare class PoStepperModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por manipular os botões de aba. */ declare class PoTabButtonComponent implements OnChanges, AfterViewInit { changeDetector: ChangeDetectorRef; private elementRef; tabButtom: ElementRef; disabled: boolean; id: string; label: string; activated: EventEmitter; changeState: EventEmitter; click: EventEmitter; private _active; private _hide; widthButton: any; set active(value: boolean); get active(): boolean; set hide(value: boolean); get hide(): boolean; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; onClick(): void; private emitActivated; private setDisplayOnHide; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * O componente `po-tab` renderiza uma aba na qual envolve um conteúdo HTML. * * Com este componente é possível atribuir um rótulo para auxiliar na identificação do conteúdo, ativar para que o mesmo seja exibido, * desabilitar para impossibilitar o acesso, bem como ocultar para indisponibilizar a aba. * * > Para controlar a navegação entre diversas abas, utilizar o componente [`po-tabs`](/documentation/po-tabs) ou [`po-context-tabs`](/documentation/po-context-tabs). */ declare abstract class PoTabBaseComponent { /** Rótulo da aba. */ label: string; /** * @optional * * @description * * Esconde o botão de fechar a aba. * * > Atenção: Propriedade disponível somente no `po-context-tabs`. * * @default `false` */ hideClose: boolean; /** Método disparado ao clicar na aba. */ click: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar no botão de fechar a aba. * * > Atenção: Propriedade disponível somente no `po-context-tabs`. * */ closeTab: EventEmitter; id?: string; private _active?; private _disabled?; private _hide?; widthButton: any; /** * @optional * * @description * * Ativa a aba exibindo seu conteúdo. * * > Sugere-se utilizar na aba de conteúdo inicial. * * @default `false` */ set active(active: boolean); get active(): boolean; /** * @optional * * @description * * Desabilita a aba. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * * Oculta a aba. * * > Atenção: Para correto funcionamento do componente, indicamos essa propriedade para esconder e exibir e não *ngIf. * * @default `false` */ set hide(hide: boolean); get hide(): boolean; protected abstract setDisplayOnActive(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideClose: any; } /** * @docsExtends PoTabBaseComponent */ declare class PoTabComponent extends PoTabBaseComponent implements AfterContentInit, OnChanges { elementRef: ElementRef; private tabsService; removed: boolean; showTooltip: boolean; ngAfterContentInit(): void; ngOnChanges(changes: SimpleChanges): void; protected setDisplayOnActive(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente para agrupamento de componentes `po-tab-button` que os rendereiza em uma um caixa de diálogo * no formato de lista. */ declare class PoTabDropdownComponent implements AfterViewInit { private elementRef; popover: PoPopoverComponent; button: PoButtonComponent; label: string; tabs: Array; size: string; activated: EventEmitter; changeState: EventEmitter; click: EventEmitter; isDropdownOpen: boolean; dropdownStyles: any; ngAfterViewInit(): void; toggleDropdown(): void; closeAndReturnToButtom(): void; closeDropdown(): void; get buttonElement(): ElementRef; setDropdownPosition(): void; private calculateDropdownStyles; onClickOutside(event: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * #### 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)` | * *
*/ declare class PoTabsBaseComponent { private _size?; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura dos tabs como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura dos tabs como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const poTabsLiterals: object; /** * @docsExtends PoTabsBaseComponent * * @description * * 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. * * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoTabsComponent extends PoTabsBaseComponent implements OnInit, AfterViewInit, OnDestroy, AfterContentInit { changeDetector: ChangeDetectorRef; private languageService; private tabsService; tabsChildren: QueryList; tabButton: QueryList; tabDropdown: PoTabDropdownComponent; containerTabs: ElementRef; maxNumberOfTabs: number; literals: any; tabsDefault: any[]; tabsDropdown: any[]; initializeCalculation: boolean; initializeComponent: boolean; initCheckChangesTab: boolean; quantityTabsButton: any; defaultLastTabWidth: number; private previousActiveTab; private subscription; private subscriptionTabsService; private subscriptionTabActive; constructor(); ngOnInit(): void; ngAfterViewInit(): void; ngAfterContentInit(): void; ngOnDestroy(): void; get isShowTabDropdown(): any; get overflowedTabs(): any; get tabs(): any; get tabsChildrenArray(): Array; closeListbox(): void; isVisibleTab(tab: any): boolean; onTabActiveByDropdown(tab: PoTabComponent, eventEmitter?: boolean): void; onTabActive(tab: PoTabComponent): void; onTabChangeState(tab: PoTabComponent | any): void; reorderTabs(tabToReorder: PoTabComponent, lastTab?: any): void; selectedTab(tab: PoTabComponent | any): void; trackByFn(_i: any, tab: PoTabComponent): string; private activeDistinctTab; private activeFirstTab; changeTabPositionByDropdown(tabToActivate: PoTabComponent, byContextsTabs?: boolean): void; private deactivateTab; updateTabsState(initialState?: boolean, tab?: PoTabComponent): void; executeTabsState(initialState: any, idByContextTabs?: string): void; calculateTabs(initializeCalculation?: boolean): void; handleKeyboardNavigationTab(initialIndex?: number): void; /** * 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 * } * ``` */ setQuantityTabsButton(number: number): void; private initializeTabAccessibilityElements; private setTabIndex; private handleKeyDown; private handleArrowLeft; private handleHomeKey; private handleEndKey; private handleArrowRight; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-tabs */ declare class PoTabsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoTabComponent * * @description * * Interface que define o `po-tab`. */ interface PoTab { /** * @optional * * @description * * Ativa a aba exibindo seu conteúdo. * * > Sugere-se utilizar na aba de conteúdo inicial. */ active?: boolean; /** * @optional * * @description * * Método disparado ao clicar na aba. */ click?: Function; /** * @optional * * @description * * Método disparado ao clicar no botão de fechar a aba. * * > Atenção: Propriedade disponível somente no `po-context-tabs`. * */ closeTab?: Function; /** * @optional * * @description * * Desabilita a aba impossibilitando que fique ativa. */ disabled?: boolean; /** * @optional * * @description * * Oculta a aba. */ hide?: boolean; /** * @optional * * @description * * Esconde o botão de fechar a aba. * * > Atenção: Propriedade disponível somente no `po-context-tabs`. * * @default `false` */ hideClose?: boolean; /** Rótulo da aba. */ label: string; } declare class PoTabsService { private onChangesTriggeredSource; private onChangesTriggeredActiveSource; onChangesTriggered$: rxjs.Observable; triggerActiveOnChanges$: rxjs.Observable; triggerOnChanges(tab?: PoTabComponent): void; triggerActiveOnChanges(tab: PoTabComponent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsExtends PoTabsBaseComponent * * @description * * 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. * * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoContextTabsComponent extends PoTabsComponent { byQuantityFunction: number; initialTabsWidth: any[]; private sumOfWidth; get isShowTabDropdown(): boolean; get overflowedTabs(): any; get tabs(): any; closeTab(tab: PoTabComponent): void; onChangeVisibilityTab(tab: PoTabComponent): void; private afterRemoveTab; calculateTabs(initializeCalculation?: boolean): void; updateTabsState(initialState?: boolean, tabs?: PoTabComponent): void; private checkChangesTabs; onTabActiveByDropdown(tab: PoTabComponent, eventEmitter?: boolean): void; /** * 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 * } * ``` */ setQuantityTabsButton(number: number): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente responsável por manipular os botões de aba. */ declare class PoContextTabButtonComponent extends PoTabButtonComponent implements OnChanges, AfterViewInit { hideClose: boolean; showTooltip: boolean; literals: any; close: EventEmitter; changeVisible: EventEmitter; activeCloseIcon: boolean; afterViewChecked: boolean; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; closeTab(event: any): void; onFocusIn(): void; onFocusOut(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Módulo do componente po-context-tabs */ declare class PoContextTabsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsExtends PoPopupAction * * @usedBy PoToolbarComponent */ interface PoToolbarAction extends PoPopupAction { } /** * @docsPrivate * * @usedBy PoToolbarComponent * * @description * * O componente `po-toolbar-actions` tem como objetivo receber uma lista de ações e um ícone que podem ser personalizados. */ declare class PoToolbarActionsComponent { /** Define uma lista de ações. */ actions?: Array; private _actionsIcon?; /** Define o ícone das ações. */ set actionsIcon(icon: string | TemplateRef); get actionsIcon(): string | TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoToolbarComponent * * @description * * Interface que define o perfil do `PoToolbarComponent`. */ interface PoToolbarProfile { /** Define o caminho da imagem do perfil. */ avatar?: string; /** Define um texto com menor destaque ao lado da imagem do perfil, como por exemplo o e-mail de usuário. */ subtitle?: string; /** Define um texto com maior destaque ao lado da imagem do perfil, como por exemplo o nome de usuário. */ title: string; } /** * @description * * O componente `po-toolbar` é um cabeçalho para o título da aplicação e informações de usuário e notificações quando houver necessidade. */ declare class PoToolbarBaseComponent { /** * @optional * * @description * * Define uma lista de ações que serão exibidas ao clicar no ícone declarado em `p-actions-icon`. */ actions?: Array; /** * @optional * * @description * * Define um [ícone](https://po-ui.io/icons) para a propriedade `p-actions`. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. * * > Caso não haja ações definidas em `p-actions`, o ícone não será exibido. * * @default `an-dots-three` */ actionsIcon?: string | TemplateRef; /** Define o objeto que será o cabeçalho da lista de ações com as informações do perfil. */ profile?: PoToolbarProfile; /** Define uma lista de ações que serão exibidas ao clicar no ícone do perfil. */ profileActions?: Array; /** Se falso, oculta o ícone de notificações. */ showNotification?: boolean; /** Título do *toolbar* e aplicação. */ title: string; /** * @optional * * @description * * Lista de ações da notificação. */ notificationActions?: Array; private _notificationNumber?; /** * @optional * * @description * * Número de notificações. */ set notificationNumber(value: number); get notificationNumber(): number; get isShowProfile(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoToolbarBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoToolbarComponent extends PoToolbarBaseComponent implements OnInit { private titleService; ngOnInit(): void; private setTitle; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @usedBy PoToolbarComponent * * @description * * O componente `po-toolbar-notification` tem como objetivo notificar o usuário de novas ações da aplicação que necessitam de atenção, * como por exemplo um alerta de nova mensagem. * * O mesmo também permite que a cada nova notificação seja incrementado e exibido, ou não, este número em uma *tag* ao lado do * ícone de notificações. */ declare class PoToolbarNotificationComponent implements AfterViewInit { private cdr; notificationRef: ElementRef; notificationActions?: Array; private _notificationNumber?; set notificationNumber(value: number); get notificationNumber(): number; ngAfterViewInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @docsExtends PoToolbarProfileComponent * * @description * * Componente `po-toolbar-profile`. */ declare class PoToolbarProfileComponent { /** Objeto que implementa a interface `PoToolbarProfile`. */ profile: PoToolbarProfile; /** Define uma lista de ações. */ profileActions?: Array; get profileAvatar(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-toolbar * */ declare class PoToolbarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoTreeViewComponent * * @description * * Interface para definição dos itens do componente `po-tree-view`. */ interface PoTreeViewItem { /** Desabilita a selecão do item. */ /** Texto de exibição do item. */ label: string; /** Valor do item que poderá ser utilizado como referência para sua identificação. */ value: string | number; /** Expande o item. */ expanded?: boolean; /** * Marca o item como selecionado. * * > Caso o item que conter `subItems` for selecionado, os seus itens filhos serão também selecionados. */ selected?: boolean | null; /** * Permite ativar/desativar a seleção do item */ isSelectable?: boolean | null; /** Lista de itens do próximo nível, e assim consecutivamente até que se atinja o quarto nível. */ subItems?: Array; } /** * @description * * 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. */ declare class PoTreeViewBaseComponent { /** * @optional * * @description * * Ação que será disparada ao colapsar um item. * * > Como parâmetro o componente envia o item colapsado. */ collapsed: EventEmitter; /** * @optional * * @description * * Ação que será disparada ao expandir um item. * * > Como parâmetro o componente envia o item expandido. */ expanded: EventEmitter; /** * @optional * * @description * * Ação que será disparada ao selecionar um item. * * > Como parâmetro o componente envia o item selecionado. */ selected: EventEmitter; /** * @optional * * @description * * Ação que será disparada ao desfazer a seleção de um item. * * > Como parâmetro o componente envia o item que foi desmarcado. */ unselected: EventEmitter; private _componentsSize; private _items; private _selectable; private _maxLevel; private _singleSelect; selectedValue: string | number; /** * @optional * * @description * * Define o tamanho dos componentes de formulário: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set componentsSize(value: string); get componentsSize(): string; /** * Lista de itens do tipo `PoTreeViewItem` que será renderizada pelo componente. */ inputedItems: Array; set items(value: Array); get items(): Array; /** * @optional * * @description * * Habilita uma caixa de seleção para selecionar e/ou desmarcar um item da lista. * * @default false */ set selectable(value: boolean); get selectable(): boolean; /** * @optional * * @description * * Habilita a seleção para item único atráves de po-radio. * * @default false */ set singleSelect(value: boolean); get singleSelect(): boolean; /** * @optional * * @description * * Define o máximo de níveis para o tree-view. * * > O valor padrão é 4 * * @default 4 */ set maxLevel(value: number); get maxLevel(): number; protected emitExpanded(treeViewItem: PoTreeViewItem): void; protected emitSelected(treeViewItem: PoTreeViewItem): void; private addChildItemInParent; private addItem; private selectAllItems; private selectItemBySubItems; private everyItemSelected; private expandParentItem; private getItemsByMaxLevel; private getItemsWithParentSelected; private updateItemsOnSelect; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoTreeViewBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoTreeViewComponent extends PoTreeViewBaseComponent implements OnInit, OnChanges { private treeViewService; get hasItems(): boolean; ngOnInit(): void; ngOnChanges(changes?: SimpleChanges): void; trackByFunction(index: number): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoTreeViewItemComponent { private treeViewService; componentsSize: string; item: PoTreeViewItem; selectable: boolean; singleSelect: boolean; selectedValue: string | number; get hasSubItems(): boolean; onClick(event: MouseEvent): void; onSelect(selectedItem: PoTreeViewItem): void; trackByFunction(index: number): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoTreeViewItemHeaderComponent { inputCheckbox: any; componentsSize: string; item: PoTreeViewItem; selectable: boolean; singleSelect: boolean; expanded: EventEmitter; selected: EventEmitter; selectedValue: string | number; idRadio: string; get hasSubItems(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-tree-view`. * * > Para o correto funcionamento do componente `po-tree-view`, 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)); * ``` */ declare class PoTreeViewModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoActiveOverlayService { activeOverlay: Array; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * Módulo do serviço `po-active-overlay`. */ declare class PoActiveOverlayModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare const PO_CONTROL_POSITIONS: string[]; /** * @description * * 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. */ declare abstract class PoDialogBaseService { /** Exibe um diálogo de confirmação, é possível definir ações para as opções de confirmação e cancelamento. */ confirm(confirmOptions: PoDialogConfirmOptions): void; /** Exibe um diálogo de alerta. */ alert(alertOptions: PoDialogAlertOptions): void; abstract openDialog(dialogType: PoDialogType, dialogOptions: PoDialogAlertOptions | PoDialogConfirmOptions): void; } /** * @docsExtends PoDialogBaseService * * @example * * * * * * * * * * * * * * * */ declare class PoDialogService extends PoDialogBaseService { private poComponentInjector; constructor(poComponentInjector: PoComponentInjectorService); openDialog(dialogType: PoDialogType, dialogOptions: PoDialogAlertOptions | PoDialogConfirmOptions): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * * * Interface para descrição das linguagens disponíveis no sistema. * * * @usedBy PoI18nModule */ interface PoLanguage { /** * Código do idioma [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) * > Exemplo: 'pt','en' */ language?: string; /** * Descrição do idioma * */ description?: string; } /** * @description * * * * Interface para os separadores numéricos das linguagens disponíveis no sistema. * * @usedBy PoI18nModule */ interface PoNumberSeparator { /** * Código do idioma [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) * > Exemplo: 'pt','en' */ language?: string; /** * Separador numérico * */ separator?: string; } /** * @description * * * * Interface para o separador de data das linguagens disponíveis no sistema. * * @usedBy PoI18nModule */ interface PoDateSeparator { /** * Código do locale [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) * > Exemplo: 'pt','en' */ locale?: string; /** * Separador de data * > Exemplo: '/','.','-' */ separator?: string; } /** * @description * * * * * A constante poLanguageDefault possui as linguagens de suporte padrão do Po-UI * * > Português, Inglês, Espanhol e Russo. * * @usedBy PoI18nModule */ declare const poLanguageDefault: Array; /** * @description * * * * * A constante poLocales possui somente os códigos das linguagem padrão * * @usedBy PoI18nModule */ declare const poLocales: string[]; /** * @description * * * * * A constante poLocaleDefault possui o código da linguagem padrão do Po-UI * * @usedBy PoI18nModule */ declare const poLocaleDefault = "pt"; /** * @description * * * * * A constante poLocaleDecimalSeparatorList possui os separadores de decimal por linguagens de suporte padrão do Po-UI * * @usedBy PoI18nModule */ declare const poLocaleDecimalSeparatorList: Array; /** * @description * * * * * A constante poLocaleDecimalSeparatorList possui os separadores de decimal por linguagens de suporte padrão do Po-UI * * @usedBy PoI18nModule */ declare const poLocaleThousandSeparatorList: Array; /** * @description * * * * * A constante poLocaleDateSeparatorList possui o separador de data por locale de suporte padrão do Po-UI * * @usedBy PoI18nModule */ declare const poLocaleDateSeparatorList: Array; /** * @description * * * * Interface para a configuração padrão do módulo PoI18nModule. * * @usedBy PoI18nModule */ interface PoI18nConfigDefault { /** * Idioma que será buscado por padrão pelo serviço. * * Esta definição somente será utilizada se não tiver sido definido o idioma através do método * [`setLanguage()`](documentation/po-i18n#setLanguage). Caso nenhum dos dois tenha sido configurado, será utilizado * o idioma do navegador. */ language?: string; /** * Define o contexto que será buscado por padrão pelo serviço. * * > Caso não seja especificado será usado o primeiro contexto da lista de contextos. */ context?: string; /** * Define se as literais buscadas no serviço deverão ser armazenadas no cache do * navegador, lembrando que cada navegador possui sua própria limitação de cache. * * Para contextos com grande quantidade de literais, recomenda-se o uso de constantes ao invés de serviços, desta forma * não será usado o cache do navegador. * * Por padrão não utiliza. */ cache?: boolean; } /** * @description * * * * Interface para a configuração dos contextos do módulo `PoI18nModule`. * * @usedBy PoI18nModule */ interface PoI18nConfigContext { [name: string]: { [language: string]: { [literal: string]: string; }; } | { url: string; }; } /** * @description * * * * Interface para a configuração do módulo `PoI18nModule`. * * @usedBy PoI18nModule */ interface PoI18nConfig { /** Configurações padrões. */ default?: PoI18nConfigDefault; /** * Deve ser atribuído a esta propriedade um objeto que contenha os contextos com os * idiomas suportados e suas respectivas traduções literais, * como também informar a propriedade `url` onde pode ser informado o serviço que retorne as literais traduzidas. * * Portanto podemos utilizar constantes, onde devemos informar o nome do contexto recebendo um objeto com os * idiomas suportados e o arquivo de literais, por exemplo: * ``` * import { generalEn } from './i18n/general-en'; * import { generalPt } from './i18n/general-pt'; * ... * general: { * pt: generalPt, * en: generalEn * } * ... * ``` * * E como informado, podemos utilizar a propriedade `url` que deve receber a URL do serviço que * retorne as literais traduzidas, por exemplo: * ``` * hcm: { * url: 'http://localhost:3000/api/translations/hcm/' * } * ``` * * Ao optar por utilizar um serviço, deverá ser definida a URL específica do contexto, * como nos exemplos abaixo: * ``` * http://server:port/api/translations/crm * http://server:port/api/translations/general * ``` * * Os idiomas e literais serão automaticamente buscados com parâmetros na própria URL: * - `language`: o idioma será sempre passado por parâmetro, sendo recomendado a utilização do padrão suportado * pelos navegadores (`pt-br`, `en-us`); * - `literals`: as literais serão separadas por vírgula. Caso esse parâmetro não seja informado, o * serviço deve retornar todas as literais do idioma. * * Exemplos de requisição: * ``` * http://server:port/api/translations/crm?language=pt-br * http://server:port/api/translations/crm?language=pt-br&literals=add,remove,text * ``` * * > Sempre que o idioma solicitado não for encontrado, será buscado por `pt-br`. * * Existe também a possibilidade de utilizar ambos, onde será feito a busca das literais nas constantes e depois efetua * a busca no serviço, com isso as constantes podem servir como *backup* caso o serviço esteja indisponível, por exemplo: * * ``` * import { generalEn } from './i18n/general-en'; * import { generalPt } from './i18n/general-pt'; * ... * general: { * pt: generalPt, * en: generalEn, * url: 'http://localhost:3000/api/translations/hcm/' * } * ... * ``` * > Caso a constante contenha alguma literal que o serviço não possua será utilizado a literal da constante. */ contexts: PoI18nConfigContext; } /** * @description * * Interface para o método `getLiterals()` do serviço PoI18nService. * * @usedBy PoI18nService */ interface PoI18nLiterals { /** Contexto utilizado na busca das literais. */ context?: string; /** Idioma a ser buscado. */ language?: string; /** Lista das literais. */ literals?: Array; } /** * @description * * 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(); * })); * * }); * * ``` */ declare class PoI18nBaseService { private config?; private http?; private languageService?; private varI18n; private contextDefault; private useCache; private servicesContext; constructor(config?: PoI18nConfig, http?: HttpClient, languageService?: PoLanguageService); /** * * 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`. * * @returns {string} sigla do idioma padrão. */ getLanguage(): string; getLiterals(options?: PoI18nLiterals): Observable; /** * 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). * * @returns {string} sigla do idioma padrão. */ getShortLanguage(): string; /** * * 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. * * @param {string} language Sigla do idioma. * * Esta sigla deve ser composta por duas letras representando o idioma, * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`. * * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado. * * @param {boolean} reload Indica se a página atual poderá ser recarregada após a alteração do idioma. * * Este recurso pode ser útil para os usuários que utilizam o método `getLiterals()` do serviço do i18n para poder * buscar novamente as literais no novo idioma configurado. */ setLanguage(language: string, reload?: boolean): void; private setConfig; private getLiteralsFromContextService; private getLiteralsLocalStorageAndCache; private getLiteralsFromContextConstant; private searchInLocalStorage; private searchInVarI18n; private updateLocalStorage; private setVarI18n; private updateVarI18n; private getHttpService; private completeFaultLiterals; private countObject; private mergeObject; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoI18nBaseService */ declare class PoI18nService extends PoI18nBaseService { constructor(configs: PoI18nConfig | Array, http: HttpClient, languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare function returnPoI18nService(configs: Array, http: HttpClient, languageService: PoLanguageService): PoI18nService; declare function mergePoI18nConfigs(configList: Array): PoI18nConfig; declare const I18N_CONFIG: InjectionToken; /** * @description * * Módulo do serviço `PoI18nService` para controle de idiomas com PO. * * Para utilização do serviço de idiomas `PoI18nService`, deve-se importar este módulo mesmo já havendo importado * o módulo `PoModule`. Na importação deve ser invocado o método `config`, informando um objeto que deve implementar * a interface [`PoI18nConfig`](documentation/po-i18n#poI18nConfig) para configuração. * * * **Exemplo de configuração do módulo do i18n:** * ``` * import { PoI18nConfig } from '@po-ui/ng-components'; * * import { generalEn } from './i18n/general-en'; * import { generalPt } from './i18n/general-pt'; * * const i18nConfig: PoI18nConfig = { * default: { * language: 'pt-BR', * context: 'general', * cache: true * }, * contexts: { * general: { * 'pt-BR': generalPt, * 'en-US': generalEn * }, * hcm: { * url: 'http://10.1.1.1/api/translations/hcm/' * } * } * }; * * @NgModule({ * declarations: [], * imports: [ * PoModule, * PoI18nModule.config(i18nConfig) * ], * bootstrap: [AppComponent] * }) * ``` * * Para cada contexto é possível definir a origem das literais, que podem ser de um serviço REST ou * de um objeto. Exemplo: * * Arquivo general-pt.ts * ``` * export const generalPt = { * add: 'Adicionar', * greeting: 'Prazer, {0} {1}', * people: '{0} Pessoas, * remove: 'Remover' * } * ``` * * Arquivo general-en.ts * ``` * export const generalEn = { * add: 'Add', * greeting: 'Nice to meet you, {0} {1}', * people: '{0} People, * remove: 'Remove' * } * ``` * * **Exemplo de configuração de contextos usando constantes externas:** * ``` * import { PoI18nConfig } from '@po-ui/ng-components'; * * import { generalEn } from './i18n/general-en'; * import { generalPt } from './i18n/general-pt'; * * const i18nConfig: PoI18nConfig = { * contexts: { * general: { * 'pt-BR': generalPt, // constantes em arquivos separados * 'en-US': generalEn // constantes em arquivos separados * }, * crm: { * url: 'http://10.0.0.1:3000/api/translations/crm' * } * }, * default: {} * } * ``` * * **Exemplo de configuração de um contexto utilizando serviço:** * * Ao optar por utilizar um serviço para configuração de contexto, deverá ser definida a URL * específica do contexto, como nos exemplos abaixo: * * - http://10.0.0.1:3000/api/translations/crm * - http://10.0.0.1:3000/api/translations/general * * Os idiomas e literais serão automaticamente buscados com parâmetros na própria URL: * - **language**: o idioma será sempre passado por parâmetro e é recomendado utilizar uma das linguagens * suportadas pelo PO (`pt-br`, `en-us`, `es-es` ou `ru`). * - **literals**: as literais serão separadas por vírgula. Caso esse parâmetro não seja informado, o * serviço deve retornar todas as literais do idioma. * * Exemplos de requisição: * * - http://10.0.0.1:3000/api/translations/crm?language=pt-br * - http://10.0.0.1:3000/api/translations/crm?language=pt-br&literals=add,remove,text * * > Sempre que o idioma solicitado não for encontrado, será buscado por `pt-br`. * * Além dos contextos, é possível definir as configurações *default* do sistema na configuração do * módulo utilizando a interface [`PoI18nConfig`](documentation/po-i18n#poI18nConfig): * * **Exemplo de padrões definidos:** * ``` * const i18nConfig: PoI18nConfig = { * contexts: { * general: { } * }, * default: { * language: 'pt-BR', * context: 'general', * cache: true * } * } * ``` * * **Importante:** * * Recomenda-se que as definições *default* sejam realizadas apenas uma vez na aplicação, * preferencialmente no módulo `AppModule`. * * **i18n com *Lazy loading*** * * Para aplicações que utilizem a abordagem de módulos com carregamento *lazy loading*, caso seja * definida outra configuração do `PoI18nModule`, deve-se atentar os seguintes detalhes: * * - Não defina outra *default language* para este módulo. Caso for definida, será sobreposta para * toda a aplicação; * - Caso precise de módulos carregados via *lazy loading* com linguagens diferentes, utilize o * método [`setLanguage()`](documentation/po-i18n#setLanguage) disponibilizado pelo `PoI18nService` * para definir a linguagem da aplicação e dos módulos com as linguagens diferentes. */ declare class PoI18nModule { static config(config: PoI18nConfig): ModuleWithProviders; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare function initializeLanguageDefault(configs: Array, languageService: PoLanguageService): () => void; /** * @usedBy PoMediaQueryService * * @description * 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`. * */ interface PoMediaQueryTokens { /** * @description * * Define a regra para sm. * * `gridSystemSmMaxWidth` define a largura máxima para o grid no tamanho pequeno (`sm`). * * Exemplo de uso: * ```typescript * const tokens: PoMediaQueryTokens = { * sm: { * gridSystemSmMaxWidth: '480px' * } * }; * ``` */ sm?: { 'gridSystemSmMaxWidth': string; }; /** * @description * * Define a regra para md. * * `gridSystemMdMinWidth` define a largura mínima para o grid no tamanho pequeno (`md`). * * `gridSystemMdMaxWidth` define a largura máxima para o grid no tamanho pequeno (`md`). * * Exemplo de uso: * ```typescript * const tokens: PoMediaQueryTokens = { * md: { * gridSystemMdMinWidth: '481px', * gridSystemMdMaxWidth: '960px' * } * }; * ``` */ md?: { 'gridSystemMdMinWidth': string; 'gridSystemMdMaxWidth': string; }; /** * @description * * Define a regra para lg. * * `gridSystemLgMinWidth` define a largura mínima para o grid no tamanho pequeno (`lg`). * * `gridSystemLgMaxWidth` define a largura máxima para o grid no tamanho pequeno (`lg`). * * Exemplo de uso: * ```typescript * const tokens: PoMediaQueryTokens = { * lg: { * gridSystemLgMinWidth: '961px', * gridSystemLgMaxnWidth: '1366px' * } * }; * ``` */ lg?: { 'gridSystemLgMinWidth': string; 'gridSystemLgMaxWidth': string; }; /** * @description * * Define a regra offset. * * `gridSystemOffsetMinWidth` define a largura mínima para o grid no tamanho pequeno (`offset`). * * `gridSystemOffsetMaxWidth` define a largura máxima para o grid no tamanho pequeno (`offset`). * * Exemplo de uso: * ```typescript * const tokens: PoMediaQueryTokens = { * offset: { * gridSystemOffsetMinWidth: '361px', * gridSystemOffsetMaxWidth: '480px' * } * }; * ``` */ offset?: { 'gridSystemOffsetMinWidth': string; 'gridSystemOffsetMaxWidth': string; }; /** * @description * * Define a regra pull. * * `gridSystemPullMaxWidth` define a largura máxima para o grid no tamanho pequeno (`pull`). * * Exemplo de uso: * ```typescript * const tokens: PoMediaQueryTokens = { * offset: { * gridSystemPullMaxWidth: '480px' * } * }; * ``` */ pull?: { 'gridSystemPullMaxWidth': string; }; /** * @description * * Define a regra xl. * * `gridSystemXlMinWidth` define a largura mínima para o grid no tamanho pequeno (`pull`). * * Exemplo de uso: * ```typescript * const tokens: PoMediaQueryTokens = { * offset: { * gridSystemXlMinWidth: '1367px' * } * }; * ``` */ xl?: { 'gridSystemXlMinWidth': string; }; } /** * @description * * 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); * } * } * ``` * */ declare class PoMediaQueryService { private renderer; constructor(rendererFactory: RendererFactory2); /** * 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. * * @param {PoMediaQueryTokens} tokens Objeto contendo os tokens que devem ser atualizados. Cada propriedade corresponde a uma variável CSS que será * dinamicamente modificada dentro das regras de media query. * */ updateTokens(tokens: PoMediaQueryTokens): void; private createStyleElement; private processStyleSheet; private updateTokensMediaRule; private buildMediaQuery; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Define as cores de ação padrão para temas claros. */ declare const poThemeDefaultActions: PoThemeColorAction; /** * Define as cores neutras padrão para temas claros. */ declare const poThemeDefaultNeutrals: PoThemeColorNeutral; /** * Define as cores de feedback padrão para temas claros. */ declare const poThemeDefaultFeedback: PoThemeColorFeedback; /** * Define as cores da Brand padrão para temas claros. */ declare const poThemeDefaultBrands: poThemeColorBrand; declare const poThemeDefaultCategoricals: PoThemeColorCategorical; declare const poThemeDefaultOverlayCategoricals: PoThemeColorCategorical; /** * Define estilos específicos por componente e onRoot para temas claros para AAA. */ declare const poThemeDefaultLightValues: { perComponent: {}; onRoot: { '--color-caption-categorical-01': string; '--color-caption-categorical-02': string; '--color-caption-categorical-03': string; '--color-caption-categorical-04': string; '--color-caption-categorical-05': string; '--color-caption-categorical-06': string; '--color-caption-categorical-07': string; '--color-caption-categorical-08': string; '--color-caption-categorical-overlay-01': string; '--color-caption-categorical-overlay-02': string; '--color-caption-categorical-overlay-03': string; '--color-caption-categorical-overlay-04': string; '--color-caption-categorical-overlay-05': string; '--color-caption-categorical-overlay-06': string; '--color-caption-categorical-overlay-07': string; '--color-caption-categorical-overlay-08': string; }; }; declare const poThemeDefaultCategoricalsAA: PoThemeColorCategorical; declare const poThemeDefaultOverlayCategoricalsAA: PoThemeColorCategorical; /** * Define estilos específicos por componente e onRoot para temas claros para AA. */ declare const poThemeDefaultLightValuesAA: { perComponent: {}; onRoot: { '--color-caption-categorical-01': string; '--color-caption-categorical-02': string; '--color-caption-categorical-03': string; '--color-caption-categorical-04': string; '--color-caption-categorical-05': string; '--color-caption-categorical-06': string; '--color-caption-categorical-07': string; '--color-caption-categorical-08': string; '--color-caption-categorical-overlay-01': string; '--color-caption-categorical-overlay-02': string; '--color-caption-categorical-overlay-03': string; '--color-caption-categorical-overlay-04': string; '--color-caption-categorical-overlay-05': string; '--color-caption-categorical-overlay-06': string; '--color-caption-categorical-overlay-07': string; '--color-caption-categorical-overlay-08': string; }; }; /** * Define as cores de ação padrão para temas escuros. */ declare const poThemeDefaultActionsDark: PoThemeColorAction; /** * Define as cores neutras padrão para temas escuros. */ declare const poThemeDefaultNeutralsDark: PoThemeColorNeutral; /** * Define as cores de feedback padrão para temas escuros. */ declare const poThemeDefaultFeedbackDark: PoThemeColorFeedback; declare const poThemeDefaultBrandsDark: poThemeColorBrand; declare const poThemeDefaultCategoricalsDark: PoThemeColorCategorical; declare const poThemeDefaultCategoricalsOverlayDark: PoThemeColorCategorical; /** * Define estilos específicos por componente e onRoot para temas escuros. */ declare const poThemeDefaultDarkValues: { perComponent: { /** TAB */ '.po-tab-border-active': { 'background-color': string; }; /** OVERLAY */ 'po-overlay': { '--color-overlay': string; }; /** MODAL */ 'po-modal': { '--color-overlay': string; }; /** TOASTER */ 'po-toaster': { '--color-icon': string; '--color-icon-warning': string; }; /** BADGE */ 'po-badge': { '--color': string; }; 'po-badge[p-status=warning]': { '--color': string; }; 'po-link': { '--text-color-visited': string; }; 'po-rich-text-body .po-rich-text-body:focus-visible, po-info .po-info-link:focus-visible, po-list-view a.po-list-view-title-link:focus-visible, po-stepper-circle .po-stepper-circle:focus-visible': { 'border-color': string; 'outline-color': string; 'outline-width': string; 'outline-style': string; 'outline-offset': string; }; 'po-container': { '--background': string; }; 'div.po-lookup-filter-content input.po-input, input.po-input, po-datepicker, po-datepicker-range, po-decimal, po-email, po-input, po-login, po-lookup, po-number, po-password, po-url, po-combo, po-search, po-select, po-multiselect': { '--background-disabled': string; }; 'po-input input:-webkit-autofill, po-datepicker input:-webkit-autofill, po-datepicker-range input:-webkit-autofill, po-decimal input:-webkit-autofill, po-email input:-webkit-autofill, po-input input:-webkit-autofill, po-login input:-webkit-autofill, po-lookup input:-webkit-autofill, po-number input:-webkit-autofill, po-password input:-webkit-autofill, po-url input:-webkit-autofill, po-combo input:-webkit-autofill': { '-webkit-background-clip': string; '-webkit-text-fill-color': string; transition: string; 'box-shadow': string; }; 'po-overlay, po-page-slide': { '--color-overlay': string; }; /** SELECT */ 'po-select': { '--color-hover': string; }; /** DROPDOWN */ '.po-listbox-group-header .po-tag': { color: string; 'background-color': string; }; }; onRoot: { '--color-neutral': string; '--color-secondary': string; '--color-secondary-light-20': string; '--color-secondary-light-40': string; '--color-secondary-dark-20': string; '--color-secondary-dark-40': string; '--color-secondary-dark-80': string; '--color-black-alpha-10': string; '--color-black-alpha-15': string; '--color-black-alpha-30': string; '--color-primary-light-80': string; '--color-primary-light-95': string; '--color-primary-alpha-50': string; '--color-primary-dark-20': string; '--color-primary-dark-40': string; '--color-secondary-dark-60-alpha-70': string; '--color-tertiary-light-90': string; '--color-tertiary-dark-5': string; '--color-page-background-color-page': string; '--color-toolbar-color-badge-text': string; '--shadow-popover-box-shadow': string; '--shadow-popover-box-shadow-arrow': string; '--color-calendar-background-color-box-background-range': string; '--color-stepper-circle-disabled': string; '--color-stepper-bar-disabled': string; '--color-caption-categorical-01': string; '--color-caption-categorical-02': string; '--color-caption-categorical-03': string; '--color-caption-categorical-04': string; '--color-caption-categorical-05': string; '--color-caption-categorical-06': string; '--color-caption-categorical-07': string; '--color-caption-categorical-08': string; '--color-caption-categorical-overlay-01': string; '--color-caption-categorical-overlay-02': string; '--color-caption-categorical-overlay-03': string; '--color-caption-categorical-overlay-04': string; '--color-caption-categorical-overlay-05': string; '--color-caption-categorical-overlay-06': string; '--color-caption-categorical-overlay-07': string; '--color-caption-categorical-overlay-08': string; }; }; declare const poThemeDefaultCategoricalsDarkAA: PoThemeColorCategorical; declare const poThemeDefaultCategoricalsOverlayDarkAA: PoThemeColorCategorical; /** * Define estilos específicos por componente e onRoot para temas escuros. */ declare const poThemeDefaultDarkValuesAA: { perComponent: { '.po-tab-border-active': { 'background-color': string; }; 'po-overlay': { '--color-overlay': string; }; 'po-modal': { '--color-overlay': string; }; 'po-toaster': { '--color-icon': string; '--color-icon-warning': string; }; 'po-badge': { '--color': string; }; 'po-badge[p-status=warning]': { '--color': string; }; 'po-link': { '--text-color-visited': string; }; 'po-rich-text-body .po-rich-text-body:focus-visible, po-info .po-info-link:focus-visible, po-list-view a.po-list-view-title-link:focus-visible, po-stepper-circle .po-stepper-circle:focus-visible': { 'border-color': string; 'outline-color': string; 'outline-width': string; 'outline-style': string; 'outline-offset': string; }; 'po-container': { '--background': string; }; 'div.po-lookup-filter-content input.po-input, input.po-input, po-datepicker, po-datepicker-range, po-decimal, po-email, po-input, po-login, po-lookup, po-number, po-password, po-url, po-combo, po-search, po-select, po-multiselect': { '--background-disabled': string; }; 'po-input input:-webkit-autofill, po-datepicker input:-webkit-autofill, po-datepicker-range input:-webkit-autofill, po-decimal input:-webkit-autofill, po-email input:-webkit-autofill, po-input input:-webkit-autofill, po-login input:-webkit-autofill, po-lookup input:-webkit-autofill, po-number input:-webkit-autofill, po-password input:-webkit-autofill, po-url input:-webkit-autofill, po-combo input:-webkit-autofill': { '-webkit-background-clip': string; '-webkit-text-fill-color': string; transition: string; 'box-shadow': string; }; 'po-overlay, po-page-slide': { '--color-overlay': string; }; 'po-select': { '--color-hover': string; }; '.po-listbox-group-header .po-tag': { color: string; 'background-color': string; }; }; onRoot: { '--color-caption-categorical-01': string; '--color-caption-categorical-02': string; '--color-caption-categorical-03': string; '--color-caption-categorical-04': string; '--color-caption-categorical-05': string; '--color-caption-categorical-06': string; '--color-caption-categorical-07': string; '--color-caption-categorical-08': string; '--color-caption-categorical-overlay-01': string; '--color-caption-categorical-overlay-02': string; '--color-caption-categorical-overlay-03': string; '--color-caption-categorical-overlay-04': string; '--color-caption-categorical-overlay-05': string; '--color-caption-categorical-overlay-06': string; '--color-caption-categorical-overlay-07': string; '--color-caption-categorical-overlay-08': string; '--color-neutral': string; '--color-secondary': string; '--color-secondary-light-20': string; '--color-secondary-light-40': string; '--color-secondary-dark-20': string; '--color-secondary-dark-40': string; '--color-secondary-dark-80': string; '--color-black-alpha-10': string; '--color-black-alpha-15': string; '--color-black-alpha-30': string; '--color-primary-light-80': string; '--color-primary-light-95': string; '--color-primary-alpha-50': string; '--color-primary-dark-20': string; '--color-primary-dark-40': string; '--color-secondary-dark-60-alpha-70': string; '--color-tertiary-light-90': string; '--color-tertiary-dark-5': string; '--color-page-background-color-page': string; '--color-toolbar-color-badge-text': string; '--shadow-popover-box-shadow': string; '--shadow-popover-box-shadow-arrow': string; '--color-calendar-background-color-box-background-range': string; '--color-stepper-circle-disabled': string; '--color-stepper-bar-disabled': string; }; }; /** * Define estilos específicos por componente e onRoot para temas de acessibilidade AAA. */ declare const poThemeDefaultAAA: { perComponent: {}; onRoot: { '--font-family': string; '--font-family-theme': string; '--font-family-theme-bold': string; '--font-family-theme-extra-light': string; '--font-family-heading': string; '--font-family-code': string; }; }; /** * Define estilos específicos por componente e onRoot para temas de acessibilidade AA. */ declare const poThemeDefaultAA: { perComponent: {}; onRoot: { '--outline-width': string; '--outline-width-focus-visible': string; }; }; /** * Tokens de tema padrão para temas claros. */ declare const poThemeDefaultLight: PoThemeTokens; /** * Tokens de tema padrão para o tema escuro. */ declare const poThemeDefaultDark: PoThemeTokens; /** * Tema padrão. */ declare const poThemeDefault: PoTheme; /** * @usedBy PoWidgetComponent * * @description * * Interface para definição do avatar no `po-widget`. */ interface PoWidgetAvatar { /** * Fonte da imagem que pode ser um caminho local (`./assets/images/logo-black-small.png`) * ou um servidor externo (`https://po-ui.io/assets/images/logo-black-small.png`). */ src?: string; /** * @optional * * @description * * Tamanho de exibição do componente `po-avatar`. * * Valores válidos: * - `xs` (24x24) * - `sm` (32x32) * - `md` (64x64) * - `lg` (96x96) * - `xl` (144x144) * * @default `md` */ size?: string; /** * Permite a criação de template customizado para o avatar * * ``` * * * * ... * * ``` */ customTemplate?: TemplateRef; /** * @optional * * @description * * Define a largura em porcentagem do `customTemplate`. * * O valor máximo aceito é `50%`. */ widthCustomTemplate?: string; } /** * * @description * * O componente `po-widget` é recomendado para exibição de *dashboards*, podendo ser utilizado * para incluir vários tipos de conteúdo como: gráficos, tabelas, grids e imagens. * * Além da exibição de conteúdos, este componente possibilita adicionar ações e um link * para ajuda, como também possibilita ser utilizado com ou sem sombra. * * Para controlar sua largura, é possível utilizar o [Grid System](/guides/grid-system) para um maior * controle de seu redimensionamento, assim possibilitando o tratamento para diferentes resoluções. * * #### Boas práticas * * Utilize um tamanho mínimo de largura de aproximadamente `18.75rem` no componente. * * #### Acessibilidade tratada no componente * * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas. São elas: * - Utiliza medidas relativas, para se adequar às preferências e necessidades de quem for utilizar o sistema. * - Desenvolvido com uso de controles padrões HTML, o que permite a identificação 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)) * - Quando selecionável, prevê interação por teclado, podendo ser selecionado através da tecla space (WCAG [2.4.1 - Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)) * * #### 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)` | * | `--font-weight` | Peso da fonte | `var(--font-weight-bold)` | * | `--font-color` | Cor da fonte | `var(--color-neutral-dark-95)` | * | `--padding` - `@deprecated 21.x.x` | Preenchimento do componente | `1rem` | * | `--padding-header` | Preenchimento do header | `var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)` | * | `--padding-body` | Preenchimento do body | `var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)` | * | `--padding-avatar` | Preenchimento do avatar | `var(--spacing-sm) 0 var(--spacing-xs) var(--spacing-sm)` | * | `--padding-footer` | Preenchimento do footer | `var(--spacing-xs) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)` | * | `--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 de background | `var(--color-neutral-light-00)` | * | `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-md)` | * | **Hover** | | | * | `--border-color-hover` | Cor da borda no estado hover | `var(--color-action-hover)` | * | **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)` | * */ declare class PoWidgetBaseComponent { private _size?; /** Descrição da segunda ação. */ /** * @optional * * @description * Define o label e exibe a ação secundária no footer do componente. * * > Exibida apenas quando `p-primary-label` estiver definida. */ secondaryLabel?: string; /** * @optional * * @description * * Caso verdadeiro o botão da ação `p-primary-label` ativará o modo `danger`. * * > Incompatível com o tipo **tertiary** da propriedade `p-kind-primary-action`. * * @default `false` */ dangerPrimaryAction: boolean; /** * @optional * * @description * * Caso verdadeiro o botão da ação `p-secondary-label` ativará o modo `danger`. * * > Incompatível com o tipo **tertiary** da propriedade `p-kind-primary-action`. * * @default `false` */ dangerSecondaryAction: boolean; /** * @optional * * @description * * Define o estilo do botão da ação `p-primary-label`, conforme o enum `PoButtonKind`. * * @default `tertiary` */ kindPrimaryAction?: string; /** * @optional * * @description * * Define o estilo do botão da ação `p-secondary-label`, conforme o enum `PoButtonKind`. * * @default `tertiary` */ kindSecondaryAction?: string; /** * @optional * * @description * * Label da tag exibida no header. * * > Quando a tag atingir uma largura máxima de 15rem (240px), será truncado com reticências. * O conteúdo completo poderá ser visualizado ao passar o mouse sobre a tag, por meio do tooltip. */ tagLabel?: string; /** * @optional * * @description * * Define o tipo da `p-tag`, conforme o enum **PoTagType**. * * Valores válidos: * - `success`: cor verde utilizada para simbolizar sucesso ou êxito. * - `warning`: cor amarela que representa aviso ou advertência. * - `danger`: cor vermelha para erro ou aviso crítico. * - `info`: cor azul claro que caracteriza conteúdo informativo. * - `neutral`: cor cinza claro para uso geral. * * @default `success` */ tagType: PoTagType | string; /** * @optional * * @description * * Define o ícone exibido ao lado do label da `p-tag`. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones PO UI](https://po-ui.io/icons), conforme exemplo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca * esteja carregada no projeto: * ``` * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ tagIcon: string | TemplateRef; /** * @Input p-tag-position * * @optional * * @description * Define o posicionamento da `po-tag` no cabeçalho do Widget: * - `right`: posicionada no canto superior direito do cabeçalho. * - `top`: posicionada à esquerda, acima do título (quando houver). * - `bottom`: posicionada à esquerda, abaixo do título (quando houver). * * @default `right` */ tagPosition: i0.InputSignalWithTransform; /** * @optional * * @description * * Lista de ações exibidas no header do componente. * As propriedades das ações seguem a interface `PoPopupAction`. */ actions: Array; /** * @optional * * @description * * Define o tamanho dos botões do componente: * - `small`: altura de 32px (disponível apenas para acessibilidade AA). * - `medium`: altura de 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @Input p-avatar * * @optional * * @description * * Define o avatar a ser exibido à esquerda no Widget. */ avatar: i0.InputSignalWithTransform; /** * @optional * * @description * * Evento disparado quando o usuário clicar no componente. * > Quando este evento está em uso, uma sombra (shadow) é aplicada automaticamente ao componente. */ click: EventEmitter; /** * @optional * * @description * * Evento disparado quando a propriedade `p-disabled` for alterada. */ onDisabled: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar na ação `p-primary-label`. */ primaryAction: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar na ação `p-secondary-label`. */ secondaryAction: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar em **Configurações** incluído no menu de ações do header. */ setting: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar no título definido em `p-title`. */ titleAction: EventEmitter; containerHeight?: string; id: string; private _background?; private _disabled?; private _height?; private _help?; private _noShadow?; private _primary?; private _primaryLabel?; private _title?; /** * @optional * * @description * * Define uma imagem de fundo. * > Se a imagem escolhida intervir na legibilidade do texto contido no `p-widget`, * pode-se utilizar a propriedade `p-primary` em conjunto para que os textos fiquem na cor branca. * */ set background(value: string); get background(): string; /** * @optional * * @description * * Desabilita o componente. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Define a altura do componente. * > Caso não seja informado valor, a propriedade irá assumir o tamanho do conteúdo. */ set height(value: number); get height(): number; /** * @optional * * @description * * Link de ajuda incluído no menu de ações do header. */ set help(value: string); get help(): string; /** * * @optional * * @description * * Desabilita a sombra do componente quando o mesmo for clicável. * > A sombra é exibida por padrão apenas quando o evento `p-click` está definido. * * @default `true` */ set noShadow(value: boolean); get noShadow(): boolean; /** * @optional * * @description * * Opção para que o `po-widget` fique em destaque. * * @default `false` */ set primary(value: boolean); get primary(): boolean; /** * @optional * * @description * * Define o label e exibe a ação primária no footer do componente. * */ set primaryLabel(value: string); get primaryLabel(): string; /** * @optional * * @description * * Título do componente. * * > Quando o conteúdo exceder o espaço disponível, o texto será truncado com reticências. O conteúdo completo poderá * ser visualizado ao passar o mouse sobre a tag, por meio do tooltip. */ set title(value: string); get title(): string; private transformAvatar; private transformTagPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_dangerPrimaryAction: any; static ngAcceptInputType_dangerSecondaryAction: any; } /** * @docsExtends PoWidgetBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * */ declare class PoWidgetComponent extends PoWidgetBaseComponent implements OnInit, OnChanges, AfterViewInit { protected cd: ChangeDetectorRef; protected poTheme: PoThemeService; popupTarget: any; literals: any; hasContent: boolean; poPopupComponent: PoPopupComponent; buttonPopUp: PoButtonComponent; wrapperInfo: ElementRef; wrapperTitle: ElementRef; tagElement: ElementRef; contentContainer: ElementRef; get showTitleAction(): boolean; avatarSrc: i0.Signal; avatarSize: i0.Signal; avatarCustomTemplate: i0.Signal>; avatarWidthCustomTemplate: i0.Signal; constructor(); ngAfterViewInit(): void; get a11Level(): PoThemeA11yEnum; ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; hasTitleHelpOrSetting(): boolean; onClick(event: MouseEvent): void; onKeyDown(event: KeyboardEvent): void; openHelp(): void; runPrimaryAction(): void; runSecondaryAction(): void; runTitleAction(event: MouseEvent): void; setHeight(height: number): void; settingOutput(): void; togglePopup(targetRef: any, event: any): void; showTooltip(): boolean; closePopUp(): void; private checkDefaultActions; private updateContent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente po-widget */ declare class PoWidgetModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoHeaderComponent * * @description * * *Interface* que define uma lista de ações no sub-menu. * */ interface PoHeaderActions { /** * * * @description * * Label da ação */ label: string; /** * * @optional * * @description * * Evento da ação * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * * * @description * * link utilizado no redirecionamento das páginas. * */ link?: string; /** * * @optional * * @description * * Identificador da ação */ id?: string; $selected?: boolean; $internalRoute?: boolean; } /** * @usedBy PoHeaderComponent * * @description * * *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. * */ interface PoHeaderActionTool { /** * * @optional * * @description * * Título da ação */ label?: string; /** * * @optional * * @description * * Texto que será apresentado na tooltip */ tooltip?: string; /** * * @optional * * @description * * Ícone do botão de ação */ icon?: string; /** * * @optional * * @description * * Template que será utilizado na ação */ popover?: PoHeaderActionPopoverAction; /** * * @optional * * @description * * Evento emitido ao clicar em uma ação * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * * @optional * * @description * * Itens de ações * */ items?: Array; /** * * @optional * * @description * * Valor númerico com a repsentação de notificações * */ badge?: number; /** * * * @description * * link utilizado no redirecionamento das páginas. * */ link?: string; $selected?: any; } /** * @usedBy PoHeaderComponent * * @description * * *Interface* que define um template para uma ação. * */ interface PoHeaderActionPopoverAction { /** * * @description * * Template que será renderizado dentro do popover */ content: TemplateRef; } /** * @usedBy PoHeaderComponent * * @description * * *Interface* que define uma lista de ações. * */ interface PoHeaderActionToolItem { /** * * @description * * Label da ação */ label: string; /** * * @description * * Evento emitido ao clicar em uma ação * * Exemplo: `action: this.myFunction.bind(this)` */ action: Function; } /** * @usedBy PoHeaderComponent * * @description * * *Interface* que define a seção de brand. * */ interface PoHeaderBrand { /** * * @description * * Título da marca * */ title?: string; /** * * @optional * * @description * * Imagem da marca * */ logo?: string; /** * * @optional * * @description * * Imagem da marca quando a tela é menor que 960px * */ smallLogo?: string; /** * * @optional * * @description * * Evento da ação * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * * @optional * * @description * * link utilizado no redirecionamento das páginas. * */ link?: string; } /** * @usedBy PoHeaderComponent * * @description * * Interface para definição das literais usadas no `po-header`. */ interface PoHeaderLiterals { /** Texto exibido no item de menu no qual os itens do header são agrupados quando está no modo responsivo. */ headerLinks?: string; /** Texto para indicação de notificação, caso seja passado um valor válido na propriedade `badge` */ notifications?: string; } /** * @usedBy PoHeaderComponent * * @description * * *Interface* que define a seção de Customer do header. * */ interface PoHeaderUser { /** * * @description * * Logo representando o perfil * */ avatar: string; /** * * @description * * Imagem da marca * */ customerBrand: string; /** * * @optional * * @description * * Evento emitido ao clicar na seção * * Exemplo: `action: this.myFunction.bind(this)` */ action?: Function; /** * * @optional * * @description * * Indicação representando o estado do usuário * Valores válidos: * - `positive`: Define a cor do `status` com a cor de feedback positivo. * - `negative`: Define a cor do `status` com a cor de feedback negative. * - `warning`: Define a cor do `status` com a cor de feedback warning. * - `disabled`: Define a cor do `status` com a cor de feedback disabled * */ status?: 'positive' | 'negative' | 'warning' | 'disabled'; /** * * @optional * * @description * * Template que será utilizado na ação */ popover?: PoHeaderActionPopoverAction; /** * * @optional * * @description * * Itens de ações * * > Caso seja passado items e popover, o componente irá renderizar o popover e os itens serão ignorados * */ items?: Array; } /** * @description * * 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: * ``` * ... * * *
* * * * * * *
* ... * ``` * * Passando os itens diretamente para o `po-header` pela propriedade `p-menus`: * ``` * ... * * *
* * * *
* ... * ``` * * #### 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)` | * | `--text-color` | Cor do texto | `var(--color-neutral-dark-70)` | | --- | * | `--outline-color-focused` | Cor do outline dos itens de sub-menu e customer | `var(--color-neutral-dark-95)` | | --- | * | `--object-fit-brand` | Valor do object-fit da imagem do logo | `contain` | | --- | * | `--object-fit-customer` | Valor do object-fit da imagem do logo na seção customer | `contain` | | --- | * | `--object-fit-customer-user` | Valor do object-fit da imagem do avatar | `cover` | | --- | * | **Header** | | | * | `--background-color` | Cor de background do header | `var(--color-neutral-light-05)` | * | `--border-radius-bottom-left` | Valor do radius do lado esquerdo do header | `var(--border-radius-md)` | * | `--border-radius-bottom-right` | Valor do radius do lado direito do header | `var(--border-radius-md)` | * | `--base shadow` | Cor da sombra do header | `0 1px 8px rgba(0, 0, 0, 0.1)` | * | **Sub-menu** | | | * | `--border-radius` | Valor do radius dos itens do sub-menu | `var(--border-radius-md);` | * | `--text-color-submenu` | Cor do texto dos itens do sub-menu | `var(--color-brand-01-base)` | * | `--icon-color` | Cor do ícone do sub-menu com itens | `var(--color-brand-01-base)` | * | `--border-color` | Cor da borda | `var(--color-transparent)` | * | `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-none)` | * | **Sub-menu - Hover** | | | * | `--background-hover` | Cor de background dos itens do sub-menu no estado hover | `var(--color-brand-01-lighter)` | * | `--icon-color-hover` | Cor do ícone dos itens de sub-menu no estado hover | `var(--color-brand-01-darkest)` | * | `--text-color-hover` | Cor do texo dos itens de sub-menu no estado hover | `var(--color-brand-01-darkest)` | * | **Sub-menu - pressed** | | | * | `--background-pressed` | Cor de background dos itens do sub-menu no estado pressed | `var(--color-brand-01-light)` | * | `--icon-color-pressed` | Cor do ícone dos itens de sub-menu no estado pressed | `var(--color-brand-01-darkest)` | * | `--text-color-pressed` | Cor do texo dos itens de sub-menu no estado pressed | `var(--color-brand-01-darkest)` | * | **Sub-menu - selected** | | | * | `--background-selected` | Cor de background dos itens do sub-menu no estado selected | `var(--color-brand-01-light)` | * | `--icon-color-selected` | Cor do ícone dos itens de sub-menu no estado selected | `var(--color-neutral-dark-95)` | * | `--text-color-selected` | Cor do texo dos itens de sub-menu no estado selected | `var(--color-brand-01-darkest)` | * | **Customer** | | | * | `--background-color-customer` | Cor do background da seção customer | `var(--color-neutral-light-00)` | * | `--border-color` | Cor da borda da seção customer | `var(--color-neutral-light-10)` | * | `--border-style` | Estilo da borda da seção customer | `solid` | * | `--border-width` | Largura da borda da seção customer | `var(--border-width-sm)` | * | **Customer - hover** | | | * | `--background-color-customer-hover` | Cor do background da seção customer no estado hover | `var(--color-brand-01-lighter)` | * | `--background-color-customer-hover` | Cor do background da seção customer no estado hover | `var(--color-brand-01-lighter)` | * | **Customer - pressed** | | | * | `--background-color-customer-pressed` | Cor do background da seção customer no estado pressed | `var(--color-brand-01-light)` | * */ declare abstract class PoHeaderBaseComponent { private _menuItems; menuCollapseJoin: any[]; menuCollapseJoinExternal: any[]; private _brand; private _literals; private language; /** * @optional * * @description * * 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. * Essa propriedade possibilita a escolha de quantos itens estarão dentro do botão de overflow. * * > Ao utilizar essa propriedade o `po-header` não irá realizar o calculo automatíco de itens. * */ amountMore?: number; /** * @optional * * @description * * Esconde o botão de menu colapsado. * */ hideButtonMenu?: boolean; /** * @optional * * @description * * Habilita campo para filtrar itens no menu * */ filterMenu?: boolean; sideMenuOnlyAction?: boolean; forceActionTools?: boolean; notChangeContext?: boolean; /** * @optional * * @description * * Propriedade para configurar a seção de brand do `po-header` * * Caso seja enviada uma string, apenas o logo sera mostrado com o valor da string passada. * */ set brand(value: PoHeaderBrand | string); get brand(): PoHeaderBrand | string; /** * @optional * * @description * * Propriedade para configurar a seção de tools do `po-header` * * > Máximo de 3 itens, o componente irá ignorar os itens caso seja mandado mais itens que o suportado. * */ actionsTools: Array; /** * @optional * * @description * * Propriedade para configurar a seção de headerUser do `po-header` * */ headerUser: PoHeaderUser; /** * @optional * * @description * * Propriedade para configurar a seção de menu do `po-header`. * Cada item pode receber uma label e uma ação * * > Os itens irão ficar visíveis em uma tela de até 960px * */ set menuItems(items: Array); /** * @optional * * @description * * Lista dos itens do menu. Se o valor estiver indefinido ou inválido, será inicializado como um array vazio. * * > O menu poderá ser aberto via botão hamburguer quando a tela tiver menos que 960px * */ menuCollapse: Array; /** * @optional * * @description * * Template customiado que será renderizado após os itens definidos na propriedade `p-menu-items` * */ headerTemplate: TemplateRef; /** * @optional * * @description * * Objeto com a literal usada na propriedade `p-literals`. * * Para customizar a literal, basta declarar um objeto do tipo `PoHeaderLiterals` conforme exemplo abaixo: * * ``` * const customLiterals: PoHeaderLiterals = { * headerLinks: 'Itens de navegação', * notifications: 'Mensagens' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoHeaderLiterals); get literals(): PoHeaderLiterals; /** * @optional * * @description * * Evento emitido ao clicar no botão para colapsar ou expandir menu. * */ colapsedMenuEvent: EventEmitter; constructor(languageService: PoLanguageService); get menuItems(): Array; private generateRandomId; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_filterMenu: any; } declare class PoHeaderMenuItemComponent implements OnChanges, OnInit, OnDestroy { private cd; private router; buttonMoreRef: any; lastItemSelected: PoHeaderActions; selectedItem: boolean; literals: any; private routeSubscription; private resizeSubscription; buttonMoreElement: ElementRef; poPopupElement: PoPopupComponent; item: PoHeaderActions; itemOverFlow: Array; overflowButton: boolean; itemClick: EventEmitter; constructor(cd: ChangeDetectorRef, router: Router, languageService: PoLanguageService); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; openListButtonMore(): void; onKeyDownButtonMore(event: any): void; onKeyDownButtonList(event: any, item: PoHeaderActions): void; onAction(item: PoHeaderActions, itemDefault?: boolean): void; onClosePopup(): void; private checkActiveItemByUrl; private checkRouterChildrenFragments; private subscribeToRoute; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsExtends PoHeaderBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoHeaderComponent extends PoHeaderBaseComponent implements AfterViewInit, OnChanges, OnInit, OnDestroy { private cd; private elRef; private menuGlobalService; afterViewInitWascalled: boolean; showMenu: boolean; visibleMenuItems: Array; overflowItems: Array; showOverflow: boolean; resizeSubscription: Subscription; private menusSubscription; private applicationMenuSubscription; private menuIdSubscription; private menuonChangesSubscription; private removedMenuSubscription; previousMenuComponentId: any; private resizeSub; menuExternal: any[]; existMenuExternal: boolean; applicationMenu: PoMenuComponent; private id; private currentWidth; private previousMenusItems; buttonFirstAction: ElementRef; buttonFirstActionRef: ElementRef; navElement: ElementRef; menuWrapperBrand: ElementRef; menuWrapperTools: ElementRef; overflowButton: ElementRef; overflowButtonComponentEl: PoHeaderMenuItemComponent; menuSubItems: QueryList>; menuHeaderTemplate: PoMenuHeaderTemplateDirective; set menuComponent(menu: PoMenuComponent); constructor(cd: ChangeDetectorRef, elRef: ElementRef, menuGlobalService: PoMenuGlobalService, poLanguageService: PoLanguageService); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; ngOnDestroy(): void; toggleOverflowDropdown(): void; updateMenu(): void; updateButtonMore(): void; onClickMenu(): void; onCloseMenu(): void; handleSmallSreen(): void; handleLargeSreen(): void; private combineItems; private combineItemsExternal; onSelected({ item, focus }: { item: PoHeaderActions; focus: boolean; }): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoHeaderbrandComponent implements AfterViewInit, OnChanges, OnDestroy { private cd; private router; private resizeSub; showTitleTooltip: boolean; smallLogo: boolean; targetRef: ElementRef; titleBrand: ElementRef; brand: PoHeaderBrand; clickMenu: EventEmitter; hideButtonMenu?: boolean; menuCollapse: Array; externalMenu: boolean; constructor(cd: ChangeDetectorRef, router: Router); ngAfterViewInit(): void; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; onClickLogo(): void; get showTooltip(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoHeaderToolsComponent { private router; private cd; _actionTools: Array; buttonActionElements: QueryList; buttonActionComponents: QueryList; poPopupActions: QueryList; poPopoverActions: QueryList; forceActionTools?: boolean; set actionTools(value: Array); literals: PoHeaderLiterals; get actionTools(): Array; get popoverIndexes(): Array; headerTemplate: TemplateRef; constructor(router: Router, cd: ChangeDetectorRef); onClickAction(index: number): void; checkSelected(index: number): boolean; onClosePopup(index: number): void; getAriaLabel(action: PoHeaderActionTool): string; private checkLink; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoHeaderCustomerComponent { literals: any; poPopupAction: PoPopupComponent; poPopoverAction: PoPopoverComponent; headerUser: PoHeaderUser; constructor(languageService: PoLanguageService); onClickPopup(): void; onClickUserSection(): void; onClickClosePopover(): void; onKeyDownCustomer(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do componente `po-header`. */ declare class PoHeaderModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoComponentsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoGuardsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @docsPrivate * * @usedBy PoHttpInterceptorService * * @description * * Interface para as mensagens do `po-http-interceptor`. */ interface PoHttpInterceptorDetail { /** Código */ code: string; /** Título do detalhe */ detailTitle?: string; /** Mensagem detalhada */ detailedMessage: string; /** Lista de detalhes da mensagem */ details?: Array; /** Mensagem */ message: string; /** Tipo do detalhe que pode ser: success, error, warning e info */ type?: string; } /** * @docsPrivate * * @description * * Componente para a modal de detalhes exibida pelo interceptor */ declare class PoHttpInterceptorDetailComponent implements OnInit { private languageService; modal: PoModalComponent; closed: EventEmitter; details: Array; title: string; private language; private literals; primaryAction: PoModalAction; constructor(languageService: PoLanguageService); ngOnInit(): void; set detail(details: Array); close(): void; formatDetailItemTitle(detail: any): any; open(): void; typeColor(type: string): string; typeValue(type: string): string; private addValidDetail; private getValidDetailProperties; private filterByValidDetails; private formatTitle; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoHttpInterceptorModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoHttpRequestModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoInterceptorsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoPipesModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoDividerComponent * * @description * * Enum para definição da espessura da linha. */ declare enum PoDividerSize { /** A espessura da linha fica com 1px. */ small = "small", /** A espessura da linha fica com 2px. */ medium = "medium", /** A espessura da linha fica com 4px. */ large = "large" } /** * @usedBy PoDynamicFormComponent * * @description * * Estrutura dos valores que serão disparados quando houver uma mudança em um campo ou no formulário. */ interface PoDynamicFormFieldChanged { /** Valor da propriedade do campo. */ property: string; /** Novo valor do campo. */ value: any; } /** * @usedBy PoDynamicFormComponent * * @description * * * Estrutura de retorno da validação de um campo. */ interface PoDynamicFormFieldValidation { /** * Novas definições das propriedades do campo. * * > Não é necessário colocar todas as propriedades, apenas as que foram alteradas. */ field?: PoDynamicFormField; /** Coloca o foco no campo após a validação. */ focus?: boolean; /** Novo valor do campo */ value?: any; } declare const AnimaliaIconDictionary: { [key: string]: string; }; declare const LOADING_ICON_COMPONENT: InjectionToken>; /** * @usedBy PoPageComponent * * @description * * Interface para o atributo `filter` do componente `po-page`. */ interface PoPage { /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** Título da página. */ title?: string; } /** * @usedBy PoPageComponent * * @description * * Interface para o atributo `filter` do componente `po-page`. */ interface PoPageDefault extends PoPage { /** Array de objetos que implementam a interface `PoPageAction`. */ actions?: Array; } interface PoWidgetLiterals { /** * @usedBy PoWidgetComponent * * @optional * * @description * * help: Texto exibido na ação de ajuda. */ help?: string; /** * @usedBy PoWidgetComponent * * @optional * * @description * * configuration: help: Texto exibido na ação de configuração. */ configuration?: string; } /** * Converte o valor de um campo de entrada para booleano. * * Forma de utilização: * * ``` * @Input('p-loading') @InputBoolean() loading: boolean; * ``` */ declare function InputBoolean(): any; /** * @docsPrivate * * @description * * Verifica se uma entrada de um componente foi preenchida. * * Na ausência da propriedade o decorator irá disparar um warn no console * do navegador do usuário. * * > Esta verificação é feita apenas no ngOnInit do componente. * * Forma de utilização: * ``` * @Input('p-label') @InputRequired() label: string; * ``` * * Referência: * https://netbasal.com/how-to-add-angular-component-input-validation-b078a30af97f * https://medium.com/@abdelelmedny/angular-input-decorators-5d38089070aa */ declare function InputRequired(): (target: any, property: string) => void; /** * @description * * 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. * */ declare abstract class PoHttpInterceptorBaseService implements HttpInterceptor { private componentInjector; private notification; private languageService; notificationTypes: string[]; literals: any; private httpInterceptorDetailComponent; constructor(componentInjector: PoComponentInjectorService, notification: any, languageService: PoLanguageService); intercept(request: HttpRequest, next: HttpHandler): Observable>; processResponse(response: HttpResponse, request: HttpRequest): void; processErrorResponse(response: HttpErrorResponse, request: HttpRequest): void; private cloneRequestWithoutParameters; private createModal; private destroyModal; private hasMessage; private hasNoErrorParam; private hasNoMessageParam; private hasParameters; private showNotification; private generateDetailModal; private generateNotificationAction; private generateUrlHelpFunction; } /** * @docsExtends PoHttpInterceptorBaseService * * @example * * * * */ declare class PoHttpInterceptorService extends PoHttpInterceptorBaseService { constructor(notification: PoNotificationService, componentInjector: PoComponentInjectorService, languageService: PoLanguageService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @docsPrivate * * Serviço responsável por efetuar o controle de interação com o serviço de interceptor `PoHttpRequestInterceptorService` * gerenciando o seu estado. */ declare class PoHttpRequesControltService { controlHttpRequest: Subject; getControlHttpRequest(): Observable; send(value?: number): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * 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 }); * } * * ... * * } * ``` * * @example * * * * */ declare class PoHttpRequestInterceptorService implements HttpInterceptor { private controlHttpRequest; private poComponentInjector; private loadingOverlayComponent; private pendingRequests; private overlayRequests; constructor(controlHttpRequest: PoHttpRequesControltService, poComponentInjector: PoComponentInjectorService); intercept(request: HttpRequest, next: HttpHandler): Observable<_angular_common_http.HttpEvent>; getCountPendingRequests(): Observable; private buildLoading; private destroyLoading; private requestCloneWithoutHeaderParam; private setCountPendingRequests; private setCountOverlayRequests; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, LOADING_ICON_COMPONENT, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboModule, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService }; export type { ErrorAsyncProperties, PoAccordionLiterals, PoBreadcrumb, PoBreadcrumbItem, PoButtonGroupItem, PoChartAxisOptions, PoChartDataLabel, PoChartHeaderOptions, PoChartLiterals, PoChartOptions, PoChartSerie, PoCheckboxGroupOption, PoComboFilter, PoComboLiterals, PoComboOption, PoComboOptionGroup, PoDateSeparator, PoDatepickerRange, PoDatepickerRangeLiterals, PoDialogAlertLiterals, PoDialogAlertOptions, PoDialogConfirmLiterals, PoDialogConfirmOptions, PoDialogOptions, PoDisclaimer, PoDisclaimerGroup, PoDisclaimerGroupRemoveAction, PoDropdownAction, PoDynamicFormField, PoDynamicFormFieldChanged, PoDynamicFormFieldValidation, PoDynamicFormLoad, PoDynamicFormValidation, PoDynamicViewField, PoDynamicViewRequest, PoGaugeOptions, PoGaugeRanges, PoGridRowActions, PoHeaderActionPopoverAction, PoHeaderActionTool, PoHeaderActionToolItem, PoHeaderActions, PoHeaderBrand, PoHeaderLiterals, PoHeaderUser, PoHelperOptions, PoI18nConfig, PoI18nConfigContext, PoI18nConfigDefault, PoI18nLiterals, PoLanguage, PoListViewAction, PoListViewLiterals, PoLookupColumn, PoLookupFilter, PoLookupFilteredItemsParams, PoLookupLiterals, PoLookupResponseApi, PoMediaQueryTokens, PoMenuFilter, PoMenuItem, PoMenuItemBadge, PoMenuItemFiltered, PoMenuPanelItem, PoModalAction, PoMultiselectFilter, PoMultiselectLiterals, PoMultiselectOption, PoNavbarIconAction, PoNavbarItem, PoNotification, PoNumberSeparator, PoPage, PoPageAction, PoPageDefault, PoPageDefaultLiterals, PoPageDetailLiterals, PoPageEditLiterals, PoPageFilter, PoPageListLiterals, PoPopupAction, PoProgressAction, PoRadioGroupOption, PoResponseApi, PoRichTextToolbarButtonGroupItem, PoSearchFilterSelect, PoSearchLiterals, PoSearchOption, PoSelectOption, PoSelectOptionGroup, PoSlideItem, PoStepperItem, PoTab, PoTableAction, PoTableBoolean, PoTableColumn, PoTableColumnIcon, PoTableColumnLabel, PoTableColumnSort, PoTableDetail, PoTableDetailColumn, PoTableLiterals, PoTableSubtitleColumn, PoTagLiterals, PoTheme, PoThemeActive, PoThemeColor, PoThemeColorAction, PoThemeColorCategorical, PoThemeColorFeedback, PoThemeColorNeutral, PoThemeToken, PoThemeTokens, PoThemeType, PoToaster, PoToolbarAction, PoToolbarProfile, PoTreeViewItem, PoUploadFileRestrictions, PoUploadLiterals, PoWidgetAvatar, PoWidgetLiterals, poThemeColorBrand };