refactor(composables): move addClass to class utils

libs/composables/class/src/modifier-group.composable.ts

@@ -1,6 +1,6 @@
 import { computed, inject, Signal, signal } from '@angular/core';
 
-import { addClass } from './add-class';
+import { addClass } from './utils/class.utils';
 import { bindClasses } from './classes.composable';
 import { BASE_CLASS } from './provide-base-class';
 

libs/composables/class/src/modifier.composable.ts

@@ -1,6 +1,6 @@
 import { inject, Signal, signal, WritableSignal } from '@angular/core';
 
-import { addClass } from './add-class';
+import { addClass } from './utils/class.utils';
 import { bindClass } from './class.composable';
 import { BASE_CLASS } from './provide-base-class';
 

libs/composables/class/src/public-api.ts

@@ -1,4 +1,3 @@
-export * from './add-class';
 export * from './class.composable';
 export * from './classes.composable';
 export * from './modifier.composable';

libs/composables/class/src/utils/class.utils.spec.ts

@@ -1,4 +1,6 @@
-import { splitClasses } from './class.utils';
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { addClass, splitClasses } from './class.utils';
 
 describe('class utils', () => {
 
@@ -29,4 +31,37 @@ describe('class utils', () => {
             });
         });
     });
+
+    describe('addClass', () => {
+
+        @Component({
+            template: ''
+        })
+        class TestComponent {
+            constructor() {
+                addClass('test');
+            }
+        }
+
+        let fixture: ComponentFixture<TestComponent>;
+
+        beforeEach(async () => {
+            await TestBed.configureTestingModule({
+                declarations: [ TestComponent ]
+            }).compileComponents();
+
+            fixture = TestBed.createComponent(TestComponent);
+
+            fixture.detectChanges();
+        });
+
+        it('should be a function', () => {
+            expect(typeof addClass).toEqual('function');
+        });
+
+        it('should add the class', () => {
+            expect(fixture.debugElement.classes['test']).toBeTruthy();
+        });
+    });
+
 });

libs/composables/class/src/utils/class.utils.ts

@@ -1,5 +1,8 @@
+import { ElementRef, inject, Renderer2 } from '@angular/core';
+
 const CLASS_SEPARATOR_REGEX = /\s+/;
 
+
 /**
  * Splits the given classes into an array of classes.
  *
@@ -12,3 +15,16 @@ export const splitClasses = (classes: string | string[] | null | undefined) => {
 
     return classes ? classes.split(CLASS_SEPARATOR_REGEX) : [];
 };
+
+/**
+ * Adds the class to the host element.
+ * This function uses {@link inject} and has to be called in the injection context of a component or directive.
+ *
+ * @param clazz - The class to add.
+ */
+export const addClass = (clazz: string) => {
+    const element = inject(ElementRef).nativeElement;
+    const renderer = inject(Renderer2);
+
+    renderer.addClass(element, clazz);
+};