/** * Copyright (c) Cisco Systems, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import "../button/Button"; import "../icon/Icon"; import { LitElement, PropertyValues } from "lit"; import { IPopoverController, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from "./Popover.types"; export declare class PopoverController implements IPopoverController { show(_useDelay?: boolean): void; hide(): void; toggle(): void; isVisible(): boolean; } declare const Popover_base: import("../../mixins/FocusTrapMixin").FocusTrapMixinReturnType; /** * Popover component is a lightweight floating UI element that displays additional content when triggered. * It can be used for tooltips, dropdowns, or contextual menus. * The popover automatically positions itself based on available space and * supports dynamic height adjustments with scrollable content when needed。 * * @dependency md-button * @dependency md-icon * * @tagname md-popover * * @event shown - This event is dispatched when the popover is shown * @event hidden - This event is dispatched when the popover is hidden * @event created - This event is dispatched when the popover is created (added to the DOM) * @event destroyed - This event is dispatched when the popover is destroyed (removed from the DOM) * * @cssproperty --md-popover-arrow-border-radius - radius of the arrow border * @cssproperty --md-popover-arrow-border - border of the arrow * @cssproperty --popover-bg-color - primary background color of the popover * @cssproperty --popover-border-color - border color of the popover * @cssproperty --popover-text-color - text color of the popover * @cssproperty --popover-inverted-bg-color - inverted background color of the popover * @cssproperty --popover-inverted-border-color - inverted border color of the popover * @cssproperty --popover-inverted-text-color - inverted text color of the popover * @cssproperty --md-popover-elevation-3 - elevation of the popover * @cssproperty --md-popover-max-width - max width of the popover * @cssproperty --md-popover-max-height - max height of the popover * * @slot - Default slot for the popover content * */ export declare class Popover extends Popover_base { /** * The unique ID of the popover. */ id: string; /** * The ID of the element that triggers the popover. * This attribute is required for the popover to work. */ triggerID: string; /** * Determines the events that cause the Popover to show. * Multiple event names should be separated by spaces. * For example to allow both click and hover, use 'click mouseenter' as the trigger. * - **click** * - **mouseenter** * - **focusin** * - **manual** * @default click */ trigger: PopoverTrigger; /** * The placement of the popover. * - **top** * - **top-start** * - **top-end** * - **bottom** * - **bottom-start** * - **bottom-end** * - **left** * - **left-start** * - **left-end** * - **right** * - **right-start** * - **right-end** * @default bottom */ placement: PopoverPlacement; /** * The positioning strategy for the popover. * - **absolute** - Position relative to closest positioned ancestor or the document body * - **fixed** - Position relative to the viewport * @default absolute */ strategy: PopoverStrategy; /** * Color of the popover * - **tonal** * - **contrast** * @default tonal */ color: PopoverColor; /** * The visibility of the popover. * @default false */ visible: boolean; /** * The offset of the popover. * @default 4 */ offset: number; /** * Determines whether the focus trap is enabled. * If true, focus will be restricted to the content within this component. * @default false */ focusTrap: boolean; /** * Prevent outside scrolling when popover show. * @default false */ preventScroll: boolean; /** * The arrow visibility of the popover. * @default false */ showArrow: boolean; /** * The close button visibility of the popover. * @default false */ closeButton: boolean; /** * Determines whether the popover is interactive。 * @default false */ interactive: boolean; /** * The delay of the show/hide popover. * @default 0,0 */ delay: string; /** * Hide popover on escape key press. * @default false */ hideOnEscape: boolean; /** * Hide popover on blur. * @default false */ hideOnBlur: boolean; /** * Hide popover on window blur. * @default false */ hideOnWindowBlur: boolean; /** * Hide on outside click of the popover. * @default false */ hideOnOutsideClick: boolean; /** * Hide on outside pointerdown of the popover. * @default false */ hideOnOutsidePointerDown: boolean; /** * Hide on scroll event outside popover/trigger. * @default false */ hideOnScroll: boolean; /** * Hide on wheel event outside popover/trigger. * @default false */ hideOnWheel: boolean; /** * The focus back to trigger after the popover hide. * @default false */ focusBackToTrigger: boolean; /** * Determines whether the popover with backdrop. * Other than popover and trigger element, the rest of the screen will be covered with a backdrop. * @default false */ backdrop: boolean; /** * Changes the placement of popover to keep it in view when scrolling. * @default true */ flip: boolean; /** * Changes the size of popover to keep it in view when scrolling. * @default false */ size: boolean; /** * The z-index of the popover. * @default 1000 */ zIndex: number; /** * Element ID that the popover append to. * @default '' */ appendTo: string; /** * aria-label attribute to be set for close button accessibility. * @default null */ closeButtonAriaLabel: string | null; /** * Role of the popover * @default dialog */ role: HTMLElement["role"]; /** * aria-labelledby for an interactive popover only, defaults to the trigger component id. * Used in nested cases where the triggerComponent isn't the actual button. */ ariaLabelledby: string | null; /** * aria-describedby of the popover. */ ariaDescribedby: string | null; /** * Disable aria-expanded attribute on trigger element. * Make sure to set this to false when the popover is interactive. * @default false */ disableAriaExpanded: boolean; /** * animation-frame for update the position of floating element on every animation frame * @default false */ animationFrame: boolean; /** * Controller object that provides methods to programmatically control the popover. * This is especially useful when the popover is appended to another part of the DOM. * * @example * ```js * const controller = {}; * popover.controller = controller; * // Now you can use controller.show(), controller.hide(), controller.toggle() * ``` */ set controller(value: PopoverController | null | undefined); get controller(): PopoverController | null; private _controller; arrowElement: HTMLElement | null; triggerElement: HTMLElement | null; /** @internal */ private hoverTimer; /** @internal */ private isTriggerClicked; /** @internal */ private openDelay; /** @internal */ private closeDelay; /** @internal */ private readonly utils; /** @internal */ backdropElement: HTMLElement | null; useLegacyFindFocusable: () => boolean; /** @internal */ private cleanupAutoUpdate; /** @internal */ private previousActiveElement; constructor(); protected firstUpdated(changedProperties: PropertyValues): Promise; disconnectedCallback(): Promise; /** * Sets up the trigger event listeners based on the trigger type. */ setupTriggerListener(): void; /** * Removes the trigger event listeners. */ removeEventListeners(): void; protected updated(changedProperties: PropertyValues): Promise; /** * Handles the outside click event to close the popover. * Uses event.composedPath() to handle clicks across Shadow DOM boundaries. * * @param event - The mouse event. */ private readonly onOutsidePopoverClick; /** * Handles outside pointerdown to close the popover. */ private readonly onOutsidePopoverPointerDown; /** * Handles outside scroll and wheel to close the popover. */ private readonly onOutsidePopoverScrollOrWheel; private shouldIgnoreDismissEvent; private readonly hideThisPopover; /** * Handles the escape keydown event to close the popover. * * @param event - The keyboard event. */ private readonly onEscapeKeydown; /** * Handles the popover focus out event. * * @param event - The focus event. */ private readonly onPopoverFocusOut; private isElementInPopover; private readonly handleWindowBlurEvent; /** * Handles the popover visibility change and position the popover. * Handles the exit event to close the popover. * * @param oldValue - The old value of the visible property. * @param newValue - The new value of the visible property. */ private isOpenUpdated; /** * Starts the close delay timer. * If the popover is not interactive, it will close the popover after the delay. */ private readonly startCloseDelay; /** * Cancels the close delay timer. */ readonly cancelCloseDelay: () => void; /** * Shows the popover. * By default (`useOpenDelay = false`), or if `openDelay` is 0 or less, the popover opens immediately. * If `useOpenDelay` is true and `openDelay` is greater than 0, the `openDelay` will be applied before showing the popover. * This allows programmatic calls (e.g., for `trigger="manual"`) to optionally use the `openDelay`. * @param {boolean} [useOpenDelay=false] - Indicates if the `openDelay` should be applied. */ showPopover: (useOpenDelay?: boolean) => void; /** * Hides the popover. */ hidePopover: () => void; /** * Toggles the popover visibility. */ togglePopoverVisible: () => void; private readonly onMouseEnterTrigger; private readonly onFocusInTrigger; private readonly onTriggerClick; /** * Bridges focus-trap keyboard handling when trigger receives Tab/Shift+Tab. * Needed when append-to moves popover outside the trigger's DOM subtree. */ private readonly onTriggerKeydown; private isRectOverTrigger; private isMouseOverTrigger; /** * Override setFocusableElements to include trigger element when using appendTo. */ setFocusableElements(): void; /** * Sets the focusable elements inside the popover. */ private handleCreatePopoverFirstUpdate; /** * Positions the popover based on the trigger element. * It also handles the flip, size and arrow placement. * It uses the floating-ui/dom library to calculate the position. */ private positionPopover; render(): import("lit-html").TemplateResult<1>; static get styles(): import("lit").CSSResult[]; } declare global { interface HTMLElementTagNameMap { "md-popover": Popover; } } export {};