import { ElementRef, EventEmitter } from '@angular/core'; /** * @description * * O componente `po-popover` é um container pequeno recomendado para incluir vários tipos de conteúdo como: * gráficos, textos, imagens e inputs. Ele abre sobreposto aos outros componentes. * * Para mostrar apenas pequenos textos recomenda-se o uso da diretiva * [**po-tooltip**](https://po-ui.io/documentation/po-tooltip?view=doc). * * Para conteúdos maiores recomenda-se o uso do [**po-modal**](https://po-ui.io/documentation/po-modal?view=doc). * * Ele contém um título e também é possível escolher as posições do popover em relação ao componente pai, * as posições permitidas são: `right`, `right-top`, `right-bottom`, `top`, `top-left`, `top-right`, * `left`, `left-top`, `left-bottom`, `bottom`, `bottom-left` e `bottom-right`. * * Também é possível escolher entre os dois eventos que podem abrir o *popover*. * Os eventos permitidos são: `click` e `hover`. * */ export declare class PoPopoverBaseComponent { /** * @optional * * @description * * Define que o popover será inserido no body da página em vez do elemento definido em `p-target`. Essa opção pode * ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o posicionamento * correto do conteúdo próximo ao elemento. * * @default `false` */ appendBox: boolean; cornerAligned: boolean; /** * @description * * ElementRef do componente de origem responsável por abrir o popover. * Para utilizar o po-popover deve-se colocar uma variável no componente que vai disparar o evento * de abertura, exemplo: * * ``` * * * * * * ``` * * Também deve-se criar um ViewChild para cada popover, passando como referência o elemento do * HTML que irá disparar o evento. Exemplo: * * ``` * @ViewChild(PoButtonComponent, {read: ElementRef}) poButton: PoButtonComponent; * ``` * * Pode-se tambem informar diretamente o HTMLElement, para não ter que utilizar o ViewChild. * Para utilizar o po-popover deve-se colocar uma variável no componente que vai disparar o evento * de abertura, exemplo: * * ``` * * * * * ``` * * * */ target: ElementRef | HTMLElement; /** Título do popover. */ title?: string; width?: number; /** Evento disparado ao fechar o popover. */ closePopover: EventEmitter; /** Evento disparado ao abrir o popover. */ openPopover: EventEmitter; isHidden: boolean; protected clickoutListener: () => void; protected mouseEnterListener: () => void; protected mouseLeaveListener: () => void; protected resizeListener: () => void; private _hideArrow; private _position?; private _trigger?; /** * @optional * * @description * * Desabilita a seta do componente *popover*. * * @default `false` */ set hideArrow(value: boolean); get hideArrow(): boolean; /** * @optional * * @description * * Define a posição que o po-popover abrirá em relação ao componente alvo. Sugere-se que seja * usada a orientação "right" (direita), porém o mesmo é flexível e será rotacionado * automaticamente para se adequar a tela, caso necessário. * * Posições válidas: * - `right`: Posiciona o po-popover no lado direito do componente alvo. * - `right-bottom`: Posiciona o po-popover no lado direito inferior do componente alvo. * - `right-top`: Posiciona o po-popover no lado direito superior do componente alvo. * - `bottom`: Posiciona o po-popover abaixo do componente alvo. * - `bottom-left`: Posiciona o po-popover abaixo e à esquerda do componente alvo. * - `bottom-right`: Posiciona o po-popover abaixo e à direita do componente alvo. * - `left`: Posiciona o po-popover no lado esquerdo do componente alvo. * - `left-top`: Posiciona o po-popover no lado esquerdo superior do componente alvo. * - `left-bottom`: Posiciona o po-popover no lado esquerdo inferior do componente alvo. * - `top`: Posiciona o po-popover acima do componente alvo. * - `top-right`: Posiciona o po-popover acima e à direita do componente alvo. * - `top-left`: Posiciona o po-popover acima e à esquerda do componente alvo. * * * @default right */ set position(value: string); get position(): string; /** * @description * * Define o evento que abrirá o po-popover. * * Valores válidos: * - `click`: Abre ao clicar no componente alvo. * - `hover`: Abre ao passar o mouse sobre o componente alvo. * - `function`: Abre através de funções públicas do componente. * * @default click * @optional */ set trigger(value: string); get trigger(): string; /** * @optional * * @description * Permite a inclusão de classes CSS customizadas ao componente. * * Exemplo: `p-custom-classes="minha-classe-1 minha-classe-2"`. * */ customClasses: import("@angular/core").InputSignal; }