import * as i0 from '@angular/core'; import { EventEmitter, ElementRef, TemplateRef, OnInit, OnDestroy, Renderer2, QueryList, OnChanges, ChangeDetectorRef, SimpleChanges, AfterViewInit, Type, ViewContainerRef, DoCheck, AfterViewChecked, IterableDiffers, ComponentFactoryResolver, ApplicationRef, Injector, ComponentRef, PipeTransform, WritableSignal, InjectionToken, ModuleWithProviders, RendererFactory2, AfterContentInit, SimpleChange } 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 i9 from '@angular/cdk/listbox'; import { CdkListbox, CdkOption } from '@angular/cdk/listbox'; 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 _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: i0.InputSignalWithTransform; 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_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. * * A label também pode representar o agrupador de subitens quando a ação possuir `subItems`. */ label: string; /** * @optional * * @description * * Ação que será executada, sendo possível passar o nome ou a referência da função. * * A action também pode ser executada para o agrupador de subitens quando a ação possuir `subItems`. * * > Para que a função seja executada no contexto do componente, utilize *bind*: * `action: this.myFunction.bind(this)` */ action?: Function; /** * @optional * * @description * * Ícone exibido ao lado esquerdo do rótulo. * * Aceita ícones da [Biblioteca de ícones](https://po-ui.io/icons), fontes externas (ex: Font Awesome) * ou um `TemplateRef` para ícones customizados. * * ``` * { label: 'Ação', icon: 'an an-newspaper' } * ``` */ icon?: string | TemplateRef; /** * @optional * * @description * * Atribui uma linha separadora acima do item. */ separator?: boolean; /** * @optional * * @description * * Desabilita a ação. Aceita um valor booleano ou uma função que retorna booleano. */ disabled?: boolean | Function; /** * @optional * * @description * * Define a cor do item. * * Valores válidos: * - `default` * - `danger` */ type?: string; /** * @optional * * @description * * URL para redirecionamento. Aceita rotas internas e links externos. * * 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. * * > Quando informada, tem prioridade sobre a propriedade `action`. */ url?: string; /** * @optional * * @description * * Define se a ação está selecionada. */ selected?: boolean; /** * @optional * * @description * * Define a visibilidade da ação. Aceita um valor booleano ou uma função que retorna booleano. * * @default `true` */ visible?: boolean | Function; $id?: string; /** * @optional * * @description * * Define uma lista de subitens para criação de menus aninhados. * * Ao definir esta propriedade, o item exibirá um ícone indicador de subnível. * Recomenda-se utilizar no máximo três níveis hierárquicos para garantir a usabilidade. * * > As propriedades `disabled`, `type` e `visible` não são aplicadas visualmente ao item agrupador. * * > Quando `url` é informada em um agrupador, o redirecionamento terá prioridade e os subitens não serão abertos. * * > Em subníveis aninhados, o `icon` do agrupador é substituído pelo indicador de navegação (seta). */ subItems?: Array; $subItemTemplate?: TemplateRef; } /** * @description * * Interface para as ações do componente `po-dropdown`. * * @docsExtends PoPopupAction * * @ignoreExtendedDescription * * @usedBy PoDropdownComponent */ interface PoDropdownAction extends PoPopupAction { } 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; cdkListbox?: CdkListbox; cdkOptions?: 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; private getSelectedItem; scrollToAndSelectCurrentItem(): void; protected onListboxFocusIn(event: FocusEvent): 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 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 ` * * * * ``` * * * */ 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; private showPopover; private stabilizePopoverWidth; 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; } /** * Parser seguro de tags de formatação (``, ``, ``, ``, ``). * Não utiliza `innerHTML`. Tags fora da whitelist são removidas (proteção XSS). */ /** Fragmento de texto com flags de formatação. */ interface PoTextFragment { text: string; bold: boolean; italic: boolean; underline: boolean; } /** * @docsExtends PoHelperBaseComponent * * @example * * * * * * * * * * * * * * * * */ declare class PoHelperComponent extends PoHelperBaseComponent implements AfterViewInit, OnDestroy, OnChanges { private readonly cdr; target: ElementRef; popover: PoPopoverComponent; poButton: PoButtonComponent; refreshAnimating: boolean; private static instances; private static idCounter; protected popoverPosition: string; id: string; private boundFocusIn; private readonly poHelperLiterals; protected readonly contentFragments: i0.Signal; constructor(cdr: ChangeDetectorRef); ngAfterViewInit(): 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; protected executeCustomAction(event: Event): void; protected onRefreshAnimationEnd(): 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)` | * | `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` | * | `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` | * | `--shadow-color-hover` | Cor da sombra no estado hover | `var(--color-brand-01-lighter)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | **Disabled** | | | * | `--color-unchecked-disabled`   | Cor pricipal quando não selecionado no estado disabled  | `var(--color-action-disabled)` | * | `--color-checked-disabled`   | Cor pricipal quando selecionado no estado disabled | `var(--color-neutral-dark-70)` | * */ 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 * Define se o título do campo será exibido de forma compacta. * * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por: * - `po-label` * - `p-requirement (showRequired)` * - `po-helper` * * Ou seja, todos os elementos relacionados ao título do campo * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam * a seguir o comportamento de layout compacto. * * Também é possível definir esse comportamento de forma global, * uma única vez, na folha de estilo geral da aplicação, por meio * da customização dos tokens CSS: * * - `--field-container-title-justify` * - `--field-container-title-flex` * * Exemplo: * * ``` * :root { * --field-container-title-justify: flex-start; * --field-container-title-flex: 0 1 auto; * } * ``` * * Dessa forma, o layout compacto passa a ser o padrão da aplicação, * sem a necessidade de definir a propriedade individualmente em cada campo. * * @default `false` */ compactLabel: i0.InputSignalWithTransform; /** * @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 sempre que o valor do model é alterado, seja por interação do usuário * ou por atualização programática (ex: `setValue`, `patchValue`, carregamento assíncrono). * * Diferentemente do `p-change`, que é disparado apenas por interação do usuário, * o `p-change-model` cobre todos os cenários de alteração de valor. * * Não emite quando o novo valor é idêntico ao anterior (deduplicação automática). */ 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; checkboxValue: boolean | null | string; checkBoxRequired: boolean; disabladTabindex: boolean; displayAdditionalHelp: boolean; id: string; modelLastUpdate: any; propagateChange: any; onTouched: any; private _disabled?; private _size?; private _initialSize?; /** * @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); get size(): string; /** * @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; /** * @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); protected onThemeChange(): void; 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; controlChangeModelEmitter(value: any): void; private applySizeBasedOnA11y; 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; static ngAcceptInputType_disabled: 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 readonly 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; /** * Define se o título do campo será exibido de forma compacta. * * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por: * - `po-label` * - `p-requirement (showRequired)` * - `po-helper` * * Ou seja, todos os elementos relacionados ao título do campo * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam * a seguir o comportamento de layout compacto. */ compactLabel: i0.InputSignalWithTransform; constructor(cdr: ChangeDetectorRef); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; private setRequirement; handleLabelTooltip(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_optional: any; static ngAcceptInputType_required: any; } /** * @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. * * Suporta subníveis (submenus) quando as ações possuem a propriedade `subItems`, * habilitando navegação hierárquica automaticamente. * * É 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; get computedListboxSubitems(): 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; openEvent: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * * @docsExtends PoPopupBaseComponent * * @example * * * * * * * * * * * * * * * * * * */ declare class PoPopupComponent extends PoPopupBaseComponent implements AfterViewInit { id: string; private readonly renderer; private readonly router; private readonly 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 readonly 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 readonly 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 readonly 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 readonly service; private readonly 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 { /** * @description * * Lista de botões. */ readonly buttons: i0.InputSignal; private _size?; private _initialSize?; 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; protected onThemeChange(): void; private applySizeBasedOnA11y; 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; } /** * @usedBy PoTimerComponent * * @description * * Enum para definição do formato de exibição do timer. */ declare enum PoTimerFormat { /** Formato de 24 horas (0-23). */ Format24 = "24", /** Formato de 12 horas (1-12) com indicador AM/PM. */ Format12 = "12" } /** * @docsPrivate * * @description * * O `po-timer` é um componente de seleção de horário que apresenta colunas de horas, minutos e, opcionalmente, segundos * para que a pessoa usuária escolha um horário de forma intuitiva. * * O componente é recomendado para cenários onde é necessário selecionar um horário específico, podendo ser utilizado * de forma independente ou integrado ao `po-timepicker` como painel flutuante de seleção. * * O valor de saída segue o formato ISO 8601 para horários (`HH:mm` ou `HH:mm:ss`). * * **Importante:** * - Horários fora do intervalo (`p-min-time` / `p-max-time`) aparecem desabilitados sem alterar o *model*. * * #### Boas práticas * * - Utilize o formato de 24 horas quando o contexto for profissional ou técnico (ex: agendamentos, logs). * - Utilize o formato de 12 horas (AM/PM) quando o público-alvo estiver habituado a esse padrão. * - Defina intervalos de minutos adequados ao contexto: intervalos de 5 minutos para agendamentos gerais, * intervalos de 15 minutos para reuniões, ou intervalos de 1 minuto para precisão. * - Configure limites mínimo e máximo para impedir seleção de horários inválidos no contexto da aplicaçã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 as colunas e navegação nas células * por meio das setas direcionais (Arrow Up/Down). * - 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) * - Leitores de tela: Cada coluna e célula possui atributos ARIA para correta leitura por leitores de tela * como NVDA e VoiceOver. * * #### 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 | * |--------------------------------|------------------------------------------------------|-----------------------------------| * | **Base** | | | * | `--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)` | * | **Display** | | | * | `--color-display` | Cor da fonte do display | `var(--color-brand-01-base)` | * | `--font-weight-display` | Peso da fonte do display | `var(--font-weight-bold)` | * | `--border-radius-display` | Raio da borda do display | `var(--border-radius-md)` | * | **Hover** | | | * | `--color-hover-display` | Cor da fonte do display ao passar o mouse | `var(--color-brand-01-darkest)` | * | `--background-hover-display` | Cor de fundo do display ao passar o mouse | `var(--color-brand-01-lighter)` | * | **Focus** | | | * | `--outline-color-focused-display` | Cor do outline do estado de focus | `var(--color-brand-01-darkest)` | * | **Pressed** | | | * | `--background-pressed-display` | Cor de fundo do display ao pressionar | `var(--color-brand-01-light)` | * | **Disabled** | | | * | `--color-disabled-display` | Cor da fonte do display desabilitado | `var(--color-neutral-light-30)` | * | **Transitions** | | | * | `--transition-duration` | Duração da transição do display | `var(--duration-extra-fast)` | * | `--transition-property` | Atributo da transição do display | `all` | * | `--transition-timing` | Tipo de transição do display | `var(--timing-standart)` | */ declare class PoTimerBaseComponent implements ControlValueAccessor { protected languageService: PoLanguageService; private _format; private _locale; private _maxTime; private _minTime; private _minuteInterval; private _secondInterval; private _showSeconds; private _size?; private _initialSize; private readonly shortLanguage; protected onChangePropagate: (value: string) => void; protected onTouched: () => void; /** * @optional * * @description * * Evento disparado ao selecionar um horário. * Retorna uma `string` no formato ISO 8601 (`HH:mm` ou `HH:mm:ss`). */ change: EventEmitter; /** * @optional * * @description * * Define um valor inicial para o componente no formato ISO 8601 (`HH:mm` ou `HH:mm:ss`). */ set value(value: string); get value(): string; /** * @optional * * @description * * Define o formato de exibição do timer. * * Valores válidos: * - `24`: formato de 24 horas (padrão) * - `12`: formato de 12 horas com indicador AM/PM * * @default `24` */ set format(value: PoTimerFormat); get format(): PoTimerFormat; /** * @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 o horário máximo permitido para seleção. * Horários posteriores ao limite ficam desabilitados. * * Formato aceito: `HH:mm` ou `HH:mm:ss`. */ set maxTime(value: string); get maxTime(): string; /** * @optional * * @description * * Define o horário mínimo permitido para seleção. * Horários anteriores ao limite ficam desabilitados. * * Formato aceito: `HH:mm` ou `HH:mm:ss`. */ set minTime(value: string); get minTime(): string; /** * @optional * * @description * * Define o intervalo entre os minutos exibidos no painel. * * @default `5` */ set minuteInterval(value: number); get minuteInterval(): number; /** * @optional * * @description * * Define o intervalo entre os segundos exibidos no painel. * Utilizado apenas quando `p-show-seconds` está ativo. * * @default `1` */ set secondInterval(value: number); get secondInterval(): number; /** * @optional * * @description * * Exibe a coluna de segundos no painel de seleção. * * @default `false` */ set showSeconds(value: boolean); get showSeconds(): boolean; /** * @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; literals: { hours: string; minutes: string; seconds: string; }; hours: Array; minutes: Array; seconds: Array; selectedHour: number; selectedMinute: number; selectedSecond: number; period: string; constructor(languageService: PoLanguageService); get is12HourFormat(): boolean; protected onThemeChange(): void; /** Gera a lista de horas disponíveis de acordo com o formato. */ protected generateHours(): void; /** Gera a lista de minutos de acordo com o intervalo configurado. */ protected generateMinutes(): void; /** Gera a lista de segundos de acordo com o intervalo configurado. */ protected generateSeconds(): void; /** Formata um número com dois dígitos. */ protected formatValue(value: number): string; /** Verifica se uma hora está desabilitada com base nos limites min/max. */ protected isHourDisabled(hour: number): boolean; /** * Verifica se um período (AM/PM) está completamente desabilitado. * Retorna `true` quando todas as horas do período estão fora do range min/max. */ protected isPeriodDisabled(targetPeriod: string): boolean; /** Verifica se um minuto está desabilitado com base nos limites min/max e hora selecionada. */ protected isMinuteDisabled(minute: number): boolean; /** Verifica se um segundo está desabilitado com base nos limites min/max, hora e minuto selecionados. */ protected isSecondDisabled(second: number): boolean; protected isMinuteAllowedForHour(hour: number, minute: number): boolean; protected isSecondAllowed(hour: number, minute: number, second: number): boolean; /** Gera o valor ISO 8601 com base na seleção atual. */ protected buildTimeValue(): string; /** Define o horário a partir de uma string ISO. */ setTimeFromString(time: string): void; /** Converte hora 24h para formato de exibicao 12h com periodo. */ private convertTo12HourDisplay; writeValue(value: any): void; registerOnChange(fn: (value: string) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(_isDisabled: boolean): void; protected emitChange(): void; protected callOnTouched(): void; private updateModel; /** Converte hora no formato atual para formato de 24 horas. */ protected convertTo24Hour(hour: number): number; /** Extrai componente do tempo (hora, minuto ou segundo) de uma string. */ protected parseTimeComponent(time: string, component: 'hour' | 'minute' | 'second'): number; private applySizeBasedOnA11y; private isValidTimeString; private setLiterals; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Tipo dos eixos das colunas. */ type PoTimerColumnType = 'hour' | 'minute' | 'second' | 'period'; /** * @docsPrivate * * @docsExtends PoTimerBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoTimerComponent extends PoTimerBaseComponent implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy { hourCells: QueryList; minuteCells: QueryList; secondCells: QueryList; periodCells: QueryList; hourItemsRefs: QueryList>; minuteItemsRefs: QueryList>; secondItemsRefs: QueryList>; displayHours: Array; displayMinutes: Array; displaySeconds: Array; boundaryTab: EventEmitter<{ direction: "forward" | "backward"; event: KeyboardEvent; column: PoTimerColumnType; }>; private readonly changeDetector; private readonly ngZone; private readonly domDocument; private hasViewInitialized; private currentRenderedSize; /** ID do requestAnimationFrame pendente para throttle do wheel. */ private wheelRafId; /** * Offset atual (em px) de cada coluna, mantido em JS. * O container de itens e posicionado via translateY(-offset). * O offset e mantido sempre no intervalo [sectionHeight, 2*sectionHeight) * para que o salto de reposicionamento seja sempre invisivel (as secoes * sao identicas por serem copias do mesmo array fonte). */ private columnOffsets; /** * Indice no displayArray do item focado em cada coluna. * Usado para redirecionar o foco ao botao correto ao entrar na coluna via Tab. */ private focusedDisplayIndex; activeDescendantIds: Record; disabledMinuteCache: Set; disabledSecondCache: Set; private ariaSyncNeeded; private cachedCellPairs; constructor(); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; ngAfterViewChecked(): void; ngOnDestroy(): void; onSelectHour(hour: number): void; onSelectMinute(minute: number): void; onSelectSecond(second: number): void; onSelectPeriod(newPeriod: string): void; onCellFocus(type: PoTimerColumnType, displayIndex: number): void; getCellTabIndex(type: PoTimerColumnType, displayIndex: number): number; onCellKeydown(event: KeyboardEvent, type: PoTimerColumnType): void; onPeriodKeydown(event: KeyboardEvent): void; onColumnWheel(event: WheelEvent, type: PoTimerColumnType): void; writeValue(time: string): void; trackByIndex(index: number, _item: number): number; focusFirstVisibleCell(): void; focusLastVisibleCell(): void; initAllColumnOffsets(): void; /** * Posiciona o container de itens na secao do meio do array repetido, * alinhando o item selecionado ao topo da janela visivel. * * Estrutura do array repetido (exemplo sourceLength = 24, repeats = 3): * [secao 0: itens 0-23] [secao 1: itens 0-23] [secao 2: itens 0-23] * ^--- usuario fica aqui (offset em [sH, 2*sH)) * * Usar a secao do meio garante que qualquer deslize para cima ou para baixo * tem espaco antes de precisar fazer o wrap. */ private initColumnOffset; private getFirstAvailableIndexByType; private getReferenceHourForConstraints; private getReferenceMinuteForConstraints; private isValueDisabledByType; /** * Desloca a coluna pelo numero de passos indicado e aplica o wrap modular. * * O wrap mantem o offset em [sectionHeight, 2*sectionHeight), aproveitando * o fato de que as secoes sao identicas — o salto e impercetivel visualmente. */ private scrollColumnByStep; private wrapOffset; private getCellStep; /** * Foca o botao nativo (