ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
127 lines (122 loc) • 5.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostListener, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1 from '@ngneat/helipopper';
import { TippyModule, tooltipVariation, popperVariation } from '@ngneat/helipopper';
import tippy from 'tippy.js';
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']
}] } });
class OTooltipModule {
}
OTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OTooltipModule, declarations: [TooltipDirective], imports: [CommonModule, i1.TippyModule], exports: [TooltipDirective] });
OTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTooltipModule, imports: [CommonModule,
TippyModule.forRoot({
variations: {
tooltip: tooltipVariation,
popper: popperVariation
}
})] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTooltipModule, decorators: [{
type: NgModule,
args: [{
declarations: [TooltipDirective],
imports: [
CommonModule,
TippyModule.forRoot({
variations: {
tooltip: tooltipVariation,
popper: popperVariation
}
})
],
exports: [TooltipDirective]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OTooltipModule, TooltipDirective };
//# sourceMappingURL=ngx-obelisco-example-tooltip.mjs.map