import { FASTElement } from "@microsoft/fast-element"; import type { HTMLPopoverElement, PopoverMode, PopoverRepositionMode, PopoverSize, PositioningShorthandValues } from "./popover.options"; /** * Popover * @summary A Popover component that displays content in a floating container, with configurable size, position, and behavior. * * @example * ```html * *
Click me
*
Popover content
*
* ``` * * @attr {boolean} beak - Whether the popover has a beak. * @attr {boolean} non-clickable - Indicates if the popover anchor is not clickable. * @attr {PopoverSize} size - The size of the popover. * @attr {PopoverMode} mode - The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open. * @attr {PositioningShorthandValues} position - The position of the popover. * @attr {string} target-id - The ID of the target element. * @attr {PopoverRepositionMode} reposition-mode - The mode for repositioning the popover. * @attr {boolean} open - Whether the popover is open. * @attr {number} transition-duration - The duration of the transition of the popover. The default value is 100. * @attr {number} transition-delay - The delay of the transition of the popover. The default value is 0. * * @prop {HTMLElement[] | undefined} anchorReferences - The references to the anchoring / triggering element. * @prop {boolean} refsLoaded - Indicates if all references are loaded. * @prop {ElementStyles | undefined} styles - Stores the CSS variables required for animations. * @prop {boolean} transitionComplete - Indicates if the transition is complete. * @prop {PopoverRepositionMode} repositionMode - The mode for repositioning the popover. * @prop {Array} openPositions - The array of open positions based on the collision edge. * @prop {HTMLPopoverElement | undefined} popoverReference - The reference to the popover element. * @prop {string | undefined} popoverRole - An optional user-defined role for the popover floating content element. * @prop {HTMLElement | undefined} overflowBoundary - The boundary container element of the popover for repositioning. * * @slot popover-trigger - Slot for the popover trigger element. * @slot popover-content - Slot for the popover content. * * @csspart popover - The popover container. * @csspart beak - The beak element of the popover. * @csspart beak-shadow - The shadow element of the beak. * * @method hidePopover - Hides the popover. * @method showPopover - Shows the popover. * @method togglePopover - Toggles the popover open state. * @method emitHideEvent - Emits the hide event for the popover. * @method emitShowEvent - Emits the show event for the popover. * @method emitToggleEvent - Emits the toggle event for the popover. * @method emitMouseEnterEvent - Emits the mouse enter event for the popover. * @method emitMouseLeaveEvent - Emits the mouse leave event for the popover. * @method addActiveHandlers - Adds the event listeners for the popover when it is open. * @method createPositioningManager - Creates the positioning manager for the popover. * @method removeEventListeners - Removes event listeners from the popover. * * @fires hide-popover - Emits when the popover is hidden. * @fires show-popover - Emits when the popover is shown. * @fires toggle-popover - Emits when the popover is toggled. * @fires mouse-enter-popover - Emits when the mouse enters the popover. * @fires mouse-leave-popover - Emits when the mouse leaves the popover. * * @extends FASTElement * @tagname fabric-popover * @public */ export declare class Popover extends FASTElement { /** * The positioning instance for the popover. * @private */ private positioning; /** * Whether the popover has a beak. * @public * @type {boolean} * @attr */ beak: boolean; /** * ## nonClickable * * controls whether the popover anchor is not clickable. When set to true, the popover will not close when the user clicks the trigger element. * * @public * @type {boolean} * @attr non-clickable * @default true */ nonClickable: boolean; nonClickableChanged(): void; /** * The size of the popover. * @public * @type {PopoverSize} * @attr */ size: PopoverSize; /** * The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open. * @public * @type {PopoverMode} * @attr */ mode: PopoverMode; /** * The position of the popover. * @public * @type {PositioningShorthandValues} * @attr */ position: PositioningShorthandValues; /** * ## targetId * * @summary the id of the wrapped target element. this is the element that will trigger the popover. The ID of the target element. * @public * @type {string | undefined} * @attr target-id */ targetId?: string; /** * anchorReferences * * @summary the references to the anchoring / triggering element. This is the element that will trigger the popover. And is identified by its being passed through. The list of anchor references. * @public * @type {HTMLElement[] | undefined} * @observable */ anchorReferences?: HTMLElement[]; /** * Handles changes to the anchor references. * Adds anchor attributes and event listeners when the anchor is added to the DOM. * @public */ anchorReferencesChanged(): void; /** * ## styles * @summary used in the class for storing the css variables required for animations */ private styles; refsLoaded: boolean; refsLoadedChanged: () => void; /** * ## checkAllLoaded * * @summary checks if all the refs are loaded. If they are, it sets the refsLoaded property to true. */ checkAllLoaded(): void; /** * transitionDuration * * @summary - set the duration (in milliseconds) of popover transition for opening and close */ transitionDuration: number; transitionDurationChanged(): void; /** * transitionDelay * * @summary - set the delay (in milliseconds) of popover transition for opening and close */ transitionDelay: number; /** * ## transitionComplete * * @summary - a boolean that is set to true when the transition is complete */ transitionComplete: boolean; /** * ## transitionDelayChanged */ transitionDelayChanged(): void; /** * ## onTransitionEnd */ onTransitionEnd: () => void; /** * ## onTransitionStart */ onTransitionStart: () => void; /** * ## addTransitionStyles * * @summary - adds the transition styles to the popover element */ addTransitionStyles(): void; /** * ## removeTransitionStyles * * @summary - removes the transition styles from the popover element */ removeTransitionStyles(): void; /** * The mode for repositioning the popover. * @public * @type {PopoverRepositionMode} * @attr reposition-mode * @default flip */ repositionMode: PopoverRepositionMode; /** * ## openPositions * * @summary An array of open positions based on the collisionEdge Handles changes to the reposition mode. * @public */ repositionModeChanged(): void; /** * ## openPositions * * @summary The array of open positions based on the collision edge. * * @public * @type {Array} * @observable */ openPositions: Array; /** * The original position of the popover before repositioning. * @private * @type {PositioningShorthandValues | undefined} */ private originalPopoverPosition; /** * ## open * * @summary Opens and closes the popover. It's used to control the popover from the outside. However, it's not recommended to use this property to control the popover before load. To control the popover correctly, wait until the window has fully loaded before opening the popover. Whether the popover is open. * @public * @type {boolean} * @attr * @default false */ open: boolean; /** * ## openChanged * * @summary Adds and removes many of the event listeners for the popover. Handles changes to the open state of the popover. Opens and closes the popover, controlling it from the outside. It's recommended to wait until the window has fully loaded before opening the popover. Adds and removes many of the event listeners. * @public */ openChanged(): void; /** * ## addActiveHandlers * * @summary Adds the event listeners for the popover when it is open. Adds active handlers for the popover. * @private */ addActiveHandlers(): void; /** * The reference to the popover element. * @public * @type {HTMLPopoverElement | undefined} * @observable */ popoverReference: HTMLPopoverElement | undefined; popoverReferenceChanged(): void; /** * ## popoverRole * * @summary an optional user defined role for the popover floating content element */ popoverRole: string | undefined; /** * ## initializeTargetId * * @summary initializes the targetId with a random id if it's not set by the user. The usefulness of this may not be apparent by the code. When the aria-describedby attribute of the trigger is set to the id of the target (popover), the aria-describedby content will reflect the content of the popover. * Initializes the target ID with a random ID if it's not set by the user. * @private */ private initializeTargetId; /** * The boundary container element of the popover for repositioning. * @public * @type {HTMLElement | undefined} * @observable */ overflowBoundary?: HTMLElement; /** * Handles changes to the overflow boundary. * @public */ overflowBoundaryChanged(): void; /** * Hides the popover. * @public */ hidePopover: () => void; /** * Shows the popover. * @public */ showPopover: () => void; /** * Toggles the popover open state. * @public */ togglePopover: () => boolean; /** * Emits the hide event for the popover. * @public */ emitHideEvent: () => void; /** * Emits the show event for the popover. * @public */ emitShowEvent: () => void; /** * Emits the toggle event for the popover. * @public */ emitToggleEvent(): void; /** * Emits the mouse enter event for the popover. * @public */ emitMouseEnterEvent: () => void; /** * Emits the mouse leave event for the popover. * @public */ emitMouseLeaveEvent: () => void; /** * ## addMouseOverEventListeners * * @summary Adds event listeners to the popoverReference to emit mouseEnter and mouseLeave events. Adds mouse over event listeners to the popover. * @private */ private addMouseOverEventListeners; /** * Removes mouse over event listeners from the popover. * @private */ private removeMouseOverEventListeners; /** * Updates the popover position. * @private */ private updatePopoverPosition; /** * ## handleWindowChanges * * @summary debounced method to handle window changes. It observes the popover for overflow and repositions the popover when the window is resized or the overflowBoundary is scrolled. Handles window changes with a debounce. * @private */ private handleWindowChanges; /** * addAnchorEventListeners * * @summary the popover defaults to adding a click event listener on any clickable anchor reference * Adds event listeners to the anchor. * @private */ private processAnchorEventListeners; /** * Adds overflow boundary event listeners if the overflow boundary exists. * @private */ private addOverflowBoundaryEventListeners; /** * Adds window event listeners. * @private */ private addWindowEventListeners; /** * Removes window event listeners. * @private */ private removeWindowEventListeners; /** * Handles window click events. * Uses composedPath() to properly detect clicks inside shadow DOM triggers. * @private */ private handleWindowClick; /** * ## addOverlayEventListeners * * @summary Adds event listeners to the window or overflowBoundary to close the popover when the user clicks outside of the popover. Adds overlay event listeners. * @private */ private addOverlayEventListeners; /** * Removes overlay event listeners. * @private */ private removeOverlayEventListeners; /** * ## intersectionObserver * * @summary used for tracking the overflow / collision of the popover to adjacent edges on ui changes. The intersection observer for tracking overflow. * @private * @type {IntersectionObserver | undefined} */ private intersectionObserver; /** * ## createOverflowHandler * * @summary handles the overflow of the popover based on the overflowBoundary. Calls handleOverflow when the popover collides with its container or user defined overflowed boundary. Creates the overflow handler based on the overflow boundary. * @private */ private createOverflowHandler; /** * ## handleOverflow * * @summary Repositions the popover when it collides with its container or user defined overflowed boundary. Handles overflow collisions with the popover. Repositions the popover when it collides with its container or defined boundary. Called by the intersectionObserver in createOverflowHandler. * @private * @param {Array} entries - The entries to observe. */ private handleOverflow; /** * ## addRepositioningHandlers * * @summary Adds event listeners to the window and overflowBoundary to reposition the popover when the window is resized or the overflowBoundary is scrolled. Adds repositioning handlers to the popover. * @public */ addRepositioningHandlers(): void; /** * ## addPositioningManager * * @summary Creates a new positioning manager for the popover. The positioning manager is used to calculate the position of the popover based on the anchor and the popover's collision with the window or overflowBoundary. Creates the positioning manager for the popover. * @public */ createPositioningManager(): void; /** * Removes event listeners from the popover. * @public */ removeEventListeners(): void; /** * ## releasePositions * * @summary cleans the positions that are not allowed. Releases the open positions for the popover. Cleans the positions that are not allowed. * @private */ private releasePositions; /** * ## repositionPopover * * @summary Updates the position of the popover based on popover collisions. Repositions the popover based on collisions. * @private * @param {Array} openPositions - The array of open positions. */ private repositionPopover; /** * ## observePopoverOverflow * * @summary Disconnects and re-observes the popoverReference for overflow. This is used to reposition the popover in the event that it collides with its container or user defined overflowed boundary. Disconnecting is required to reset the baseline for the intersection observer. This method will be called repeatedly on ui changes like resizing the window or scrolling the overflowBoundary. Observes the popover for overflow. Disconnects and re-observes the popoverReference for overflow. * @private */ private observePopoverOverflow; connectedCallback(): void; } //# sourceMappingURL=popover.d.ts.map