angular-three 1.9.11 → 1.9.13

package/fesm2015/angular-three.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, ElementRef, Injectable, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, makeEnvironmentProviders, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Injector, Pipe, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
-import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, distinctUntilChanged, filter, takeUntil, merge } from 'rxjs';
+import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, filter, distinctUntilChanged, takeUntil, merge } from 'rxjs';
 import * as THREE from 'three';
-import { __rest, __classPrivateFieldGet } from 'tslib';
+import { __rest } from 'tslib';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
-import { RxState, selectSlice } from '@rx-angular/state';
+import { RxState } from '@rx-angular/state';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
 
@@ -52,10 +52,24 @@ function makeObjectGraph(object) {
     return data;
 }
 
+function safeDetectChanges(cdr) {
+    if (!cdr)
+        return;
+    try {
+        // dynamic created component with ViewContainerRef#createComponent does not have Context
+        // but it has _attachedToViewContainer
+        if (cdr['context'] || cdr['_attachedToViewContainer']) {
+            cdr.detectChanges();
+        }
+    }
+    catch (e) {
+        cdr.markForCheck();
+    }
+}
+
 const cached = new Map();
-function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
+function load(loaderConstructorFactory, input, extensions, onProgress) {
     const urls$ = isObservable(input) ? input : of(input);
-    const cdr = inject(ChangeDetectorRef);
     return urls$.pipe(map((inputs) => {
         const loaderConstructor = loaderConstructorFactory(inputs);
         const loader = new loaderConstructor();
@@ -77,7 +91,11 @@ function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
             }),
             inputs,
         ];
-    }), switchMap(([observables$, inputs]) => {
+    }));
+}
+function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
+    const cdr = inject(ChangeDetectorRef);
+    return load(loaderConstructorFactory, input, extensions, onProgress).pipe(switchMap(([observables$, inputs]) => {
         return forkJoin(observables$).pipe(map((results) => {
             if (Array.isArray(inputs))
                 return results;
@@ -89,7 +107,7 @@ function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
                 return result;
             }, {});
         }), tap(() => {
-            requestAnimationFrame(() => cdr.detectChanges());
+            requestAnimationFrame(() => void safeDetectChanges(cdr));
         }));
     }));
 }
