@aurorajs.dev/catalyst-cli 1.0.0

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-trigger.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { lucidePanelLeft } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
+import { HlmIconImports } from '@spartan-ng/helm/icon';
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[hlmSidebarTrigger]',
+  imports: [HlmIconImports],
+  providers: [
+    provideIcons({ lucidePanelLeft }),
+    provideBrnButtonConfig({ variant: 'ghost', size: 'icon' }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    {
+      directive: HlmButton,
+    },
+  ],
+  host: {
+    'data-slot': 'sidebar-trigger',
+    'data-sidebar': 'trigger',
+    '(click)': '_onClick()',
+  },
+  template: `
+    <ng-icon
+      name="lucidePanelLeft"
+      hlm
+      size="sm"
+    ></ng-icon>
+  `,
+})
+export class HlmSidebarTrigger {
+  private readonly _hlmBtn = inject(HlmButton);
+  private readonly _sidebarService = inject(HlmSidebarService);
+
+  constructor() {
+    this._hlmBtn.setClass('size-7');
+  }
+
+  protected _onClick(): void {
+    this._sidebarService.toggleSidebar();
+  }
+}

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-wrapper.ts

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Directive({
+  selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
+  host: {
+    'data-slot': 'sidebar-wrapper',
+    '[style.--sidebar-width]': 'sidebarWidth()',
+    '[style.--sidebar-width-icon]': 'sidebarWidthIcon()',
+  },
+})
+export class HlmSidebarWrapper {
+  private readonly _config = injectHlmSidebarConfig();
+
+  public readonly sidebarWidth = input<string>(this._config.sidebarWidth);
+  public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
+
+  constructor() {
+    classes(
+      () => 'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+    );
+  }
+}

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar.service.ts

@@ -0,0 +1,119 @@
+import {
+  afterNextRender,
+  computed,
+  DestroyRef,
+  DOCUMENT,
+  inject,
+  Injectable,
+  type Signal,
+  signal,
+} from '@angular/core';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+
+@Injectable({ providedIn: 'root' })
+export class HlmSidebarService {
+  private readonly _config = injectHlmSidebarConfig();
+  private readonly _document = inject(DOCUMENT);
+  private readonly _window = this._document.defaultView;
+  private readonly _open = signal<boolean>(true);
+  private readonly _openMobile = signal<boolean>(false);
+  private readonly _isMobile = signal<boolean>(false);
+  private readonly _variant = signal<SidebarVariant>('sidebar');
+  private _mediaQuery: MediaQueryList | null = null;
+
+  public readonly open: Signal<boolean> = this._open.asReadonly();
+  public readonly openMobile: Signal<boolean> = this._openMobile.asReadonly();
+  public readonly isMobile: Signal<boolean> = this._isMobile.asReadonly();
+  public readonly variant: Signal<SidebarVariant> = this._variant.asReadonly();
+
+  public readonly state = computed<'expanded' | 'collapsed'>(() =>
+    this._open() ? 'expanded' : 'collapsed',
+  );
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+    afterNextRender(() => {
+      if (!this._window) return;
+      // Initialize from cookie
+      const cookie = this._document.cookie
+        .split('; ')
+        .find((row) => row.startsWith(`${this._config.sidebarCookieName}=`));
+
+      if (cookie) {
+        const value = cookie.split('=')[1];
+        this._open.set(value === 'true');
+      }
+
+      // Initialize MediaQueryList
+      this._mediaQuery = this._window.matchMedia(`(max-width: ${this._config.mobileBreakpoint})`);
+      this._isMobile.set(this._mediaQuery.matches);
+
+      // Add media query listener
+      const mediaQueryHandler = (e: MediaQueryListEvent) => {
+        this._isMobile.set(e.matches);
+        // If switching from mobile to desktop, close mobile sidebar
+        if (!e.matches) this._openMobile.set(false);
+      };
+      this._mediaQuery.addEventListener('change', mediaQueryHandler);
+
+      // Add keyboard shortcut listener
+      const keydownHandler = (event: KeyboardEvent) => {
+        if (
+          event.key === this._config.sidebarKeyboardShortcut &&
+          (event.ctrlKey || event.metaKey)
+        ) {
+          event.preventDefault();
+          this.toggleSidebar();
+        }
+      };
+      this._window.addEventListener('keydown', keydownHandler);
+
+      // Add resize listener with debounce
+      let resizeTimeout: number;
+      const resizeHandler = () => {
+        if (!this._window) return;
+
+        if (resizeTimeout) this._window.clearTimeout(resizeTimeout);
+        resizeTimeout = this._window.setTimeout(() => {
+          if (this._mediaQuery) this._isMobile.set(this._mediaQuery.matches);
+        }, 100);
+      };
+      this._window.addEventListener('resize', resizeHandler);
+
+      // Cleanup listeners on destroy
+      destroyRef.onDestroy(() => {
+        if (!this._window) return;
+
+        if (this._mediaQuery) this._mediaQuery.removeEventListener('change', mediaQueryHandler);
+        this._window.removeEventListener('keydown', keydownHandler);
+        this._window.removeEventListener('resize', resizeHandler);
+        if (resizeTimeout) this._window.clearTimeout(resizeTimeout);
+      });
+    });
+  }
+
+  public setOpen(open: boolean): void {
+    this._open.set(open);
+    this._document.cookie = `${this._config.sidebarCookieName}=${open}; path=/; max-age=${this._config.sidebarCookieMaxAge}`;
+  }
+
+  public setOpenMobile(open: boolean): void {
+    if (this._isMobile()) {
+      this._openMobile.set(open);
+    }
+  }
+
+  public setVariant(variant: SidebarVariant): void {
+    this._variant.set(variant);
+  }
+
+  public toggleSidebar(): void {
+    if (this._isMobile()) {
+      this._openMobile.update((value) => !value);
+    } else {
+      this.setOpen(!this._open());
+    }
+  }
+}

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar.token.ts

