chore(admin-ui): Add Spartan components

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/index.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { HlmBreadcrumbEllipsisComponent } from './lib/breadcrumb-ellipsis.component';
+import { HlmBreadcrumbItemDirective } from './lib/breadcrumb-item.directive';
+import { HlmBreadcrumbLinkDirective } from './lib/breadcrumb-link.directive';
+import { HlmBreadcrumbListDirective } from './lib/breadcrumb-list.directive';
+import { HlmBreadcrumbPageDirective } from './lib/breadcrumb-page.directive';
+import { HlmBreadcrumbSeparatorComponent } from './lib/breadcrumb-separator.component';
+import { HlmBreadcrumbDirective } from './lib/breadcrumb.directive';
+
+export * from './lib/breadcrumb-ellipsis.component';
+export * from './lib/breadcrumb-item.directive';
+export * from './lib/breadcrumb-link.directive';
+export * from './lib/breadcrumb-list.directive';
+export * from './lib/breadcrumb-page.directive';
+export * from './lib/breadcrumb-separator.component';
+export * from './lib/breadcrumb.directive';
+
+export const HlmBreadCrumbImports = [
+	HlmBreadcrumbDirective,
+	HlmBreadcrumbEllipsisComponent,
+	HlmBreadcrumbSeparatorComponent,
+	HlmBreadcrumbItemDirective,
+	HlmBreadcrumbLinkDirective,
+	HlmBreadcrumbPageDirective,
+	HlmBreadcrumbListDirective,
+] as const;
+
+@NgModule({
+	imports: [...HlmBreadCrumbImports],
+	exports: [...HlmBreadCrumbImports],
+})
+export class HlmBreadCrumbModule {}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb-ellipsis.component.ts

@@ -0,0 +1,24 @@
+import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideEllipsis } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-breadcrumb-ellipsis',
+	standalone: true,
+	imports: [NgIcon, HlmIconDirective],
+	providers: [provideIcons({ lucideEllipsis })],
+	template: `
+		<span role="presentation" aria-hidden="true" [class]="_computedClass()">
+			<ng-icon hlm size="sm" name="lucideEllipsis" />
+			<span class="sr-only">More</span>
+		</span>
+	`,
+})
+export class HlmBreadcrumbEllipsisComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('flex h-9 w-9 items-center justify-center', this.userClass()));
+}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb-item.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmBreadcrumbItem]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmBreadcrumbItemDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('inline-flex items-center gap-1.5', this.userClass()));
+}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb-link.directive.ts

@@ -0,0 +1,36 @@
+import { Directive, computed, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmBreadcrumbLink]',
+	standalone: true,
+	hostDirectives: [
+		{
+			directive: RouterLink,
+			inputs: [
+				'target',
+				'queryParams',
+				'fragment',
+				'queryParamsHandling',
+				'state',
+				'info',
+				'relativeTo',
+				'preserveFragment',
+				'skipLocationChange',
+				'replaceUrl',
+				'routerLink: link',
+			],
+		},
+	],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmBreadcrumbLinkDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly link = input<RouterLink['routerLink']>();
+
+	protected readonly _computedClass = computed(() => hlm('transition-colors hover:text-foreground', this.userClass()));
+}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb-list.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmBreadcrumbList]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmBreadcrumbListDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.userClass()),
+	);
+}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb-page.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmBreadcrumbPage]',
+	standalone: true,
+	host: {
+		role: 'link',
+		'[class]': '_computedClass()',
+		'[attr.aria-disabled]': 'disabled',
+		'[attr.aria-current]': 'page',
+	},
+})
+export class HlmBreadcrumbPageDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('font-normal text-foreground', this.userClass()));
+}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb-separator.component.ts

@@ -0,0 +1,31 @@
+import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
+import type { ClassValue } from 'clsx';
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: '[hlmBreadcrumbSeparator]',
+    standalone: true,
+    imports: [NgIcon, HlmIconDirective],
+    providers: [provideIcons({ lucideChevronRight })],
+    host: {
+        role: 'presentation',
+        '[class]': '_computedClass()',
+        '[attr.aria-hidden]': 'true',
+    },
+    template: `
+        <ng-content>
+            <ng-icon size="sm" hlm name="lucideChevronRight" />
+        </ng-content>
+    `,
+})
+export class HlmBreadcrumbSeparatorComponent {
+    public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+    protected readonly _computedClass = computed(() =>
+        hlm('[&>hlm-icon]:w-3.5 flex items-center [&>hlm-icon]:h-3.5 ', this.userClass()),
+    );
+}

packages/admin-ui/src/lib/ui/ui-breadcrumb-helm/src/lib/breadcrumb.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmBreadcrumb]',
+	standalone: true,
+	host: {
+		role: 'navigation',
+		'[class]': '_computedClass()',
+		'[attr.aria-label]': 'ariaLabel()',
+	},
+})
+export class HlmBreadcrumbDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly ariaLabel = input<string>('breadcrumb', { alias: 'aria-label' });
+
+	protected readonly _computedClass = computed(() => hlm(this.userClass()));
+}

packages/admin-ui/src/lib/ui/ui-menu-helm/src/index.ts

