import { ElementAppenderAlignmentType, ElementAppenderPlacementType, ResponsiveType, SizeType, TranslocationType } from '../../types/ui.type'; import { ComponentInterface } from '../../stencil-public-runtime'; import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer'; import { ElementAppenderContainerController } from '../slimmers/element-appender/element-appender-container-controller'; import { PositionCalculationController } from '../slimmers/position-calculation/position-calculation-controller'; export declare type ElementAppenderShowConfig = { target: HTMLElement; appendableElement: HTMLElement; positionRelativeTo?: string; matchTargetWidth?: boolean; matchContainerHeight?: boolean; size?: ResponsiveType; minWidth?: ResponsiveType; maxWidth?: ResponsiveType; maxHeight?: number; translocation?: ResponsiveType; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; isScreenPosition?: boolean; }; declare type ShowConfigCallbackType = ElementAppenderShowConfig | ((target?: ComponentInterface) => ElementAppenderShowConfig); /** * This class is responsible for attaching the appendable element to the host element and adjusting its position * * @property {HTMLElement} showConfigCallback This is the callback function that will be * called when the user clicks on the "Configure" button. * @property {HTMLElement} showConfigCallbackTarget he component that will be used as the * target for the showConfigCallback. * @property {HTMLElement} showConfig the show config */ export declare class ElementAppender { /** * To maintain the state between container and the visible dropdown within it. * Key is containerElement */ private static containerMap; protected readonly resizeObserverSlimmer: PageResizeObserverSlimmer; protected elementAppenderContainerController: ElementAppenderContainerController; protected positionCalculationController: PositionCalculationController; private showConfigCallback; private showConfigCallbackTarget; private showConfig; private container; /** * The `constructor` function is used to initialize the `showConfigCallback` and * `showConfigCallbackTarget` properties of the class. * * @param {ShowConfigCallbackType} showConfigCallback - This is the callback function that will be * called when the user clicks on the "Configure" button. * @param {ComponentInterface} [showConfigCallbackTarget] - The component that will be used as the * target for the showConfigCallback. */ constructor(showConfigCallback: ShowConfigCallbackType, showConfigCallbackTarget?: ComponentInterface); /** * It takes an element and appends it to the DOM, then adjusts its position and size to match the * target element * * @returns {void} Nothing is being returned. */ show(): void; /** * > If the appendable element exists, hide it */ hide(): void; /** * Update position while window scroll. */ onScroll(): void; /** * It removes the z-index from the appendable element, removes the appendable element from the DOM, and * disconnects the resize observer */ destroy(): void; /** * The function "connectResizeObserver" is used to connect a resize observer. */ connectResizeObserver(): void; /** * The function disconnects a resize observer. */ disconnectResizeObserver(): void; /** * Toggle appendableElement show or hide * * @param {boolean} show remove hidden style if true, otherwise add it */ private toggleShow; /** * Show the appendable element by removing hidden styles * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884 * * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender */ private showElementAppender; /** * Hide the appendable element by adding hidden styles. * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884 * * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender */ private hideElementAppender; /** * Save visible AppendableElement from the container state * * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender */ private saveVisibleAppendElement; /** * Remove the AppendableElement from the container state. * If the container not includes visible element, will remove the container Map. * * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender */ private removeVisibleAppendElement; /** * The below method is e2e-test covered in @see {module:should-not-reset-dropdown-append-container-position-style-to-origin-when-there-is-another-dropdown-need-to-show} */ private resetContainerPosition; /** * If the showConfigCallback is a function, then call it and set the showConfig to the result. * Otherwise, set the showConfig to the showConfigCallback */ private setShowConfig; /** * It makes sure that the container element is positioned relatively, and that the appendable element * has box-sizing set to border-box * * @returns {void} */ private prepareShow; /** * init visible append element. */ private initVisibleAppendElement; /** * A function that takes no parameters and returns nothing. It sets the position of the appendable element. * * @param {boolean} usePreviousPlacement - Should keep use previous placement and alignment. * @returns {void} */ private adjustPosition; /** * Sets the z-index of the appendable element to 11000. * * @returns {void} */ private setZIndex; /** * If the showConfigCallback is a function, call it and return the result, otherwise return the * showConfigCallback * * @returns {ElementAppenderShowConfig} The showConfigCallback is being returned. */ private getShowConfig; } export {};