@controllable-ui/ngx-tooltip/index.d.ts

> ✨ Check out the demo [here](https://ciprian-anin.github.io/controllable-ui-angular/).

import * as _angular_core from '@angular/core';
import { Signal, OnChanges, ElementRef, SimpleChanges } from '@angular/core';

type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | "left-start" | "left" | "left-end" | "right-start" | "right" | "right-end";

declare const defaultOrderOfPlacementsToBeTried: {
    [key in Placement]: [
        preferredPlacement: Placement,
        ...restOfPlacements: Placement[]
    ];
};
type BaseProps = {
    open: Signal<boolean>;
    onOpen$?: () => void;
    onClose$?: () => void;
    preferredPlacement?: Placement;
    orderOfPlacementsToBeTried?: [
        preferredPlacement: Placement,
        ...restOfPlacements: Placement[]
    ];
    triggerActions?: ('hover' | 'focus' | 'click')[];
    /**
     * Distance between relative element and tooltip dialog
     */
    dialogOffset?: number;
    /**
     * Open timeout in ms
     */
    enterDelay?: number;
    /**
     * Close timeout in ms
     */
    leaveDelay?: number;
    arrow?: boolean;
    /**
     * Scrollable container is the one use
     * to track scroll event and position dialog while scrolling inside it.
     */
    scrollableContainer?: HTMLElement;
    tooltipClass?: string;
    tooltipRootClass?: string;
};
type KeepCurrentPlacementStrategyProps = BaseProps & {
    /**
     * Keep current placement of dialog as time as it remains in
     * min & max sizes boundaries.
     */
    placementStrategy: 'considerKeepingCurrentPlacement';
    /**
     * `dialogMinMaxSizes`:
     *   > In case we need to keep current position, we will use maximum & minimum sizes
     *   > of dialog to check if it fits in current placement, without going over its minimum sizes.
     *   > In case we don't have minimum size available for current placement,
     *   > than will be tried next place from `orderOfPlacementsToBeTried`.
     *
     *   > Maximum size is used to make sure to not have a bigger maximum size on dialog popover.
     *   > (we make sure to override the maximum size in case the available space is smaller than the dialog size)
     */
    dialogMinMaxSizes?: {
        dialogMaxHeight?: number;
        dialogMinHeight?: number;
        dialogMaxWidth?: number;
        dialogMinWidth?: number;
    };
};
/**
 * Dialog placement will be recomputed immediately after we remain
 * without necessary space for dialog on current placement.
 */
type DefaultStrategyProps = BaseProps & {
    placementStrategy: 'default';
};
type Props = DefaultStrategyProps | KeepCurrentPlacementStrategyProps;
declare class NgxTooltipComponent implements OnChanges {
    open: _angular_core.InputSignal<boolean | undefined>;
    preferredPlacement: _angular_core.InputSignal<Placement>;
    orderOfPlacementsToBeTried: _angular_core.InputSignal<[preferredPlacement: Placement, ...restOfPlacements: Placement[]] | undefined>;
    orderOfPlacementsToBeTriedComputed: Signal<[preferredPlacement: Placement, ...restOfPlacements: Placement[]]>;
    enterDelay: _angular_core.InputSignal<number>;
    leaveDelay: _angular_core.InputSignal<number>;
    triggerActions: _angular_core.InputSignal<("hover" | "focus" | "click")[]>;
    arrow: _angular_core.InputSignal<boolean>;
    arrowSize: Signal<number>;
    dialogOffset: _angular_core.InputSignal<number>;
    computedDialogOffset: Signal<number>;
    bridgeSize: Signal<number>;
    scrollableContainer: _angular_core.InputSignal<ElementRef<any> | undefined>;
    tooltipRootClass: _angular_core.InputSignal<string | undefined>;
    tooltipClass: _angular_core.InputSignal<string | undefined>;
    /**
     * default - Dialog placement will be recomputed immediately after we remain
     * without necessary space for dialog on current placement.
     *
     * considerKeepingCurrentPlacement - Keep current placement of dialog as time as it remains in
     * min & max sizes boundaries.
     */
    placementStrategy: _angular_core.InputSignal<"considerKeepingCurrentPlacement" | "default" | undefined>;
    /**
     *
     * `dialogMinMaxSizes`:
     *   > is used when placementStrategy has value considerKeepingCurrentPlacement
     *   > In case we need to keep current position, we will use maximum & minimum sizes
     *   > of dialog to check if it fits in current placement, without going over its minimum sizes.
     *   > In case we don't have minimum size available for current placement,
     *   > than will be tried next place from `orderOfPlacementsToBeTried`.
     *      *   > Maximum size is used to make sure to not have a bigger maximum size on dialog popover.
     *   > (we make sure to override the maximum size in case the available space is smaller than the dialog size)
     */
    dialogMinMaxSizes: _angular_core.InputSignal<{
        dialogMaxHeight?: number;
        dialogMinHeight?: number;
        dialogMaxWidth?: number;
        dialogMinWidth?: number;
    } | undefined>;
    onOpen$: _angular_core.OutputEmitterRef<void>;
    onClose$: _angular_core.OutputEmitterRef<void>;
    tooltipId: number;
    relativeElementRef: Signal<ElementRef<any> | undefined>;
    dialogWithBridgeRef: Signal<ElementRef<any> | undefined>;
    dialogRef: Signal<ElementRef<any> | undefined>;
    dialogIsOpenLocalState: _angular_core.WritableSignal<boolean | undefined>;
    dialogPositionStyle: _angular_core.WritableSignal<{
        currentPlacement?: Placement;
        value: {
            visibility?: string;
            bottom?: string;
            top?: string;
            left?: string;
            right?: string;
            "--scrollbar-height"?: string;
            "--relative-x"?: string;
            "--relative-y"?: string;
            "--relative-width"?: string;
            "--relative-height"?: string;
            "--dialog-x"?: string;
            "--dialog-y"?: string;
            "--dialog-width"?: string;
            "--dialog-height"?: string;
        };
        maxHeight: string;
        maxWidth: string;
        '--scrollbar-height'?: string;
    }>;
    closeDialogTimeoutID: _angular_core.WritableSignal<NodeJS.Timeout | undefined>;
    openDialogTimeoutID: _angular_core.WritableSignal<NodeJS.Timeout | undefined>;
    dialogAnimationState: _angular_core.WritableSignal<"show" | "hide" | "initial">;
    constructor();
    positionDialog: () => Promise<void>;
    scheduleDialogOpen: () => Promise<void>;
    closeDialog: () => void;
    scheduleDialogClose: () => void;
    cancelDialogOpen: () => void;
    cancelDialogClose: () => void;
    handleClickOutsideClose: (event: Event) => Promise<void>;
    handleOpenAction: () => void;
    ngOnChanges(changes: SimpleChanges): Promise<void>;
    private toggleVisibility;
    handleRelativeElementMouseOrFocusLeave: (event: MouseEvent | FocusEvent) => void;
    handleMouseOrFocusLeaveDialog: (event: MouseEvent | FocusEvent) => Promise<void>;
    handleMouseEnter: () => Promise<void>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTooltipComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTooltipComponent, "ngx-tooltip", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "preferredPlacement": { "alias": "preferredPlacement"; "required": false; "isSignal": true; }; "orderOfPlacementsToBeTried": { "alias": "orderOfPlacementsToBeTried"; "required": false; "isSignal": true; }; "enterDelay": { "alias": "enterDelay"; "required": false; "isSignal": true; }; "leaveDelay": { "alias": "leaveDelay"; "required": false; "isSignal": true; }; "triggerActions": { "alias": "triggerActions"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "dialogOffset": { "alias": "dialogOffset"; "required": false; "isSignal": true; }; "scrollableContainer": { "alias": "scrollableContainer"; "required": false; "isSignal": true; }; "tooltipRootClass": { "alias": "tooltipRootClass"; "required": false; "isSignal": true; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; "isSignal": true; }; "placementStrategy": { "alias": "placementStrategy"; "required": false; "isSignal": true; }; "dialogMinMaxSizes": { "alias": "dialogMinMaxSizes"; "required": false; "isSignal": true; }; }, { "onOpen$": "onOpen$"; "onClose$": "onClose$"; }, never, [".relative-element", ".message"], true, never>;
}

export { NgxTooltipComponent, defaultOrderOfPlacementsToBeTried };
export type { DefaultStrategyProps, KeepCurrentPlacementStrategyProps, Placement, Props };