import { EventEmitter } from '@angular/core'; import { PoPopupAction } from './po-popup-action.interface'; /** * @description * * O componente `po-popup` é um container pequeno recomendado para ações de navegação: * Ele abre sobreposto aos outros componentes. * * É possível escolher as posições do `po-popup` em relação ao componente alvo, para isto veja a propriedade `p-position`. * * Também é possível informar um _template_ _header_ para o `po-popup`, que será exibido acima das ações. * Para funcionar corretamente é preciso adicionar a propriedade `p-popup-header-template` no elemento que servirá de template, por exemplo: * * ``` * *
*
* Dev PO *
*
* dev.po@po-ui.com.br *
*
* * ``` * * #### Tokens customizáveis * * É possível alterar o estilo do componente usando os seguintes tokens (CSS): * * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization). * * | Propriedade | Descrição | Valor Padrão | * |----------------------------------------|-------------------------------------------------------|-------------------------------------------------| * | **Default Values** | | | * | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-radius-md)` | * | `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-sm)` | * | `--border-color` | Cor da borda | `var(--color-neutral-light-20)` | * | `--background` | Cor do background | `var(--color-neutral-light-00)` | * | `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-md)` | * | **po-popup po-item-list** | | | * | `--font-family` | Família tipográfica usada | `var(--font-family-theme)` | * | `--font-size` | Tamanho da fonte | `var(--font-size-default)` | * | `--line-height` | Tamanho da label | `var(--line-height-md)` | * | **Action** | | | * | `--font-weight` | Peso da fonte | `var(--font-weight-bold)` | * | `--color` | Cor principal do popup | `var(--color-action-default)` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-darkest)` | * | `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | **Pressed** | | | * | `--background-pressed` | Cor de background no estado de pressionado  | `var(--color-brand-01-light)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` | * | **Selected** | | | * | `--font-weight-selected` | Peso da fonte no estado selecionado | `var(--font-weight-bold)` | * | `--background-selected` | Cor de background no estado selecionado | `var(--color-brand-01-lightest)` | * | **Option e check** | | | * | `--color-option` | Cor principa no estado Option/check | `var(--color-neutral-dark-90)` | * */ export declare class PoPopupBaseComponent { arrowDirection: string; showPopup: boolean; protected oldTarget: any; protected param: any; protected clickoutListener: () => void; protected resizeListener: () => void; private _actions; private _customPositions?; private _hideArrow; private _isCornerAlign; private _position?; private _size?; private _target; listboxSubitems: boolean; templateIcon: boolean; /** Lista de ações que serão exibidas no componente. */ set actions(value: Array); get actions(): Array; /** * @optional * * @description * * Oculta a seta do componente *popup*. * * @default `false` */ set hideArrow(value: boolean); get hideArrow(): boolean; set isCornerAlign(value: boolean); get isCornerAlign(): boolean; /** * @optional * * @description * * Define a posição inicial que o `po-popup` abrirá em relação ao componente alvo. Sugere-se que seja * usada a orientação `bottom-left` (abaixo e a esquerda), porém o mesmo é flexível e será rotacionado * automaticamente para se adequar a tela, caso necessário. * * > Caso seja definido um `p-custom-positions` o componente irá abrir na posição definida na propriedade `p-position` * e caso não caiba na posição inicial ele irá rotacionar seguindo a ordem de posições definidas no `p-custom-positions`. * * Posições válidas: * - `right`: Posiciona o po-popup no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-popup no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-popup no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-popup abaixo do componente alvo. * - `bottom-left`: Posiciona o po-popup abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-popup abaixo e à direita do componente alvo. * - `left`: Posiciona o po-popup no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-popup no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-popup no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-popup acima do componente alvo. * - `top-right`: Posiciona o po-popup acima e à direita do componente alvo. * - `top-left`: Posiciona o po-popup acima e à esquerda do componente alvo. * * @default `bottom-left` */ set position(value: string); get position(): string; /** * @optional * * @description * * Define as posições e a sequência que o `po-popup` poderá rotacionar. A sequência será definida pela ordem passada * no *array*. Caso não seja definido, o `po-popup` irá rotacionar em todas as posições válidas. * * > O componente sempre irá abrir na posição definida no `p-position` e caso não caiba na posição definida o mesmo * irá rotacionar seguindo a ordem definida pelo `p-custom-position`. * * Posições válidas: * - `right`: Posiciona o po-popup no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-popup no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-popup no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-popup abaixo do componente alvo. * - `bottom-left`: Posiciona o po-popup abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-popup abaixo e à direita do componente alvo. * - `left`: Posiciona o po-popup no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-popup no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-popup no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-popup acima do componente alvo. * - `top-right`: Posiciona o po-popup acima e à direita do componente alvo. * - `top-left`: Posiciona o po-popup acima e à esquerda do componente alvo. */ set customPositions(value: Array); get customPositions(): Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @description * * Para utilizar o `po-popup` deve-se colocar uma variável local no componente que disparará o evento * de abertura no mesmo e com isso, invocará a função `toggle`, por exemplo: * * ``` * * Credit Actions * * * * * ``` * * Caso o elemento alvo for um componente, será preciso obter o `ElementRef` do mesmo e passá-lo à propriedade, por exemplo: * * ``` * // component.html * * * * * * * * // component.ts * * @ViewChild('poButton', { read: ElementRef }) poButtonRef: ElementRef; * ``` */ set target(value: any); get target(): any; closeEvent: EventEmitter; clickItem: EventEmitter; }