@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
TypeScript
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';