@spartan-ng/cli 0.0.1-alpha.336 → 0.0.1-alpha.338

package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.spec.ts.template

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrnAvatarFallbackDirective, BrnAvatarImageDirective } from '@spartan-ng/ui-avatar-brain';
 import { HlmAvatarComponent } from './hlm-avatar.component';
@@ -7,13 +7,15 @@ import { HlmAvatarComponent } from './hlm-avatar.component';
 	selector: 'hlm-mock',
 	imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, HlmAvatarComponent],
 	template: `
-		<hlm-avatar id="fallbackOnly">
+		<hlm-avatar [class]="class" id="fallbackOnly">
 			<span brnAvatarFallback>fallback</span>
 		</hlm-avatar>
 	`,
 	standalone: true,
 })
-class MockComponent {}
+class MockComponent {
+	@Input() class = '';
+}
 
 describe('HlmAvatarComponent', () => {
 	let component: HlmAvatarComponent;
@@ -34,9 +36,11 @@ describe('HlmAvatarComponent', () => {
 	});
 
 	it('should add any user defined classes', () => {
-		component.class = 'test-class';
-		fixture.detectChanges();
-		expect(fixture.nativeElement.className).toContain('test-class');
+		const mockFixture = TestBed.createComponent(MockComponent);
+		mockFixture.componentRef.setInput('class', 'test-class');
+		mockFixture.detectChanges();
+		const avatar = mockFixture.nativeElement.querySelector('hlm-avatar');
+		expect(avatar.className).toContain('test-class');
 	});
 
 	it('should change the size when the variant is changed', () => {

package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, Input, signal, ViewEncapsulation } from '@angular/core';
 import { BrnAvatarComponent } from '@spartan-ng/ui-avatar-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
@@ -36,20 +36,14 @@ type AvatarVariants = VariantProps<typeof avatarVariants>;
 	`,
 })
 export class HlmAvatarComponent extends BrnAvatarComponent {
-	private readonly _userCls = signal<ClassValue>('');
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(avatarVariants({ variant: this._variant() }), this.userClass()),
+	);
 
 	private readonly _variant = signal<AvatarVariants['variant']>('medium');
 	@Input()
 	set variant(variant: AvatarVariants['variant']) {
 		this._variant.set(variant);
 	}
-
-	protected readonly _computedClass = computed(() =>
-		hlm(avatarVariants({ variant: this._variant() }), this._userCls()),
-	);
 }

package/src/generators/ui/libs/ui-avatar-helm/files/lib/image/hlm-avatar-image.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { BrnAvatarImageDirective } from '@spartan-ng/ui-avatar-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -15,14 +15,6 @@ import { ClassValue } from 'clsx';
 export class HlmAvatarImageDirective {
 	canShow = inject(BrnAvatarImageDirective).canShow;
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('aspect-square object-cover h-full w-full', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('aspect-square object-cover h-full w-full', this.userClass()));
 }

package/src/generators/ui/libs/ui-badge-helm/files/lib/hlm-badge.directive.ts.template

@@ -1,4 +1,4 @@
-import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { booleanAttribute, computed, Directive, Input, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -53,11 +53,10 @@ type badgeVariants = VariantProps<typeof badgeVariants>;
 	},
 })
 export class HlmBadgeDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(badgeVariants({ variant: this._variant(), size: this._size(), static: this._static() }), this.userClass()),
+	);
 
 	private readonly _variant = signal<badgeVariants['variant']>('default');
 	@Input()
@@ -76,12 +75,4 @@ export class HlmBadgeDirective {
 	set size(size: badgeVariants['size']) {
 		this._size.set(size);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
-			badgeVariants({ variant: this._variant(), size: this._size(), static: this._static() }),
-			this._userCls(),
-		);
-	}
 }

package/src/generators/ui/libs/ui-button-helm/files/lib/hlm-button.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -28,7 +28,7 @@ export const buttonVariants = cva(
 		},
 	},
 );
-type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
 
 @Directive({
 	selector: '[hlmBtn]',
@@ -38,10 +38,15 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 	},
 })
 export class HlmButtonDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	private readonly _settableClass = signal<ClassValue>('');
+
+	protected _computedClass = computed(() =>
+		hlm(buttonVariants({ variant: this._variant(), size: this._size() }), this._settableClass(), this.userClass()),
+	);
+
+	setClass(value: ClassValue) {
+		this._settableClass.set(value);
 	}
 
 	private readonly _variant = signal<ButtonVariants['variant']>('default');
@@ -55,9 +60,4 @@ export class HlmButtonDirective {
 	set size(size: ButtonVariants['size']) {
 		this._size.set(size);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(buttonVariants({ variant: this._variant(), size: this._size() }), this._userCls());
-	}
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-content.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,6 @@ export type CardContentVariants = VariantProps<typeof cardContentVariants>;
 	},
 })
 export class HlmCardContentDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardContentVariants(), this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardContentVariants(), this.userClass()));
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-description.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,6 @@ export type CardDescriptionVariants = VariantProps<typeof cardDescriptionVariant
 	},
 })
 export class HlmCardDescriptionDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardDescriptionVariants(), this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardDescriptionVariants(), this.userClass()));
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-footer.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -24,20 +24,8 @@ export type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
 	},
 })
 export class HlmCardFooterDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardFooterVariants({ direction: this.direction() }), this.userClass()));
 
-	private readonly _direction = signal<CardFooterVariants['direction']>('row');
-	@Input()
-	set direction(direction: CardFooterVariants['direction']) {
-		this._direction.set(direction);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardFooterVariants({ direction: this._direction() }), this._userCls());
-	}
+	public readonly direction = input<CardFooterVariants['direction']>('row');
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-header.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -24,20 +24,8 @@ export type CardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
 	},
 })
 export class HlmCardHeaderDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardHeaderVariants({ direction: this.direction() }), this.userClass()));
 
-	private readonly _direction = signal<CardHeaderVariants['direction']>('column');
-	@Input()
-	set direction(direction: CardHeaderVariants['direction']) {
-		this._direction.set(direction);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardHeaderVariants({ direction: this._direction() }), this._userCls());
-	}
+	public readonly direction = input<CardHeaderVariants['direction']>('column');
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-title.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,6 @@ export type CardTitleVariants = VariantProps<typeof cardTitleVariants>;
 	},
 })
 export class HlmCardTitleDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardTitleVariants(), this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardTitleVariants(), this.userClass()));
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -20,14 +20,6 @@ export type CardVariants = VariantProps<typeof cardVariants>;
 	},
 })
 export class HlmCardDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardVariants(), this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardVariants(), this.userClass()));
 }

package/src/generators/ui/libs/ui-carousel-helm/files/index.ts.template

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { HlmCarouselContentComponent } from './lib/hlm-carousel-content.component';
+import { HlmCarouselItemComponent } from './lib/hlm-carousel-item.component';
+import { HlmCarouselNextComponent } from './lib/hlm-carousel-next.component';
+import { HlmCarouselPreviousComponent } from './lib/hlm-carousel-previous.component';
+import { HlmCarouselComponent } from './lib/hlm-carousel.component';
+
+export * from './lib/hlm-carousel-content.component';
+export * from './lib/hlm-carousel-item.component';
+export * from './lib/hlm-carousel-next.component';
+export * from './lib/hlm-carousel-previous.component';
+export * from './lib/hlm-carousel.component';
+
+export const HlmCarouselImports = [
+	HlmCarouselComponent,
+	HlmCarouselContentComponent,
+	HlmCarouselItemComponent,
+	HlmCarouselPreviousComponent,
+	HlmCarouselNextComponent,
+] as const;
+
+@NgModule({
+	imports: [...HlmCarouselImports],
+	exports: [...HlmCarouselImports],
+})
+export class HlmCarouselModule {}

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-content.component.ts.template

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	selector: 'hlm-carousel-content',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: `
+		<ng-content />
+	`,
+})
+export class HlmCarouselContentComponent {
+	private orientation = inject(HlmCarouselComponent).orientation;
+
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('flex', this.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this._userClass()),
+	);
+}

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-item.component.ts.template

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	selector: 'hlm-carousel-item',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class]': '_computedClass()',
+		role: 'group',
+		'aria-roledescription': 'slide',
+	},
+	template: `
+		<ng-content />
+	`,
+})
+export class HlmCarouselItemComponent {
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	private orientation = inject(HlmCarouselComponent).orientation;
+	protected _computedClass = computed(() =>
+		hlm('min-w-0 shrink-0 grow-0 basis-full', this.orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this._userClass()),
+	);
+}

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-next.component.ts.template

@@ -0,0 +1,62 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ViewEncapsulation,
+	computed,
+	effect,
+	inject,
+	input,
+	untracked,
+} from '@angular/core';
+import { lucideArrowRight } from '@ng-icons/lucide';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[disabled]': 'isDisabled()',
+		'(click)': 'carousel.scrollNext()',
+	},
+	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
+	providers: [provideIcons({ lucideArrowRight })],
+	imports: [HlmIconComponent],
+	template: `
+		<hlm-icon size="sm" name="lucideArrowRight" />
+		<span class="sr-only">Next slide</span>
+	`,
+})
+export class HlmCarouselNextComponent {
+	protected carousel = inject(HlmCarouselComponent);
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'absolute h-8 w-8 rounded-full',
+			this.carousel.orientation() === 'horizontal'
+				? '-right-12 top-1/2 -translate-y-1/2'
+				: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+			this._userClass(),
+		),
+	);
+	protected isDisabled = () => !this.carousel.canScrollNext();
+
+	constructor() {
+		const button = inject(HlmButtonDirective);
+
+		button.variant = 'outline';
+		button.size = 'icon';
+
+		effect(() => {
+			const computedClass = this._computedClass();
+
+			untracked(() => button.setClass(computedClass));
+		});
+	}
+}

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-previous.component.ts.template

@@ -0,0 +1,62 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ViewEncapsulation,
+	computed,
+	effect,
+	inject,
+	input,
+	untracked,
+} from '@angular/core';
+import { lucideArrowLeft } from '@ng-icons/lucide';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[disabled]': 'isDisabled()',
+		'(click)': 'carousel.scrollPrev()',
+	},
+	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
+	providers: [provideIcons({ lucideArrowLeft })],
+	imports: [HlmIconComponent],
+	template: `
+		<hlm-icon size="sm" name="lucideArrowLeft" />
+		<span class="sr-only">Previous slide</span>
+	`,
+})
+export class HlmCarouselPreviousComponent {
+	protected carousel = inject(HlmCarouselComponent);
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'absolute h-8 w-8 rounded-full',
+			this.carousel.orientation() === 'horizontal'
+				? '-left-12 top-1/2 -translate-y-1/2'
+				: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+			this._userClass(),
+		),
+	);
+	protected isDisabled = () => !this.carousel.canScrollPrev();
+
+	constructor() {
+		const button = inject(HlmButtonDirective);
+
+		button.variant = 'outline';
+		button.size = 'icon';
+
+		effect(() => {
+			const computedClass = this._computedClass();
+
+			untracked(() => button.setClass(computedClass));
+		});
+	}
+}

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel.component.ts.template

@@ -0,0 +1,93 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	HostListener,
+	InputSignal,
+	Signal,
+	ViewChild,
+	ViewEncapsulation,
+	computed,
+	input,
+	signal,
+} from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { EmblaCarouselDirective, EmblaEventType, EmblaPluginType, type EmblaOptionsType } from 'embla-carousel-angular';
+
+@Component({
+	selector: 'hlm-carousel',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class]': '_computedClass()',
+		role: 'region',
+		'aria-roledescription': 'carousel',
+	},
+	imports: [EmblaCarouselDirective],
+	template: `
+		<div
+			emblaCarousel
+			class="overflow-hidden"
+			[plugins]="plugins()"
+			[options]="emblaOptions()"
+			[subscribeToEvents]="['init', 'select', 'reInit']"
+			(emblaChange)="onEmblaEvent($event)"
+		>
+			<ng-content select="hlm-carousel-content" />
+		</div>
+		<ng-content />
+	`,
+})
+export class HlmCarouselComponent {
+	@ViewChild(EmblaCarouselDirective) protected emblaCarousel?: EmblaCarouselDirective;
+
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('relative', this._userClass()));
+
+	orientation = input<'horizontal' | 'vertical'>('horizontal');
+	options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined> = input();
+	plugins: InputSignal<EmblaPluginType[]> = input([] as EmblaPluginType[]);
+
+	protected emblaOptions: Signal<EmblaOptionsType> = computed(() => ({
+		...this.options(),
+		axis: this.orientation() === 'horizontal' ? 'x' : 'y',
+	}));
+
+	private _canScrollPrev = signal(false);
+	canScrollPrev = this._canScrollPrev.asReadonly();
+	private _canScrollNext = signal(false);
+	canScrollNext = this._canScrollNext.asReadonly();
+
+	protected onEmblaEvent(event: EmblaEventType) {
+		const emblaApi = this.emblaCarousel?.emblaApi;
+
+		if (!emblaApi) {
+			return;
+		}
+
+		if (event === 'select' || event === 'init' || event === 'reInit') {
+			this._canScrollPrev.set(emblaApi.canScrollPrev());
+			this._canScrollNext.set(emblaApi.canScrollNext());
+		}
+	}
+
+	@HostListener('keydown', ['$event'])
+	protected onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			this.emblaCarousel?.scrollPrev();
+		} else if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			this.emblaCarousel?.scrollNext();
+		}
+	}
+
+	scrollPrev() {
+		this.emblaCarousel?.scrollPrev();
+	}
+
+	scrollNext() {
+		this.emblaCarousel?.scrollNext();
+	}
+}

package/src/generators/ui/libs/ui-carousel-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-carousel-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'carousel', internalName: 'ui-carousel-helm', publicName: 'ui-carousel-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-carousel-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-carousel-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE,kBAAkB,IAC7B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}