@@ -0,0 +1,33 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmSidebarConfig {
+  sidebarWidth: string;
+  sidebarWidthMobile: string;
+  sidebarWidthIcon: string;
+  sidebarCookieName: string;
+  sidebarCookieMaxAge: number;
+  sidebarKeyboardShortcut: string;
+  mobileBreakpoint: string;
+  closeMobileSidebarOnMenuButtonClick: boolean;
+}
+
+const defaultConfig: HlmSidebarConfig = {
+  sidebarWidth: '16rem',
+  sidebarWidthMobile: '18rem',
+  sidebarWidthIcon: '3rem',
+  sidebarCookieName: 'sidebar_state',
+  sidebarCookieMaxAge: 60 * 60 * 24 * 7, // 7 days in seconds
+  sidebarKeyboardShortcut: 'b',
+  mobileBreakpoint: '768px',
+  closeMobileSidebarOnMenuButtonClick: false,
+};
+
+const HlmSidebarConfigToken = new InjectionToken<HlmSidebarConfig>('HlmSidebarConfig');
+
+export function provideHlmSidebarConfig(config: Partial<HlmSidebarConfig>): ValueProvider {
+  return { provide: HlmSidebarConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmSidebarConfig(): HlmSidebarConfig {
+  return inject(HlmSidebarConfigToken, { optional: true }) ?? defaultConfig;
+}

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar.ts

@@ -0,0 +1,146 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
+import { HlmSheetImports } from '@spartan-ng/helm/sheet';
+import { classes, hlm } from '@spartan-ng/helm/utils';
+import type { ClassValue } from 'clsx';
+import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Component({
+  selector: 'hlm-sidebar',
+  imports: [NgTemplateOutlet, HlmSheetImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.data-slot]': '_dataSlot()',
+    '[attr.data-state]': '_dataState()',
+    '[attr.data-collapsible]': '_dataCollapsible()',
+    '[attr.data-variant]': '_dataVariant()',
+    '[attr.data-side]': '_dataSide()',
+  },
+  template: `
+    <ng-template #contentContainer>
+      <ng-content />
+    </ng-template>
+
+    @if (collapsible() === 'none') {
+      <ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+    } @else if (_sidebarService.isMobile()) {
+      <hlm-sheet
+        [side]="side()"
+        [state]="_sidebarService.openMobile() ? 'open' : 'closed'"
+        (stateChanged)="_sidebarService.setOpenMobile($event === 'open')"
+      >
+        <hlm-sheet-content
+          *hlmSheetPortal="let ctx"
+          class="bg-sidebar text-sidebar-foreground h-svh w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+          [style.--sidebar-width]="sidebarWidthMobile()"
+          data-slot="sidebar"
+          data-sidebar="sidebar"
+          data-mobile="true"
+        >
+          <div class="flex h-full w-full flex-col">
+            <ng-container *ngTemplateOutlet="contentContainer" />
+          </div>
+        </hlm-sheet-content>
+      </hlm-sheet>
+    } @else {
+      <!-- Sidebar gap on desktop -->
+      <div
+        [class]="_sidebarGapComputedClass()"
+        data-slot="sidebar-gap"
+      ></div>
+      <div
+        [class]="_sidebarContainerComputedClass()"
+        data-slot="sidebar-container"
+      >
+        <div
+          class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+        >
+          <ng-container *ngTemplateOutlet="contentContainer" />
+        </div>
+      </div>
+    }
+  `,
+})
+export class HlmSidebar {
+  protected readonly _sidebarService = inject(HlmSidebarService);
+  private readonly _config = injectHlmSidebarConfig();
+  public readonly sidebarWidthMobile = input<string>(this._config.sidebarWidthMobile);
+
+  public readonly side = input<'left' | 'right'>('left');
+  public readonly variant = input<SidebarVariant>(this._sidebarService.variant());
+  public readonly collapsible = input<'offcanvas' | 'icon' | 'none'>('offcanvas');
+
+  protected readonly _sidebarGapComputedClass = computed(() =>
+    hlm(
+      'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
+      'group-data-[collapsible=offcanvas]:w-0',
+      'group-data-[side=right]:rotate-180',
+      this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+        : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]',
+    ),
+  );
+
+  public readonly sidebarContainerClass = input<ClassValue>('');
+  protected readonly _sidebarContainerComputedClass = computed(() =>
+    hlm(
+      'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',
+      this.side() === 'left'
+        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+      this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+        : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+      this.sidebarContainerClass(),
+    ),
+  );
+
+  protected readonly _dataSlot = computed(() => {
+    return !this._sidebarService.isMobile() ? 'sidebar' : undefined;
+  });
+
+  private readonly _collapsibleAndNonMobile = computed(() => {
+    return this.collapsible() !== 'none' && !this._sidebarService.isMobile();
+  });
+
+  protected readonly _dataState = computed(() => {
+    return this._collapsibleAndNonMobile() ? this._sidebarService.state() : undefined;
+  });
+
+  protected readonly _dataCollapsible = computed(() => {
+    if (this._collapsibleAndNonMobile()) {
+      return this._sidebarService.state() === 'collapsed' ? this.collapsible() : '';
+    }
+    return undefined;
+  });
+
+  protected readonly _dataVariant = computed(() => {
+    return this._collapsibleAndNonMobile() ? this.variant() : undefined;
+  });
+
+  protected readonly _dataSide = computed(() => {
+    return this._collapsibleAndNonMobile() ? this.side() : undefined;
+  });
+
+  constructor() {
+    // Sync variant input with service
+    effect(() => {
+      this._sidebarService.setVariant(this.variant());
+    });
+
+    classes(() => {
+      if (this.collapsible() === 'none') {
+        return hlm(
+          'bg-sidebar text-sidebar-foreground flex h-svh w-[var(--sidebar-width)] flex-col',
+        );
+      } else if (this._sidebarService.isMobile()) {
+        return '';
+      } else {
+        return hlm('text-sidebar-foreground group peer hidden md:block');
+      }
+    });
+  }
+}

