fix(soba): rename directive selectors to camel case instead of kebab

Author: nartc

libs/soba/controls/src/lib/scroll-controls.ts

@@ -279,7 +279,7 @@ export class NgtsScrollControls {
 	}
 }
 
-@Directive({ selector: 'ngt-group[ngts-scroll-canvas]', standalone: true })
+@Directive({ selector: 'ngt-group[ngtsScrollCanvas]', standalone: true })
 export class NgtsScrollCanvas {
 	private host = inject<ElementRef<Group>>(ElementRef);
 	private scrollControls = inject(NgtsScrollControls);
@@ -301,7 +301,7 @@ export class NgtsScrollCanvas {
 }
 
 @Directive({
-	selector: 'div[ngts-scroll-html]',
+	selector: 'div[ngtsScrollHTML]',
 	standalone: true,
 	host: { style: 'position: absolute; top: 0; left: 0; will-change: transform;' },
 	providers: [provideHTMLDomElement([NgtsScrollControls], (scrollControls) => scrollControls.fixed)],

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

@@ -71,7 +71,7 @@ const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
 };
 
 @Component({
-	selector: '[ngts-html-content]',
+	selector: '[ngtsHTMLContent]',
 	standalone: true,
 	template: `
 		@if (html.transform()) {
@@ -114,7 +114,7 @@ const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
 export class NgtsHTMLContent extends NgtHTML {
 	options = input(defaultHtmlContentOptions, {
 		transform: mergeInputs(defaultHtmlContentOptions),
-		alias: 'ngts-html-content',
+		alias: 'ngtsHTMLContent',
 	});
 	occluded = output<boolean>();
 

libs/soba/src/controls/scroll-controls.stories.ts

@@ -202,13 +202,13 @@ class HtmlContent extends NgtHTML {
 	standalone: true,
 	template: `
 		<ngts-scroll-controls [(progress)]="progress" [options]="options()">
-			<ngt-group ngts-scroll-canvas>
+			<ngt-group ngtsScrollCanvas>
 				<scroll-suzanne [scale]="2" />
 				<scroll-suzanne [position]="[-viewport().width / 8, -viewport().height, 0]" [scale]="3" />
 				<scroll-suzanne [position]="[viewport().width / 4, -viewport().height * 2, 0]" [scale]="1.5" />
 			</ngt-group>
 
-			<div ngts-scroll-html style="width: 100%; color: #ec2d2d">
+			<div ngtsScrollHTML style="width: 100%; color: #ec2d2d">
 				<scroll-html-content />
 			</div>
 		</ngts-scroll-controls>

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

@@ -15,7 +15,7 @@ import { makeDecorators, makeStoryObject, Turnable } from '../setup-canvas';
 				<ngt-mesh-basic-material [color]="color()" [wireframe]="true" />
 
 				<ngts-html [options]="{ transform: transform() }">
-					<div [ngts-html-content]="{ distanceFactor: 30 }" style="color: white;">
+					<div [ngtsHTMLContent]="{ distanceFactor: 30 }" style="color: white;">
 						<h1>First</h1>
 					</div>
 				</ngts-html>
@@ -26,7 +26,7 @@ import { makeDecorators, makeStoryObject, Turnable } from '../setup-canvas';
 				<ngt-mesh-basic-material [color]="color()" [wireframe]="true" />
 
 				<ngts-html [options]="{ transform: transform() }">
-					<div [ngts-html-content]="{ distanceFactor: 30 }" style="color: white;">
+					<div [ngtsHTMLContent]="{ distanceFactor: 30 }" style="color: white;">
 						<h1>Second</h1>
 					</div>
 				</ngts-html>
@@ -37,7 +37,7 @@ import { makeDecorators, makeStoryObject, Turnable } from '../setup-canvas';
 				<ngt-mesh-basic-material [color]="color()" [wireframe]="true" />
 
 				<ngts-html [options]="{ transform: transform() }">
-					<div [ngts-html-content]="{ distanceFactor: 30 }" style="color: white;">
+					<div [ngtsHTMLContent]="{ distanceFactor: 30 }" style="color: white;">
 						<h1>Third</h1>
 					</div>
 				</ngts-html>
@@ -60,7 +60,7 @@ class HtmlScene {
 	template: `
 		<html-scene color="palegreen" [transform]="true">
 			<ngts-html [options]="htmlOptions()">
-				<div [ngts-html-content]="htmlContentOptions()">Transform mode</div>
+				<div [ngtsHTMLContent]="htmlContentOptions()">Transform mode</div>
 			</ngts-html>
 		</html-scene>
 	`,

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

@@ -55,7 +55,7 @@ class BBAnchorWrapper {
 	template: `
 		<bb-anchor-wrapper [options]="options()" [drawBoundingBox]="drawBoundingBox()">
 			<ngts-html>
-				<div [ngts-html-content]="{ center: true, containerStyle: { color: 'white', whiteSpace: 'nowrap' } }">
+				<div [ngtsHTMLContent]="{ center: true, containerStyle: { color: 'white', whiteSpace: 'nowrap' } }">
 					HTML content
 				</div>
 			</ngts-html>