angular-three-soba 1.5.0 → 1.6.0

package/fesm2015/angular-three-soba-staging.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Directive, Component, CUSTOM_ELEMENTS_SCHEMA, Input, EventEmitter, Output, TemplateRef, ContentChild, ChangeDetectorRef } from '@angular/core';
-import { extend, NgtStore, getLocalState, NgtRxStore, injectNgtRef, NgtArgs, NgtRepeat, is, injectBeforeRender, NgtPush, injectNgtDestroy, injectNgtLoader, startWithUndefined, prepare, NgtPortal, NgtPortalContent } from 'angular-three';
+import { extend, NgtStore, getLocalState, NgtRxStore, injectNgtRef, NgtRef, NgtArgs, NgtRepeat, is, injectBeforeRender, NgtPush, injectNgtDestroy, injectNgtLoader, startWithUndefined, prepare, NgtPortal, NgtPortalContent } from 'angular-three';
 import { shaderMaterial } from 'angular-three-soba/shaders';
 import { Subject, combineLatest, switchMap, isObservable, of, debounceTime, map, takeUntil, startWith, withLatestFrom } from 'rxjs';
 import * as THREE from 'three';
@@ -312,11 +312,11 @@ NgtsAccumulativeShadows.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         },
     ], usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound>
-            <ngt-group [ref]="accumulativeShadowsRef" [traverse]="nullTraverse">
+            <ngt-group *ref="accumulativeShadowsRef" [traverse]="nullTraverse">
                 <ng-content />
                 <ngts-accumulative-shadows-consumer />
             </ngt-group>
-            <ngt-mesh [receiveShadow]="true" [ref]="meshRef" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
+            <ngt-mesh *ref="meshRef" [receiveShadow]="true" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
                 <ngt-plane-geometry />
                 <ngt-soft-shadow-material
                     [transparent]="true"