@@ -97,7 +115,7 @@ injectLoader.destroy = () => {
     cached.clear();
 };
 injectLoader.preLoad = (loaderConstructorFactory, inputs, extensions) => {
-    injectLoader(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
+    load(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
 };
 const injectNgtLoader = injectLoader;
 
@@ -341,6 +359,8 @@ function prepare(object, localState) {
                 const current = instance.__ngt__[type].value;
                 const foundIndex = current.indexOf((obj) => obj === object);
                 if (foundIndex > -1) {
+                    // if we add an object with the same reference, then we switch it out
+                    // and update the BehaviorSubject
                     current.splice(foundIndex, 1, object);
                     instance.__ngt__[type].next(current);
                 }
@@ -461,7 +481,6 @@ const startWithUndefined = () => startWith(undefined);
  * - can optionally return a `cleanUp` function that
  * invokes from the 2nd `next` notification onward and on `unsubscribe` (destroyed)
  *
- *
  * @example
  * ```typescript
  * source$.pipe(
@@ -482,26 +501,20 @@ function tapEffect(effectFn) {
     let cleanupFn = () => { };
     let firstRun = false;
     let prev = undefined;
-    const teardown = (error) => {
-        return () => {
-            if (cleanupFn) {
-                cleanupFn({ prev, complete: true, error });
-            }
-        };
+    const teardown = (error) => () => {
+        if (cleanupFn)
+            cleanupFn({ prev, complete: true, error });
     };
     return tap({
         next: (value) => {
-            if (cleanupFn && firstRun) {
+            if (cleanupFn && firstRun)
                 cleanupFn({ prev, complete: false, error: false });
-            }
             const cleanUpOrVoid = effectFn(value);
-            if (cleanUpOrVoid) {
+            if (cleanUpOrVoid)
                 cleanupFn = cleanUpOrVoid;
-            }
             prev = value;
-            if (!firstRun) {
+            if (!firstRun)
                 firstRun = true;
-            }
         },
         complete: teardown(false),
         unsubscribe: teardown(false),
@@ -511,7 +524,6 @@ function tapEffect(effectFn) {
 class NgtRxStore extends RxState {
     constructor() {
         super();
-        this.cache = {};
         // set a dummy property so that initial this.get() won't return undefined
         this.set({ __ngt_dummy__: '__ngt_dummy__' });
         // override set so our consumers don't have to handle undefined for state that already have default values
@@ -534,14 +546,11 @@ class NgtRxStore extends RxState {
         // override get to return {} if get() returns undefined
         const originalGet = this.get.bind(this);
         Object.defineProperty(this, 'get', {
-            get: () => {
-                return (...args) => {
-                    var _a;
-                    if (args.length === 0) {
-                        return (_a = originalGet()) !== null && _a !== void 0 ? _a : {};
-                    }
-                    return originalGet(...args);
-                };
+            get: () => (...args) => {
+                var _a;
+                if (args.length === 0)
+                    return (_a = originalGet()) !== null && _a !== void 0 ? _a : {};
+                return originalGet(...args);
             },
         });
         // call initialize that might be setup by derived Stores
@@ -558,26 +567,12 @@ class NgtRxStore extends RxState {
         if (keys.length) {
             $ = combineLatest(keys.map((key) => { var _a; return this.select(key).pipe(startWith((_a = this.get(key)) !== null && _a !== void 0 ? _a : undefined)); }));
         }
-        this.hold($, () => {
-            requestAnimationFrame(() => void cdr.detectChanges());
-        });
-    }
-    key$(...keys) {
-        var _a;
-        const key = keys.join('.');
-        if (!this.cache[key]) {
-            this.cache[key] = this.select(...keys).pipe(startWith((_a = this.get(...keys)) !== null && _a !== void 0 ? _a : undefined), distinctUntilChanged());
-        }
-        return this.cache[key];
-    }
-    ngOnDestroy() {
-        this.cache = {};
-        super.ngOnDestroy();
+        this.hold($, () => void requestAnimationFrame(() => void safeDetectChanges(cdr)));
     }
 }
-NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRxStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRxStore, decorators: [{
+NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRxStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRxStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -620,7 +615,6 @@ class NgtStore extends NgtRxStore {
                 const w = h * aspect;
                 return { width: w, height: h, top, left, factor: width / w, distance, aspect };
             };
-            const pointer = new THREE.Vector2();
             let performanceTimeout;
             const setPerformanceCurrent = (current) => {
                 this.set((state) => ({ performance: Object.assign(Object.assign({}, state.performance), { current }) }));
@@ -639,7 +633,7 @@ class NgtStore extends NgtRxStore {
                 flat: false,
                 controls: null,
                 clock: new THREE.Clock(),
-                pointer,
+                pointer: new THREE.Vector2(),
                 frameloop: 'always',
                 performance: {
                     current: 1,
@@ -755,14 +749,12 @@ class NgtStore extends NgtRxStore {
         const stateToUpdate = {};
         // setup renderer
         let gl = state.gl;
-        if (!state.gl) {
+        if (!state.gl)
             stateToUpdate.gl = gl = makeDefaultRenderer(glOptions, canvasElement);
-        }
         // setup raycaster
         let raycaster = state.raycaster;
-        if (!raycaster) {
+        if (!raycaster)
             stateToUpdate.raycaster = raycaster = new THREE.Raycaster();
-        }
         // set raycaster options
         const _b = raycasterOptions || {}, { params } = _b, options = __rest(_b, ["params"]);
         if (!is.equ(options, raycaster, shallowLoose))
@@ -898,9 +890,7 @@ class NgtStore extends NgtRxStore {
         this.invalidate();
     }
     destroy(canvas) {
-        this.set((state) => ({
-            internal: Object.assign(Object.assign({}, state.internal), { active: false }),
-        }));
+        this.set((state) => ({ internal: Object.assign(Object.assign({}, state.internal), { active: false }) }));
         setTimeout(() => {
             const { gl, xr, events } = this.get();
             if (gl) {
@@ -923,8 +913,7 @@ class NgtStore extends NgtRxStore {
         let oldSize = state.size;
         let oldDpr = state.viewport.dpr;
         let oldCamera = state.camera;
-        this.hold(this.select(selectSlice(['camera', 'size', 'viewport', 'gl'])), () => {
-            const { camera, size, viewport, gl, set } = this.get();
+        this.hold(combineLatest([this.select('camera'), this.select('size'), this.select('viewport'), this.select('gl')]), ([camera, size, viewport, gl]) => {
             // resize camera and renderer on changes to size and dpr
             if (size !== oldSize || viewport.dpr !== oldDpr) {
                 oldSize = size;
@@ -938,7 +927,9 @@ class NgtStore extends NgtRxStore {
             if (camera !== oldCamera) {
                 updateCamera(camera, size);
                 oldCamera = camera;
-                set((state) => ({ viewport: Object.assign(Object.assign({}, state.viewport), state.viewport.getCurrentViewport(camera)) }));
+                this.set((state) => ({
+                    viewport: Object.assign(Object.assign({}, state.viewport), state.viewport.getCurrentViewport(camera)),
+                }));
             }
         });
     }
@@ -946,18 +937,16 @@ class NgtStore extends NgtRxStore {
         this.hold(this.select(), () => invalidate(this));
     }
 }
-NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtStore, decorators: [{
+NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtStore, decorators: [{
             type: Injectable
         }] });
 function computeInitialSize(canvas, defaultSize) {
-    if (defaultSize) {
+    if (defaultSize)
         return defaultSize;
-    }
     if (canvas instanceof HTMLCanvasElement && canvas.parentElement) {
-        const { width, height, top, left } = canvas.parentElement.getBoundingClientRect();
-        return { width, height, top, left };
+        return canvas.parentElement.getBoundingClientRect();
     }
     return { width: 0, height: 0, top: 0, left: 0 };
 }
@@ -998,13 +987,13 @@ class NgtCommonDirective {
                 this.view.destroy();
             }
             this.view = this.vcr.createEmbeddedView(this.template);
-            this.view.detectChanges();
+            safeDetectChanges(this.view);
         }
     }
 }
-NgtCommonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtCommonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtCommonDirective, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCommonDirective, decorators: [{
+NgtCommonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtCommonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtCommonDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
 
@@ -1014,9 +1003,7 @@ class NgtArgs extends NgtCommonDirective {
         this.injectedArgs = [];
     }
     set args(args) {
-        if (args == null || !Array.isArray(args))
-            return;
-        if (args.length === 1 && args[0] === null)
+        if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
             return;
         this.injected = false;
         this.injectedArgs = args;
@@ -1033,9 +1020,9 @@ class NgtArgs extends NgtCommonDirective {
         return !this.injected && !!this.injectedArgs.length;
     }
 }
-NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtArgs, decorators: [{
+NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: '[args]', standalone: true }]
         }], propDecorators: { args: [{
@@ -1065,9 +1052,9 @@ class NgtParent extends NgtCommonDirective {
         return !this.injected && !!this.injectedParent;
     }
 }
-NgtParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtParent, decorators: [{
+NgtParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: '[parent]', standalone: true }]
         }], propDecorators: { parent: [{
@@ -1512,9 +1499,8 @@ function attachThreeChild(parent, child) {
     }
     pLS.add(child, added ? 'objects' : 'nonObjects');
     cLS.parent = parent;
-    if (cLS.afterAttach) {
+    if (cLS.afterAttach)
         cLS.afterAttach.emit({ parent, node: child });
-    }
     invalidateInstance(child);
     invalidateInstance(parent);
 }
@@ -1525,12 +1511,10 @@ function removeThreeChild(parent, child, dispose) {
     // clear parent ref
     cLS.parent = null;
     // remove child from parent
-    if (pLS.objects) {
+    if (pLS.objects)
         pLS.remove(child, 'objects');
-    }
-    if (pLS.nonObjects) {
+    if (pLS.nonObjects)
         pLS.remove(child, 'nonObjects');
-    }
     if (cLS.attach) {
         detach(parent, child, cLS.attach);
     }
@@ -1554,7 +1538,6 @@ function removeThreeRecursive(array, parent, dispose) {
         [...array].forEach((child) => removeThreeChild(parent, child, dispose));
 }
 function processThreeEvent(instance, priority, eventName, callback, cdr, targetCdr) {
-    var _a;
     const lS = getLocalState(instance);
     if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
         return lS.store
@@ -1562,15 +1545,14 @@ function processThreeEvent(instance, priority, eventName, callback, cdr, targetC
             .subscribe((state) => callback({ state, object: instance }), priority || lS.priority || 0);
     }
     if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
-        if (!lS[eventName]) {
-            lS[eventName] = new EventEmitter();
-        }
-        const sub = (_a = lS[eventName]) === null || _a === void 0 ? void 0 : _a.subscribe(callback);
+        let emitter = lS[eventName];
+        if (!emitter)
+            emitter = new EventEmitter();
+        const sub = emitter.subscribe(callback);
         return sub.unsubscribe.bind(sub);
     }
-    if (!lS.handlers) {
+    if (!lS.handlers)
         lS.handlers = {};
-    }
     // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
     const previousHandler = lS.handlers[eventName];
     // readjust the callback
@@ -1579,37 +1561,32 @@ function processThreeEvent(instance, priority, eventName, callback, cdr, targetC
             previousHandler(event);
         callback(event);
     };
-    lS.handlers = Object.assign(Object.assign({}, lS.handlers), { [eventName]: eventToHandler(updatedCallback, cdr, targetCdr) });
+    Object.assign(lS.handlers, { [eventName]: eventToHandler(updatedCallback, cdr, targetCdr) });
     // increment the count everytime
     lS.eventCount += 1;
     // but only add the instance (target) to the interaction array (so that it is handled by the EventManager with Raycast)
     // the first time eventCount is incremented
-    if (lS.eventCount === 1 && instance['raycast']) {
+    if (lS.eventCount === 1 && instance['raycast'])
         lS.store.get('addInteraction')(instance);
-    }
     // clean up the event listener by removing the target from the interaction array
     return () => {
         const localState = getLocalState(instance);
-        if (localState && localState.eventCount) {
+        if (localState && localState.eventCount)
             localState.store.get('removeInteraction')(instance['uuid']);
-        }
     };
 }
 function eventToHandler(callback, cdr, targetCdr) {
     return (event) => {
         callback(event);
-        if (targetCdr)
-            targetCdr.detectChanges();
-        cdr.detectChanges();
+        safeDetectChanges(targetCdr);
+        safeDetectChanges(cdr);
     };
 }
 function kebabToPascal(str) {
     // split the string at each hyphen
     const parts = str.split('-');
     // map over the parts, capitalizing the first letter of each part
-    const pascalParts = parts.map((part) => {
-        return part.charAt(0).toUpperCase() + part.slice(1);
-    });
+    const pascalParts = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1));
     // join the parts together to create the final PascalCase string
     return pascalParts.join('');
 }
@@ -1639,9 +1616,8 @@ class NgtRendererStore {
         ];
         const rendererNode = Object.assign(node, { __ngt_renderer__: state });
         // assign ownerDocument to node so we can use HostListener in Component
-        if (!rendererNode['ownerDocument']) {
+        if (!rendererNode['ownerDocument'])
             rendererNode['ownerDocument'] = this.root.document;
-        }
         // assign injectorFactory on non-three type since
         // rendererNode is an instance of DOM Node
         if (state[0 /* NgtRendererClassId.type */] !== 'three') {
@@ -1651,9 +1627,9 @@ class NgtRendererStore {
             // we attach an arrow function to the Comment node
             // In our directives, we can call this function to then start tracking the RendererNode
             // this is done to limit the amount of Nodes we need to process for getCreationState
-            rendererNode['__ngt_renderer_add_comment__'] = (portalNode) => {
-                if (portalNode && portalNode.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
-                    this.portals.push(portalNode);
+            rendererNode['__ngt_renderer_add_comment__'] = (node) => {
+                if (node && node.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
+                    this.portals.push(node);
                 }
                 else {
                     this.comments.push(rendererNode);
@@ -1690,15 +1666,11 @@ class NgtRendererStore {
         rS[7 /* NgtRendererClassId.compounded */] = instance;
         const attributes = Object.keys(rS[9 /* NgtRendererClassId.attributes */]);
         const properties = Object.keys(rS[10 /* NgtRendererClassId.properties */]);
-        if (attributes.length) {
-            for (const key of attributes) {
-                this.applyAttribute(instance, key, rS[9 /* NgtRendererClassId.attributes */][key]);
-            }
+        for (const key of attributes) {
+            this.applyAttribute(instance, key, rS[9 /* NgtRendererClassId.attributes */][key]);
         }
-        if (properties.length) {
-            for (const key of properties) {
-                this.applyProperty(instance, key, rS[10 /* NgtRendererClassId.properties */][key]);
-            }
+        for (const key of properties) {
+            this.applyProperty(instance, key, rS[10 /* NgtRendererClassId.properties */][key]);
         }
         this.executeOperation(compound);
     }
@@ -1995,6 +1967,7 @@ class NgtRendererFactory {
         this.catalogue = inject(NGT_CATALOGUE);
         this.rendererMap = new Map();
         this.routedSet = new Set();
+        // all Renderer instances share the same Store
         this.rendererStore = new NgtRendererStore({
             store: inject(NgtStore),
             cdr: inject(ChangeDetectorRef),
@@ -2020,9 +1993,9 @@ class NgtRendererFactory {
         return renderer;
     }
 }
-NgtRendererFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRendererFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRendererFactory, decorators: [{
+NgtRendererFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRendererFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2292,9 +2265,8 @@ class NgtRenderer {
         // if target is DOM node, then we pass that to delegate Renderer
         const callbackWithCdr = (event) => {
             const value = callback(event);
-            if (targetCdr)
-                targetCdr.detectChanges();
-            this.store.rootCdr.detectChanges();
+            safeDetectChanges(targetCdr);
+            safeDetectChanges(this.store.rootCdr);
             return value;
         };
         if (this.store.isDOM(target)) {
@@ -2332,12 +2304,10 @@ class NgtRenderer {
 }
 
 function provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes = [] }) {
-    if (!compoundPrefixes.includes('ngts')) {
+    if (!compoundPrefixes.includes('ngts'))
         compoundPrefixes.push('ngts');
-    }
-    if (!compoundPrefixes.includes('ngtp')) {
+    if (!compoundPrefixes.includes('ngtp'))
         compoundPrefixes.push('ngtp');
-    }
     return makeEnvironmentProviders([
         { provide: RendererFactory2, useClass: NgtRendererFactory },
         { provide: NgtStore, useValue: store },
@@ -2422,7 +2392,7 @@ class NgtCanvas extends NgtRxStore {
         this.envInjector = inject(EnvironmentInjector);
         this.host = inject(ElementRef);
         this.store = inject(NgtStore);
-        this.hostClass = true;
+        this.hbClass = true;
         this.sceneGraphInputs = {};
         this.compoundPrefixes = [];
         this.created = new EventEmitter();
@@ -2441,7 +2411,7 @@ class NgtCanvas extends NgtRxStore {
             events: createPointerEvents,
         });
     }
-    get pointerEvents() {
+    get hbPointerEvents() {
         return this.get('eventSource') !== this.host.nativeElement ? 'none' : 'auto';
     }
     set linear(linear) {
@@ -2502,7 +2472,7 @@ class NgtCanvas extends NgtRxStore {
             this.store.set({
                 onPointerMissed: (event) => {
                     this.pointerMissed.emit(event);
-                    this.cdr.detectChanges();
+                    safeDetectChanges(this.cdr);
                 },
             });
         }
@@ -2541,22 +2511,17 @@ class NgtCanvas extends NgtRxStore {
             });
         }
         // emit created event if observed
-        if (this.created.observed) {
+        if (this.created.observed)
             this.created.emit(this.store.get());
-            this.cdr.detectChanges();
-        }
         // render
         if (this.glRef)
             this.glRef.destroy();
         requestAnimationFrame(() => {
-            this.glEnvInjector = createEnvironmentInjector([
-                provideNgtRenderer({
-                    store: this.store,
-                    changeDetectorRef: this.cdr,
-                    compoundPrefixes: this.compoundPrefixes,
-                }),
-            ], this.envInjector);
+            const { store, cdr: changeDetectorRef, compoundPrefixes } = this;
+            this.glEnvInjector = createEnvironmentInjector([provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes })], this.envInjector);
             this.glRef = this.glAnchor.createComponent(this.sceneGraph, { environmentInjector: this.glEnvInjector });
+            // detach the Scene graph from Change Detection mechanism
+            // everything from this point forward will trigger CD manually with detectChanges
             this.glRef.changeDetectorRef.detach();
             this.setSceneGraphInputs();
             // here, we override the detectChanges to also call detectChanges on the ComponentRef
@@ -2578,34 +2543,33 @@ class NgtCanvas extends NgtRxStore {
         this.cdr.detectChanges = () => {
             var _a;
             originalDetectChanges();
-            (_a = this.glRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef.detectChanges();
+            safeDetectChanges((_a = this.glRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef);
         };
     }
     setSceneGraphInputs() {
-        var _a;
         for (const key of Object.keys(this.sceneGraphInputs)) {
-            (_a = this.glRef) === null || _a === void 0 ? void 0 : _a.setInput(key, this.sceneGraphInputs[key]);
+            this.glRef.setInput(key, this.sceneGraphInputs[key]);
         }
-        this.cdr.detectChanges();
+        safeDetectChanges(this.cdr);
     }
 }
-NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hbClass", "style.pointerEvents": "this.hbPointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
             <canvas #glCanvas style="display: block;"></canvas>
         </div>
     `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-canvas', standalone: true, template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
             <canvas #glCanvas style="display: block;"></canvas>
         </div>
     `, imports: [NgxResize], providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
-        }], propDecorators: { hostClass: [{
+        }], propDecorators: { hbClass: [{
                 type: HostBinding,
                 args: ['class.ngt-canvas']
-            }], pointerEvents: [{
+            }], hbPointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
             }], sceneGraph: [{
@@ -2678,7 +2642,7 @@ function injectNgtDestroy(cb) {
 function injectBeforeRender(cb, priority = 0) {
     try {
         const store = inject(NgtStore);
-        const sub = store.get('internal').subscribe((state) => cb(state), priority, store);
+        const sub = store.get('internal').subscribe(cb, priority, store);
         injectNgtDestroy(() => void sub());
         return sub;
     }
@@ -2687,35 +2651,19 @@ function injectBeforeRender(cb, priority = 0) {
     }
 }
 
-function safeDetectChanges(cdr) {
-    if (!cdr)
-        return;
-    try {
-        if (cdr['context']) {
-            cdr.detectChanges();
-        }
-    }
-    catch (e) {
-        cdr.markForCheck();
-    }
-}
-
 function injectNgtRef(initialValue = null) {
     const ref = is.ref(initialValue) ? initialValue : new ElementRef(initialValue);
     let lastValue = ref.nativeElement;
     const cdRefs = [];
     const ref$ = new BehaviorSubject(lastValue);
-    const { destroy$, cdr } = injectNgtDestroy(() => {
-        ref$.complete();
-    });
+    const { destroy$, cdr } = injectNgtDestroy(() => void ref$.complete());
     cdRefs.push(cdr);
     const obs$ = ref$.asObservable().pipe(distinctUntilChanged(), takeUntil(destroy$));
-    const subscribe = (callback) => {
-        return obs$.subscribe((current) => {
-            callback(current, lastValue);
-            lastValue = current;
-        });
-    };
+    const subscribe = (callback) => obs$.subscribe((current) => {
+        callback(current, lastValue);
+        lastValue = current;
+    });
+    const useCDR = (cdr) => void cdRefs.push(cdr);
     const $ = obs$.pipe(filter((value, index) => index > 0 || value != null), takeUntil(destroy$));
     const children$ = (type = 'objects') => $.pipe(switchMap((instance) => {
         const localState = getLocalState(instance);
@@ -2734,6 +2682,7 @@ function injectNgtRef(initialValue = null) {
         }
         return of([]);
     }), filter((children, index) => index > 0 || children.length > 0), takeUntil(destroy$));
+    // here, we override nativeElement to  add more functionalities to nativeElement
     Object.defineProperty(ref, 'nativeElement', {
         set: (newVal) => {
             if (ref.nativeElement !== newVal) {
@@ -2758,9 +2707,14 @@ function injectNgtRef(initialValue = null) {
         },
         get: () => ref$.value,
     });
-    return Object.assign(ref, { subscribe, $, children$, useCDR: (cdr) => void cdRefs.push(cdr) });
+    return Object.assign(ref, { subscribe, $, children$, useCDR });
 }
 
+/**
+ * Please use this sparringly and know what you're doing.
+ *
+ * Create a runInContext function that has access to the NodeInjector as well
+ */
 function createRunInContext() {
     const nodeInjector = inject(Injector);
     const envInjector = inject(EnvironmentInjector);
@@ -2800,9 +2754,9 @@ class NgtRepeat extends NgForOf {
         this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
     }
 }
-NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRepeat, decorators: [{
+NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRepeat, decorators: [{
             type: Directive,
             args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
         }], propDecorators: { ngForRepeat: [{
@@ -2817,50 +2771,43 @@ class NgtPush {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.parentCdr = inject(ChangeDetectorRef, { skipSelf: true, optional: true });
+        this.envCdr = inject(EnvironmentInjector).get(ChangeDetectorRef, null);
     }
     transform(value, defaultValue = null) {
-        if (this.obj === value) {
+        if (this.obj === value)
             return this.latestValue;
-        }
         this.obj = value;
         this.latestValue = defaultValue;
-        if (this.sub) {
+        if (this.sub)
             this.sub.unsubscribe();
-        }
-        if (isObservable(this.obj)) {
+        if (isObservable(this.obj))
             this.sub = this.obj.subscribe(this.updateValue.bind(this));
-        }
-        else if (isPromise(this.obj)) {
+        else if (isPromise(this.obj))
             this.obj.then(this.updateValue.bind(this));
-        }
-        else {
+        else
             throw new Error(`[NGT] Invalid value passed to ngtPush pipe`);
-        }
         return this.latestValue;
     }
     updateValue(val) {
         this.latestValue = val;
-        this.cdr.detectChanges();
-        if (this.parentCdr) {
-            this.parentCdr.detectChanges();
-        }
+        safeDetectChanges(this.cdr);
+        safeDetectChanges(this.parentCdr);
+        safeDetectChanges(this.envCdr);
     }
     ngOnDestroy() {
-        if (this.sub) {
+        if (this.sub)
             this.sub.unsubscribe();
-        }
         this.latestValue = undefined;
         this.obj = undefined;
     }
 }
-NgtPush.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtPush.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPush, decorators: [{
+NgtPush.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgtPush.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPush, decorators: [{
             type: Pipe,
             args: [{ name: 'ngtPush', pure: false, standalone: true }]
         }] });
 
-var _NgtPortal_instances, _NgtPortal_inject;
 const privateKeys = [
     'get',
     'set',
@@ -2906,14 +2853,11 @@ class NgtPortalBeforeRender {
         (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
-NgtPortalBeforeRender.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtPortalBeforeRender.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+NgtPortalBeforeRender.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtPortalBeforeRender.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'ngt-portal-before-render',
-                    standalone: true,
-                }]
+            args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
         }], propDecorators: { renderPriority: [{
                 type: Input
             }], parentScene: [{
@@ -2932,9 +2876,9 @@ class NgtPortalContent {
         }
     }
 }
-NgtPortalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-NgtPortalContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortalContent, decorators: [{
+NgtPortalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+NgtPortalContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: function () {
@@ -2945,7 +2889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 class NgtPortal extends NgtRxStore {
     constructor() {
         super(...arguments);
-        _NgtPortal_instances.add(this);
         this.autoRender = true;
         this.autoRenderPriority = 1;
         this.beforeRender = new EventEmitter();
@@ -2981,9 +2924,9 @@ class NgtPortal extends NgtRxStore {
             localState.store = this.portalStore;
         }
         this.portalStore.set(Object.assign(Object.assign(Object.assign(Object.assign({}, previousState), { scene: container, raycaster: this.raycaster, pointer: this.pointer, previousStore: this.parentStore, events: Object.assign(Object.assign({}, previousState.events), (events || {})), size: Object.assign(Object.assign({}, previousState.size), (size || {})) }), restInputsState), { get: this.portalStore.get.bind(this.portalStore), set: this.portalStore.set.bind(this.portalStore), select: this.portalStore.select.bind(this.portalStore), setEvents: (events) => this.portalStore.set((state) => (Object.assign(Object.assign({}, state), { events: Object.assign(Object.assign({}, state.events), events) }))) }));
-        this.hold(this.parentStore.select(), (previous) => this.portalStore.set((state) => __classPrivateFieldGet(this, _NgtPortal_instances, "m", _NgtPortal_inject).call(this, previous, state)));
+        this.hold(this.parentStore.select(), (previous) => this.portalStore.set((state) => this.inject(previous, state)));
         requestAnimationFrame(() => {
-            this.portalStore.set((injectState) => __classPrivateFieldGet(this, _NgtPortal_instances, "m", _NgtPortal_inject).call(this, this.parentStore.get(), injectState));
+            this.portalStore.set((injectState) => this.inject(this.parentStore.get(), injectState));
         });
         this.portalContentView = this.portalContentAnchor.createEmbeddedView(this.portalContentTemplate);
         this.portalContentView.detectChanges();
@@ -3001,47 +2944,49 @@ class NgtPortal extends NgtRxStore {
         }
         super.ngOnDestroy();
     }
-}
-_NgtPortal_instances = new WeakSet(), _NgtPortal_inject = function _NgtPortal_inject(rootState, injectState) {
-    const intersect = Object.assign({}, rootState);
-    Object.keys(intersect).forEach((key) => {
-        if (privateKeys.includes(key) ||
-            rootState[key] !== injectState[key]) {
-            delete intersect[key];
+    inject(rootState, injectState) {
+        const intersect = Object.assign({}, rootState);
+        Object.keys(intersect).forEach((key) => {
+            if (privateKeys.includes(key) ||
+                rootState[key] !== injectState[key]) {
+                delete intersect[key];
+            }
+        });
+        const inputs = this.get();
+        const _a = inputs.state || {}, { size, events } = _a, restInputsState = __rest(_a, ["size", "events"]);
+        let viewport = undefined;
+        if (injectState && size) {
+            const camera = injectState.camera;
+            viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+            if (camera !== rootState.camera)
+                updateCamera(camera, size);
         }
-    });
-    const inputs = this.get();
-    const _a = inputs.state || {}, { size, events } = _a, restInputsState = __rest(_a, ["size", "events"]);
-    let viewport = undefined;
-    if (injectState && size) {
-        const camera = injectState.camera;
-        viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
-        if (camera !== rootState.camera)
-            updateCamera(camera, size);
-    }
-    return Object.assign(Object.assign(Object.assign({}, intersect), { scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container, raycaster: this.raycaster, pointer: this.pointer, previousStore: this.parentStore, events: Object.assign(Object.assign(Object.assign({}, rootState.events), ((injectState === null || injectState === void 0 ? void 0 : injectState.events) || {})), events), size: Object.assign(Object.assign({}, rootState.size), size), viewport: Object.assign(Object.assign({}, rootState.viewport), (viewport || {})) }), restInputsState);
-};
-NgtPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", state: "state", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        return Object.assign(Object.assign(Object.assign({}, intersect), { scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container, raycaster: this.raycaster, pointer: this.pointer, previousStore: this.parentStore, events: Object.assign(Object.assign(Object.assign({}, rootState.events), ((injectState === null || injectState === void 0 ? void 0 : injectState.events) || {})), events), size: Object.assign(Object.assign({}, rootState.size), size), viewport: Object.assign(Object.assign({}, rootState.viewport), (viewport || {})) }), restInputsState);
+    }
+}
+NgtPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", state: "state", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container #portalContentAnchor>
-            <ngt-portal-before-render
+            <ng-container
                 *ngIf="autoRender && portalContentRendered"
+                ngtPortalBeforeRender
                 [renderPriority]="autoRenderPriority"
                 [parentScene]="parentScene"
                 [parentCamera]="parentCamera"
                 (beforeRender)="onBeforeRender($event)"
             />
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtPortal, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "[ngtPortalBeforeRender]", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
                     standalone: true,
                     template: `
         <ng-container #portalContentAnchor>
-            <ngt-portal-before-render
+            <ng-container
                 *ngIf="autoRender && portalContentRendered"
+                ngtPortalBeforeRender
                 [renderPriority]="autoRenderPriority"
                 [parentScene]="parentScene"
                 [parentCamera]="parentCamera"
@@ -3075,13 +3020,13 @@ class NgtRoutedScene {
         const { destroy$, cdr } = injectNgtDestroy();
         router.events
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntil(destroy$))
-            .subscribe(cdr.detectChanges.bind(cdr));
+            .subscribe(() => safeDetectChanges(cdr));
     }
 }
 NgtRoutedScene.isRoutedScene = true;
-NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-NgtRoutedScene.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtRoutedScene, decorators: [{
+NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+NgtRoutedScene.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,