@ngneat/helipopper
Version:
A Powerful Tooltip and Popover for Angular Applications
96 lines (95 loc) • 7.77 kB
TypeScript
import { AfterViewInit, ElementRef, EventEmitter, Injector, InputSignal, NgZone, OnChanges, OnInit, SimpleChanges, ViewContainerRef } from '@angular/core';
import type { Instance } from 'tippy.js';
import { Subject } from 'rxjs';
import { Content, ViewOptions, ViewRef, ViewService } from '@ngneat/overview';
import { TippyConfig, TippyInstance, TippyProps } from '@ngneat/helipopper/config';
import * as i0 from "@angular/core";
export declare class TippyDirective implements OnChanges, AfterViewInit, OnInit {
protected globalConfig: TippyConfig;
protected injector: Injector;
protected viewService: ViewService;
protected vcr: ViewContainerRef;
protected ngZone: NgZone;
protected hostRef: ElementRef;
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: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
readonly isLazy: import("@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: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
readonly staticWidthHost: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
readonly data: InputSignal<any>;
readonly useHostWidth: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
readonly hideOnEscape: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | "false" | "true" | null | undefined>;
readonly popperWidth: InputSignal<string | number | undefined>;
readonly customHost: InputSignal<HTMLElement | undefined>;
readonly isVisible: import("@angular/core").ModelSignal<boolean>;
visible: EventEmitter<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;
constructor(globalConfig: TippyConfig, injector: Injector, viewService: ViewService, vcr: ViewContainerRef, ngZone: NgZone, hostRef: ElementRef);
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(): import("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 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: i0.ɵɵFactoryDeclaration<TippyDirective, never>;
static ɵdir: i0.ɵɵ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; }; }, { "isVisible": "tpIsVisibleChange"; "visible": "tpVisible"; }, never, never, true, never>;
}