@ngneat/helipopper/index.d.ts

A Powerful Tooltip and Popover for Angular Applications

import * as rxjs from 'rxjs';
import { Subject, Observable } from 'rxjs';
import * as _ngneat_helipopper_config from '@ngneat/helipopper/config';
import { TippyProps, TippyInstance, TippyConfig, CreateOptions, ExtendedTippyInstance, TippyElement } from '@ngneat/helipopper/config';
import * as _angular_core from '@angular/core';
import { OnChanges, AfterViewInit, OnInit, InputSignal, Injector, ViewContainerRef, NgZone, ElementRef, SimpleChanges, InjectionToken } from '@angular/core';
import { Instance } from 'tippy.js';
import { Content, ViewRef, ViewOptions, ViewService } from '@ngneat/overview';

declare class TippyDirective implements OnChanges, AfterViewInit, OnInit {
    readonly appendTo: InputSignal<Element | "parent" | ((ref: Element) => Element)>;
    readonly content: InputSignal<Content | null | undefined>;
    readonly delay: InputSignal<number | [number | null, number | null]>;
    readonly duration: InputSignal<number | [number | null, number | null]>;
    readonly hideOnClick: InputSignal<boolean>;
    readonly interactive: InputSignal<boolean>;
    readonly interactiveBorder: InputSignal<number>;
    readonly maxWidth: InputSignal<string | number>;
    readonly offset: InputSignal<TippyProps['offset']>;
    readonly placement: InputSignal<TippyProps['placement']>;
    readonly popperOptions: InputSignal<TippyProps['popperOptions']>;
    readonly showOnCreate: InputSignal<boolean>;
    readonly trigger: InputSignal<string>;
    readonly triggerTarget: InputSignal<Element | Element[] | null>;
    readonly zIndex: InputSignal<number>;
    readonly animation: InputSignal<string | boolean>;
    readonly useTextContent: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
    readonly isLazy: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
    readonly variation: InputSignal<string | undefined>;
    readonly isEnabled: InputSignal<boolean>;
    readonly className: InputSignal<string | string[]>;
    readonly onlyTextOverflow: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
    readonly staticWidthHost: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
    readonly data: InputSignal<any>;
    readonly useHostWidth: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
    readonly hideOnEscape: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
    readonly popperWidth: InputSignal<string | number | undefined>;
    readonly customHost: InputSignal<HTMLElement | undefined>;
    readonly onShow: _angular_core.OutputEmitterRef<void>;
    readonly onHide: _angular_core.OutputEmitterRef<void>;
    readonly isVisible: _angular_core.ModelSignal<boolean>;
    visible: _angular_core.OutputEmitterRef<boolean>;
    protected instance: TippyInstance;
    protected viewRef: ViewRef | null;
    protected props: Partial<TippyConfig>;
    protected variationDefined: boolean;
    protected viewOptions$: ViewOptions | null;
    /**
     * We had use `visible` event emitter previously as a `takeUntil` subscriber in multiple places
     * within the directive.
     * This is for internal use only; thus we don't have to deal with the `visible` event emitter
     * and trigger change detections only when the `visible` event is being listened outside
     * in the template (`<button [tippy]="..." (visible)="..."></button>`).
     */
    protected visibleInternal: Subject<boolean>;
    private visibilityObserverCleanup;
    private contentChanged;
    private host;
    private get hostWidth();
    private destroyRef;
    private isServer;
    private tippyFactory;
    private destroyed;
    private created;
    protected globalConfig: Partial<_ngneat_helipopper_config.ExtendedTippyProps>;
    protected injector: Injector;
    protected viewService: ViewService;
    protected vcr: ViewContainerRef;
    protected ngZone: NgZone;
    protected hostRef: ElementRef<any>;
    constructor();
    ngOnChanges(changes: SimpleChanges): void;
    ngOnInit(): void;
    ngAfterViewInit(): void;
    destroyView(): void;
    /**
     * This method is useful when you append to an element that you might remove from the DOM.
     * In such cases we want to hide the tooltip and let it go through the destroy lifecycle.
     * For example, if you have a grid row with an element that you toggle using the display CSS property on hover.
     */
    observeHostVisibility(): rxjs.Subscription | undefined;
    show(): void;
    hide(): void;
    enable(): void;
    disable(): void;
    protected updateProps(props: Partial<TippyConfig>): void;
    protected setProps(props: Partial<TippyConfig>): void;
    protected setStatus(isEnabled: boolean): void;
    protected hasContent(): boolean;
    protected createInstance(): void;
    protected resolveContent(instance: TippyInstance): string | Element;
    protected handleContextMenu(): void;
    protected handleEscapeButton(): void;
    protected checkOverflow(isElementOverflow: boolean): void;
    protected listenToHostResize(): void;
    protected setInstanceWidth(instance: Instance, width: string | number): void;
    private onHidden;
    private isOverflowing$;
    private setupListeners;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TippyDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TippyDirective, "[tp]", ["tippy"], { "appendTo": { "alias": "tpAppendTo"; "required": false; "isSignal": true; }; "content": { "alias": "tp"; "required": false; "isSignal": true; }; "delay": { "alias": "tpDelay"; "required": false; "isSignal": true; }; "duration": { "alias": "tpDuration"; "required": false; "isSignal": true; }; "hideOnClick": { "alias": "tpHideOnClick"; "required": false; "isSignal": true; }; "interactive": { "alias": "tpInteractive"; "required": false; "isSignal": true; }; "interactiveBorder": { "alias": "tpInteractiveBorder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "tpMaxWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "tpOffset"; "required": false; "isSignal": true; }; "placement": { "alias": "tpPlacement"; "required": false; "isSignal": true; }; "popperOptions": { "alias": "tpPopperOptions"; "required": false; "isSignal": true; }; "showOnCreate": { "alias": "tpShowOnCreate"; "required": false; "isSignal": true; }; "trigger": { "alias": "tpTrigger"; "required": false; "isSignal": true; }; "triggerTarget": { "alias": "tpTriggerTarget"; "required": false; "isSignal": true; }; "zIndex": { "alias": "tpZIndex"; "required": false; "isSignal": true; }; "animation": { "alias": "tpAnimation"; "required": false; "isSignal": true; }; "useTextContent": { "alias": "tpUseTextContent"; "required": false; "isSignal": true; }; "isLazy": { "alias": "tpIsLazy"; "required": false; "isSignal": true; }; "variation": { "alias": "tpVariation"; "required": false; "isSignal": true; }; "isEnabled": { "alias": "tpIsEnabled"; "required": false; "isSignal": true; }; "className": { "alias": "tpClassName"; "required": false; "isSignal": true; }; "onlyTextOverflow": { "alias": "tpOnlyTextOverflow"; "required": false; "isSignal": true; }; "staticWidthHost": { "alias": "tpStaticWidthHost"; "required": false; "isSignal": true; }; "data": { "alias": "tpData"; "required": false; "isSignal": true; }; "useHostWidth": { "alias": "tpUseHostWidth"; "required": false; "isSignal": true; }; "hideOnEscape": { "alias": "tpHideOnEscape"; "required": false; "isSignal": true; }; "popperWidth": { "alias": "tpPopperWidth"; "required": false; "isSignal": true; }; "customHost": { "alias": "tpHost"; "required": false; "isSignal": true; }; "isVisible": { "alias": "tpIsVisible"; "required": false; "isSignal": true; }; }, { "onShow": "tpOnShow"; "onHide": "tpOnHide"; "isVisible": "tpIsVisibleChange"; "visible": "tpVisible"; }, never, never, true, never>;
}

declare class TippyService {
    private readonly _injector;
    private readonly _globalConfig;
    private readonly _viewService;
    private readonly _tippyFactory;
    create<T extends Content>(host: HTMLElement, content: T, options?: Partial<CreateOptions>): Observable<ExtendedTippyInstance<T>>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TippyService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TippyService>;
}

declare function inView(host: TippyElement, options?: IntersectionObserverInit): Observable<unknown>;
declare function overflowChanges(host: TippyElement): Observable<boolean>;

declare const TIPPY_REF: InjectionToken<TippyInstance>;
declare function injectTippyRef(): TippyInstance;

export { TIPPY_REF, TippyDirective, TippyService, inView, injectTippyRef, overflowChanges };