angular-three-soba 1.14.1 → 2.0.0-beta.10

package/fesm2022/angular-three-soba-cameras.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, Input, Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ContentChild } from '@angular/core';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { extend, NgtRxStore, injectNgtRef, NgtStore, injectBeforeRender, NgtArgs, NgtPush } from 'angular-three';
-import { map, combineLatest } from 'rxjs';
+import { inject, TemplateRef, Directive, Input, runInInjectionContext, computed, effect, untracked, DestroyRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ContentChild, ViewChild } from '@angular/core';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
+import { assertInjectionContext, injectNgtStore, extend, signalStore, injectNgtRef, injectBeforeRender, NgtArgs } from 'angular-three';
 import * as THREE from 'three';
-import { Group, CubeCamera, OrthographicCamera, PerspectiveCamera } from 'three';
+import { Group, OrthographicCamera, PerspectiveCamera } from 'three';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
 
 class NgtsCameraContent {
@@ -15,203 +14,240 @@ class NgtsCameraContent {
     static ngTemplateContextGuard(_, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCameraContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCameraContent, isStandalone: true, selector: "ng-template[ngtsCameraContent]", inputs: { ngtsCameraContent: "ngtsCameraContent" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCameraContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsCameraContent, isStandalone: true, selector: "ng-template[ngtsCameraContent]", inputs: { ngtsCameraContent: "ngtsCameraContent" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCameraContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCameraContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtsCameraContent]', standalone: true }]
         }], propDecorators: { ngtsCameraContent: [{
                 type: Input
             }] } });
 