@@ -0,0 +1,71 @@
+import { NgModule } from '@angular/core';
+
+import { HlmMenuBarItemDirective } from './lib/hlm-menu-bar-item.directive';
+import { HlmMenuBarComponent } from './lib/hlm-menu-bar.component';
+import { HlmMenuGroupComponent } from './lib/hlm-menu-group.component';
+import { HlmMenuItemCheckComponent } from './lib/hlm-menu-item-check.component';
+import { HlmMenuItemCheckboxDirective } from './lib/hlm-menu-item-checkbox.directive';
+import { HlmMenuItemIconDirective } from './lib/hlm-menu-item-icon.directive';
+import { HlmMenuItemRadioComponent } from './lib/hlm-menu-item-radio.component';
+import { HlmMenuItemRadioDirective } from './lib/hlm-menu-item-radio.directive';
+import { HlmMenuItemSubIndicatorComponent } from './lib/hlm-menu-item-sub-indicator.component';
+import { HlmMenuItemDirective } from './lib/hlm-menu-item.directive';
+import { HlmMenuLabelComponent } from './lib/hlm-menu-label.component';
+import { HlmMenuSeparatorComponent } from './lib/hlm-menu-separator.component';
+import { HlmMenuShortcutComponent } from './lib/hlm-menu-shortcut.component';
+import { HlmMenuComponent } from './lib/hlm-menu.component';
+import { HlmSubMenuComponent } from './lib/hlm-sub-menu.component';
+
+export * from './lib/hlm-menu-bar-item.directive';
+export * from './lib/hlm-menu-bar.component';
+export * from './lib/hlm-menu-group.component';
+export * from './lib/hlm-menu-item-check.component';
+export * from './lib/hlm-menu-item-checkbox.directive';
+export * from './lib/hlm-menu-item-icon.directive';
+export * from './lib/hlm-menu-item-radio.component';
+export * from './lib/hlm-menu-item-radio.directive';
+export * from './lib/hlm-menu-item-sub-indicator.component';
+export * from './lib/hlm-menu-item.directive';
+export * from './lib/hlm-menu-label.component';
+export * from './lib/hlm-menu-separator.component';
+export * from './lib/hlm-menu-shortcut.component';
+export * from './lib/hlm-menu.component';
+export * from './lib/hlm-sub-menu.component';
+
+export const HlmMenuItemImports = [
+	HlmMenuItemDirective,
+	HlmMenuItemIconDirective,
+	HlmMenuGroupComponent,
+	HlmMenuItemSubIndicatorComponent,
+	HlmMenuItemRadioComponent,
+	HlmMenuItemCheckComponent,
+	HlmMenuShortcutComponent,
+	HlmMenuItemCheckboxDirective,
+	HlmMenuItemRadioDirective,
+];
+export const HlmMenuStructureImports = [HlmMenuLabelComponent, HlmMenuSeparatorComponent] as const;
+export const HlmMenuImports = [
+	...HlmMenuItemImports,
+	...HlmMenuStructureImports,
+	HlmMenuComponent,
+	HlmSubMenuComponent,
+] as const;
+export const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBarComponent, HlmMenuBarItemDirective] as const;
+
+@NgModule({
+	imports: [...HlmMenuItemImports],
+	exports: [...HlmMenuItemImports],
+})
+export class HlmMenuItemModule {}
+
+@NgModule({
+	imports: [...HlmMenuImports],
+	exports: [...HlmMenuImports],
+})
+export class HlmMenuModule {}
+
+@NgModule({
+	imports: [...HlmMenuBarImports],
+	exports: [...HlmMenuBarImports],
+})
+export class HlmMenuBarModule {}

packages/admin-ui/src/lib/ui/ui-menu-helm/src/lib/hlm-menu-bar-item.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnMenuItemDirective } from '@spartan-ng/brain/menu';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmMenuBarItem]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [BrnMenuItemDirective],
+})
+export class HlmMenuBarItemDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground',
+			this.userClass(),
+		),
+	);
+}

packages/admin-ui/src/lib/ui/ui-menu-helm/src/lib/hlm-menu-bar.component.ts

@@ -0,0 +1,20 @@
+import { Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnMenuBarDirective } from '@spartan-ng/brain/menu';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-menu-bar',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [BrnMenuBarDirective],
+	template: '<ng-content/>',
+})
+export class HlmMenuBarComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this.userClass()),
+	);
+}

packages/admin-ui/src/lib/ui/ui-menu-helm/src/lib/hlm-menu-group.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BrnMenuGroupDirective } from '@spartan-ng/brain/menu';
+
+@Component({
+	selector: 'hlm-menu-group',
+	standalone: true,
+	host: {
+		class: 'block',
+	},
+	hostDirectives: [BrnMenuGroupDirective],
+	template: `
+		<ng-content />
+	`,
+})
+export class HlmMenuGroupComponent {}

packages/admin-ui/src/lib/ui/ui-menu-helm/src/lib/hlm-menu-item-check.component.ts

@@ -0,0 +1,29 @@
+import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-menu-item-check',
+	standalone: true,
+	providers: [provideIcons({ lucideCheck })],
+	imports: [NgIcon, HlmIconDirective],
+	template: `
+		<!-- Using 1rem for size to mimick h-4 w-4 -->
+		<ng-icon hlm size="1rem" name="lucideCheck" />
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmMenuItemCheckComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group-[.checked]:opacity-100 opacity-0 absolute left-2 flex h-3.5 w-3.5 items-center justify-center',
+			this.userClass(),
+		),
+	);
+}

packages/admin-ui/src/lib/ui/ui-menu-helm/src/lib/hlm-menu-item-checkbox.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnMenuItemCheckboxDirective } from '@spartan-ng/brain/menu';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmMenuItemCheckbox]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [
+		{
+			directive: BrnMenuItemCheckboxDirective,
+			inputs: ['disabled: disabled', 'checked: checked'],
+			outputs: ['triggered: triggered'],
+		},
+	],
+})
+export class HlmMenuItemCheckboxDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
+			this.userClass(),
+		),
+	);
+}