package/dist/templates/frontend/application/libs/ui/skeleton/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSkeleton } from './lib/hlm-skeleton';
+
+export * from './lib/hlm-skeleton';
+
+export const HlmSkeletonImports = [HlmSkeleton] as const;

package/dist/templates/frontend/application/libs/ui/skeleton/src/lib/hlm-skeleton.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: '[hlmSkeleton],hlm-skeleton',
+  host: {
+    'data-slot': 'skeleton',
+  },
+})
+export class HlmSkeleton {
+  constructor() {
+    classes(() => 'bg-muted rounded-md block motion-safe:animate-pulse');
+  }
+}

package/dist/templates/frontend/application/libs/ui/slider/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/hlm-slider';
+import { HlmSlider } from './lib/hlm-slider';
+
+export const HlmSliderImports = [HlmSlider] as const;

package/dist/templates/frontend/application/libs/ui/slider/src/lib/hlm-slider.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BrnSlider, BrnSliderImports, injectBrnSlider } from '@spartan-ng/brain/slider';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Component({
+  selector: 'hlm-slider, brn-slider [hlm]',
+  imports: [BrnSliderImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    {
+      directive: BrnSlider,
+      inputs: [
+        'id',
+        'value',
+        'disabled',
+        'min',
+        'max',
+        'step',
+        'minStepsBetweenThumbs',
+        'inverted',
+        'orientation',
+        'showTicks',
+        'maxTicks',
+        'tickLabelInterval',
+        'formatTick',
+        'draggableRange',
+        'draggableRangeOnly',
+        'aria-label',
+        'aria-labelledby',
+      ],
+      outputs: ['valueChange'],
+    },
+  ],
+  template: `
+    <div
+      class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col"
+    >
+      <div
+        class="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        brnSliderTrack
+      >
+        <div
+          class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
+          brnSliderRange
+        ></div>
+      </div>
+
+      @for (i of _slider.thumbIndexes(); track i) {
+        <span
+          class="border-ring ring-ring/50 absolute block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px]"
+          brnSliderThumb
+        ></span>
+      }
+    </div>
+
+    @if (_slider.showTicks()) {
+      <div
+        class="text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 px-1.5 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:px-0 group-data-vertical:py-1.5 group-data-vertical:group-data-inverted:flex-col"
+      >
+        <div
+          *brnSliderTick="let tick; let formattedTick = formattedTick"
+          class="group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row"
+        >
+          <div
+            class="bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5"
+          ></div>
+          <div class="text-center group-data-[skip]:opacity-0">{{ formattedTick }}</div>
+        </div>
+      </div>
+    }
+  `,
+})
+export class HlmSlider {
+  protected readonly _slider = injectBrnSlider();
+
+  constructor() {
+    classes(() => [
+      'group flex w-full touch-none flex-col select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-row data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    ]);
+  }
+}

package/dist/templates/frontend/application/libs/ui/sonner/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmToaster } from './lib/hlm-toaster';
+
+export * from './lib/hlm-toaster';
+
+export const HlmToasterImports = [HlmToaster] as const;

package/dist/templates/frontend/application/libs/ui/sonner/src/lib/hlm-toaster.ts

@@ -0,0 +1,120 @@
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  input,
+  numberAttribute,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideCircleCheck,
+  lucideInfo,
+  lucideLoader2,
+  lucideOctagonX,
+  lucideTriangleAlert,
+} from '@ng-icons/lucide';
+import { BrnSonnerImports, type ToasterProps } from '@spartan-ng/brain/sonner';
+import { hlm } from '@spartan-ng/helm/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-toaster',
+  imports: [BrnSonnerImports, NgIcon],
+  providers: [
+    provideIcons({
+      lucideCircleCheck,
+      lucideInfo,
+      lucideTriangleAlert,
+      lucideOctagonX,
+      lucideLoader2,
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <brn-sonner-toaster
+      [style]="userStyle()"
+      [class]="_computedClass()"
+      [invert]="invert()"
+      [theme]="theme()"
+      [position]="position()"
+      [hotKey]="hotKey()"
+      [richColors]="richColors()"
+      [expand]="expand()"
+      [duration]="duration()"
+      [visibleToasts]="visibleToasts()"
+      [closeButton]="closeButton()"
+      [toastOptions]="toastOptions()"
+      [offset]="offset()"
+    >
+      <ng-template #loadingIcon>
+        <ng-icon
+          name="lucideLoader2"
+          class="overflow-visible! text-base [&>svg]:motion-safe:animate-spin"
+        />
+      </ng-template>
+      <ng-template #successIcon>
+        <ng-icon
+          name="lucideCircleCheck"
+          class="overflow-visible! text-base"
+        />
+      </ng-template>
+      <ng-template #errorIcon>
+        <ng-icon
+          name="lucideOctagonX"
+          class="overflow-visible! text-base"
+        />
+      </ng-template>
+      <ng-template #infoIcon>
+        <ng-icon
+          name="lucideInfo"
+          class="overflow-visible! text-base"
+        />
+      </ng-template>
+      <ng-template #warningIcon>
+        <ng-icon
+          name="lucideTriangleAlert"
+          class="overflow-visible! text-base"
+        />
+      </ng-template>
+    </brn-sonner-toaster>
+  `,
+})
+export class HlmToaster {
+  public readonly invert = input<ToasterProps['invert'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly theme = input<ToasterProps['theme']>('light');
+  public readonly position = input<ToasterProps['position']>('bottom-right');
+  public readonly hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT']);
+  public readonly richColors = input<ToasterProps['richColors'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly expand = input<ToasterProps['expand'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly duration = input<ToasterProps['duration'], NumberInput>(4000, {
+    transform: numberAttribute,
+  });
+  public readonly visibleToasts = input<ToasterProps['visibleToasts'], NumberInput>(3, {
+    transform: numberAttribute,
+  });
+  public readonly closeButton = input<ToasterProps['closeButton'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly toastOptions = input<ToasterProps['toastOptions']>({});
+  public readonly offset = input<ToasterProps['offset']>(null);
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  public readonly userStyle = input<Record<string, string>>(
+    {
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    },
+    { alias: 'style' },
+  );
+
+  protected readonly _computedClass = computed(() => hlm('toaster group', this.userClass()));
+}

package/dist/templates/frontend/application/libs/ui/spinner/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSpinner } from './lib/hlm-spinner';
+
+export * from './lib/hlm-spinner';
+
+export const HlmSpinnerImports = [HlmSpinner] as const;

package/dist/templates/frontend/application/libs/ui/spinner/src/lib/hlm-spinner.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideLoader2 } from '@ng-icons/lucide';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Component({
+  selector: 'hlm-spinner',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideLoader2 })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: 'status',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+  template: `
+    <ng-icon [name]="icon()" />
+  `,
+})
+export class HlmSpinner {
+  /**
+   * The name of the icon to be used as the spinner.
+   * Use provideIcons({ ... }) to register custom icons.
+   */
+  public readonly icon = input<string>('lucideLoader2');
+
+  /** Aria label for the spinner for accessibility. */
+  public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+
+  constructor() {
+    classes(() => 'inline-flex size-fit text-base motion-safe:animate-spin');
+  }
+}

package/dist/templates/frontend/application/libs/ui/switch/src/index.ts

@@ -0,0 +1,7 @@
+import { HlmSwitch } from './lib/hlm-switch';
+import { HlmSwitchThumb } from './lib/hlm-switch-thumb';
+
+export * from './lib/hlm-switch';
+export * from './lib/hlm-switch-thumb';
+
+export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

package/dist/templates/frontend/application/libs/ui/switch/src/lib/hlm-switch-thumb.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'brn-switch-thumb[hlm],[hlmSwitchThumb]',
+})
+export class HlmSwitchThumb {
+  constructor() {
+    classes(
+      () =>
+        'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform group-data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+    );
+  }
+}