feat(soba/misc): expose NgtsHTML as module

Author: nartc

libs/soba/gizmos/src/lib/pivot-controls/axis-arrow.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { extend, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
 import { NgtsLine } from 'angular-three-soba/abstractions';
-import { NgtsHTMLDeclarations } from 'angular-three-soba/misc';
+import { NgtsHTML } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { ConeGeometry, CylinderGeometry, Group, Mesh, MeshBasicMaterial } from 'three';
 import { NgtsPivotControls } from './pivot-controls';
@@ -116,7 +116,7 @@ const offsetMatrix = new THREE.Matrix4();
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtArgs, NgtsLine, NgtsHTMLDeclarations],
+	imports: [NgtArgs, NgtsLine, NgtsHTML],
 })
 export class NgtsAxisArrow {
 	protected readonly DoubleSide = THREE.DoubleSide;

libs/soba/gizmos/src/lib/pivot-controls/axis-rotator.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { extend, injectStore, NgtThreeEvent } from 'angular-three';
 import { NgtsLine } from 'angular-three-soba/abstractions';
-import { NgtsHTMLDeclarations } from 'angular-three-soba/misc';
+import { NgtsHTML } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { Group } from 'three';
 import { NgtsPivotControls } from './pivot-controls';
@@ -120,7 +120,7 @@ const intersection = new THREE.Vector3();
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtsLine, NgtsHTMLDeclarations],
+	imports: [NgtsLine, NgtsHTML],
 })
 export class NgtsAxisRotator {
 	protected readonly DoubleSide = THREE.DoubleSide;

libs/soba/gizmos/src/lib/pivot-controls/plane-slider.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { extend, injectStore, NgtThreeEvent } from 'angular-three';
 import { NgtsLine } from 'angular-three-soba/abstractions';
-import { NgtsHTMLDeclarations } from 'angular-three-soba/misc';
+import { NgtsHTML } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { Group, Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
 import { NgtsPivotControls } from './pivot-controls';
@@ -97,7 +97,7 @@ const offsetMatrix = new THREE.Matrix4();
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtsHTMLDeclarations, NgtsLine],
+	imports: [NgtsHTML, NgtsLine],
 })
 export class NgtsPlaneSlider {
 	protected readonly DoubleSide = THREE.DoubleSide;

libs/soba/gizmos/src/lib/pivot-controls/scaling-sphere.ts

@@ -10,7 +10,7 @@ import {
 	viewChild,
 } from '@angular/core';
 import { extend, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
-import { calculateScaleFactor, NgtsHTMLDeclarations } from 'angular-three-soba/misc';
+import { calculateScaleFactor, NgtsHTML } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { Group, Mesh, MeshBasicMaterial, SphereGeometry } from 'three';
 import { NgtsPivotControls } from './pivot-controls';
@@ -87,7 +87,7 @@ const scaleMatrix = new THREE.Matrix4();
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtsHTMLDeclarations, NgtArgs],
+	imports: [NgtsHTML, NgtArgs],
 })
 export class NgtsScalingSphere {
 	direction = input.required<THREE.Vector3>();

libs/soba/misc/src/lib/html/html-content.ts

@@ -15,7 +15,7 @@ import {
 import { injectBeforeRender, injectStore, is, NgtHTML, pick, resolveRef } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import * as THREE from 'three';
-import { NgtsHTML } from './html';
+import { NgtsHTMLImpl } from './html';
 import {
 	CalculatePosition,
 	defaultCalculatePosition,
@@ -120,7 +120,7 @@ export class NgtsHTMLContent extends NgtHTML {
 	transformInnerRef = viewChild<ElementRef<HTMLDivElement>>('transformInner');
 	containerRef = viewChild<ElementRef<HTMLDivElement>>('container');
 
-	protected html = inject(NgtsHTML);
+	protected html = inject(NgtsHTMLImpl);
 	private host = inject<ElementRef<HTMLElement>>(ElementRef);
 	private store = injectStore();
 	protected size = this.store.size;

libs/soba/misc/src/lib/html/html.ts

@@ -5,6 +5,7 @@ import {
 	CUSTOM_ELEMENTS_SCHEMA,
 	ElementRef,
 	input,
+	NgModule,
 	viewChild,
 } from '@angular/core';
 import { extend, is, NgtThreeElements, omit, pick } from 'angular-three';
@@ -52,7 +53,7 @@ const defaultHtmlOptions: NgtsHTMLOptions = {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NgtsHTML {
+export class NgtsHTMLImpl {
 	options = input(defaultHtmlOptions, { transform: mergeInputs(defaultHtmlOptions) });
 	protected parameters = omit(this.options, ['occlude', 'castShadow', 'receiveShadow', 'transform']);
 
@@ -128,4 +129,5 @@ export class NgtsHTML {
 	protected readonly DoubleSide = THREE.DoubleSide;
 }
 
-export const NgtsHTMLDeclarations = [NgtsHTML, NgtsHTMLContent] as const;
+@NgModule({ imports: [NgtsHTMLImpl, NgtsHTMLContent], exports: [NgtsHTMLImpl, NgtsHTMLContent] })
+export class NgtsHTML {}

libs/soba/src/misc/html.stories.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
 import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
-import { NgtsHTML, NgtsHTMLContent, NgtsHTMLContentOptions, NgtsHTMLOptions } from 'angular-three-soba/misc';
+import { NgtsHTML, NgtsHTMLContentOptions, NgtsHTMLOptions } from 'angular-three-soba/misc';
 import { ColorRepresentation } from 'three';
 import { storyDecorators, storyFunction, storyObject, Turnable } from '../setup-canvas';
 
@@ -47,7 +47,7 @@ import { storyDecorators, storyFunction, storyObject, Turnable } from '../setup-
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtArgs, NgtsHTML, NgtsHTMLContent, Turnable],
+	imports: [NgtArgs, NgtsHTML, Turnable],
 })
 class HtmlScene {
 	color = input<ColorRepresentation>('hotpink');
@@ -71,7 +71,7 @@ class HtmlScene {
 		}
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [HtmlScene, NgtsHTML, NgtsHTMLContent],
+	imports: [HtmlScene, NgtsHTML],
 })
 class HtmlTransformScene {
 	htmlOptions = input({} as NgtsHTMLOptions);

libs/soba/src/staging/bb-anchor.stories.ts

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsHelper } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
-import { NgtsHTML, NgtsHTMLContent } from 'angular-three-soba/misc';
+import { NgtsHTML } from 'angular-three-soba/misc';
 import { NgtsBBAnchor, NgtsBBAnchorOptions } from 'angular-three-soba/staging';
 import { BoxHelper } from 'three';
 import { storyDecorators, storyObject } from '../setup-canvas';
@@ -60,7 +60,7 @@ class BBAnchorWrapper {
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [BBAnchorWrapper, NgtsHTML, NgtsHTMLContent],
+	imports: [BBAnchorWrapper, NgtsHTML],
 })
 class WithHTMLBBAnchorStory {
 	options = input<NgtsBBAnchorOptions>({ anchor: [1, 1, 1] });