import { OpenDirection } from '../menu/menu.types';
/**
 * The portal component provides a way to render children into a DOM node that
 * exist outside the DOM hierarchy of the parent component.
 *
 * When the limel-portal component is used, it creates a new DOM node (a div element)
 * and appends it to a parent element (by default, the body of the document).
 * The child elements of the limel-portal are then moved from
 * their original location in the DOM to this new div element.
 *
 * This technique is often used to overcome CSS stacking context issues,
 * or to render UI elements like modals, dropdowns, tooltips, etc.,
 * that need to visually "break out" of their container.
 *
 * Using this component, we ensure that the content is always rendered in the
 * correct position, and never covers its own trigger, or another component
 * that is opened in the stacking layer. This way, we don't need to worry about
 * z-indexes, or other stacking context issues.
 *
 * :::important
 * There are some caveats when using this component
 *
 * 1. Events might not bubble up as expected since the content is moved out to
 * another DOM node.
 * 2. Any styling that is applied to content from the parent will be lost, if the
 * content is just another web-component it will work without any issues.
 * Alternatively, use the `style=""` html attribute.
 * 3. Any component that is placed inside the container must have a style of
 * `max-height: inherit`. This ensures that its placement is calculated
 * correctly in relation to the trigger, and that it never covers its own
 * trigger.
 * 4. When the node is moved in the DOM, `disconnectedCallback` and
 * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
 * to do any tear-down, the appropriate setup will have to be done again on
 * `connectedCallback`.
 * :::
 *
 * @slot - Content to put inside the portal
 * @private
 * @exampleComponent limel-example-portal-basic
 */
export declare class Portal {
    /**
     * Decides which direction the portal content should open.
     */
    openDirection: OpenDirection;
    /**
     * Position of the content.
     */
    position: 'fixed' | 'absolute';
    /**
     * A unique ID.
     */
    containerId: string;
    /**
     * Dynamic styling that can be applied to the container holding the content.
     */
    containerStyle: object;
    /**
     * Used to make a dropdown have the same width as the trigger, for example
     * in `limel-picker`.
     */
    inheritParentWidth: boolean;
    /**
     * True if the content within the portal should be visible.
     *
     * If the content is from within a dialog for instance, this can be set to
     * true from false when the dialog opens to position the content properly.
     */
    visible: boolean;
    /**
     * The element that the content should be positioned relative to.
     * Defaults to the limel-portal element.
     */
    anchor?: HTMLElement;
    private host;
    private parents;
    private container;
    private popperInstance;
    private loaded;
    private observer;
    constructor();
    disconnectedCallback(): void;
    connectedCallback(): void;
    componentDidLoad(): void;
    private init;
    render(): any;
    onVisible(): void;
    private createContainer;
    private attachContainer;
    private removeContainer;
    private hideContainer;
    private showContainer;
    private animateHideAndCleanup;
    private styleContainer;
    private setContainerWidth;
    private getContentWidth;
    private setContainerStyles;
    private createPopper;
    private destroyPopper;
    private createPopperConfig;
    private getPlacement;
    private getFlipPlacement;
    private setContainerHeight;
    private getParent;
}
//# sourceMappingURL=portal.d.ts.map