ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
88 lines • 9.23 kB
JavaScript
import { Directive, HostListener, Input } from '@angular/core';
import tippy from 'tippy.js';
import * as i0 from "@angular/core";
export class TooltipDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.description = '';
this.direction = 'top';
this.trigger = 'mouseenter';
this.isTooltipVisible = false;
}
ngOnInit() {
this.createTooltip();
}
ngOnDestroy() {
if (this.tippyInstance) {
this.tippyInstance.destroy();
}
}
onWindowResize() {
if (window.innerWidth < 975) {
this.createTooltip('top');
}
else {
this.createTooltip();
}
}
createTooltip(newDirection = this.direction) {
if (this.tippyInstance) {
this.tippyInstance.destroy();
}
if (window.innerWidth < 975 &&
(newDirection === 'left' || newDirection === 'left-start' || newDirection === 'left-end')) {
newDirection = 'bottom';
}
else if (window.innerWidth < 975 &&
(newDirection === 'right' || newDirection === 'right-start' || newDirection === 'right-end')) {
newDirection = 'top';
}
this.tippyInstance = tippy(this.elementRef.nativeElement, {
content: this.description,
placement: newDirection,
offset: [0, 16],
theme: 'custom-theme',
trigger: this.trigger
});
}
closeTooltip() {
if (this.tippyInstance) {
this.tippyInstance.hide();
}
}
toggleTooltip() {
if (this.tippyInstance) {
if (this.isTooltipVisible) {
this.tippyInstance.hide();
}
else {
this.tippyInstance.show();
}
this.isTooltipVisible = !this.isTooltipVisible;
}
}
}
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[oTooltip]", inputs: { description: "description", direction: "direction", trigger: "trigger" }, host: { listeners: { "window:resize": "onWindowResize()", "focusout": "closeTooltip()", "keydown.enter": "toggleTooltip()" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, decorators: [{
type: Directive,
args: [{
selector: '[oTooltip]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { description: [{
type: Input
}], direction: [{
type: Input
}], trigger: [{
type: Input
}], onWindowResize: [{
type: HostListener,
args: ['window:resize']
}], closeTooltip: [{
type: HostListener,
args: ['focusout']
}], toggleTooltip: [{
type: HostListener,
args: ['keydown.enter']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vdG9vbHRpcC90b29sdGlwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQzlGLE9BQU8sS0FBSyxNQUFNLFVBQVUsQ0FBQzs7QUFNN0IsTUFBTSxPQUFPLGdCQUFnQjtJQVEzQixZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBUDFCLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBQ3pCLGNBQVMsR0FBc0IsS0FBSyxDQUFDO1FBQ3JDLFlBQU8sR0FBMkIsWUFBWSxDQUFDO1FBR3ZELHFCQUFnQixHQUFZLEtBQUssQ0FBQztJQUVHLENBQUM7SUFFOUMsUUFBUTtRQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQzlCO0lBQ0gsQ0FBQztJQUdELGNBQWM7UUFDWixJQUFJLE1BQU0sQ0FBQyxVQUFVLEdBQUcsR0FBRyxFQUFFO1lBQzNCLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDM0I7YUFBTTtZQUNMLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN0QjtJQUNILENBQUM7SUFFTyxhQUFhLENBQUMsZUFBa0MsSUFBSSxDQUFDLFNBQVM7UUFDcEUsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDOUI7UUFFRCxJQUNFLE1BQU0sQ0FBQyxVQUFVLEdBQUcsR0FBRztZQUN2QixDQUFDLFlBQVksS0FBSyxNQUFNLElBQUksWUFBWSxLQUFLLFlBQVksSUFBSSxZQUFZLEtBQUssVUFBVSxDQUFDLEVBQ3pGO1lBQ0EsWUFBWSxHQUFHLFFBQVEsQ0FBQztTQUN6QjthQUFNLElBQ0wsTUFBTSxDQUFDLFVBQVUsR0FBRyxHQUFHO1lBQ3ZCLENBQUMsWUFBWSxLQUFLLE9BQU8sSUFBSSxZQUFZLEtBQUssYUFBYSxJQUFJLFlBQVksS0FBSyxXQUFXLENBQUMsRUFDNUY7WUFDQSxZQUFZLEdBQUcsS0FBSyxDQUFDO1NBQ3RCO1FBRUQsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUU7WUFDeEQsT0FBTyxFQUFFLElBQUksQ0FBQyxXQUFXO1lBQ3pCLFNBQVMsRUFBRSxZQUFZO1lBQ3ZCLE1BQU0sRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDZixLQUFLLEVBQUUsY0FBYztZQUNyQixPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU87U0FDdEIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUdELFlBQVk7UUFDVixJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDdEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFHRCxhQUFhO1FBQ1gsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3RCLElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFO2dCQUN6QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO2FBQzNCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7YUFDM0I7WUFDRCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUM7U0FDaEQ7SUFDSCxDQUFDOzs2R0F4RVUsZ0JBQWdCO2lHQUFoQixnQkFBZ0I7MkZBQWhCLGdCQUFnQjtrQkFINUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtpQkFDdkI7aUdBRWlCLFdBQVc7c0JBQTFCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxPQUFPO3NCQUF0QixLQUFLO2dCQWtCTixjQUFjO3NCQURiLFlBQVk7dUJBQUMsZUFBZTtnQkFvQzdCLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxVQUFVO2dCQVF4QixhQUFhO3NCQURaLFlBQVk7dUJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHRpcHB5IGZyb20gJ3RpcHB5LmpzJztcclxuaW1wb3J0IHsgVG9vbHRpcERpcmVjdGlvbnMgfSBmcm9tICduZ3gtb2JlbGlzY28tZXhhbXBsZS9jb3JlL21vZGVscyc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tvVG9vbHRpcF0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUb29sdGlwRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBkZXNjcmlwdGlvbjogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgcHVibGljIGRpcmVjdGlvbjogVG9vbHRpcERpcmVjdGlvbnMgPSAndG9wJztcclxuICBASW5wdXQoKSBwdWJsaWMgdHJpZ2dlcjogJ21vdXNlZW50ZXInIHwgJ2NsaWNrJyA9ICdtb3VzZWVudGVyJztcclxuXHJcbiAgcHJpdmF0ZSB0aXBweUluc3RhbmNlOiBhbnk7XHJcbiAgcHJpdmF0ZSBpc1Rvb2x0aXBWaXNpYmxlOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge31cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmNyZWF0ZVRvb2x0aXAoKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMudGlwcHlJbnN0YW5jZSkge1xyXG4gICAgICB0aGlzLnRpcHB5SW5zdGFuY2UuZGVzdHJveSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScpXHJcbiAgb25XaW5kb3dSZXNpemUoKTogdm9pZCB7XHJcbiAgICBpZiAod2luZG93LmlubmVyV2lkdGggPCA5NzUpIHtcclxuICAgICAgdGhpcy5jcmVhdGVUb29sdGlwKCd0b3AnKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuY3JlYXRlVG9vbHRpcCgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVUb29sdGlwKG5ld0RpcmVjdGlvbjogVG9vbHRpcERpcmVjdGlvbnMgPSB0aGlzLmRpcmVjdGlvbik6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMudGlwcHlJbnN0YW5jZSkge1xyXG4gICAgICB0aGlzLnRpcHB5SW5zdGFuY2UuZGVzdHJveSgpO1xyXG4gICAgfVxyXG5cclxuICAgIGlmIChcclxuICAgICAgd2luZG93LmlubmVyV2lkdGggPCA5NzUgJiZcclxuICAgICAgKG5ld0RpcmVjdGlvbiA9PT0gJ2xlZnQnIHx8IG5ld0RpcmVjdGlvbiA9PT0gJ2xlZnQtc3RhcnQnIHx8IG5ld0RpcmVjdGlvbiA9PT0gJ2xlZnQtZW5kJylcclxuICAgICkge1xyXG4gICAgICBuZXdEaXJlY3Rpb24gPSAnYm90dG9tJztcclxuICAgIH0gZWxzZSBpZiAoXHJcbiAgICAgIHdpbmRvdy5pbm5lcldpZHRoIDwgOTc1ICYmXHJcbiAgICAgIChuZXdEaXJlY3Rpb24gPT09ICdyaWdodCcgfHwgbmV3RGlyZWN0aW9uID09PSAncmlnaHQtc3RhcnQnIHx8IG5ld0RpcmVjdGlvbiA9PT0gJ3JpZ2h0LWVuZCcpXHJcbiAgICApIHtcclxuICAgICAgbmV3RGlyZWN0aW9uID0gJ3RvcCc7XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy50aXBweUluc3RhbmNlID0gdGlwcHkodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHtcclxuICAgICAgY29udGVudDogdGhpcy5kZXNjcmlwdGlvbixcclxuICAgICAgcGxhY2VtZW50OiBuZXdEaXJlY3Rpb24sXHJcbiAgICAgIG9mZnNldDogWzAsIDE2XSxcclxuICAgICAgdGhlbWU6ICdjdXN0b20tdGhlbWUnLFxyXG4gICAgICB0cmlnZ2VyOiB0aGlzLnRyaWdnZXJcclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZm9jdXNvdXQnKVxyXG4gIGNsb3NlVG9vbHRpcCgpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLnRpcHB5SW5zdGFuY2UpIHtcclxuICAgICAgdGhpcy50aXBweUluc3RhbmNlLmhpZGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uZW50ZXInKVxyXG4gIHRvZ2dsZVRvb2x0aXAoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy50aXBweUluc3RhbmNlKSB7XHJcbiAgICAgIGlmICh0aGlzLmlzVG9vbHRpcFZpc2libGUpIHtcclxuICAgICAgICB0aGlzLnRpcHB5SW5zdGFuY2UuaGlkZSgpO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXMudGlwcHlJbnN0YW5jZS5zaG93KCk7XHJcbiAgICAgIH1cclxuICAgICAgdGhpcy5pc1Rvb2x0aXBWaXNpYmxlID0gIXRoaXMuaXNUb29sdGlwVmlzaWJsZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19