Refactor: Replace @HostBinding with host property of Component Decora…

…tor (#58)

* refactor: hlm-accordion-content

* refactor: hlm-accordion

* refactor: alert to host: _generatedClasses

* refactor: computedClass

* refactor: aspect ratio and avatar

* refactor: badge button card

* refactor: bulk update simple cases

* refactor: bulk update simple cases

* refactor: bulk update simple cases

* refactor: @Hostbindings

* refactor: host binding class structures

* fix: id was not set correctly on brn switch

* refactor: making all private signals readonly

* refactor: rename and restructure generateclass and readonly signal

* fix: imports and private varibales introduces while refactoring

apps/app/src/app/pages/(components)/components/(toggle)/toggle--large.preview.ts

@@ -12,7 +12,7 @@ import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
 	providers: [provideIcons({ radixFontItalic })],
 	template: `
 		<button size="lg" brnToggle hlm>
-			<hlm-icon size="sm" name="radixFontItalic" />
+			<hlm-icon size="lg" name="radixFontItalic" />
 		</button>
 	`,
 })
@@ -33,7 +33,7 @@ import { radixFontItalic } from '@ng-icons/radix-icons';
   providers: [provideIcons({ radixFontItalic })],
   template: \`
     <button size="lg" brnToggle hlm>
-      <hlm-icon size="sm" name="radixFontItalic" />
+      <hlm-icon size="lg" name="radixFontItalic" />
     </button>
   \`,
 })

apps/app/src/app/shared/breadcrumbs/breadcrumbs.component.ts

@@ -1,11 +1,11 @@
 import { NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 import { provideIcons } from '@ng-icons/core';
 import { radixChevronRight } from '@ng-icons/radix-icons';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { BreadcrumbService } from '~/app/shared/breadcrumbs/breadcrumb.service';
+import { BreadcrumbService } from './breadcrumb.service';
 
 export interface Breadcrumb {
 	label: string;
@@ -48,10 +48,10 @@ export interface Breadcrumb {
 	`,
 	encapsulation: ViewEncapsulation.Emulated,
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: '',
+	},
 })
 export class BreadcrumbsComponent {
 	public breadcrumbs = toSignal(inject(BreadcrumbService).breadcrumbs$);
-
-	@HostBinding('class')
-	public class = '';
 }

apps/app/src/app/shared/layout/container.directive.ts

@@ -1,11 +1,11 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
 	selector: '[spartanContainer]',
 	standalone: true,
+	host: {
+		class:
+			'w-full mx-auto px-1 flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]',
+	},
 })
-export class ContainerDirective {
-	@HostBinding('class')
-	public class =
-		'w-full mx-auto px-1 flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]';
-}
+export class ContainerDirective {}

apps/app/src/app/shared/layout/side-nav/side-nav-heading.directive.ts

@@ -1,10 +1,10 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
 	selector: '[spartanSideNavHeading]',
 	standalone: true,
+	host: {
+		class: 'flex items-center justify-between mb-1 rounded-md px-2 py-1 font-semibold',
+	},
 })
-export class SideNavHeadingDirective {
-	@HostBinding('class')
-	public class = 'flex items-center justify-between mb-1 rounded-md px-2 py-1 font-semibold';
-}
+export class SideNavHeadingDirective {}

apps/app/src/app/shared/theme.service.ts

