@spartan-ng/cli 0.0.1-alpha.350 → 0.0.1-alpha.352

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

@@ -4,14 +4,14 @@ import {
 	Component,
 	ElementRef,
 	Input,
+	type OnDestroy,
 	PLATFORM_ID,
 	ViewEncapsulation,
 	computed,
 	inject,
 	signal,
-	type OnDestroy,
 } from '@angular/core';
-import { NgIconComponent, type IconName } from '@ng-icons/core';
+import { type IconName, NgIconComponent } from '@ng-icons/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const inputErrorVariants = cva('text-destructive text-sm font-medium', {

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

@@ -1,6 +1,6 @@
 import { Directive, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const inputVariants = cva(

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

@@ -1,7 +1,7 @@
 import { Directive, Input, computed, inject, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnLabelDirective } from '@spartan-ng/ui-label-brain';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const labelVariants = cva(

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

@@ -10,7 +10,7 @@ import type { ClassValue } from 'clsx';
 	providers: [provideIcons({ lucideChevronRight })],
 	imports: [HlmIconComponent],
 	template: `
-		<hlm-icon size="none" class="h-full w-full" name="lucideChevronRight" />
+		<hlm-icon size="none" class="w-full h-full" name="lucideChevronRight" />
 	`,
 	host: {
 		'[class]': '_computedClass()',

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

@@ -1,7 +1,7 @@
 import { Directive, Input, booleanAttribute, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuItemDirective } from '@spartan-ng/ui-menu-brain';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const hlmMenuItemVariants = cva(

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

@@ -5,7 +5,7 @@ import type { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-menu-separator',
 	standalone: true,
-	template: ``,
+	template: '',
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -1,7 +1,7 @@
 import { Component, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const menuVariants = cva(

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 
 export const paginationContentVariants = cva('flex flex-row items-center gap-1', {
 	variants: {},

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 
 export const paginationItemVariants = cva('', {
 	variants: {},

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

@@ -1,8 +1,8 @@
 import { Directive, booleanAttribute, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { buttonVariants, type ButtonVariants } from '@spartan-ng/ui-button-helm';
+import { type ButtonVariants, buttonVariants } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 
 export const paginationLinkVariants = cva('', {
 	variants: {},

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const paginationVariants = cva('mx-auto flex w-full justify-center', {

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

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal, type DoCheck } from '@angular/core';
+import { Directive, type DoCheck, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 

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

@@ -1,4 +1,4 @@
-import { Directive, computed, inject, input, signal, type OnInit } from '@angular/core';
+import { Directive, type OnInit, computed, inject, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnSelectLabelDirective } from '@spartan-ng/ui-select-brain';
 import type { ClassValue } from 'clsx';

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-down.component.ts.template

@@ -11,7 +11,7 @@ import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 		class: 'flex cursor-default items-center justify-center py-1',
 	},
 	template: `
-		<hlm-icon class="ml-2 h-4 w-4" name="lucideChevronDown" />
+		<hlm-icon class="w-4 h-4 ml-2" name="lucideChevronDown" />
 	`,
 })
 export class HlmSelectScrollDownComponent {}

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-up.component.ts.template

@@ -11,7 +11,7 @@ import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 		class: 'flex cursor-default items-center justify-center py-1',
 	},
 	template: `
-		<hlm-icon class="ml-2 h-4 w-4" name="lucideChevronUp" />
+		<hlm-icon class="w-4 h-4 ml-2" name="lucideChevronUp" />
 	`,
 })
 export class HlmSelectScrollUpComponent {}

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

@@ -1,4 +1,4 @@
-import { Component, ContentChild, ViewChild, computed, input, type ElementRef } from '@angular/core';
+import { Component, ContentChild, type ElementRef, ViewChild, computed, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
@@ -17,7 +17,7 @@ import type { ClassValue } from 'clsx';
 			@if (icon) {
 				<ng-content select="hlm-icon" />
 			} @else {
-				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronDown" />
+				<hlm-icon class="flex-none w-4 h-4 ml-2" name="lucideChevronDown" />
 			}
 		</button>
 	`,

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

@@ -39,7 +39,7 @@ export const sheetVariants = cva(
 		<ng-content />
 		<button brnSheetClose hlm>
 			<span class="sr-only">Close</span>
-			<hlm-icon class="flex h-4 w-4" size="100%" name="lucideX" />
+			<hlm-icon class="flex w-4 h-4" size="100%" name="lucideX" />
 		</button>
 	`,
 })

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

@@ -5,7 +5,7 @@ import type { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-skeleton',
 	standalone: true,
-	template: ``,
+	template: '',
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -1,6 +1,6 @@
 import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const spinnerVariants = cva('inline-block', {

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

@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 
 import { HlmTabsContentDirective } from './lib/hlm-tabs-content.directive';
 import { HlmTabsListComponent } from './lib/hlm-tabs-list.component';
+import { HlmTabsPaginatedListComponent } from './lib/hlm-tabs-paginated-list.component';
 import { HlmTabsTriggerDirective } from './lib/hlm-tabs-trigger.directive';
 import { HlmTabsComponent } from './lib/hlm-tabs.component';
 
 export * from './lib/hlm-tabs-content.directive';
 export * from './lib/hlm-tabs-list.component';
+export * from './lib/hlm-tabs-paginated-list.component';
 export * from './lib/hlm-tabs-trigger.directive';
 export * from './lib/hlm-tabs.component';
 
@@ -15,6 +17,7 @@ export const HlmTabsImports = [
 	HlmTabsListComponent,
 	HlmTabsTriggerDirective,
 	HlmTabsContentDirective,
+	HlmTabsPaginatedListComponent,
 ] as const;
 
 @NgModule({

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

@@ -1,7 +1,7 @@
 import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnTabsListDirective } from '@spartan-ng/ui-tabs-brain';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const listVariants = cva(

package/src/generators/ui/libs/ui-tabs-helm/files/lib/hlm-tabs-paginated-list.component.ts.template

@@ -0,0 +1,91 @@
+import { CdkObserveContent } from '@angular/cdk/observers';
+import { Component, ContentChildren, ElementRef, QueryList, ViewChild, computed, input } from '@angular/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import { buttonVariants } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { BrnTabsPaginatedListDirective, BrnTabsTriggerDirective } from '@spartan-ng/ui-tabs-brain';
+import { ClassValue } from 'clsx';
+import { listVariants } from './hlm-tabs-list.component';
+
+@Component({
+	selector: 'hlm-paginated-tabs-list',
+	standalone: true,
+	imports: [CdkObserveContent, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
+	template: `
+		<button
+			#previousPaginator
+			data-pagination="previous"
+			type="button"
+			aria-hidden="true"
+			tabindex="-1"
+			[class.flex]="_showPaginationControls()"
+			[class.hidden]="!_showPaginationControls()"
+			[class]="_paginationButtonClass()"
+			[disabled]="_disableScrollBefore || null"
+			(click)="_handlePaginatorClick('before')"
+			(mousedown)="_handlePaginatorPress('before', $event)"
+			(touchend)="_stopInterval()"
+		>
+			<hlm-icon size="base" name="lucideChevronLeft" />
+		</button>
+
+		<div #tabListContainer class="z-[1] flex grow overflow-hidden " (keydown)="_handleKeydown($event)">
+			<div class="relative grow transition-transform" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
+				<div #tabListInner [class]="_tabListClass()">
+					<ng-content></ng-content>
+				</div>
+			</div>
+		</div>
+
+		<button
+			#nextPaginator
+			data-pagination="next"
+			type="button"
+			aria-hidden="true"
+			tabindex="-1"
+			[class.flex]="_showPaginationControls()"
+			[class.hidden]="!_showPaginationControls()"
+			[class]="_paginationButtonClass()"
+			[disabled]="_disableScrollAfter || null"
+			(click)="_handlePaginatorClick('after')"
+			(mousedown)="_handlePaginatorPress('after', $event)"
+			(touchend)="_stopInterval()"
+		>
+			<hlm-icon size="base" name="lucideChevronRight" />
+		</button>
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTabsPaginatedListComponent extends BrnTabsPaginatedListDirective {
+	@ContentChildren(BrnTabsTriggerDirective, { descendants: false })
+	_items!: QueryList<BrnTabsTriggerDirective>;
+	@ViewChild('tabListContainer', { static: true })
+	_tabListContainer!: ElementRef;
+	@ViewChild('tabList', { static: true }) _tabList!: ElementRef;
+	@ViewChild('tabListInner', { static: true }) _tabListInner!: ElementRef;
+	@ViewChild('nextPaginator') _nextPaginator!: ElementRef<HTMLElement>;
+	@ViewChild('previousPaginator') _previousPaginator!: ElementRef<HTMLElement>;
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('flex overflow-hidden relative flex-shrink-0', this.userClass()));
+
+	public readonly tabLisClass = input<ClassValue>('', { alias: 'class' });
+	protected _tabListClass = computed(() => hlm(listVariants(), this.tabLisClass()));
+
+	public readonly paginationButtonClass = input<ClassValue>('', { alias: 'class' });
+	protected _paginationButtonClass = computed(() =>
+		hlm(
+			'relative z-[2] select-none data-[pagination=previous]:pr-1 data-[pagination=next]:pl-1 disabled:cursor-default',
+			buttonVariants({ variant: 'ghost', size: 'icon' }),
+			this.paginationButtonClass(),
+		),
+	);
+
+	protected _itemSelected(event: KeyboardEvent) {
+		event.preventDefault();
+	}
+}

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const toggleVariants = cva(

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

@@ -1,4 +1,4 @@
-import { Directive, Input, inject, type TemplateRef } from '@angular/core';
+import { Directive, Input, type TemplateRef, inject } from '@angular/core';
 import { BrnTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-brain';
 
 @Directive({