-extend({ Group, CubeCamera });
-class NgtsCubeCamera extends NgtRxStore {
-    /** Number of frames to render, Infinity */
-    set frames(frames) {
-        this.set({ frames });
+const defaultCubeCameraState = {
+    resolution: 256,
+    near: 0.1,
+    far: 1000,
+};
+function injectNgtsCubeCamera(cubeCameraState, { injector } = {}) {
+    injector = assertInjectionContext(injectNgtsCubeCamera, injector);
+    return runInInjectionContext(injector, () => {
+        const state = computed(() => ({ ...defaultCubeCameraState, ...cubeCameraState() }));
+        const resolution = computed(() => state().resolution);
+        const near = computed(() => state().near);
+        const far = computed(() => state().far);
+        const store = injectNgtStore();
+        const _gl = store.select('gl');
+        const _scene = store.select('scene');
+        const _fbo = computed(() => {
+            const renderTarget = new THREE.WebGLCubeRenderTarget(resolution());
+            renderTarget.texture.type = THREE.HalfFloatType;
+            return renderTarget;
+        });
+        effect((onCleanup) => {
+            const fbo = _fbo();
+            onCleanup(() => fbo.dispose());
+        });
+        const _camera = computed(() => new THREE.CubeCamera(near(), far(), _fbo()));
+        let originalFog;
+        let originalBackground;
+        const update = computed(() => {
+            const [scene, gl, camera, { envMap, fog }] = [_scene(), _gl(), _camera(), untracked(state)];
+            return () => {
+                originalFog = scene.fog;
+                originalBackground = scene.background;
+                scene.background = envMap || originalBackground;
+                scene.fog = fog || originalFog;
+                camera.update(gl, scene);
+                scene.fog = originalFog;
+                scene.background = originalBackground;
+            };
+        });
+        return { fbo: _fbo, camera: _camera, update };
+    });
+}
+extend({ Group });
+class NgtsCubeCameraContent {
+    static ngTemplateContextGuard(_, ctx) {
+        return true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCubeCameraContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsCubeCameraContent, isStandalone: true, selector: "ng-template[ngtsCubeCameraContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCubeCameraContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngtsCubeCameraContent]', standalone: true }]
+        }] });
+class NgtsCubeCamera {
     /** Resolution of the FBO, 256 */
-    set resolution(resolution) {
-        this.set({ resolution });
+    set _resolution(resolution) {
+        this.inputs.set({ resolution });
     }
     /** Camera near, 0.1 */
-    set near(near) {
-        this.set({ near });
+    set _near(near) {
+        this.inputs.set({ near });
     }
     /** Camera far, 1000 */
-    set far(far) {
-        this.set({ far });
+    set _far(far) {
+        this.inputs.set({ far });
     }
     /** Custom environment map that is temporarily set as the scenes background */
-    set envMap(envMap) {
-        this.set({ envMap });
+    set _envMap(envMap) {
+        this.inputs.set({ envMap });
     }
     /** Custom fog that is temporarily set as the scenes fog */
-    set fog(fog) {
-        this.set({ fog });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            frames: Infinity,
-            resolution: 256,
-            near: 0.1,
-            far: 1000,
-        });
+    set _fog(fog) {
+        this.inputs.set({ fog });
     }
     constructor() {
-        super();
+        this.inputs = signalStore({ frames: Infinity });
         this.cameraRef = injectNgtRef();
-        this.store = inject(NgtStore);
-        this.connect('fbo', this.select('resolution').pipe(map((resolution) => {
-            const fbo = new THREE.WebGLCubeRenderTarget(resolution);
-            fbo.texture.encoding = this.store.get('gl').outputEncoding;
-            fbo.texture.type = THREE.HalfFloatType;
-            return fbo;
-        })));
-        this.connect('cameraArgs', combineLatest([this.select('near'), this.select('far'), this.select('fbo')]));
+        this.cubeCamera = injectNgtsCubeCamera(this.inputs.state);
+        this.texture = computed(() => this.cubeCamera.fbo().texture);
+        this.beforeRender();
+        inject(DestroyRef).onDestroy(() => {
+            this.contentRef?.destroy();
+        });
+    }
+    ngOnInit() {
+        this.contentRef = this.anchor.createEmbeddedView(this.cameraContent, { texture: this.texture });
+    }
+    beforeRender() {
         let count = 0;
-        let originalFog;
-        let originalBackground;
-        injectBeforeRender(({ scene, gl }) => {
-            const { frames, envMap, fog } = this.get();
-            if (envMap &&
-                this.cameraRef.nativeElement &&
-                this.groupRef.nativeElement &&
-                (frames === Infinity || count < frames)) {
-                this.groupRef.nativeElement.visible = false;
-                originalFog = scene.fog;
-                originalBackground = scene.background;
-                scene.background = envMap || originalBackground;
-                scene.fog = fog || originalFog;
-                this.cameraRef.nativeElement.update(gl, scene);
-                scene.fog = originalFog;
-                scene.background = originalBackground;
-                this.groupRef.nativeElement.visible = true;
+        injectBeforeRender(() => {
+            const camera = this.cameraRef.nativeElement;
+            if (!camera)
+                return;
+            const update = this.cubeCamera.update();
+            const frames = this.inputs.get('frames');
+            if (frames === Infinity || count < frames) {
+                camera.visible = false;
+                update();
+                camera.visible = true;
                 count++;
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCubeCamera, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCubeCamera, isStandalone: true, selector: "ngts-cube-camera", inputs: { frames: "frames", resolution: "resolution", near: "near", far: "far", envMap: "envMap", fog: "fog" }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound>
-            <ngt-cube-camera [ref]="cameraRef" *args="get('cameraArgs')" />
-            <ngt-group #group>
-                <ng-container
-                    *ngIf="cameraContent && cameraContent.ngtsCameraContent && get('fbo')"
-                    [ngTemplateOutlet]="cameraContent.template"
-                    [ngTemplateOutletContext]="{ fbo: get('fbo').texture, group }"
-                />
-            </ngt-group>
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCubeCamera, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsCubeCamera, isStandalone: true, selector: "ngts-cube-camera", inputs: { cameraRef: "cameraRef", _resolution: ["resolution", "_resolution"], _near: ["near", "_near"], _far: ["far", "_far"], _envMap: ["envMap", "_envMap"], _fog: ["fog", "_fog"] }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCubeCameraContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+		<ngt-group ngtCompound>
+			<ngt-primitive *args="[cubeCamera.camera()]" />
+			<ngt-group [ref]="cameraRef">
+				<ng-container #anchor />
+			</ngt-group>
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCubeCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCubeCamera, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-cube-camera',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound>
-            <ngt-cube-camera [ref]="cameraRef" *args="get('cameraArgs')" />
-            <ngt-group #group>
-                <ng-container
-                    *ngIf="cameraContent && cameraContent.ngtsCameraContent && get('fbo')"
-                    [ngTemplateOutlet]="cameraContent.template"
-                    [ngTemplateOutletContext]="{ fbo: get('fbo').texture, group }"
-                />
-            </ngt-group>
-        </ngt-group>
-    `,
-                    imports: [NgIf, NgTemplateOutlet, NgtArgs],
+		<ngt-group ngtCompound>
+			<ngt-primitive *args="[cubeCamera.camera()]" />
+			<ngt-group [ref]="cameraRef">
+				<ng-container #anchor />
+			</ngt-group>
+		</ngt-group>
+	`,
+                    imports: [NgtArgs, NgTemplateOutlet],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { groupRef: [{
-                type: ViewChild,
-                args: ['group', { static: true }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cameraRef: [{
+                type: Input
             }], cameraContent: [{
                 type: ContentChild,
-                args: [NgtsCameraContent]
-            }], frames: [{
-                type: Input
-            }], resolution: [{
-                type: Input
-            }], near: [{
-                type: Input
-            }], far: [{
-                type: Input
-            }], envMap: [{
-                type: Input
-            }], fog: [{
-                type: Input
+                args: [NgtsCubeCameraContent, { static: true, read: TemplateRef }]
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { static: true, read: ViewContainerRef }]
+            }], _resolution: [{
+                type: Input,
+                args: [{ alias: 'resolution' }]
+            }], _near: [{
+                type: Input,
+                args: [{ alias: 'near' }]
+            }], _far: [{
+                type: Input,
+                args: [{ alias: 'far' }]
+            }], _envMap: [{
+                type: Input,
+                args: [{ alias: 'envMap' }]
+            }], _fog: [{
+                type: Input,
+                args: [{ alias: 'fog' }]
             }] } });
 
-class NgtsCamera extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.cameraRef = injectNgtRef();
-        this.store = inject(NgtStore);
-        this.fboRef = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution }))));
-    }
-    set makeDefault(makeDefault) {
-        this.set({ makeDefault });
+class NgtsCamera {
+    set _makeDefault(makeDefault) {
+        this.inputs.set({ makeDefault });
     }
-    set manual(manual) {
-        this.set({ manual });
+    set _manual(manual) {
+        this.inputs.set({ manual });
     }
-    set frames(frames) {
-        this.set({ frames });
+    set _frames(frames) {
+        this.inputs.set({ frames });
     }
-    set resolution(resolution) {
-        this.set({ resolution });
+    set _resolution(resolution) {
+        this.inputs.set({ resolution });
     }
-    set envMap(envMap) {
-        this.set({ envMap });
+    set _envMap(envMap) {
+        this.inputs.set({ envMap });
     }
-    initialize() {
-        super.initialize();
-        this.set({ resolution: 256, frames: Infinity, makeDefault: false, manual: false });
-    }
-    ngOnInit() {
-        this.hold(this.cameraRef.$, (camera) => {
-            camera.updateProjectionMatrix();
-            this.setDefaultCamera();
-            this.updateProjectionMatrix();
+    constructor() {
+        this.inputs = signalStore({
+            resolution: 256,
+            frames: Infinity,
+            makeDefault: false,
+            manual: false,
         });
+        this.cameraRef = injectNgtRef();
+        this.cameraResolution = this.inputs.select('resolution');
+        this.store = injectNgtStore();
+        this.fboRef = injectNgtsFBO(() => ({ width: this.cameraResolution() }));
+        this.setDefaultCamera();
+        this.updateProjectionMatrix();
     }
     setDefaultCamera() {
-        this.effect(combineLatest([this.cameraRef.$, this.select('makeDefault')]), ([camera, makeDefault]) => {
-            if (makeDefault) {
+        const makeDefault = this.inputs.select('makeDefault');
+        effect((onCleanup) => {
+            const camera = this.cameraRef.nativeElement;
+            if (camera && makeDefault()) {
                 const { camera: oldCamera } = this.store.get();
                 this.store.set({ camera });
-                return () => {
-                    this.store.set({ camera: oldCamera });
-                };
+                onCleanup(() => this.store.set({ camera: oldCamera }));
             }
         });
     }
     updateProjectionMatrix() {
-        this.effect(combineLatest([this.cameraRef.$, this.select('manual')]), ([camera, manual]) => {
-            if (!manual && camera)
+        const manual = this.inputs.select('manual');
+        effect(() => {
+            const camera = this.cameraRef.nativeElement;
+            if (!manual() && camera)
                 camera.updateProjectionMatrix();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCamera, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCamera, inputs: { makeDefault: "makeDefault", manual: "manual", frames: "frames", resolution: "resolution", envMap: "envMap", cameraRef: "cameraRef" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCamera, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsCamera, inputs: { _makeDefault: ["makeDefault", "_makeDefault"], _manual: ["manual", "_manual"], _frames: ["frames", "_frames"], _resolution: ["resolution", "_resolution"], _envMap: ["envMap", "_envMap"], cameraRef: "cameraRef" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCamera, decorators: [{
             type: Directive
-        }], propDecorators: { makeDefault: [{
-                type: Input
-            }], manual: [{
-                type: Input
-            }], frames: [{
-                type: Input
-            }], resolution: [{
-                type: Input
-            }], envMap: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { _makeDefault: [{
+                type: Input,
+                args: [{ alias: 'makeDefault' }]
+            }], _manual: [{
+                type: Input,
+                args: [{ alias: 'manual' }]
+            }], _frames: [{
+                type: Input,
+                args: [{ alias: 'frames' }]
+            }], _resolution: [{
+                type: Input,
+                args: [{ alias: 'resolution' }]
+            }], _envMap: [{
+                type: Input,
+                args: [{ alias: 'envMap' }]
             }], cameraRef: [{
                 type: Input
             }] } });
@@ -220,117 +256,128 @@ extend({ OrthographicCamera, Group });
 class NgtsOrthographicCamera extends NgtsCamera {
     constructor() {
         super(...arguments);
-        this.left$ = combineLatest([this.select('left'), this.store.select('size')]).pipe(map(([left, size]) => left || size.width / -2));
-        this.right$ = combineLatest([this.select('right'), this.store.select('size')]).pipe(map(([right, size]) => right || size.width / 2));
-        this.top$ = combineLatest([this.select('top'), this.store.select('size')]).pipe(map(([top, size]) => top || size.height / 2));
-        this.bottom$ = combineLatest([this.select('bottom'), this.store.select('size')]).pipe(map(([bottom, size]) => bottom || size.height / -2));
-    }
-    set left(left) {
-        this.set({ left });
+        this.orthographicInputs = signalStore({
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+        });
+        this.left = this.orthographicInputs.select('left');
+        this.right = this.orthographicInputs.select('right');
+        this.top = this.orthographicInputs.select('top');
+        this.bottom = this.orthographicInputs.select('bottom');
+        this.size = this.store.select('size');
+        this.cameraLeft = computed(() => this.left() || this.size().width / -2);
+        this.cameraRight = computed(() => this.right() || this.size().width / 2);
+        this.cameraTop = computed(() => this.top() || this.size().height / 2);
+        this.cameraBottom = computed(() => this.bottom() || this.size().height / -2);
     }
-    set right(right) {
-        this.set({ right });
+    set _left(left) {
+        this.orthographicInputs.set({ left });
     }
-    set top(top) {
-        this.set({ top });
+    set _right(right) {
+        this.orthographicInputs.set({ right });
     }
-    set bottom(bottom) {
-        this.set({ bottom });
+    set _top(top) {
+        this.orthographicInputs.set({ top });
     }
-    initialize() {
-        super.initialize();
-        this.set({ left: 0, right: 0, top: 0, bottom: 0 });
+    set _bottom(bottom) {
+        this.orthographicInputs.set({ bottom });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsOrthographicCamera, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsOrthographicCamera, isStandalone: true, selector: "ngts-orthographic-camera", inputs: { left: "left", right: "right", top: "top", bottom: "bottom" }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-orthographic-camera
-            ngtCompound
-            [ref]="cameraRef"
-            [left]="left$ | ngtPush"
-            [right]="right$ | ngtPush"
-            [top]="top$ | ngtPush"
-            [bottom]="bottom$ | ngtPush"
-        >
-            <ng-container
-                *ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-                [ngTemplateOutlet]="cameraContent.template"
-            />
-        </ngt-orthographic-camera>
-        <ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-            <ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsOrthographicCamera, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsOrthographicCamera, isStandalone: true, selector: "ngts-orthographic-camera", inputs: { _left: ["left", "_left"], _right: ["right", "_right"], _top: ["top", "_top"], _bottom: ["bottom", "_bottom"] }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+		<ngt-orthographic-camera
+			ngtCompound
+			[ref]="cameraRef"
+			[left]="cameraLeft()"
+			[right]="cameraRight()"
+			[top]="cameraTop()"
+			[bottom]="cameraBottom()"
+		>
+			<ng-container
+				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
+				[ngTemplateOutlet]="cameraContent.template"
+			/>
+		</ngt-orthographic-camera>
+		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsOrthographicCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsOrthographicCamera, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-orthographic-camera',
                     standalone: true,
                     template: `
-        <ngt-orthographic-camera
-            ngtCompound
-            [ref]="cameraRef"
-            [left]="left$ | ngtPush"
-            [right]="right$ | ngtPush"
-            [top]="top$ | ngtPush"
-            [bottom]="bottom$ | ngtPush"
-        >
-            <ng-container
-                *ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-                [ngTemplateOutlet]="cameraContent.template"
-            />
-        </ngt-orthographic-camera>
-        <ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-            <ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
-        </ngt-group>
-    `,
-                    imports: [NgIf, NgTemplateOutlet, NgtPush],
+		<ngt-orthographic-camera
+			ngtCompound
+			[ref]="cameraRef"
+			[left]="cameraLeft()"
+			[right]="cameraRight()"
+			[top]="cameraTop()"
+			[bottom]="cameraBottom()"
+		>
+			<ng-container
+				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
+				[ngTemplateOutlet]="cameraContent.template"
+			/>
+		</ngt-orthographic-camera>
+		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+		</ngt-group>
+	`,
+                    imports: [NgIf, NgTemplateOutlet],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { cameraContent: [{
                 type: ContentChild,
                 args: [NgtsCameraContent]
-            }], left: [{
-                type: Input
-            }], right: [{
-                type: Input
-            }], top: [{
-                type: Input
-            }], bottom: [{
-                type: Input
+            }], _left: [{
+                type: Input,
+                args: [{ alias: 'left' }]
+            }], _right: [{
+                type: Input,
+                args: [{ alias: 'right' }]
+            }], _top: [{
+                type: Input,
+                args: [{ alias: 'top' }]
+            }], _bottom: [{
+                type: Input,
+                args: [{ alias: 'bottom' }]
             }] } });
 
 extend({ PerspectiveCamera, Group });
 class NgtsPerspectiveCamera extends NgtsCamera {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsPerspectiveCamera, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsPerspectiveCamera, isStandalone: true, selector: "ngts-perspective-camera", queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-perspective-camera [ref]="cameraRef" ngtCompound>
-            <ng-container
-                *ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-                [ngTemplateOutlet]="cameraContent.template"
-            />
-        </ngt-perspective-camera>
-        <ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-            <ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPerspectiveCamera, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsPerspectiveCamera, isStandalone: true, selector: "ngts-perspective-camera", queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+		<ngt-perspective-camera [ref]="cameraRef" ngtCompound>
+			<ng-container
+				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
+				[ngTemplateOutlet]="cameraContent.template"
+			/>
+		</ngt-perspective-camera>
+		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsPerspectiveCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPerspectiveCamera, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-perspective-camera',
                     standalone: true,
                     template: `
-        <ngt-perspective-camera [ref]="cameraRef" ngtCompound>
-            <ng-container
-                *ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-                [ngTemplateOutlet]="cameraContent.template"
-            />
-        </ngt-perspective-camera>
-        <ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-            <ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
-        </ngt-group>
-    `,
+		<ngt-perspective-camera [ref]="cameraRef" ngtCompound>
+			<ng-container
+				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
+				[ngTemplateOutlet]="cameraContent.template"
+			/>
+		</ngt-perspective-camera>
+		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+		</ngt-group>
+	`,
                     imports: [NgIf, NgTemplateOutlet],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -343,5 +390,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsCameraContent, NgtsCubeCamera, NgtsOrthographicCamera, NgtsPerspectiveCamera };
+export { NgtsCameraContent, NgtsCubeCamera, NgtsCubeCameraContent, NgtsOrthographicCamera, NgtsPerspectiveCamera, injectNgtsCubeCamera };
 //# sourceMappingURL=angular-three-soba-cameras.mjs.map