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.
 *
 * 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:
 *
 * ```
 * <po-popup [p-target]="target">
 *   <div p-popup-header-template>
 *     <div>
 *       Dev PO
 *     </div>
 *     <div>
 *       dev.po@po-ui.com.br
 *     </div>
 *   </div>
 * </po-popup >
 * ```
 *
 * #### 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&nbsp;   | `var(--border-radius-md)`                       |
 * | `--border-width`                       | Contém o valor da largura dos cantos do elemento&nbsp;| `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&nbsp;      | `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;
    get computedListboxSubitems(): boolean;
    templateIcon: boolean;
    /** Lista de ações que serão exibidas no componente. */
    set actions(value: Array<PoPopupAction>);
    get actions(): Array<PoPopupAction>;
    /**
     * @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<string>);
    get customPositions(): Array<string>;
    /**
     * @optional
     *
     * @description
     *
     * Define o tamanho dos componentes de formulário no template:
     * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA).
     * - `medium`: aplica a medida medium de cada componente.
     *
     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
     *
     * @default `medium`
     */
    set 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:
     *
     * ```
     * <span #icon class="an an-credit-card" (click)="popup.toggle()">
     *   Credit Actions
     * </span>
     *
     * <po-popup #popup
     *   [p-actions]="actions"
     *   [p-target]="icon">
     * </po-popup>
     * ```
     *
     * Caso o elemento alvo for um componente, será preciso obter o `ElementRef` do mesmo e passá-lo à propriedade, por exemplo:
     *
     * ```
     * // component.html
     *
     * <po-button #poButton
     *   p-label="Open Popover"
     *   (p-click)="popup.toggle()">
     * </po-button>
     *
     * <po-popup #popup
     *   [p-actions]="actions"
     *   [p-target]="poButtonRef">
     * </po-popup>
     *
     * // component.ts
     *
     * @ViewChild('poButton', { read: ElementRef }) poButtonRef: ElementRef;
     * ```
     */
    set target(value: any);
    get target(): any;
    closeEvent: EventEmitter<any>;
    clickItem: EventEmitter<any>;
}