@@ -22,7 +22,7 @@ export class ThemeService {
 	private _systemDarkMode$ = new ReplaySubject<'light' | 'dark' | 'system'>(1);
 	public darkMode$ = this._darkMode$.asObservable();
 
-	private _theme = signal<Theme | undefined>(undefined);
+	private readonly _theme = signal<Theme | undefined>(undefined);
 	public theme = this._theme.asReadonly();
 
 	constructor() {

libs/ui/accordion/brain/src/lib/brn-accordion-trigger.component.ts

@@ -30,7 +30,7 @@ export class BrnAccordionTriggerComponent implements CustomElementClassSettable
 	public id = 'brn-accordion-trigger-' + this._item.id;
 	public ariaControls = 'brn-accordion-content-' + this._item.id;
 
-	private _btnClass = signal('');
+	private readonly _btnClass = signal('');
 	public btnClass = this._btnClass.asReadonly();
 
 	constructor() {

libs/ui/accordion/brain/src/lib/brn-accordion.component.ts

@@ -22,7 +22,7 @@ export class BrnAccordionComponent implements AfterContentInit {
 	@Input()
 	public orientation: 'horizontal' | 'vertical' = 'horizontal';
 
-	private _openItemIds = signal<number[]>([]);
+	private readonly _openItemIds = signal<number[]>([]);
 	public openItemIds = this._openItemIds.asReadonly();
 	public state = computed(() => (this._openItemIds().length > 0 ? 'open' : 'closed'));
 	private _keyManager?: FocusKeyManager<BrnAccordionTriggerComponent>;

libs/ui/accordion/helm/src/lib/hlm-accordion-content.directive.ts

@@ -4,7 +4,6 @@ import {
 	Directive,
 	effect,
 	ElementRef,
-	HostBinding,
 	inject,
 	Injector,
 	Input,
@@ -20,6 +19,7 @@ import { ClassValue } from 'clsx';
 	standalone: true,
 	host: {
 		'[style.height]': 'cssHeight()',
+		'[class]': '_computedClass()',
 	},
 })
 export class HlmAccordionContentDirective implements OnInit {
@@ -28,19 +28,21 @@ export class HlmAccordionContentDirective implements OnInit {
 	private readonly _injector = inject(Injector);
 	private readonly _platformId = inject(PLATFORM_ID);
 
-	@HostBinding('class')
-	private _class = this.generateClass();
-	private _inputs: ClassValue = '';
 	private _changes?: MutationObserver;
 
 	public readonly height = signal('-1');
 	public readonly cssHeight = computed(() => (this.height() === '-1' ? 'auto' : this.height()));
 	public readonly state = signal('closed');
 
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
-	set class(inputs: ClassValue) {
-		this._inputs = inputs;
-		this._class = this.generateClass();
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('overflow-hidden text-sm transition-all', this._userCls());
 	}
 
 	public ngOnInit() {
@@ -80,8 +82,4 @@ export class HlmAccordionContentDirective implements OnInit {
 			},
 		);
 	}
-
-	generateClass() {
-		return hlm('overflow-hidden text-sm transition-all', this._inputs);
-	}
 }

libs/ui/accordion/helm/src/lib/hlm-accordion-icon.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, Input, computed, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,19 +10,19 @@ import { ClassValue } from 'clsx';
 			<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 		</svg>
 	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmAccordionIconComponent {
-	@HostBinding('class')
-	private _class = this.generateClass();
-	private _inputs: ClassValue = '';
-
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
-	set class(inputs: ClassValue) {
-		this._inputs = inputs;
-		this._class = this.generateClass();
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
 	}
 
-	generateClass() {
-		return hlm('inline-block h-4 w-4 transition-transform duration-200', this._inputs);
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('inline-block h-4 w-4 transition-transform duration-200', this._userCls());
 	}
 }

libs/ui/accordion/helm/src/lib/hlm-accordion-item.directive.ts

@@ -1,23 +1,23 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, Input, computed, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAccordionItem],brn-accordion-item[hlm]',
 	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmAccordionItemDirective {
-	@HostBinding('class')
-	private _class = this.generateClass();
-	private _inputs: ClassValue = '';
-
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
-	set class(inputs: ClassValue) {
-		this._inputs = inputs;
-		this._class = this.generateClass();
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
 	}
 
-	generateClass() {
-		return hlm('flex flex-1 flex-col border-b border-border', this._inputs);
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('flex flex-1 flex-col border-b border-border', this._userCls());
 	}
 }

libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, Input, computed, signal } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -7,32 +7,33 @@ import { ClassValue } from 'clsx';
 	standalone: true,
 	host: {
 		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
+		'[class]': '_computedClass()',
 	},
 })
 export class HlmAccordionTriggerDirective {
 	private _host = injectCustomClassSettable({ optional: true });
-	@HostBinding('class')
-	private _class = !this._host ? this.generateClass() : '';
-	private _inputs: ClassValue = '';
 
 	constructor() {
-		this._host?.setClassToCustomElement(this.generateClass());
+		this._host?.setClassToCustomElement(this._generateClass());
 	}
 
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
 	set class(inputs: ClassValue) {
-		this._inputs = inputs;
+		this._userCls.set(inputs);
+		// cannot set in effect because it sets a signal
 		if (this._host) {
-			this._host?.setClassToCustomElement(this._class);
-		} else {
-			this._class = this.generateClass();
+			this._host.setClassToCustomElement(this._generateClass());
 		}
 	}
 
-	generateClass() {
+	protected _computedClass = computed(() => {
+		return !this._host ? this._generateClass() : '';
+	});
+	private _generateClass() {
 		return hlm(
 			'w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>hlm-accordion-icon]:rotate-180',
-			this._inputs,
+			this._userCls(),
 		);
 	}
 }

libs/ui/accordion/helm/src/lib/hlm-accordion.directive.ts

@@ -1,23 +1,23 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, Input, computed, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAccordion],brn-accordion[hlm]',
 	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmAccordionDirective {
-	@HostBinding('class')
-	private _class = this.generateClass();
-	private _inputs: ClassValue = '';
-
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
-	set class(inputs: ClassValue) {
-		this._inputs = inputs;
-		this._class = this.generateClass();
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
 	}
 
-	generateClass() {
-		return hlm('flex flex-col', this._inputs);
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('flex flex-col', this._userCls());
 	}
 }

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-cancel-button.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, inject, Input } from '@angular/core';
+import { computed, Directive, inject, Input, signal } from '@angular/core';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -7,23 +7,25 @@ import { ClassValue } from 'clsx';
 	selector: 'button[hlmAlertDialogCancel]',
 	standalone: true,
 	hostDirectives: [HlmButtonDirective],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmAlertDialogCancelButtonDirective {
 	private _hlmBtn = inject(HlmButtonDirective, { host: true });
-	@HostBinding('class')
-	_class = this.generateClasses();
-	private _inputs: ClassValue = '';
 
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
-	set class(inputs: ClassValue) {
-		this._inputs = inputs;
-		this._class = this.generateClasses();
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
 	}
 
-	private generateClasses() {
-		return hlm('mt-2 sm:mt-0', this._inputs);
-	}
 	constructor() {
 		this._hlmBtn.variant = 'outline';
 	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('mt-2 sm:mt-0', this._userCls());
+	}
 }

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-close.directive.ts

@@ -1,26 +1,26 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, Input, computed, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAlertDialogClose],[brnAlertDialogClose][hlm]',
 	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmAlertDialogCloseDirective {
-	@HostBinding('class')
-	_class = this.generateClasses();
-	private _inputs: ClassValue = '';
-
+	private readonly _userCls = signal<ClassValue>('');
 	@Input()
-	set class(inputs: ClassValue) {
-		this._inputs = inputs;
-		this._class = this.generateClasses();
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
 	}
 
-	private generateClasses() {
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
 		return hlm(
 			'absolute right-4 top-4 [&>hlm-icon]:h-4 [&>hlm-icon]:w-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._inputs,
+			this._userCls(),
 		);
 	}
 }