angular-three-postprocessing 4.0.0-next.11 → 4.0.0-next.111

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, effect, untracked } from '@angular/core';
-import { injectStore, pick, extend, getInstanceState, injectBeforeRender, NgtArgs, vector2, omit, resolveRef, vector3, is, NgtSelection } from 'angular-three';
+import { inject, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, input, Directive, computed, viewChild, effect, untracked } from '@angular/core';
+import { injectStore, pick, extend, getInstanceState, beforeRender, NgtArgs, vector2, omit, resolveRef, vector3, is, NgtSelectionApi } from 'angular-three';
 import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
@@ -14,15 +14,15 @@ class NgtpEffectBlendMode {
     constructor() {
         this.effect = inject(NgtpEffect, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
 		@if (effect) {
 			<ngt-value [rawValue]="effect.blendFunction()" attach="blendMode.blendFunction" />
 			<ngt-value [rawValue]="effect.opacity()" attach="blendMode.opacity.value" />
 		}
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-blend-mode',
@@ -39,16 +39,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 class NgtpEffect {
     constructor() {
         this.defaultEffectOptions = injectDefaultEffectOptions({ optional: true });
-        this.blendFunction = input(this.defaultEffectOptions?.blendFunction);
-        this.opacity = input(this.defaultEffectOptions?.opacity);
+        this.blendFunction = input(this.defaultEffectOptions?.blendFunction, ...(ngDevMode ? [{ debugName: "blendFunction" }] : []));
+        this.opacity = input(this.defaultEffectOptions?.opacity, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
         this.store = injectStore();
         this.camera = this.store.camera;
         this.invalidate = this.store.invalidate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpEffect, decorators: [{
             type: Directive
         }] });
 
@@ -64,8 +64,7 @@ function isConvolution(effect) {
 }
 class NgtpEffectComposer {
     constructor() {
-        this.options = input(defaultOptions$5, { transform: mergeInputs(defaultOptions$5) });
-        this.injector = inject(Injector);
+        this.options = input(defaultOptions$5, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs(defaultOptions$5) }] : [{ transform: mergeInputs(defaultOptions$5) }]));
         this.store = injectStore();
         this.depthBuffer = pick(this.options, 'depthBuffer');
         this.stencilBuffer = pick(this.options, 'stencilBuffer');
@@ -75,15 +74,15 @@ class NgtpEffectComposer {
         this.resolutionScale = pick(this.options, 'resolutionScale');
         this.enabled = pick(this.options, 'enabled');
         this.renderPriority = pick(this.options, 'renderPriority');
-        this.scene = computed(() => this.options().scene ?? this.store.scene());
-        this.camera = computed(() => this.options().camera ?? this.store.camera());
+        this.scene = computed(() => this.options().scene ?? this.store.scene(), ...(ngDevMode ? [{ debugName: "scene" }] : []));
+        this.camera = computed(() => this.options().camera ?? this.store.camera(), ...(ngDevMode ? [{ debugName: "camera" }] : []));
         this.groupRef = viewChild.required('group');
         this.priority = computed(() => {
             const enabled = this.enabled();
             if (!enabled)
                 return 0;
             return this.renderPriority();
-        });
+        }, ...(ngDevMode ? [{ debugName: "priority" }] : []));
         this.composerData = computed(() => {
             const webGL2Available = isWebGL2Available();
             const [gl, scene, camera, depthBuffer, stencilBuffer, multisampling, frameBufferType, enableNormalPass, resolutionScale,] = [
@@ -120,7 +119,7 @@ class NgtpEffectComposer {
                 }
             }
             return { composer, normalPass, downSamplingPass };
-        });
+        }, ...(ngDevMode ? [{ debugName: "composerData" }] : []));
         this.effectComposer = pick(this.composerData, 'composer');
         extend({ Group });
         // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
