@blueprint-platform/components 0.0.0-stage → 0.2.0

package/dist/generators/ui/files/shared/ui/calendar/src/lib/hlm-month-year-calendar.ts

@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+  BrnCalendarImports,
+  BrnMonthYearCalendar,
+  injectBrnCalendarI18n,
+} from '@spartan-ng/brain/calendar';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants, HlmButtonImports } from '@blueprint-platform/ui/button';
+import { classes, hlm } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-month-year-calendar',
+  imports: [BrnCalendarImports, NgIcon, HlmButtonImports],
+  viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    {
+      directive: BrnMonthYearCalendar,
+      inputs: ['min', 'max', 'disabled', 'date', 'defaultFocusedDate', 'view'],
+      outputs: ['dateChange'],
+    },
+  ],
+  host: { 'data-slot': 'month-year-calendar' },
+  template: `
+    <div class="flex flex-col gap-4">
+      <!-- Header -->
+      <div class="flex w-full items-center justify-between gap-1.5">
+        <button
+          brnMonthYearCalendarPreviousButton
+          hlmBtn
+          variant="ghost"
+          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+        >
+          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+        </button>
+
+        <button
+          hlmBtn
+          variant="ghost"
+          class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
+          brnMonthYearCalendarHeader
+        >
+          {{ _heading() }}
+        </button>
+
+        <button
+          brnMonthYearCalendarNextButton
+          hlmBtn
+          variant="ghost"
+          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+        >
+          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+        </button>
+      </div>
+
+      <!-- Grid -->
+      @switch (_picker.view()) {
+        @case ('year') {
+          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+            @for (year of _picker.years(); track _dateAdapter.getYear(year)) {
+              <button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
+                {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
+              </button>
+            }
+          </div>
+        }
+        @case ('month') {
+          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+            @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
+              <button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
+                {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
+              </button>
+            }
+          </div>
+        }
+      }
+    </div>
+  `,
+})
+export class HlmMonthYearCalendar<T> {
+  /** Access the calendar i18n */
+  protected readonly _i18n = injectBrnCalendarI18n();
+
+  /** Access the date adapter */
+  protected readonly _dateAdapter = injectDateAdapter<T>();
+
+  /** Access the picker directive */
+  protected readonly _picker = inject(BrnMonthYearCalendar<T>);
+
+  /** The heading for the current view. */
+  protected readonly _heading = computed(() => {
+    const config = this._i18n.config();
+
+    if (this._picker.view() === 'month') {
+      return config.formatYear(this._dateAdapter.getYear(this._picker.focusedDate()));
+    }
+
+    const { start, end } = this._picker.yearRange();
+    return `${config.formatYear(start)} – ${config.formatYear(end)}`;
+  });
+
+  protected readonly _btnClass = hlm(
+    buttonVariants({ variant: 'ghost' }),
+    'data-[today=true]:bg-muted',
+    'data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground',
+    'data-[focused=true]:border-ring data-[focused=true]:ring-ring/50 data-[focused=true]:ring-[3px]',
+    'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    'h-(--cell-size)',
+  );
+
+  constructor() {
+    classes(
+      () =>
+        'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/index.ts

@@ -0,0 +1,25 @@
+import { HlmCard } from './lib/hlm-card';
+import { HlmCardAction } from './lib/hlm-card-action';
+import { HlmCardContent } from './lib/hlm-card-content';
+import { HlmCardDescription } from './lib/hlm-card-description';
+import { HlmCardFooter } from './lib/hlm-card-footer';
+import { HlmCardHeader } from './lib/hlm-card-header';
+import { HlmCardTitle } from './lib/hlm-card-title';
+
+export * from './lib/hlm-card';
+export * from './lib/hlm-card-action';
+export * from './lib/hlm-card-content';
+export * from './lib/hlm-card-description';
+export * from './lib/hlm-card-footer';
+export * from './lib/hlm-card-header';
+export * from './lib/hlm-card-title';
+
+export const HlmCardImports = [
+  HlmCard,
+  HlmCardAction,
+  HlmCardContent,
+  HlmCardDescription,
+  HlmCardFooter,
+  HlmCardHeader,
+  HlmCardTitle,
+] as const;

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card-action.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCardAction]',
+  host: { 'data-slot': 'card-action' },
+})
+export class HlmCardAction {
+  constructor() {
+    classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCardContent]',
+  host: { 'data-slot': 'card-content' },
+})
+export class HlmCardContent {
+  constructor() {
+    classes(() => 'px-(--card-spacing)');
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card-description.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCardDescription]',
+  host: { 'data-slot': 'card-description' },
+})
+export class HlmCardDescription {
+  constructor() {
+    classes(() => 'text-muted-foreground text-sm');
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card-footer.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCardFooter],hlm-card-footer',
+  host: { 'data-slot': 'card-footer' },
+})
+export class HlmCardFooter {
+  constructor() {
+    classes(() => 'bg-muted/50 rounded-b-xl border-t p-(--card-spacing) flex items-center');
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCardHeader],hlm-card-header',
+  host: { 'data-slot': 'card-header' },
+})
+export class HlmCardHeader {
+  constructor() {
+    classes(
+      () =>
+        'gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card-title.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCardTitle]',
+  host: { 'data-slot': 'card-title' },
+})
+export class HlmCardTitle {
+  constructor() {
+    classes(() => 'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm');
+  }
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card.token.ts

@@ -0,0 +1,19 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export type HlmCardConfig = {
+  size: 'sm' | 'default';
+};
+
+const defaultConfig: HlmCardConfig = {
+  size: 'default',
+};
+
+const HlmCardConfigToken = new InjectionToken<HlmCardConfig>('HlmCardConfig');
+
+export function provideHlmCardConfig(config: Partial<HlmCardConfig>): ValueProvider {
+  return { provide: HlmCardConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmCardConfig(): HlmCardConfig {
+  return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig;
+}

package/dist/generators/ui/files/shared/ui/card/src/lib/hlm-card.ts

@@ -0,0 +1,22 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
+
+@Directive({
+  selector: '[hlmCard],hlm-card',
+  host: {
+    'data-slot': 'card',
+    '[attr.data-size]': 'size()',
+  },
+})
+export class HlmCard {
+  private readonly _defaultConfig = injectHlmCardConfig();
+  public readonly size = input<HlmCardConfig['size']>(this._defaultConfig.size);
+
+  constructor() {
+    classes(
+      () =>
+        'ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/carousel/src/index.ts

@@ -0,0 +1,22 @@
+import { HlmCarousel } from './lib/hlm-carousel';
+import { HlmCarouselContent } from './lib/hlm-carousel-content';
+import { HlmCarouselItem } from './lib/hlm-carousel-item';
+import { HlmCarouselNext } from './lib/hlm-carousel-next';
+import { HlmCarouselPrevious } from './lib/hlm-carousel-previous';
+import { HlmCarouselSlideDisplay } from './lib/hlm-carousel-slide-display';
+
+export * from './lib/hlm-carousel';
+export * from './lib/hlm-carousel-content';
+export * from './lib/hlm-carousel-item';
+export * from './lib/hlm-carousel-next';
+export * from './lib/hlm-carousel-previous';
+export * from './lib/hlm-carousel-slide-display';
+
+export const HlmCarouselImports = [
+  HlmCarousel,
+  HlmCarouselContent,
+  HlmCarouselItem,
+  HlmCarouselPrevious,
+  HlmCarouselNext,
+  HlmCarouselSlideDisplay,
+] as const;

package/dist/generators/ui/files/shared/ui/carousel/src/lib/hlm-carousel-content.ts

@@ -0,0 +1,17 @@
+import { Directive, inject } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmCarousel } from './hlm-carousel';
+
+@Directive({
+  selector: '[hlmCarouselContent],hlm-carousel-content',
+  host: {
+    'data-slot': 'carousel-content',
+  },
+})
+export class HlmCarouselContent {
+  private readonly _orientation = inject(HlmCarousel).orientation;
+
+  constructor() {
+    classes(() => ['flex', this._orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col']);
+  }
+}

package/dist/generators/ui/files/shared/ui/carousel/src/lib/hlm-carousel-item.ts

@@ -0,0 +1,22 @@
+import { Directive, inject } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmCarousel } from './hlm-carousel';
+
+@Directive({
+  selector: '[hlmCarouselItem],hlm-carousel-item',
+  host: {
+    'data-slot': 'carousel-item',
+    role: 'group',
+    'aria-roledescription': 'slide',
+  },
+})
+export class HlmCarouselItem {
+  private readonly _orientation = inject(HlmCarousel).orientation;
+
+  constructor() {
+    classes(() => [
+      'min-w-0 shrink-0 grow-0 basis-full',
+      this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4',
+    ]);
+  }
+}

package/dist/generators/ui/files/shared/ui/carousel/src/lib/hlm-carousel-next.ts

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  untracked,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideArrowRight } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '@blueprint-platform/ui/button';
+import { hlm } from '@blueprint-platform/ui/utils';
+import { HlmCarousel } from './hlm-carousel';
+
+@Component({
+  selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
+  imports: [NgIcon],
+  providers: [
+    provideIcons({ lucideArrowRight }),
+    provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: {
+    'data-slot': 'carousel-next',
+    '[disabled]': 'isDisabled()',
+    '(click)': '_carousel.scrollNext()',
+  },
+  template: `
+    <ng-icon name="lucideArrowRight" class="rtl:rotate-180" />
+    <span class="sr-only">Next slide</span>
+  `,
+})
+export class HlmCarouselNext {
+  private readonly _button = inject(HlmButton);
+  protected readonly _carousel = inject(HlmCarousel);
+  private readonly _computedClass = computed(() =>
+    hlm(
+      'rounded-full absolute h-8 w-8',
+      this._carousel.orientation() === 'horizontal'
+        ? '-end-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+    ),
+  );
+  protected readonly isDisabled = () => !this._carousel.canScrollNext();
+
+  constructor() {
+    effect(() => {
+      const computedClass = this._computedClass();
+
+      untracked(() => this._button.setClass(computedClass));
+    });
+  }
+}

package/dist/generators/ui/files/shared/ui/carousel/src/lib/hlm-carousel-previous.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  untracked,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideArrowLeft } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '@blueprint-platform/ui/button';
+import { hlm } from '@blueprint-platform/ui/utils';
+import { HlmCarousel } from './hlm-carousel';
+
+@Component({
+  selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
+  imports: [NgIcon],
+  providers: [
+    provideIcons({ lucideArrowLeft }),
+    provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: {
+    'data-slot': 'carousel-previous',
+    '[disabled]': 'isDisabled()',
+    '(click)': '_carousel.scrollPrev()',
+  },
+  template: `
+    <ng-icon name="lucideArrowLeft" class="rtl:rotate-180" />
+    <span class="sr-only">Previous slide</span>
+  `,
+})
+export class HlmCarouselPrevious {
+  private readonly _button = inject(HlmButton);
+
+  protected readonly _carousel = inject(HlmCarousel);
+
+  private readonly _computedClass = computed(() =>
+    hlm(
+      'rounded-full absolute h-8 w-8',
+      this._carousel.orientation() === 'horizontal'
+        ? '-start-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+    ),
+  );
+  protected readonly isDisabled = () => !this._carousel.canScrollPrev();
+
+  constructor() {
+    effect(() => {
+      const computedClass = this._computedClass();
+      untracked(() => this._button.setClass(computedClass));
+    });
+  }
+}

package/dist/generators/ui/files/shared/ui/carousel/src/lib/hlm-carousel-slide-display.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import type { ClassValue } from 'clsx';
+import { HlmCarousel } from './hlm-carousel';
+
+@Component({
+  selector: 'hlm-carousel-slide-display',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'carousel-slide-display',
+  },
+  template: `
+    <span class="sr-only">{{ _labelContent() }}</span>
+    <div aria-hidden="true" [class]="slideClass()">
+      {{ _currentSlide() }} / {{ _carousel.slideCount() }}
+    </div>
+  `,
+})
+export class HlmCarouselSlideDisplay {
+  protected readonly _carousel = inject(HlmCarousel);
+
+  protected readonly _currentSlide = computed(() => this._carousel.currentSlide() + 1);
+
+  public readonly slideClass = input<ClassValue>('text-muted-foreground text-sm');
+
+  /** Screen reader only text for the slide display */
+  public readonly label = input<string>('Slide');
+
+  protected readonly _labelContent = computed(() => {
+    const currentSlide = this._currentSlide();
+    const slideCount = this._carousel.slideCount();
+    return `${this.label()} ${currentSlide} of ${slideCount} is displayed`;
+  });
+}

package/dist/generators/ui/files/shared/ui/carousel/src/lib/hlm-carousel.ts

@@ -0,0 +1,105 @@
+import { Directionality } from '@angular/cdk/bidi';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  type InputSignal,
+  type Signal,
+  computed,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import type { EmblaEventType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+import { EmblaCarouselDirective } from 'embla-carousel-angular';
+
+@Component({
+  selector: 'hlm-carousel',
+  imports: [EmblaCarouselDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'carousel',
+    role: 'region',
+    'aria-roledescription': 'carousel',
+    '(keydown)': 'onKeydown($event)',
+  },
+  template: `
+    <div
+      emblaCarousel
+      class="overflow-hidden"
+      [plugins]="plugins()"
+      [options]="_emblaOptions()"
+      [subscribeToEvents]="['init', 'select', 'reInit']"
+      (emblaChange)="onEmblaEvent($event)"
+    >
+      <ng-content select="[hlmCarouselContent],hlm-carousel-content" />
+    </div>
+    <ng-content />
+  `,
+})
+export class HlmCarousel {
+  protected readonly _emblaCarousel = viewChild.required(EmblaCarouselDirective);
+  private readonly _dir = inject(Directionality);
+
+  public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+  public readonly options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined> =
+    input<Omit<EmblaOptionsType, 'axis'>>();
+  public readonly plugins: InputSignal<EmblaPluginType[]> = input<EmblaPluginType[]>([]);
+
+  protected readonly _emblaOptions: Signal<EmblaOptionsType> = computed(() => ({
+    // Default embla's direction to the ambient layout direction so the carousel scrolls RTL
+    // automatically; an explicit `direction` in `options` still wins.
+    direction: this._dir.valueSignal(),
+    ...this.options(),
+    axis: this.orientation() === 'horizontal' ? 'x' : 'y',
+  }));
+
+  private readonly _canScrollPrev = signal(false);
+  public readonly canScrollPrev = this._canScrollPrev.asReadonly();
+  private readonly _canScrollNext = signal(false);
+  public readonly canScrollNext = this._canScrollNext.asReadonly();
+
+  private readonly _currentSlide = signal(0);
+  public readonly currentSlide = this._currentSlide.asReadonly();
+  private readonly _slideCount = signal(0);
+  public readonly slideCount = this._slideCount.asReadonly();
+
+  constructor() {
+    classes(() => 'relative');
+  }
+
+  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());
+
+      this._currentSlide.set(emblaApi.selectedScrollSnap());
+      this._slideCount.set(emblaApi.scrollSnapList().length);
+    }
+  }
+
+  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/dist/generators/ui/files/shared/ui/checkbox/src/index.ts

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