ngx-ellipsis-tool/fesm2022/ngx-ellipsis-tool.mjs.map

Angular directive that automatically detects when text is truncated with ellipsis (...) and shows a tooltip with the full text — only when needed!

{"version":3,"file":"ngx-ellipsis-tool.mjs","sources":["../../../projects/ngx-ellipsis-tool/src/lib/custom-tooltip/custom-tooltip.component.ts","../../../projects/ngx-ellipsis-tool/src/lib/ngx-ellipsis-tool.directive.ts","../../../projects/ngx-ellipsis-tool/src/ngx-ellipsis-tool.ts"],"sourcesContent":["import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'app-tooltip',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div\n      class=\"custom-tooltip\"\n      [ngClass]=\"customClass\"\n      [style.top.px]=\"top\"\n      [style.left.px]=\"left\"\n    >\n      <span [innerHTML]=\"formattedText\"></span>\n    </div>\n  `,\n  styles: [`\n    .custom-tooltip {\n      background: #333;\n      color: #fff;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-size: 12px;\n      position: absolute;\n      white-space: pre-line;\n      z-index: 10000;\n      pointer-events: none;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      transform: translateY(-100%);\n      max-width: 300px;\n      word-wrap: break-word;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TooltipComponent {\n  @Input() text = '';\n  @Input() top = 0;\n  @Input() left = 0;\n  @Input() customClass = '';\n\n  get formattedText(): string {\n    return this.text.replace(/\\n/g, '<br>');\n  }\n}\n","import {\n  Directive,\n  ElementRef,\n  Input,\n  HostListener,\n  ComponentRef,\n  ApplicationRef,\n  EnvironmentInjector,\n  inject,\n  DestroyRef,\n  createComponent\n} from '@angular/core'; \nimport { TooltipComponent } from './custom-tooltip/custom-tooltip.component';\n\n@Directive({\n  selector: '[ngxEllipsisTooltip]',\n  standalone: true\n})\nexport class NgxEllipsisTooltipDirective {\n  @Input() tooltipText?: string;\n  @Input() placement: 'top' | 'bottom' = 'top';\n  @Input() delay = 300;\n  @Input() tooltipClass = '';\n\n  private tooltipRef?: ComponentRef<TooltipComponent>;\n  private appRef = inject(ApplicationRef);\n  private envInjector = inject(EnvironmentInjector);\n  private destroyRef = inject(DestroyRef);\n\n  private showTimeoutId: any;\n\n  constructor(private el: ElementRef<HTMLElement>) {\n    this.destroyRef.onDestroy(() => this.hideTooltip());\n  }\n\n  @HostListener('mouseenter')\n  onMouseEnter() {\n    this.scheduleShowTooltip();\n  }\n\n  @HostListener('mouseleave')\n  onMouseLeave() {\n    this.cancelShow();\n    this.hideTooltip();\n  }\n\n  @HostListener('click')\n  onClick() {\n    // For mobile → show immediately on click\n    this.cancelShow();\n    this.tryShowTooltip();\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent) {\n    if (this.tooltipRef && !this.el.nativeElement.contains(event.target as Node)) {\n      this.hideTooltip();\n    }\n  }\n\n  private scheduleShowTooltip() {\n    this.cancelShow();\n    this.showTimeoutId = setTimeout(() => {\n      this.tryShowTooltip();\n    }, this.delay);\n  }\n\n  private cancelShow() {\n    if (this.showTimeoutId) {\n      clearTimeout(this.showTimeoutId);\n      this.showTimeoutId = null;\n    }\n  }\n\n  private tryShowTooltip() {\n    if (this.isTruncated()) {\n      const text = this.tooltipText || this.el.nativeElement.textContent?.trim() || '';\n      const rect = this.el.nativeElement.getBoundingClientRect();\n\n      let top = rect.top + window.scrollY;\n      let left = rect.left + window.scrollX;\n      const elHeight = rect.height;\n\n      if (this.placement === 'top') {\n        top -= 8;\n      } else {\n        top += elHeight + 8;\n      }\n\n      this.showTooltip(text, left, top);\n    }\n  }\n\n  private isTruncated(): boolean {\n    const el = this.el.nativeElement;\n    return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n  }\n\n  private showTooltip(text: string, left: number, top: number) {\n    this.hideTooltip();\n  \n    this.tooltipRef = createComponent(TooltipComponent, {\n      environmentInjector: this.envInjector,\n      hostElement: document.body\n    });\n    this.tooltipRef.instance.text = text;\n    this.tooltipRef.instance.left = left;\n    this.tooltipRef.instance.top = top;\n    this.tooltipRef.instance.customClass = this.tooltipClass;\n  }\n  \n\n  private hideTooltip() {\n    if (this.tooltipRef) {\n      this.tooltipRef.destroy();\n      this.tooltipRef = undefined;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}