@ng-web-apis/intersection-observer/fesm2022/ng-web-apis-intersection-observer.mjs

A library for declarative use of Intersection Observer API with Angular

import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, Directive, Injectable } from '@angular/core';
import { outputFromObservable } from '@angular/core/rxjs-interop';
import { Observable, share } from 'rxjs';
import { WA_WINDOW } from '@ng-web-apis/common';

const SafeObserver = typeof IntersectionObserver === 'undefined'
    ? class {
        root = null;
        rootMargin = '';
        thresholds = [];
        observe() { }
        unobserve() { }
        disconnect() { }
        takeRecords() {
            return [];
        }
    }
    : IntersectionObserver;

const WA_INTERSECTION_ROOT = new InjectionToken(ngDevMode ? '[WA_INTERSECTION_ROOT]' : '');

const WA_INTERSECTION_ROOT_MARGIN_DEFAULT = '0px 0px 0px 0px';
const WA_INTERSECTION_ROOT_MARGIN = new InjectionToken(ngDevMode ? '[WA_INTERSECTION_ROOT_MARGIN]' : '', { factory: () => WA_INTERSECTION_ROOT_MARGIN_DEFAULT });

function rootMarginFactory() {
    return (inject(ElementRef).nativeElement.getAttribute('waIntersectionRootMargin') ||
        WA_INTERSECTION_ROOT_MARGIN_DEFAULT);
}

const WA_INTERSECTION_THRESHOLD_DEFAULT = 0;
const WA_INTERSECTION_THRESHOLD = new InjectionToken(ngDevMode ? '[WA_INTERSECTION_THRESHOLD]' : '', { factory: () => WA_INTERSECTION_THRESHOLD_DEFAULT });

function thresholdFactory() {
    return (inject(ElementRef)
        .nativeElement.getAttribute('waIntersectionThreshold')
        ?.split(',')
        .map(Number.parseFloat) || WA_INTERSECTION_THRESHOLD_DEFAULT);
}

class WaIntersectionObserverDirective extends SafeObserver {
    callbacks = new Map();
    margin = '';
    threshold = '';
    constructor() {
        const root = inject(WA_INTERSECTION_ROOT, { optional: true });
        super((entries) => {
            this.callbacks.forEach((callback, element) => {
                const filtered = entries.filter(({ target }) => target === element);
                if (filtered.length) {
                    callback(filtered, this);
                }
            });
        }, {
            root: root?.nativeElement,
            rootMargin: rootMarginFactory(),
            threshold: thresholdFactory(),
        });
    }
    observe(target, callback = () => { }) {
        super.observe(target);
        this.callbacks.set(target, callback);
    }
    unobserve(target) {
        super.unobserve(target);
        this.callbacks.delete(target);
    }
    ngOnDestroy() {
        this.disconnect();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: WaIntersectionObserverDirective, isStandalone: true, selector: "[waIntersectionObserver]", inputs: { margin: ["waIntersectionRootMargin", "margin"], threshold: ["waIntersectionThreshold", "threshold"] }, exportAs: ["IntersectionObserver"], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserverDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[waIntersectionObserver]',
                    inputs: ['margin: waIntersectionRootMargin', 'threshold: waIntersectionThreshold'],
                    exportAs: 'IntersectionObserver',
                }]
        }], ctorParameters: () => [] });

class WaIntersectionObserveeService extends Observable {
    constructor() {
        const nativeElement = inject(ElementRef).nativeElement;
        const observer = inject(WaIntersectionObserverDirective);
        super((subscriber) => {
            observer.observe(nativeElement, (entries) => {
                subscriber.next(entries);
            });
            return () => {
                observer.unobserve(nativeElement);
            };
        });
        return this.pipe(share());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserveeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserveeService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserveeService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [] });

class WaIntersectionObservee {
    waIntersectionObservee = outputFromObservable(inject(WaIntersectionObserveeService));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObservee, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: WaIntersectionObservee, isStandalone: true, selector: "[waIntersectionObservee]", outputs: { waIntersectionObservee: "waIntersectionObservee" }, providers: [WaIntersectionObserveeService], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObservee, decorators: [{
            type: Directive,
            args: [{
                    selector: '[waIntersectionObservee]',
                    providers: [WaIntersectionObserveeService],
                }]
        }], propDecorators: { waIntersectionObservee: [{ type: i0.Output, args: ["waIntersectionObservee"] }] } });

class WaIntersectionRoot {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: WaIntersectionRoot, isStandalone: true, selector: "[waIntersectionRoot]", providers: [{ provide: WA_INTERSECTION_ROOT, useExisting: ElementRef }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionRoot, decorators: [{
            type: Directive,
            args: [{
                    selector: '[waIntersectionRoot]',
                    providers: [{ provide: WA_INTERSECTION_ROOT, useExisting: ElementRef }],
                }]
        }] });

const WaIntersectionObserver = [
    WaIntersectionObserverDirective,
    WaIntersectionObservee,
    WaIntersectionRoot,
];

class WaIntersectionObserverService extends Observable {
    nativeElement = inject(ElementRef).nativeElement;
    rootMargin = inject(WA_INTERSECTION_ROOT_MARGIN);
    threshold = inject(WA_INTERSECTION_THRESHOLD);
    root = inject(WA_INTERSECTION_ROOT, { optional: true })?.nativeElement ?? null;
    constructor() {
        super((subscriber) => {
            const observer = new SafeObserver((entries) => {
                subscriber.next(entries);
            }, {
                root: this.root,
                rootMargin: this.rootMargin,
                threshold: this.threshold,
            });
            observer.observe(this.nativeElement);
            return () => {
                observer.disconnect();
            };
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserverService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaIntersectionObserverService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [] });

const WA_INTERSECTION_OBSERVER_SUPPORT = new InjectionToken(ngDevMode ? '[WA_INTERSECTION_OBSERVER_SUPPORT]' : '', { factory: () => !!inject(WA_WINDOW).IntersectionObserver });

/**
 * Generated bundle index. Do not edit.
 */

export { WA_INTERSECTION_OBSERVER_SUPPORT, WA_INTERSECTION_ROOT, WA_INTERSECTION_ROOT_MARGIN, WA_INTERSECTION_ROOT_MARGIN_DEFAULT, WA_INTERSECTION_THRESHOLD, WA_INTERSECTION_THRESHOLD_DEFAULT, WaIntersectionObservee, WaIntersectionObserveeService, WaIntersectionObserver, WaIntersectionObserverDirective, WaIntersectionObserverService, WaIntersectionRoot };
//# sourceMappingURL=ng-web-apis-intersection-observer.mjs.map