UNPKG

@ux-aspects/ux-aspects

Version:

Open source user interface framework for building modern, responsive, mobile big data applications

115 lines (114 loc) 6.66 kB
import { Overlay, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; import { Subject } from 'rxjs'; import { AnchorAlignment, AnchorPlacement } from '../../common/overlay/index'; import { TooltipComponent } from './tooltip.component'; import * as i0 from "@angular/core"; export declare class TooltipDirective implements OnInit, OnChanges, OnDestroy { protected readonly _elementRef: ElementRef<any>; protected readonly _viewContainerRef: ViewContainerRef; protected readonly _overlay: Overlay; protected readonly _scrollDispatcher: ScrollDispatcher; private readonly _changeDetectorRef; private readonly _renderer; private readonly _tooltipService; private readonly _overlayFallback; /** Contains the content of the tooltip or a TemplateRef for more detailed content */ content: string | TemplateRef<any>; /** Allow the tooltip to be conditionally disabled */ disabled: boolean; /** All the user to add a custom class to the tooltip */ customClass: string; /** All the user to add a role to the tooltip - default is tooltip */ role: string; /** Provide the TemplateRef a context object */ context: any; /** Delay the showing of the tooltip by a number of miliseconds */ delay: number; /** Programmatically show and hide the tooltip */ isOpen: boolean; /** Customize how the tooltip should be positioned relative to the element */ placement: AnchorPlacement; /** Specify the fallback placement if the specified placement cannot be used */ fallbackPlacement: AnchorPlacement; /** Customize the position of the callout */ alignment: AnchorAlignment; /** Specify which events should show the tooltip */ showTriggers: OverlayTrigger[]; /** Specify which events should hide the tooltip */ hideTriggers: OverlayTrigger[]; /** Emits an event when the tooltip is shown */ shown: EventEmitter<void>; /** Emits a event when the tooltip is hidden */ hidden: EventEmitter<void>; /** Allow two way binding to track the visibility of the tooltip */ isOpenChange: EventEmitter<boolean>; /** Keep track of the tooltip visibility */ isVisible: boolean; /** The name of the css class to use for the tooltip direction */ positionClass: AnchorPlacement; /** Define the overlay class */ protected _overlayClass: string; /** A reference to the CDK portal containing the overlay */ protected _portal: ComponentPortal<TooltipComponent>; /** A reference to the overlay the tooltip will be inserted into */ protected _overlayRef: OverlayRef; /** A reference to the instance of the tooltip component when created */ protected _instance: TooltipComponent; /** This will emit when the directive is destroyed allowing us to unsubscribe all subscriptions automatically */ protected _onDestroy: Subject<void>; /** Store the timeout interval for cancelation */ private _showTimeoutId; /** Internally store the type of this component - usual for distinctions when extending this class */ protected _type: string; /** Set up the triggers and bind to the show/hide events to keep visibility in sync */ ngOnInit(): void; /** * We need to send input changes to the tooltip component * We can't use setters as they may trigger before tooltip initialised and can't resend once initialised **/ ngOnChanges(changes: SimpleChanges): void; /** Ensure we clean up after ourselves */ ngOnDestroy(): void; /** Make the tooltip open */ show(): void; /** If a tooltip exists and is visible, hide it */ hide(): void; /** Toggle the visibility of the tooltip */ toggle(): void; /** Recalculate the position of the popover */ reposition(): void; /** Create an instance from the overlay ref - allows overriding and additional logic here */ protected createInstance(overlayRef: OverlayRef): TooltipComponent; /** Create the component portal - allows overriding to allow other portals eg. popovers */ protected createPortal(): ComponentPortal<any>; /** Create the overlay and set up the scroll handling behavior */ private createOverlay; /** Recreate the overlay ref using the updated origin and overlay positions */ private destroyOverlay; private getPositionClass; /** * Simple utility method - because IE doesn't support array.includes * And it isn't included in the core-js/es6 polyfills which are the * only ones required by Angular and guaranteed to be there **/ protected includes<T>(array: Array<T>, value: T): boolean; /** Handle the click event - show or hide accordingly */ protected onClick(): void; /** Handle the mouse enter event - show or hide accordingly */ protected onMouseEnter(): void; /** Handle the mouse leave event - show or hide accordingly */ protected onMouseLeave(): void; /** Handle the focus event - show or hide accordingly */ protected onFocus(): void; /** Handle the blur event - show or hide accordingly */ protected onBlur(): void; /** Programmatically update the aria-describedby property */ protected setAriaDescribedBy(id: string | null): void; /** Cancel any pending tooltip (waiting on delay ellapsing) */ private cancelTooltip; static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[uxTooltip]", ["ux-tooltip"], { "content": { "alias": "uxTooltip"; "required": false; }; "disabled": { "alias": "tooltipDisabled"; "required": false; }; "customClass": { "alias": "tooltipClass"; "required": false; }; "role": { "alias": "tooltipRole"; "required": false; }; "context": { "alias": "tooltipContext"; "required": false; }; "delay": { "alias": "tooltipDelay"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "fallbackPlacement": { "alias": "fallbackPlacement"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "showTriggers": { "alias": "showTriggers"; "required": false; }; "hideTriggers": { "alias": "hideTriggers"; "required": false; }; }, { "shown": "shown"; "hidden": "hidden"; "isOpenChange": "isOpenChange"; }, never, never, false, never>; } export type OverlayTrigger = 'click' | 'clickoutside' | 'escape' | 'mouseenter' | 'focus' | 'mouseleave' | 'blur';