@@ -328,7 +328,7 @@ NgtsAccumulativeShadows.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 />
             </ngt-mesh>
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: AccumulativeShadowsConsumer, selector: "ngts-accumulative-shadows-consumer" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: AccumulativeShadowsConsumer, selector: "ngts-accumulative-shadows-consumer" }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsAccumulativeShadows, decorators: [{
             type: Component,
             args: [{
@@ -336,11 +336,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                     standalone: true,
                     template: `
         <ngt-group ngtCompound>
-            <ngt-group [ref]="accumulativeShadowsRef" [traverse]="nullTraverse">
+            <ngt-group *ref="accumulativeShadowsRef" [traverse]="nullTraverse">
                 <ng-content />
                 <ngts-accumulative-shadows-consumer />
             </ngt-group>
-            <ngt-mesh [receiveShadow]="true" [ref]="meshRef" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
+            <ngt-mesh *ref="meshRef" [receiveShadow]="true" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
                 <ngt-plane-geometry />
                 <ngt-soft-shadow-material
                     [transparent]="true"
@@ -353,7 +353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             </ngt-mesh>
         </ngt-group>
     `,
-                    imports: [AccumulativeShadowsConsumer],
+                    imports: [AccumulativeShadowsConsumer, NgtRef],
                     providers: [
                         {
                             provide: NGTS_ACCUMULATIVE_SHADOWS_API,
@@ -513,7 +513,7 @@ NgtsRandomizedLights.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 NgtsRandomizedLights.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsRandomizedLights, isStandalone: true, selector: "ngts-randomized-lights", inputs: { lightsRef: "lightsRef", frames: "frames", position: "position", radius: "radius", amount: "amount", intensity: "intensity", ambient: "ambient", castShadow: "castShadow", bias: "bias", mapSize: "mapSize", size: "size", near: "near", far: "far" }, providers: [
         { provide: NGTS_RANDOMIZED_LIGHTS_API, useFactory: randomizedLightsApiFactory, deps: [NgtsRandomizedLights] },
     ], usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="lightsRef">
+        <ngt-group ngtCompound *ref="lightsRef">
             <ngt-directional-light
                 *ngFor="let i; repeat: get('amount')"
                 [castShadow]="get('castShadow')"
@@ -525,14 +525,14 @@ NgtsRandomizedLights.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </ngt-directional-light>
             <ngts-randomized-lights-consumer />
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: RandomizedLightsConsumer, selector: "ngts-randomized-lights-consumer" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: RandomizedLightsConsumer, selector: "ngts-randomized-lights-consumer" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsRandomizedLights, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-randomized-lights',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="lightsRef">
+        <ngt-group ngtCompound *ref="lightsRef">
             <ngt-directional-light
                 *ngFor="let i; repeat: get('amount')"
                 [castShadow]="get('castShadow')"
@@ -545,7 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             <ngts-randomized-lights-consumer />
         </ngt-group>
     `,
-                    imports: [RandomizedLightsConsumer, NgtArgs, NgtRepeat],
+                    imports: [RandomizedLightsConsumer, NgtArgs, NgtRepeat, NgtRef],
                     providers: [
                         { provide: NGTS_RANDOMIZED_LIGHTS_API, useFactory: randomizedLightsApiFactory, deps: [NgtsRandomizedLights] },
                     ],
@@ -821,20 +821,21 @@ class NgtsBounds extends NgtRxStore {
 }
 NgtsBounds.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsBounds, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsBounds.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsBounds, isStandalone: true, selector: "ngts-bounds", inputs: { boundsRef: "boundsRef", damping: "damping", fit: "fit", clip: "clip", observe: "observe", margin: "margin", eps: "eps" }, outputs: { fitted: "fitted" }, providers: [{ provide: NGTS_BOUNDS_API, useFactory: boundsApiFactory, deps: [NgtsBounds] }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="boundsRef">
+        <ngt-group ngtCompound *ref="boundsRef">
             <ng-content />
         </ngt-group>
-    `, isInline: true });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsBounds, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-bounds',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="boundsRef">
+        <ngt-group ngtCompound *ref="boundsRef">
             <ng-content />
         </ngt-group>
     `,
+                    imports: [NgtRef],
                     providers: [{ provide: NGTS_BOUNDS_API, useFactory: boundsApiFactory, deps: [NgtsBounds] }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -1057,28 +1058,29 @@ class NgtsCenter extends NgtRxStore {
 }
 NgtsCenter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCenter, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsCenter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsCenter, isStandalone: true, selector: "ngts-center", inputs: { centerRef: "centerRef", top: "top", right: "right", bottom: "bottom", left: "left", front: "front", back: "back", disableX: "disableX", disableY: "disableY", disableZ: "disableZ", disabled: "disabled", precise: "precise" }, outputs: { centered: "centered" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="centerRef">
-            <ngt-group [ref]="outerRef">
-                <ngt-group [ref]="innerRef">
+        <ngt-group ngtCompound *ref="centerRef">
+            <ngt-group *ref="outerRef">
+                <ngt-group *ref="innerRef">
                     <ng-content />
                 </ngt-group>
             </ngt-group>
         </ngt-group>
-    `, isInline: true });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCenter, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-center',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="centerRef">
-            <ngt-group [ref]="outerRef">
-                <ngt-group [ref]="innerRef">
+        <ngt-group ngtCompound *ref="centerRef">
+            <ngt-group *ref="outerRef">
+                <ngt-group *ref="innerRef">
                     <ng-content />
                 </ngt-group>
             </ngt-group>
         </ngt-group>
     `,
+                    imports: [NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { centerRef: [{
@@ -1176,7 +1178,7 @@ class NgtsCloud extends NgtRxStore {
 }
 NgtsCloud.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCloud, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsCloud.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsCloud, isStandalone: true, selector: "ngts-cloud", inputs: { groupRef: "groupRef", opacity: "opacity", speed: "speed", width: "width", depth: "depth", segments: "segments", texture: "texture", color: "color", depthTest: "depthTest" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="groupRef">
+        <ngt-group ngtCompound *ref="groupRef">
             <ngt-group
                 [position]="[0, 0, (get('segments') / 2) * get('depth')]"
                 (beforeRender)="onBeforeRender($any($event))"
@@ -1203,14 +1205,14 @@ NgtsCloud.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15
                 </ngts-billboard>
             </ngt-group>
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "component", type: NgtsBillboard, selector: "ngts-billboard", inputs: ["billboardRef", "follow", "lockX", "lockY", "lockZ"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "component", type: NgtsBillboard, selector: "ngts-billboard", inputs: ["billboardRef", "follow", "lockX", "lockY", "lockZ"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCloud, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-cloud',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="groupRef">
+        <ngt-group ngtCompound *ref="groupRef">
             <ngt-group
                 [position]="[0, 0, (get('segments') / 2) * get('depth')]"
                 (beforeRender)="onBeforeRender($any($event))"
@@ -1238,7 +1240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             </ngt-group>
         </ngt-group>
     `,
-                    imports: [NgFor, NgtPush, NgtsBillboard, NgIf],
+                    imports: [NgFor, NgtPush, NgtsBillboard, NgIf, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { groupRef: [{
@@ -1399,7 +1401,7 @@ class NgtsContactShadows extends NgtRxStore {
 }
 NgtsContactShadows.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsContactShadows, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NgtsContactShadows.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsContactShadows, isStandalone: true, selector: "ngts-contact-shadows", inputs: { contactShadowsRef: "contactShadowsRef", opacity: "opacity", width: "width", height: "height", blur: "blur", far: "far", smooth: "smooth", resolution: "resolution", frames: "frames", scale: "scale", color: "color", depthWrite: "depthWrite", renderOrder: "renderOrder" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="contactShadowsRef" [rotation]="[Math.PI / 2, 0, 0]">
+        <ngt-group ngtCompound *ref="contactShadowsRef" [rotation]="[Math.PI / 2, 0, 0]">
             <ng-container *ngIf="contactShadows$ | ngtPush : null as contactShadows">
                 <ngt-mesh
                     [renderOrder]="get('renderOrder')"
@@ -1409,24 +1411,26 @@ NgtsContactShadows.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                 >
                     <ngt-mesh-basic-material
                         [map]="contactShadows.renderTarget.texture"
-                        transparent
+                        [transparent]="true"
                         [opacity]="get('opacity')"
                         [depthWrite]="get('depthWrite')"
                     >
                         <ngt-value [rawValue]="encoding" attach="map.encoding" />
                     </ngt-mesh-basic-material>
                 </ngt-mesh>
-                <ngt-orthographic-camera *args="get('cameraArgs')" [ref]="shadowCameraRef" />
+                <ng-container *args="get('cameraArgs')">
+                    <ngt-orthographic-camera *ref="shadowCameraRef" />
+                </ng-container>
             </ng-container>
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsContactShadows, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-contact-shadows',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="contactShadowsRef" [rotation]="[Math.PI / 2, 0, 0]">
+        <ngt-group ngtCompound *ref="contactShadowsRef" [rotation]="[Math.PI / 2, 0, 0]">
             <ng-container *ngIf="contactShadows$ | ngtPush : null as contactShadows">
                 <ngt-mesh
                     [renderOrder]="get('renderOrder')"
@@ -1436,18 +1440,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 >
                     <ngt-mesh-basic-material
                         [map]="contactShadows.renderTarget.texture"
-                        transparent
+                        [transparent]="true"
                         [opacity]="get('opacity')"
                         [depthWrite]="get('depthWrite')"
                     >
                         <ngt-value [rawValue]="encoding" attach="map.encoding" />
                     </ngt-mesh-basic-material>
                 </ngt-mesh>
-                <ngt-orthographic-camera *args="get('cameraArgs')" [ref]="shadowCameraRef" />
+                <ng-container *args="get('cameraArgs')">
+                    <ngt-orthographic-camera *ref="shadowCameraRef" />
+                </ng-container>
             </ng-container>
         </ngt-group>
     `,
-                    imports: [NgIf, NgtPush, NgtArgs],
+                    imports: [NgIf, NgtPush, NgtArgs, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { contactShadowsRef: [{
@@ -1816,7 +1822,9 @@ NgtsEnvironmentPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         <ngt-portal [container]="virtualSceneRef">
             <ng-template ngtPortalContent>
                 <ng-content />
-                <ngt-cube-camera *args="get('cameraArgs')" [ref]="cubeCameraRef" />
+                <ng-container *args="get('cameraArgs')">
+                    <ngt-cube-camera *ref="cubeCameraRef" />
+                </ng-container>
                 <ng-container *ngIf="get('files') || get('preset'); else environmentMap">
                     <ngts-environment-cube
                         [background]="true"
@@ -1831,7 +1839,7 @@ NgtsEnvironmentPortal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </ng-template>
             </ng-template>
         </ngt-portal>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map" }, { kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map" }, { kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsEnvironmentPortal, decorators: [{
             type: Component,
             args: [{
@@ -1841,7 +1849,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
         <ngt-portal [container]="virtualSceneRef">
             <ng-template ngtPortalContent>
                 <ng-content />
-                <ngt-cube-camera *args="get('cameraArgs')" [ref]="cubeCameraRef" />
+                <ng-container *args="get('cameraArgs')">
+                    <ngt-cube-camera *ref="cubeCameraRef" />
+                </ng-container>
                 <ng-container *ngIf="get('files') || get('preset'); else environmentMap">
                     <ngts-environment-cube
                         [background]="true"
@@ -1857,7 +1867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             </ng-template>
         </ngt-portal>
     `,
-                    imports: [NgtPortal, NgtPortalContent, NgtsEnvironmentMap, NgtsEnvironmentCube, NgIf, NgtArgs],
+                    imports: [NgtPortal, NgtPortalContent, NgtsEnvironmentMap, NgtsEnvironmentCube, NgIf, NgtArgs, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -2058,11 +2068,11 @@ class NgtsFloat extends NgtRxStore {
 NgtsFloat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsFloat, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NgtsFloat.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsFloat, isStandalone: true, selector: "ngts-float", inputs: { floatRef: "floatRef", speed: "speed", rotationIntensity: "rotationIntensity", floatIntensity: "floatIntensity", floatingRange: "floatingRange" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound>
-            <ngt-group [ref]="floatRef">
+            <ngt-group *ref="floatRef">
                 <ng-content />
             </ngt-group>
         </ngt-group>
-    `, isInline: true });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsFloat, decorators: [{
             type: Component,
             args: [{
@@ -2070,11 +2080,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                     standalone: true,
                     template: `
         <ngt-group ngtCompound>
-            <ngt-group [ref]="floatRef">
+            <ngt-group *ref="floatRef">
                 <ng-content />
             </ngt-group>
         </ngt-group>
     `,
+                    imports: [NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { floatRef: [{
@@ -2101,6 +2112,7 @@ class NgtsSky extends NgtRxStore {
     constructor() {
         super(...arguments);
         this.skyRef = injectNgtRef();
+        this.sky = new Sky();
     }
     set distance(distance) {
         this.set({ distance });
@@ -2143,36 +2155,36 @@ class NgtsSky extends NgtRxStore {
         this.connect('sunPosition', this.select(['inclination', 'azimuth'], ({ inclination, azimuth }) => calcPosFromAngles(inclination, azimuth)));
         this.connect('scale', this.select(['distance'], ({ distance }) => new Vector3().setScalar(distance)));
     }
-    ngOnInit() {
-        if (!this.skyRef.nativeElement)
-            this.skyRef.nativeElement = new Sky();
-    }
 }
 NgtsSky.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsSky, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsSky.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsSky, isStandalone: true, selector: "ngts-sky", inputs: { skyRef: "skyRef", distance: "distance", sunPosition: "sunPosition", inclination: "inclination", azimuth: "azimuth", mieCoefficient: "mieCoefficient", mieDirectionalG: "mieDirectionalG", rayleigh: "rayleigh", turbidity: "turbidity" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[skyRef.nativeElement]" ngtCompound [ref]="skyRef" [scale]="get('scale')">
-            <ngt-value [rawValue]="get('mieCoefficient')" attach="material.uniforms.mieCoefficient.value" />
-            <ngt-value [rawValue]="get('mieDirectionalG')" attach="material.uniforms.mieDirectionalG.value" />
-            <ngt-value [rawValue]="get('rayleigh')" attach="material.uniforms.rayleigh.value" />
-            <ngt-value [rawValue]="get('sunPosition')" attach="material.uniforms.sunPosition.value" />
-            <ngt-value [rawValue]="get('turbidity')" attach="material.uniforms.turbidity.value" />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+        <ng-container *args="[sky]">
+            <ngt-primitive ngtCompound *ref="skyRef" [scale]="get('scale')">
+                <ngt-value [rawValue]="get('mieCoefficient')" attach="material.uniforms.mieCoefficient.value" />
+                <ngt-value [rawValue]="get('mieDirectionalG')" attach="material.uniforms.mieDirectionalG.value" />
+                <ngt-value [rawValue]="get('rayleigh')" attach="material.uniforms.rayleigh.value" />
+                <ngt-value [rawValue]="get('sunPosition')" attach="material.uniforms.sunPosition.value" />
+                <ngt-value [rawValue]="get('turbidity')" attach="material.uniforms.turbidity.value" />
+            </ngt-primitive>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsSky, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-sky',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[skyRef.nativeElement]" ngtCompound [ref]="skyRef" [scale]="get('scale')">
-            <ngt-value [rawValue]="get('mieCoefficient')" attach="material.uniforms.mieCoefficient.value" />
-            <ngt-value [rawValue]="get('mieDirectionalG')" attach="material.uniforms.mieDirectionalG.value" />
-            <ngt-value [rawValue]="get('rayleigh')" attach="material.uniforms.rayleigh.value" />
-            <ngt-value [rawValue]="get('sunPosition')" attach="material.uniforms.sunPosition.value" />
-            <ngt-value [rawValue]="get('turbidity')" attach="material.uniforms.turbidity.value" />
-        </ngt-primitive>
+        <ng-container *args="[sky]">
+            <ngt-primitive ngtCompound *ref="skyRef" [scale]="get('scale')">
+                <ngt-value [rawValue]="get('mieCoefficient')" attach="material.uniforms.mieCoefficient.value" />
+                <ngt-value [rawValue]="get('mieDirectionalG')" attach="material.uniforms.mieDirectionalG.value" />
+                <ngt-value [rawValue]="get('rayleigh')" attach="material.uniforms.rayleigh.value" />
+                <ngt-value [rawValue]="get('sunPosition')" attach="material.uniforms.sunPosition.value" />
+                <ngt-value [rawValue]="get('turbidity')" attach="material.uniforms.turbidity.value" />
+            </ngt-primitive>
+        </ng-container>
     `,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { skyRef: [{
@@ -2347,7 +2359,7 @@ class NgtsSparkles extends NgtRxStore {
 }
 NgtsSparkles.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsSparkles, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NgtsSparkles.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsSparkles, isStandalone: true, selector: "ngts-sparkles", inputs: { pointsRef: "pointsRef", count: "count", speed: "speed", opacity: "opacity", color: "color", size: "size", scale: "scale", noise: "noise" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-points ngtCompount [ref]="pointsRef">
+        <ngt-points ngtCompount *ref="pointsRef">
             <ngt-buffer-geometry>
                 <ngt-buffer-attribute *args="[get('positions'), 3]" attach="attributes.position" />
                 <ngt-buffer-attribute *args="[get('sizes'), 1]" attach="attributes.size" />
@@ -2356,16 +2368,16 @@ NgtsSparkles.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                 <ngt-buffer-attribute *args="[get('colors'), 3]" attach="attributes.color" />
                 <ngt-buffer-attribute *args="[get('noises'), 3]" attach="attributes.noise" />
             </ngt-buffer-geometry>
-            <ngt-sparkles-material [ref]="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr" />
+            <ngt-sparkles-material *ref="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr" />
         </ngt-points>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsSparkles, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-sparkles',
                     standalone: true,
                     template: `
-        <ngt-points ngtCompount [ref]="pointsRef">
+        <ngt-points ngtCompount *ref="pointsRef">
             <ngt-buffer-geometry>
                 <ngt-buffer-attribute *args="[get('positions'), 3]" attach="attributes.position" />
                 <ngt-buffer-attribute *args="[get('sizes'), 1]" attach="attributes.size" />
@@ -2374,10 +2386,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 <ngt-buffer-attribute *args="[get('colors'), 3]" attach="attributes.color" />
                 <ngt-buffer-attribute *args="[get('noises'), 3]" attach="attributes.noise" />
             </ngt-buffer-geometry>
-            <ngt-sparkles-material [ref]="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr" />
+            <ngt-sparkles-material *ref="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr" />
         </ngt-points>
     `,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { pointsRef: [{
@@ -2432,10 +2444,7 @@ NgtsStageRefit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 NgtsStageRefit.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: NgtsStageRefit, isStandalone: true, selector: "ngts-stage-refit", inputs: { radius: "radius", adjustCamera: "adjustCamera" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsStageRefit, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'ngts-stage-refit',
-                    standalone: true,
-                }]
+            args: [{ selector: 'ngts-stage-refit', standalone: true }]
         }], propDecorators: { radius: [{
                 type: Input
             }], adjustCamera: [{
@@ -2851,7 +2860,7 @@ class NgtsStars extends NgtRxStore {
 }
 NgtsStars.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsStars, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NgtsStars.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsStars, isStandalone: true, selector: "ngts-stars", inputs: { starsRef: "starsRef", radius: "radius", depth: "depth", count: "count", factor: "factor", saturation: "saturation", fade: "fade", speed: "speed" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-points [ref]="starsRef">
+        <ngt-points *ref="starsRef">
             <ngt-buffer-geometry>
                 <ngt-buffer-attribute attach="attributes.position" *args="[get('bufferAttributes').positions, 3]" />
                 <ngt-buffer-attribute attach="attributes.color" *args="[get('bufferAttributes').colors, 3]" />
@@ -2868,14 +2877,14 @@ NgtsStars.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15
                 <ngt-value attach="uniforms.fade.value" [rawValue]="get('fade')" />
             </ngt-primitive>
         </ngt-points>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsStars, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-stars',
                     standalone: true,
                     template: `
-        <ngt-points [ref]="starsRef">
+        <ngt-points *ref="starsRef">
             <ngt-buffer-geometry>
                 <ngt-buffer-attribute attach="attributes.position" *args="[get('bufferAttributes').positions, 3]" />
                 <ngt-buffer-attribute attach="attributes.color" *args="[get('bufferAttributes').colors, 3]" />
@@ -2893,7 +2902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             </ngt-primitive>
         </ngt-points>
     `,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { starsRef: [{