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, WritableSignal, 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 readonly language; private _literals; private _size?; private _initialSize?; /** * @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); protected onThemeChange(): void; private applySizeBasedOnA11y; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showManagerAccordion: any; static ngAcceptInputType_allowExpandItems: any; } declare class PoAccordionItemHeaderComponent { private readonly 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 readonly 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` * * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**: * * - `caption-tag-01` `caption-tag-02` `caption-tag-03` `caption-tag-04` `caption-tag-05` * - `caption-tag-06` `caption-tag-07` `caption-tag-08` `caption-tag-09` `caption-tag-10` * - `caption-tag-11` `caption-tag-12` `caption-tag-13` `caption-tag-14` `caption-tag-15` * - `caption-tag-16` `caption-tag-17` `caption-tag-18` `caption-tag-19` `caption-tag-20` * - `caption-tag-21` `caption-tag-22` `caption-tag-23` `caption-tag-24` `caption-tag-25` * - `caption-tag-26` `caption-tag-27` `caption-tag-28` `caption-tag-29` `caption-tag-30` * - `caption-tag-31` `caption-tag-32` `caption-tag-33` `caption-tag-34` `caption-tag-35` * * Exemplo de uso: * ``` * * ``` * * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background; * - Para as cores legacy (`color-01` a `color-12`) e cores customizadas, o componente ajusta automaticamente a cor do texto para garantir legibilidade. * - Para as cores **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`), a cor do texto é fixa e definida via token CSS, não sendo possível alterá-la via `p-text-color`. * * > **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. * * > **Atenção:** As cores da paleta **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`) não são aceitas nesta propriedade, * pois possuem cor de texto fixa definida via token CSS. */ 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 readonly el; tagContainer: ElementRef; tagClose: ElementRef; poTag: ElementRef; isClickable: boolean; constructor(); ngOnInit(): void; get iconFromType(): PoTagIcon; get isCaptionTag(): boolean; 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 readonly 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 readonly _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 readonly differenceDiagonalToWidthArrow; private element; private elementOffset; private isCornerAligned; private isSetElementWidth; private readonly 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 elemento 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 readonly elementRef; private readonly renderer; private readonly poControlPosition; private readonly sanitizer; private arrowDirection; private divArrow; private divContent; private isHidden; private lastTooltipText; private textContent; private readonly 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 readonly 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 readonly expandSubscription; private readonly 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 readonly 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?; private _initialSize?; /** * @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; protected onThemeChange(): void; private applySizeBasedOnA11y; 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 readonly _label; private readonly _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 readonly 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 readonly language; private _size?; private _initialSize?; 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); protected onThemeChange(): void; private applySizeBasedOnA11y; 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 { /** * @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; /** * @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; get hostSize(): string; /** * @optional * * @description * * Indica se o helper deve ser exibido no estado desativado, desabilitando interações do usuário. * * @default `false` */ disabled: i0.InputSignal; /** * @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; cornerAligned: 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; width?: number; /** 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; /** * @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 readonly renderer; private readonly poControlPosition; private readonly cd; popoverElement: ElementRef; arrowDirection: string; timeoutResize: any; targetElement: any; afterViewInitWasCalled: boolean; widthPopover: number; private keydownTargetListener?; private keydownPopoverListener?; private resizeObserver; eventListenerFunction: () => void; private readonly tabbableSelector; constructor(renderer: Renderer2, poControlPosition: PoControlPositionService, cd: ChangeDetectorRef); protected onThemeChange(): void; 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; private observeContentResize; private disconnectResizeObserver; 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 { /** * @optional * * @description * * Label do botão. */ readonly label: i0.InputSignal; /** * @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>; /** * @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?; private _initialSize?; 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; /** * @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 `tabindex` do elemento `