@@ -133,7 +132,11 @@ class NgtpEffectComposer {
             });
         });
         effect(() => {
-            const [{ composer }, width, height] = [this.composerData(), this.store.size.width(), this.store.size.height()];
+            const [composer, width, height] = [
+                this.effectComposer(),
+                this.store.size.width(),
+                this.store.size.height(),
+            ];
             if (composer) {
                 composer.setSize(width, height);
             }
@@ -187,34 +190,30 @@ class NgtpEffectComposer {
                     downSamplingPass.enabled = false;
             });
         });
-        effect((onCleanup) => {
-            const priority = this.priority();
-            const sub = injectBeforeRender(({ delta }) => {
-                const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
-                    this.composerData(),
-                    this.options(),
-                    this.store.snapshot.gl,
-                ];
-                if (enabled) {
-                    const currentAutoClear = gl.autoClear;
-                    gl.autoClear = autoClear;
-                    if (stencilBuffer && !autoClear)
-                        gl.clearStencil();
-                    composer.render(delta);
-                    gl.autoClear = currentAutoClear;
-                }
-            }, { injector: this.injector, priority });
-            onCleanup(() => sub());
-        });
+        beforeRender(({ delta }) => {
+            const [composer, { enabled, autoClear, stencilBuffer }, gl] = [
+                this.effectComposer(),
+                this.options(),
+                this.store.snapshot.gl,
+            ];
+            if (enabled) {
+                const currentAutoClear = gl.autoClear;
+                gl.autoClear = autoClear;
+                if (stencilBuffer && !autoClear)
+                    gl.clearStencil();
+                composer.render(delta);
+                gl.autoClear = currentAutoClear;
+            }
+        }, { priority: this.priority });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.4", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group>
 			<ng-content />
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpEffectComposer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpEffectComposer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-composer',
@@ -320,19 +319,19 @@ const defaultOptions$4 = {
 };
 class NgtpASCII {
     constructor() {
-        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
-        this.effect = computed(() => new ASCIIEffect(this.options()));
+        this.options = input(defaultOptions$4, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs(defaultOptions$4) }] : [{ transform: mergeInputs(defaultOptions$4) }]));
+        this.effect = computed(() => new ASCIIEffect(this.options()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpASCII, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpASCII, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-ascii',
@@ -347,19 +346,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpBloom {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ BloomEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpBloom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpBloom, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-bloom',
@@ -379,19 +378,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpBrightnessContrast {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ BrightnessContrastEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-brightness-contrast-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-brightness-contrast',
@@ -410,19 +409,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpChromaticAberration {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ChromaticAberrationEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-chromatic-aberration-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-chromatic-aberration',
@@ -441,17 +440,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpColorAverage {
     constructor() {
-        this.options = input({ blendFunction: BlendFunction.NORMAL }, { transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
+        this.options = input({ blendFunction: BlendFunction.NORMAL }, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) }] : [{ transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) }]));
         extend({ ColorAverageEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-color-average-effect *args="[options().blendFunction]">
 			<ng-content />
 		</ngt-color-average-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpColorAverage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpColorAverage, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-average',
@@ -468,19 +467,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpColorDepth {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ColorDepthEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-color-depth-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpColorDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpColorDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-depth',
@@ -499,19 +498,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpDepth {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ DepthEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-depth-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth',
@@ -530,7 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpDepthOfField {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectComposer = inject(NgtpEffectComposer);
         this.effect = computed(() => {
             const [camera, options] = [this.effectComposer.camera(), this.options()];
@@ -547,18 +546,18 @@ class NgtpDepthOfField {
             const maskPass = effect['maskPass'];
             maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
             return effect;
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const depthOfFieldEffect = this.effect();
             onCleanup(() => depthOfFieldEffect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpDepthOfField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpDepthOfField, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth-of-field',
@@ -573,19 +572,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpDotScreen {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ DotScreenEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-dot-screen-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpDotScreen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpDotScreen, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-dot-screen',
@@ -604,19 +603,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpFXAA {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ FXAAEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-fXAA-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpFXAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpFXAA, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-fxaa',
@@ -635,7 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpGlitch {
     constructor() {
-        this.options = input({ active: true }, { transform: mergeInputs({ active: true }) });
+        this.options = input({ active: true }, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs({ active: true }) }] : [{ transform: mergeInputs({ active: true }) }]));
         this.active = pick(this.options, 'active');
         this.mode = pick(this.options, 'mode');
         this.ratio = pick(this.options, 'ratio');
@@ -658,7 +657,7 @@ class NgtpGlitch {
             duration: this.duration(),
             chromaticAberrationOffset: this.chromaticAberrationOffset(),
             strength: this.strength(),
-        }));
+        }), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [glitchEffect, invalidate, mode, active] = [
                 this.effect(),
@@ -674,12 +673,12 @@ class NgtpGlitch {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpGlitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpGlitch, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-glitch',
@@ -694,7 +693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpGodRays {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectComposer = inject(NgtpEffectComposer);
         this.effectOptions = omit(this.options, ['sun']);
         this.sun = pick(this.options, 'sun');
@@ -703,11 +702,11 @@ class NgtpGodRays {
             if (typeof sun === 'function')
                 return resolveRef(sun());
             return resolveRef(sun);
-        });
+        }, ...(ngDevMode ? [{ debugName: "sunElement" }] : []));
         this.effect = computed(() => {
             const [camera, sunElement, options] = [this.effectComposer.camera(), this.sunElement(), this.effectOptions()];
             return new GodRaysEffect(camera, sunElement, options);
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const sunElement = this.sunElement();
             if (!sunElement)
@@ -720,12 +719,12 @@ class NgtpGodRays {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpGodRays, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpGodRays, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-god-rays',
@@ -740,10 +739,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpGrid {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectOptions = omit(this.options, ['size']);
         this.size = pick(this.options, 'size');
-        this.effect = computed(() => new GridEffect(this.effectOptions()));
+        this.effect = computed(() => new GridEffect(this.effectOptions()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [size, effect] = [this.size(), this.effect()];
             if (size) {
@@ -755,12 +754,12 @@ class NgtpGrid {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-grid',
@@ -775,19 +774,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpHueSaturation {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ HueSaturationEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-hue-saturation-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpHueSaturation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpHueSaturation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-hue-saturation',
@@ -894,14 +893,14 @@ const defaultOptions$3 = {
 };
 class NgtpLensFlare {
     constructor() {
-        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.options = input(defaultOptions$3, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs(defaultOptions$3) }] : [{ transform: mergeInputs(defaultOptions$3) }]));
         this.store = injectStore();
         this.effectComposer = inject(NgtpEffectComposer);
         this.effectOptions = omit(this.options, ['position', 'followMouse', 'smoothTime']);
         this.position = vector3(this.options, 'position');
         this.projectedPosition = new THREE.Vector3();
         this.mouse2d = new THREE.Vector2();
-        this.effect = computed(() => new LensFlareEffect(this.effectOptions()));
+        this.effect = computed(() => new LensFlareEffect(this.effectOptions()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [lensFlareEffect, width, height] = [
                 this.effect(),
@@ -918,7 +917,7 @@ class NgtpLensFlare {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
         });
-        injectBeforeRender(({ delta }) => {
+        beforeRender(({ delta }) => {
             const [effect] = [this.effect()];
             if (!effect)
                 return;
@@ -975,12 +974,12 @@ class NgtpLensFlare {
             easing.damp(uOpacity, 'value', target, smoothTime, delta);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [parameters]="{ dispose: null }" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpLensFlare, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpLensFlare, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lens-flare',
@@ -995,14 +994,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpLUT {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.lut = pick(this.options, 'lut');
         this.tetrahedralInterpolation = pick(this.options, 'tetrahedralInterpolation');
         this.store = injectStore();
         this.effect = computed(() => {
             const { lut, ...options } = this.options();
             return new LUT3DEffect(lut, options);
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [effect, lut, tetrahedralInterpolation, invalidate] = [
                 this.effect(),
@@ -1021,12 +1020,12 @@ class NgtpLUT {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [dispose]="null" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpLUT, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpLUT, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lut',
@@ -1041,19 +1040,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpNoise {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ NoiseEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-noise-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpNoise, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpNoise, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-noise',
@@ -1076,8 +1075,8 @@ const defaultOptions$2 = {
 };
 class NgtpOutline {
     constructor() {
-        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
-        this.ngtSelection = inject(NgtSelection, { optional: true });
+        this.options = input(defaultOptions$2, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs(defaultOptions$2) }] : [{ transform: mergeInputs(defaultOptions$2) }]));
+        this.selectionApi = inject(NgtSelectionApi, { optional: true });
         this.effectComposer = inject(NgtpEffectComposer);
         this.store = injectStore();
         this.selection = pick(this.options, 'selection');
@@ -1137,19 +1136,23 @@ class NgtpOutline {
                 xRay,
                 ...restOptions,
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
         });
         effect(() => {
-            const [effect, invalidate, selectionLayer] = [this.effect(), this.store.invalidate(), this.selectionLayer()];
+            const [effect, invalidate, selectionLayer] = [
+                this.effect(),
+                this.store.invalidate(),
+                this.selectionLayer(),
+            ];
             effect.selectionLayer = selectionLayer;
             invalidate();
         });
         effect((onCleanup) => {
             // NOTE: we run this effect if declarative NgtSelection is not enabled
-            if (!this.ngtSelection) {
+            if (!this.selectionApi) {
                 // NOTE: if NgtSelection is not used and selection is not provided, we throw
                 if (this.selection() === undefined) {
                     throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
@@ -1161,10 +1164,10 @@ class NgtpOutline {
                 return;
             }
             // NOTE: we run this effect if declarative NgtSelection is enabled
-            const selectionEnabled = this.ngtSelection.enabled();
+            const selectionEnabled = this.selectionApi.enabled();
             if (!selectionEnabled)
                 return;
-            const cleanup = this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.store.invalidate);
+            const cleanup = this.handleSelectionChangeEffect(this.selectionApi.selected, this.effect, this.store.invalidate);
             onCleanup(() => {
                 cleanup?.();
             });
@@ -1191,12 +1194,12 @@ class NgtpOutline {
             invalidate();
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpOutline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpOutline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-outline',
@@ -1211,20 +1214,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpPixelation {
     constructor() {
-        this.options = input({ granularity: 5 }, { transform: mergeInputs({ granularity: 5 }) });
+        this.options = input({ granularity: 5 }, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs({ granularity: 5 }) }] : [{ transform: mergeInputs({ granularity: 5 }) }]));
         this.granularity = pick(this.options, 'granularity');
-        this.effect = computed(() => new PixelationEffect(this.granularity()));
+        this.effect = computed(() => new PixelationEffect(this.granularity()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpPixelation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpPixelation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-pixelation',
@@ -1242,19 +1245,19 @@ const defaultOptions$1 = {
 };
 class NgtpScanline {
     constructor() {
-        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.options = input(defaultOptions$1, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs(defaultOptions$1) }] : [{ transform: mergeInputs(defaultOptions$1) }]));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ScanlineEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-scanline-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpScanline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpScanline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-scanline',
@@ -1281,9 +1284,9 @@ const defaultOptions = {
 };
 class NgtpSelectiveBloom {
     constructor() {
-        this.lights = input.required();
-        this.selection = input([]);
-        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.lights = input.required(...(ngDevMode ? [{ debugName: "lights" }] : []));
+        this.selection = input([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
+        this.options = input(defaultOptions, ...(ngDevMode ? [{ debugName: "options", transform: mergeInputs(defaultOptions) }] : [{ transform: mergeInputs(defaultOptions) }]));
         this.blendFunction = pick(this.options, 'blendFunction');
         this.luminanceThreshold = pick(this.options, 'luminanceThreshold');
         this.luminanceSmoothing = pick(this.options, 'luminanceSmoothing');
@@ -1302,20 +1305,20 @@ class NgtpSelectiveBloom {
         this.selectionLayer = pick(this.options, 'selectionLayer');
         this.store = injectStore();
         this.effectComposer = inject(NgtpEffectComposer);
-        this.ngtSelection = inject(NgtSelection, { optional: true });
-        this.resolvedLights = computed(() => this.lights().map((light) => resolveRef(light)));
+        this.selectionApi = inject(NgtSelectionApi, { optional: true });
+        this.resolvedLights = computed(() => this.lights().map((light) => resolveRef(light)), ...(ngDevMode ? [{ debugName: "resolvedLights" }] : []));
         this.resolvedSelected = computed(() => {
             const selection = this.selection();
             if (!selection)
                 return [];
             const array = Array.isArray(selection) ? selection : [selection];
             return array.map((selected) => resolveRef(selected));
-        });
+        }, ...(ngDevMode ? [{ debugName: "resolvedSelected" }] : []));
         this.resolvedNgtSelected = computed(() => {
-            if (!this.ngtSelection || !this.ngtSelection.enabled)
+            if (!this.selectionApi || !this.selectionApi.enabled)
                 return [];
-            return this.ngtSelection.selected().map((selected) => resolveRef(selected));
-        });
+            return this.selectionApi.selected().map((selected) => resolveRef(selected));
+        }, ...(ngDevMode ? [{ debugName: "resolvedNgtSelected" }] : []));
         this.effect = computed(() => {
             const effect = new SelectiveBloomEffect(this.effectComposer.scene(), this.effectComposer.camera(), {
                 blendFunction: this.blendFunction() || BlendFunction.ADD,
@@ -1335,10 +1338,10 @@ class NgtpSelectiveBloom {
             effect.inverted = this.inverted();
             effect.ignoreBackground = this.ignoreBackground();
             return effect;
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             // skip input selection altogether if NgtSelection is used
-            if (this.ngtSelection)
+            if (this.selectionApi)
                 return;
             const selection = this.resolvedSelected();
             if (!selection.length)
@@ -1352,7 +1355,11 @@ class NgtpSelectiveBloom {
             });
         });
         effect(() => {
-            const [selectionLayer, invalidate, effect] = [this.selectionLayer(), this.store.invalidate(), this.effect()];
+            const [selectionLayer, invalidate, effect] = [
+                this.selectionLayer(),
+                this.store.invalidate(),
+                this.effect(),
+            ];
             effect.selection.layer = selectionLayer;
             invalidate();
         });
@@ -1387,12 +1394,12 @@ class NgtpSelectiveBloom {
     removeLight(effect, light) {
         light.layers.disable(effect.selection.layer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSelectiveBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpSelectiveBloom, isStandalone: true, selector: "ngtp-selective-bloom", inputs: { lights: { classPropertyName: "lights", publicName: "lights", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpSelectiveBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpSelectiveBloom, isStandalone: true, selector: "ngtp-selective-bloom", inputs: { lights: { classPropertyName: "lights", publicName: "lights", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [dispose]="null" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSelectiveBloom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpSelectiveBloom, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-selective-bloom',
@@ -1407,19 +1414,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpSepia {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ SepiaEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sepia-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSepia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpSepia, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-sepia',
@@ -1438,19 +1445,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpShockWave {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ShockWaveEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-shock-wave-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpShockWave, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpShockWave, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-shock-wave',
@@ -1469,19 +1476,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpSMAA {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ SMAAEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sMAA-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSMAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpSMAA, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-smaa',
@@ -1500,19 +1507,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpTiltShift {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ TiltShiftEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpTiltShift, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpTiltShift, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tilt-shift',
@@ -1614,18 +1621,18 @@ class TiltShift2Effect extends Effect {
 extend({ TiltShift2Effect });
 class NgtpTiltShift2 {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift2-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpTiltShift2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpTiltShift2, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tilt-shift2',
@@ -1645,19 +1652,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpToneMapping {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ToneMappingEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-tone-mapping-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tone-mapping-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpToneMapping, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpToneMapping, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tone-mapping',
@@ -1676,19 +1683,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class NgtpVignette {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ VignetteEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-vignette-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpVignette, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpVignette, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-vignette',
@@ -1731,19 +1738,19 @@ class WaterEffect extends Effect {
 }
 class NgtpWater {
     constructor() {
-        this.options = input({});
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effect = inject(NgtpEffect, { host: true });
         extend({ WaterEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-water-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpWater, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgtpWater, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-water',