@cisstech/nge
Version:
NG Essentials is a collection of libraries for Angular developers.
69 lines • 8.89 kB
JavaScript
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./nge-element.service";
// TODO make angular universal compatible using Renderer2
export class NgeElementDetectorDirective {
constructor(elementService) {
this.elementService = elementService;
}
async ngAfterViewInit() {
let selectors = this.elementService.listUnloadeds();
for (const selector of selectors) {
const tags = document.getElementsByTagName(selector);
if (tags?.length) {
await this.elementService.loadElement(selector);
selectors = selectors.filter((e) => e !== selector);
}
}
this.addMutationObserver();
}
ngOnDestroy() {
this.observer?.disconnect();
if (this.listener) {
this.listener();
}
}
addMutationObserver() {
const target = document.body;
let unloadedTags = this.elementService.listUnloadeds();
this.observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node instanceof HTMLElement) {
unloadedTags = this.checkElementsInNode(node, unloadedTags);
}
});
});
});
this.observer.observe(target, {
subtree: true,
childList: true,
});
}
checkElementsInNode(node, unloadedTags) {
if (!unloadedTags.length) {
return unloadedTags;
}
const tagName = node.tagName.toLowerCase();
if (unloadedTags.includes(tagName)) {
unloadedTags = unloadedTags.filter((e) => e !== tagName);
this.elementService.loadElement(tagName).catch(console.error);
}
for (const child of Array.from(node.childNodes)) {
if (child instanceof HTMLElement) {
unloadedTags = this.checkElementsInNode(child, unloadedTags);
}
}
return unloadedTags;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: NgeElementDetectorDirective, deps: [{ token: i1.NgeElementService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: NgeElementDetectorDirective, selector: "nge-element-detector, [nge-element-detector]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: NgeElementDetectorDirective, decorators: [{
type: Directive,
args: [{
// tslint:disable-next-line: directive-selector
selector: 'nge-element-detector, [nge-element-detector]',
}]
}], ctorParameters: () => [{ type: i1.NgeElementService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdlLWVsZW1lbnQtZGV0ZWN0b3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdlL2VsZW1lbnRzL3NyYy9uZ2UtZWxlbWVudC1kZXRlY3Rvci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQWEsTUFBTSxlQUFlLENBQUE7OztBQUduRSx5REFBeUQ7QUFNekQsTUFBTSxPQUFPLDJCQUEyQjtJQUl0QyxZQUE2QixjQUFpQztRQUFqQyxtQkFBYyxHQUFkLGNBQWMsQ0FBbUI7SUFBRyxDQUFDO0lBRWxFLEtBQUssQ0FBQyxlQUFlO1FBQ25CLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxFQUFFLENBQUE7UUFDbkQsS0FBSyxNQUFNLFFBQVEsSUFBSSxTQUFTLEVBQUUsQ0FBQztZQUNqQyxNQUFNLElBQUksR0FBRyxRQUFRLENBQUMsb0JBQW9CLENBQUMsUUFBUSxDQUFDLENBQUE7WUFDcEQsSUFBSSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0JBQ2pCLE1BQU0sSUFBSSxDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUE7Z0JBQy9DLFNBQVMsR0FBRyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssUUFBUSxDQUFDLENBQUE7WUFDckQsQ0FBQztRQUNILENBQUM7UUFFRCxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQTtJQUM1QixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLEVBQUUsVUFBVSxFQUFFLENBQUE7UUFDM0IsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFBO1FBQ2pCLENBQUM7SUFDSCxDQUFDO0lBRU8sbUJBQW1CO1FBQ3pCLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUE7UUFDNUIsSUFBSSxZQUFZLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLEVBQUUsQ0FBQTtRQUN0RCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksZ0JBQWdCLENBQUMsQ0FBQyxTQUFTLEVBQUUsRUFBRTtZQUNqRCxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUMsUUFBUSxFQUFFLEVBQUU7Z0JBQzdCLFFBQVEsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7b0JBQ25DLElBQUksSUFBSSxZQUFZLFdBQVcsRUFBRSxDQUFDO3dCQUNoQyxZQUFZLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksRUFBRSxZQUFZLENBQUMsQ0FBQTtvQkFDN0QsQ0FBQztnQkFDSCxDQUFDLENBQUMsQ0FBQTtZQUNKLENBQUMsQ0FBQyxDQUFBO1FBQ0osQ0FBQyxDQUFDLENBQUE7UUFDRixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDNUIsT0FBTyxFQUFFLElBQUk7WUFDYixTQUFTLEVBQUUsSUFBSTtTQUNoQixDQUFDLENBQUE7SUFDSixDQUFDO0lBRU8sbUJBQW1CLENBQUMsSUFBaUIsRUFBRSxZQUFzQjtRQUNuRSxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQ3pCLE9BQU8sWUFBWSxDQUFBO1FBQ3JCLENBQUM7UUFFRCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxDQUFBO1FBQzFDLElBQUksWUFBWSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDO1lBQ25DLFlBQVksR0FBRyxZQUFZLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssT0FBTyxDQUFDLENBQUE7WUFDeEQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUMvRCxDQUFDO1FBRUQsS0FBSyxNQUFNLEtBQUssSUFBSSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQ2hELElBQUksS0FBSyxZQUFZLFdBQVcsRUFBRSxDQUFDO2dCQUNqQyxZQUFZLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEtBQUssRUFBRSxZQUFZLENBQUMsQ0FBQTtZQUM5RCxDQUFDO1FBQ0gsQ0FBQztRQUNELE9BQU8sWUFBWSxDQUFBO0lBQ3JCLENBQUM7OEdBN0RVLDJCQUEyQjtrR0FBM0IsMkJBQTJCOzsyRkFBM0IsMkJBQTJCO2tCQUp2QyxTQUFTO21CQUFDO29CQUNULCtDQUErQztvQkFDL0MsUUFBUSxFQUFFLDhDQUE4QztpQkFDekQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQgeyBOZ2VFbGVtZW50U2VydmljZSB9IGZyb20gJy4vbmdlLWVsZW1lbnQuc2VydmljZSdcblxuLy8gVE9ETyBtYWtlIGFuZ3VsYXIgdW5pdmVyc2FsIGNvbXBhdGlibGUgdXNpbmcgUmVuZGVyZXIyXG5cbkBEaXJlY3RpdmUoe1xuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IGRpcmVjdGl2ZS1zZWxlY3RvclxuICBzZWxlY3RvcjogJ25nZS1lbGVtZW50LWRldGVjdG9yLCBbbmdlLWVsZW1lbnQtZGV0ZWN0b3JdJyxcbn0pXG5leHBvcnQgY2xhc3MgTmdlRWxlbWVudERldGVjdG9yRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBvYnNlcnZlcj86IE11dGF0aW9uT2JzZXJ2ZXJcbiAgcHJpdmF0ZSBsaXN0ZW5lcj86ICgpID0+IHZvaWRcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRTZXJ2aWNlOiBOZ2VFbGVtZW50U2VydmljZSkge31cblxuICBhc3luYyBuZ0FmdGVyVmlld0luaXQoKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgbGV0IHNlbGVjdG9ycyA9IHRoaXMuZWxlbWVudFNlcnZpY2UubGlzdFVubG9hZGVkcygpXG4gICAgZm9yIChjb25zdCBzZWxlY3RvciBvZiBzZWxlY3RvcnMpIHtcbiAgICAgIGNvbnN0IHRhZ3MgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZShzZWxlY3RvcilcbiAgICAgIGlmICh0YWdzPy5sZW5ndGgpIHtcbiAgICAgICAgYXdhaXQgdGhpcy5lbGVtZW50U2VydmljZS5sb2FkRWxlbWVudChzZWxlY3RvcilcbiAgICAgICAgc2VsZWN0b3JzID0gc2VsZWN0b3JzLmZpbHRlcigoZSkgPT4gZSAhPT0gc2VsZWN0b3IpXG4gICAgICB9XG4gICAgfVxuXG4gICAgdGhpcy5hZGRNdXRhdGlvbk9ic2VydmVyKClcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub2JzZXJ2ZXI/LmRpc2Nvbm5lY3QoKVxuICAgIGlmICh0aGlzLmxpc3RlbmVyKSB7XG4gICAgICB0aGlzLmxpc3RlbmVyKClcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGFkZE11dGF0aW9uT2JzZXJ2ZXIoKTogdm9pZCB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZG9jdW1lbnQuYm9keVxuICAgIGxldCB1bmxvYWRlZFRhZ3MgPSB0aGlzLmVsZW1lbnRTZXJ2aWNlLmxpc3RVbmxvYWRlZHMoKVxuICAgIHRoaXMub2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcigobXV0YXRpb25zKSA9PiB7XG4gICAgICBtdXRhdGlvbnMuZm9yRWFjaCgobXV0YXRpb24pID0+IHtcbiAgICAgICAgbXV0YXRpb24uYWRkZWROb2Rlcy5mb3JFYWNoKChub2RlKSA9PiB7XG4gICAgICAgICAgaWYgKG5vZGUgaW5zdGFuY2VvZiBIVE1MRWxlbWVudCkge1xuICAgICAgICAgICAgdW5sb2FkZWRUYWdzID0gdGhpcy5jaGVja0VsZW1lbnRzSW5Ob2RlKG5vZGUsIHVubG9hZGVkVGFncylcbiAgICAgICAgICB9XG4gICAgICAgIH0pXG4gICAgICB9KVxuICAgIH0pXG4gICAgdGhpcy5vYnNlcnZlci5vYnNlcnZlKHRhcmdldCwge1xuICAgICAgc3VidHJlZTogdHJ1ZSxcbiAgICAgIGNoaWxkTGlzdDogdHJ1ZSxcbiAgICB9KVxuICB9XG5cbiAgcHJpdmF0ZSBjaGVja0VsZW1lbnRzSW5Ob2RlKG5vZGU6IEhUTUxFbGVtZW50LCB1bmxvYWRlZFRhZ3M6IHN0cmluZ1tdKSB7XG4gICAgaWYgKCF1bmxvYWRlZFRhZ3MubGVuZ3RoKSB7XG4gICAgICByZXR1cm4gdW5sb2FkZWRUYWdzXG4gICAgfVxuXG4gICAgY29uc3QgdGFnTmFtZSA9IG5vZGUudGFnTmFtZS50b0xvd2VyQ2FzZSgpXG4gICAgaWYgKHVubG9hZGVkVGFncy5pbmNsdWRlcyh0YWdOYW1lKSkge1xuICAgICAgdW5sb2FkZWRUYWdzID0gdW5sb2FkZWRUYWdzLmZpbHRlcigoZSkgPT4gZSAhPT0gdGFnTmFtZSlcbiAgICAgIHRoaXMuZWxlbWVudFNlcnZpY2UubG9hZEVsZW1lbnQodGFnTmFtZSkuY2F0Y2goY29uc29sZS5lcnJvcilcbiAgICB9XG5cbiAgICBmb3IgKGNvbnN0IGNoaWxkIG9mIEFycmF5LmZyb20obm9kZS5jaGlsZE5vZGVzKSkge1xuICAgICAgaWYgKGNoaWxkIGluc3RhbmNlb2YgSFRNTEVsZW1lbnQpIHtcbiAgICAgICAgdW5sb2FkZWRUYWdzID0gdGhpcy5jaGVja0VsZW1lbnRzSW5Ob2RlKGNoaWxkLCB1bmxvYWRlZFRhZ3MpXG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiB1bmxvYWRlZFRhZ3NcbiAgfVxufVxuIl19