@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
182 lines (178 loc) • 8.32 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, ChangeDetectorRef, ViewContainerRef, NgZone, EventEmitter, DestroyRef, Output, Input, Directive } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { isPresent } from '@ng-doc/core/helpers/is-present';
import { tooltipCloseAnimation, tooltipOpenAnimation } from '@ng-doc/ui-kit/animations';
import { NgDocOverlayContainerComponent } from '@ng-doc/ui-kit/components/overlay-container';
import { toElement } from '@ng-doc/ui-kit/helpers';
import { ngDocZoneOptimize, ngDocZoneDetach } from '@ng-doc/ui-kit/observables';
import { NgDocOverlayService } from '@ng-doc/ui-kit/services';
import { NgDocOverlayStrategy } from '@ng-doc/ui-kit/services/overlay-strategy';
import { NgDocOverlayUtils } from '@ng-doc/ui-kit/utils';
import { fromEvent, timer, merge, EMPTY } from 'rxjs';
import { filter, switchMap, takeUntil } from 'rxjs/operators';
class NgDocTooltipDirective {
constructor() {
this.elementRef = inject(ElementRef);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.viewContainerRef = inject(ViewContainerRef);
this.overlayService = inject(NgDocOverlayService);
this.ngZone = inject(NgZone);
this.scrollStrategy = inject(NgDocOverlayStrategy);
this.content = '';
this.delay = 500;
this.positions = [
'top-center',
'bottom-center',
'right-center',
'left-center',
];
this.canOpen = true;
this.panelClass = '';
this.minHeight = '';
this.maxHeight = '';
this.height = '';
this.minWidth = '';
this.maxWidth = '';
this.width = '';
this.beforeOpen = new EventEmitter();
this.afterOpen = new EventEmitter();
this.beforeClose = new EventEmitter();
this.afterClose = new EventEmitter();
this.overlayRef = null;
this.destroyRef = inject(DestroyRef);
}
ngAfterViewInit() {
// Opens tooltip with delay
fromEvent(this.pointerOriginElement, 'mouseenter')
.pipe(filter(() => this.canOpen && !this.isOpened), switchMap(() => timer(this.delay).pipe(takeUntil(fromEvent(this.pointerOriginElement, 'mouseleave')))), ngDocZoneOptimize(this.ngZone), takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.show());
// Closes tooltip when mouseleave was fired, and cancel closing if mouseenter was happened
merge(fromEvent(this.pointerOriginElement, 'mouseleave'), this.beforeOpen.pipe(switchMap(() => isPresent(this.overlayRef)
? fromEvent(this.overlayRef.overlayRef.overlayElement, 'mouseleave')
: EMPTY)))
.pipe(filter(() => this.isOpened), switchMap(() => timer(50).pipe(takeUntil(fromEvent(this.pointerOriginElement, 'mouseenter')), takeUntil(isPresent(this.overlayRef)
? fromEvent(this.overlayRef.overlayRef.overlayElement, 'mouseenter')
: EMPTY))), ngDocZoneOptimize(this.ngZone), takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.hide());
}
show() {
if (!this.isOpened) {
this.overlayRef = this.overlayService.open(this.content, {
origin: this.displayOriginElement,
overlayContainer: NgDocOverlayContainerComponent,
positionStrategy: this.overlayService.connectedPositionStrategy(this.displayOriginElement, this.getPositions(this.positions)),
viewContainerRef: this.viewContainerRef,
withPointer: true,
contactBorder: true,
panelClass: ['ng-doc-tooltip', ...asArray(this.panelClass)],
height: this.height,
width: this.width,
minHeight: this.minHeight,
minWidth: this.minWidth,
maxHeight: this.maxHeight,
maxWidth: this.maxWidth,
scrollStrategy: this.scrollStrategy,
disposeOnRouteNavigation: true,
openAnimation: tooltipOpenAnimation,
closeAnimation: tooltipCloseAnimation,
});
this.beforeOpen.emit();
this.overlayRef
?.afterOpen()
.pipe(ngDocZoneDetach(this.ngZone))
.subscribe(() => this.afterOpen.emit());
this.overlayRef
?.beforeClose()
.pipe(ngDocZoneDetach(this.ngZone))
.subscribe(() => this.beforeClose.emit());
this.overlayRef
?.afterClose()
.pipe(ngDocZoneDetach(this.ngZone))
.subscribe(() => this.afterClose.emit());
this.overlayRef?.beforeClose().subscribe(() => this.hide());
this.changeDetectorRef.markForCheck();
}
}
hide() {
if (this.isOpened) {
this.overlayRef?.close();
this.overlayRef = null;
this.changeDetectorRef.markForCheck();
}
}
get isOpened() {
return !!this.overlayRef;
}
ngOnDestroy() {
if (this.overlayRef) {
this.overlayRef.overlayRef.dispose();
}
}
get pointerOriginElement() {
return isPresent(this.pointerOrigin)
? toElement(this.pointerOrigin)
: toElement(this.elementRef);
}
get displayOriginElement() {
return isPresent(this.displayOrigin)
? toElement(this.displayOrigin)
: toElement(this.elementRef);
}
getPositions(positions) {
return NgDocOverlayUtils.getConnectedPosition(!!positions && asArray(positions).length
? positions
: ['bottom-center', 'top-center', 'right-center', 'left-center'], this.displayOriginElement, 0, true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTooltipDirective, isStandalone: true, selector: "[ngDocTooltip]", inputs: { content: ["ngDocTooltip", "content"], delay: "delay", displayOrigin: "displayOrigin", pointerOrigin: "pointerOrigin", positions: "positions", canOpen: "canOpen", panelClass: "panelClass", minHeight: "minHeight", maxHeight: "maxHeight", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", width: "width" }, outputs: { beforeOpen: "beforeOpen", afterOpen: "afterOpen", beforeClose: "beforeClose", afterClose: "afterClose" }, exportAs: ["ngDocTooltip"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTooltipDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocTooltip]',
exportAs: 'ngDocTooltip',
standalone: true,
}]
}], ctorParameters: () => [], propDecorators: { content: [{
type: Input,
args: ['ngDocTooltip']
}], delay: [{
type: Input
}], displayOrigin: [{
type: Input
}], pointerOrigin: [{
type: Input
}], positions: [{
type: Input
}], canOpen: [{
type: Input
}], panelClass: [{
type: Input
}], minHeight: [{
type: Input
}], maxHeight: [{
type: Input
}], height: [{
type: Input
}], minWidth: [{
type: Input
}], maxWidth: [{
type: Input
}], width: [{
type: Input
}], beforeOpen: [{
type: Output
}], afterOpen: [{
type: Output
}], beforeClose: [{
type: Output
}], afterClose: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocTooltipDirective };
//# sourceMappingURL=ng-doc-ui-kit-directives-tooltip.mjs.map