@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
239 lines (238 loc) • 8.82 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
type TooltipType = 'standard' | 'popover';
type TooltipDensity = 'large' | 'medium' | 'small';
type TooltipState = 'info' | 'warning' | 'error' | 'success';
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https:
*
* @slot trigger - Área para o elemento acionador do tooltip.
* @slot content - Área para o conteúdo do tooltip.
*/
export declare class Tooltip {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el: HTMLBrTooltipElement;
/**
* Referência ao elemento Internals do componente.
* O elemento Internals fornece uma interface para acessar e manipular o estado interno do componente.
* Isso é útil para componentes que precisam se integrar com o sistema de formulários nativo do navegador.
*/
elementInternals: ElementInternals;
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId: string;
/**
* Define a posição do tooltip em relação ao elemento acionador.
* As opções disponíveis são: 'top', 'bottom', 'left' e 'right'.
* @default 'top'
*/
position: TooltipPosition;
/**
* Define o tipo de tooltip a ser exibido.
* As opções disponíveis são: 'standard' e 'popover'.
* O tipo 'standard' exibe um tooltip simples, enquanto o tipo 'popover' exibe um tooltip com mais informações e fechamento por interação.
* @default 'standard'
*/
type: TooltipType;
/**
* Define a densidade do tooltip.
* As opções disponíveis são: 'large', 'medium' e 'small'.
* A densidade 'small' exibe um tooltip mais compacto, enquanto a densidade 'large' exibe um tooltip mais espaçado.
* @default 'medium'
*/
density: TooltipDensity;
/**
* Define o estado do tooltip.
* Os estados disponíveis são: 'info', 'warning', 'error' e 'success'.
* @default 'info'
*/
state: TooltipState;
/**
* Define se o tooltip deve ser exibido automaticamente.
* Quando definido como true, o tooltip será exibido automaticamente.
* Quando definido como false, o tooltip será exibido apenas quando acionado pelo usuário.
* @default false
*/
isAutoVisible: boolean;
/**
* Define o atraso em milissegundos para exibir o tooltip.
* @default null
*/
showDelay: number;
/**
* Define o atraso em milissegundos para ocultar o tooltip.
* @default null
*/
hideDelay: number;
/**
* Define a visibilidade do tooltip.
* Quando definido como true, o tooltip será exibido.
* Quando definido como false, o tooltip será ocultado.
* @default false
*/
isVisible: boolean;
/**
* Watcher para monitorar alterações na propriedade `isVisible`.
* @param visible boolean
* @returns void
*/
handleVisibilityChange(visible: boolean): void;
/**
* Evento emitido quando o tooltip é aberto.
*/
brDidOpen: EventEmitter<void>;
/**
* Evento emitido quando o tooltip é fechado.
*/
brDidClose: EventEmitter<void>;
/**
* Listener para o evento de foco no elemento acionador.
* Este evento é utilizado para exibir o tooltip quando o elemento acionador recebe foco.
*/
handleFocusIn(): void;
/**
* Listener para o evento de desfoque no elemento acionador.
* Este evento é utilizado para ocultar o tooltip quando o elemento acionador perde o foco.
*/
handleFocusOut(): void;
/**
* Listener para o evento de teclado no documento.
* Este evento é utilizado para fechar o tooltip quando a tecla Escape é pressionada.
* @param event KeyboardEvent
*/
handleKeyDown(event: KeyboardEvent): void;
private floatingManager;
/**
* Elemento que aciona a exibição do tooltip.
* Este elemento é referenciado para garantir que o tooltip seja posicionado corretamente em relação a ele.
*/
private triggerElement;
/**
* Elemento que contém o conteúdo do tooltip.
* Este elemento é referenciado para garantir que o tooltip seja posicionado corretamente em relação a ele.
*/
private contentElement;
/**
* Elemento que representa a seta do tooltip.
* Este elemento é utilizado para indicar a direção do tooltip em relação ao elemento acionador.
*/
private arrowElement;
/**
* Função de limpeza para atualizar a posição do tooltip automaticamente.
* Esta função é chamada quando o tooltip não está mais visível ou quando o componente é desconectado.
* Isso garante que o tooltip não consuma recursos desnecessários quando não estiver em uso.
*/
private clearAutoUpdate;
/**
* Tempo limite para exibir o tooltip automaticamente.
*/
private showTimer;
/**
* Tempo limite para ocultar o tooltip.
*/
private hideTimer;
/**
* Indica se o tooltip foi acionado por um clique do mouse.
* Isso é utilizado para evitar conflito com o acionamento por foco.
*/
private fromPointerDown;
/**
* Controla a exibição do tooltip.
* Quando o tooltip é exibido, ele é posicionado em relação ao elemento acionador.
* Isso é feito utilizando a biblioteca Floating UI, que calcula a posição ideal do tooltip com base no espaço disponível na tela.
* A função `autoUpdate` é utilizada para atualizar automaticamente a posição do tooltip quando o elemento acionador é movido ou redimensionado.
*/
private positionTooltip;
private cleanupPositioning;
/**
* Define os eventos de interação do tooltip.
* Os eventos de interação incluem mouseenter, mouseleave, focus e blur.
* @returns void
*/
private setupInteractions;
/**
* Alterna a exibição do tooltip.
* Se o tooltip estiver visível, ele será ocultado.
* Se o tooltip estiver oculto, ele será exibido.
*/
private toggleContent;
/**
* Processa as ações relacionadas à exibição do tooltip.
* Isso inclui exibir o tooltip e iniciar o tempo limite de ocultação automática.
* @returns void
*/
private showContent;
/**
* Processa as ações relacionadas ao fechamento do tooltip.
* Isso inclui ocultar o tooltip e limpar o tempo limite de ocultação automática.
* @returns void
*/
private hideContent;
/**
* Configura o tempo limite para exibir o tooltip automaticamente.
* O tempo limite é definido pelo valor da propriedade `showDelay`.
*/
private setShowTimer;
/**
* Limpa o tempo limite de exibição automática do tooltip.
*/
private clearShowTimer;
/**
* Configura o tempo limite para ocultar o tooltip automaticamente.
* O tempo limite é definido pelo valor da propriedade `hideDelay`.
*/
private setHideTimer;
/**
* Limpa o tempo limite de ocultação automática do tooltip.
*/
private clearHideTimer;
/**
* Lida com cliques fora do tooltip.
* É utilizado para o tooltip do tipo 'popover'.
* @param event MouseEvent
*/
private handleOutsideClick;
/**
* Determina o mapeamento de classes CSS do componente.
* @returns Um objeto que representa o mapeamento de classes CSS do componente.
*/
private getCssClassMap;
/**
* Determina o mapeamento de classes CSS do trigger.
* @returns Um objeto que representa o mapeamento de classes CSS do trigger.
*/
private getTriggerCssClassMap;
/**
* Determina o mapeamento de classes CSS do conteúdo.
* @returns Um objeto que representa o mapeamento de classes CSS do conteúdo.
*/
private getContentCssClassMap;
/**
* Determina o mapeamento de classes CSS da seta.
* @returns Um objeto que representa o mapeamento de classes CSS da seta.
*/
private getArrowCssClassMap;
/**
* Método do ciclo de vida do componente.
* Este método é chamado uma única vez após o componente ser montado no DOM.
*/
componentDidLoad(): void;
/**
* Método do ciclo de vida do componente.
* Este método é chamado quando o componente é desconectado do DOM.
*/
disconnectedCallback(): void;
/**
* Renderiza o componente.
* Este método é responsável por gerar o conteúdo HTML do componente.
* Ele utiliza a função `h` do Stencil para criar elementos JSX.
* @returns JSX.Element
*/
render(): any;
}
export {};