import { LitElement, TemplateResult } from 'lit'; import { PositionType, Coords } from '../../../common/helpers/popoverHelper'; import '../button'; import '../link'; /** * Popover component. * * Two positioning modes are available: * - anchor: positioned relative to an anchor slot element * - floating: manually positioned via top/left/bottom/right properties * * For anchor mode, the popover will be positioned relative to the anchor element * based on the direction property. The position can be fixed or absolute. * * For floating (manual) mode, set triggerType="none" and use top/left/bottom/right * properties to position the popover. * * @slot unnamed - The main popover slotted body content * @slot anchor - The trigger element (icon, button, link, etc.) * @slot footerLink - Optional link to be displayed in the footer * * @fires on-close - Emitted when any action closes the popover.`detail:{ action: string }` * @fires on-open - Emitted when popover opens. `detail:{ origEvent: Event }` */ export declare class Popover extends LitElement { static styles: import("lit").CSSResult; /** * Manual direction or auto (anchor mode only) */ accessor direction: 'top' | 'right' | 'bottom' | 'left' | 'auto'; /** * Position type: fixed (default) or absolute * - fixed: positions relative to the viewport * - absolute: positions relative to the nearest positioned ancestor */ accessor positionType: PositionType; /** * Popover launch behavior. * - default: click to launch/open popover * - hover: opens on hover and closes on mouse leave * - link: click to navigate to an externally linked URL + hover to open */ accessor launchBehavior: 'default' | 'hover' | 'link'; /** * URL for link behavior (when launchBehavior is 'link') */ accessor linkHref: string; /** * When true, render only the footer link/slot and hide all footer buttons. */ accessor footerLinkOnly: boolean; /** * Target for link behavior (when launchBehavior is 'link') */ accessor linkTarget: '_self' | '_blank' | '_parent' | '_top'; /** * Size variants for the popover. */ accessor size: 'mini' | 'narrow' | 'wide'; /** * Distance between anchor and popover (px) * Controls how far the popover is positioned from its anchor element */ accessor offsetDistance: number | undefined; /** * Padding from viewport edges (px) */ accessor shiftPadding: number | undefined; /** how we style the anchor slot */ accessor triggerType: 'icon' | 'link' | 'button' | 'none'; /** Optional manual offset for tooltip-like triangular shaped arrow. * When set, this will override the automatic arrow positioning. */ accessor arrowPosition: string | undefined; /** * Controls the popover's open state. * * @remarks * Setting to `true`: * - dispatches `on-open` * - starts Floating-UI `autoUpdate` to track repositioning * - saves the anchor element for focus restoration * * Setting to `false`: * - dispatches `on-close` * - stops floating-ui `autoUpdate` * - restores focus to the saved anchor element */ get open(): boolean; set open(value: boolean); /** * Animation duration in milliseconds */ accessor animationDuration: number; /** Top position value. */ accessor top: string | undefined; /** Left position value. */ accessor left: string | undefined; /** Bottom position value. */ accessor bottom: string | undefined; /** Right position value. */ accessor right: string | undefined; /** * Changes the primary button styles to indicate a destructive action */ accessor destructive: boolean; /** * Z-index for the popover. */ accessor zIndex: number | undefined; /** * Responsive breakpoints for adjusting position. */ accessor responsivePosition: string | undefined; /** * Body title text */ accessor titleText: string; /** * Body subtitle/label */ accessor labelText: string; /** * OK button label */ accessor okText: string; /** * Cancel button label */ accessor cancelText: string; /** * Close button description text */ accessor closeText: string; /** * Accessible name for the popover dialog * Used as aria-label when no title is present */ accessor popoverAriaLabel: string; /** * Secondary button text */ accessor secondaryButtonText: string; /** * Show or hide the secondary button */ accessor showSecondaryButton: boolean; /** * Tertiary button text */ accessor tertiaryButtonText: string; /** * Show or hide the tertiary button */ accessor showTertiaryButton: boolean; /** * Text to display for an optional link in the footer. */ accessor footerLinkText: string; /** * URL for the optional footer link. */ accessor footerLinkHref: string; /** * Target for the footer link (ex: "_blank" for new tab). * If empty, defaults to same tab. */ accessor footerLinkTarget: '_self' | '_blank' | '_parent' | '_top'; /** * Hide the entire footer */ accessor hideFooter: boolean; /** * The computed panel coordinates for positioning. * Contains `top` and `left` in pixels. * @internal */ accessor _panelCoords: Coords; /** * The computed direction of the popover panel when `direction="auto"`. * 'top', 'bottom', 'left', or 'right'. * @internal */ accessor _calculatedDirection: string; /** * The computed anchor alignment relative to the trigger element. * 'start', 'center', or 'end'. * @internal */ accessor _anchorPosition: string; /** * Keyboard event listener attached to trap focus within the popover. * @internal */ private _keyboardListener; /** * Cleanup callback for any automatic update routines. * @internal */ private _autoUpdateCleanup; /** * Popover open state. * @internal */ private _open; /** * Timer for delayed hover close to prevent flickering * @internal */ private _hoverCloseTimer; /** * Flag to track if mouse is over the popover area (anchor or panel) * @internal */ private _isMouseOverPopover; render(): TemplateResult; private _renderMini; private _renderStandard; connectedCallback(): void; disconnectedCallback(): void; updated(changed: Map): void; /** * @internal */ private _getPanelStyle; /** * @internal */ private _onKeyDown; /** * @internal */ private _handleAction; private _toggle; private _close; /** * @internal */ private _handleAnchorClick; /** * @internal */ private _handleMouseEnter; /** * @internal */ private _handleMouseLeave; /** * @internal */ private _handlePanelMouseEnter; /** * @internal */ private _handlePanelMouseLeave; /** * @internal */ private _handleAnchorKeydown; private _handleFocusKeyboardEvents; private _removeFocusListener; private _position; } declare global { interface HTMLElementTagNameMap { 'kyn-popover': Popover; } } //# sourceMappingURL=popover.d.ts.map