ngx-element-in-view/fesm2022/ngx-element-in-view.mjs.map

> 🔍 Angular directive to detect when an element enters the viewport using `IntersectionObserver`. Add animation classes or trigger callbacks with ease.

{"version":3,"file":"ngx-element-in-view.mjs","sources":["../../../projects/in-view/src/lib/in-view.directive.ts","../../../projects/in-view/src/public-api.ts","../../../projects/in-view/src/ngx-element-in-view.ts"],"sourcesContent":["import {\r\n  Directive,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n  Renderer2\r\n} from '@angular/core';\r\n\r\n@Directive({\r\n  selector: '[ngxElementInView]'\r\n})\r\nexport class InViewDirective implements OnInit, OnDestroy {\r\n\r\n  @Input('ngxElementInView') animationClasses: string = ''; // Optional\r\n  @Input() threshold: number = 0.1;\r\n  @Input() triggerOnce: boolean = true;\r\n\r\n  @Input() visibilityBeforeInView: boolean = true;\r\n\r\n  @Output() inView: EventEmitter<void> = new EventEmitter();\r\n\r\n  private observer!: IntersectionObserver;\r\n  private hasAnimated: boolean = false;\r\n\r\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\r\n\r\n  ngOnInit() {\r\n    // Hide initially (optional)\r\n    if(!this.visibilityBeforeInView) {\r\n    this.renderer.setStyle(this.el.nativeElement, 'visibility', 'hidden');\r\n    }\r\n    this.observer = new IntersectionObserver(entries => {\r\n      entries.forEach(entry => {\r\n        if (entry.intersectionRatio >= this.threshold && (!this.triggerOnce || !this.hasAnimated)) {\r\n          if(!this.visibilityBeforeInView) {\r\n          this.renderer.setStyle(this.el.nativeElement, 'visibility', 'visible');\r\n          }\r\n\r\n          if (this.animationClasses?.trim()) {\r\n            this.addClasses(); // Only add classes if provided\r\n          }\r\n\r\n          this.inView.emit(); // Always emit the event\r\n          this.hasAnimated = true;\r\n\r\n          if (this.triggerOnce) {\r\n            this.observer.unobserve(this.el.nativeElement);\r\n          }\r\n        }\r\n      });\r\n    }, { threshold: this.threshold });\r\n\r\n    this.observer.observe(this.el.nativeElement);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    if (this.observer) {\r\n      this.observer.disconnect();\r\n    }\r\n  }\r\n\r\n  private addClasses() {\r\n    const classList = this.animationClasses.split(' ');\r\n    classList.forEach(cls => {\r\n      if (cls.trim()) {\r\n        this.renderer.addClass(this.el.nativeElement, cls.trim());\r\n      }\r\n    });\r\n  }\r\n}","/*\r\n * Public API Surface of in-view\r\n */\r\n\r\nexport * from './lib/in-view.directive';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}