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

A library for declarative use of Mutation Observer API with Angular

import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, output, Directive, Injectable } from '@angular/core';
import { Observable } from 'rxjs';

const SafeObserver = typeof MutationObserver === 'undefined'
    ? class {
        observe() { }
        disconnect() { }
        takeRecords() {
            return [];
        }
    }
    : MutationObserver;

const WA_MUTATION_OBSERVER_INIT = new InjectionToken(ngDevMode ? '[WA_MUTATION_OBSERVER_INIT]' : '');
function provideMutationObserverInit(useValue) {
    return { provide: WA_MUTATION_OBSERVER_INIT, useValue };
}

function booleanAttribute(element, attribute) {
    return element.getAttribute(attribute) !== null || undefined;
}

function mutationObserverInitFactory() {
    const { nativeElement } = inject(ElementRef);
    const attributeFilter = nativeElement.getAttribute('attributeFilter');
    return {
        attributeFilter: attributeFilter?.split(',').map((attr) => attr.trim()),
        attributeOldValue: booleanAttribute(nativeElement, 'attributeOldValue'),
        attributes: booleanAttribute(nativeElement, 'attributes'),
        characterData: booleanAttribute(nativeElement, 'characterData'),
        characterDataOldValue: booleanAttribute(nativeElement, 'characterDataOldValue'),
        childList: booleanAttribute(nativeElement, 'childList'),
        subtree: booleanAttribute(nativeElement, 'subtree'),
    };
}

class WaMutationObserver extends SafeObserver {
    nativeElement = inject(ElementRef).nativeElement;
    config = inject(WA_MUTATION_OBSERVER_INIT);
    attributeFilter = '';
    attributeOldValue = '';
    attributes = '';
    characterData = '';
    characterDataOldValue = '';
    childList = '';
    subtree = '';
    waMutationObserver = output();
    constructor() {
        super((records) => {
            this.waMutationObserver.emit(records);
        });
        this.observe(this.nativeElement, this.config);
    }
    ngOnDestroy() {
        this.disconnect();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaMutationObserver, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: WaMutationObserver, isStandalone: true, selector: "[waMutationObserver]", inputs: { attributeFilter: "attributeFilter", attributeOldValue: "attributeOldValue", attributes: "attributes", characterData: "characterData", characterDataOldValue: "characterDataOldValue", childList: "childList", subtree: "subtree" }, outputs: { waMutationObserver: "waMutationObserver" }, providers: [
            { provide: WA_MUTATION_OBSERVER_INIT, useFactory: mutationObserverInitFactory },
        ], exportAs: ["MutationObserver"], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaMutationObserver, decorators: [{
            type: Directive,
            args: [{
                    selector: '[waMutationObserver]',
                    inputs: [
                        'attributeFilter',
                        'attributeOldValue',
                        'attributes',
                        'characterData',
                        'characterDataOldValue',
                        'childList',
                        'subtree',
                    ],
                    providers: [
                        { provide: WA_MUTATION_OBSERVER_INIT, useFactory: mutationObserverInitFactory },
                    ],
                    exportAs: 'MutationObserver',
                }]
        }], ctorParameters: () => [], propDecorators: { waMutationObserver: [{ type: i0.Output, args: ["waMutationObserver"] }] } });

class WaMutationObserverService extends Observable {
    constructor() {
        const nativeElement = inject(ElementRef).nativeElement;
        const config = inject(WA_MUTATION_OBSERVER_INIT);
        super((subscriber) => {
            const observer = new SafeObserver((records) => {
                subscriber.next(records);
            });
            observer.observe(nativeElement, config);
            return () => {
                observer.disconnect();
            };
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaMutationObserverService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WaMutationObserverService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [] });

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

export { WA_MUTATION_OBSERVER_INIT, WaMutationObserver, WaMutationObserverService, provideMutationObserverInit };
//# sourceMappingURL=ng-web-apis-mutation-observer.mjs.map