@blueprint-platform/components 0.0.0-stage → 0.2.0

package/dist/generators/ui/files/shared/ui/input-otp/src/lib/hlm-input-otp-group.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmInputOtpGroup],hlm-input-otp-group',
+  host: { 'data-slot': 'input-otp-group' },
+})
+export class HlmInputOtpGroup {
+  constructor() {
+    classes(
+      () =>
+        'has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive rounded-lg has-data-[matches-spartan-invalid=true]:ring-3 flex items-center',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/input-otp/src/lib/hlm-input-otp-separator.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideMinus } from '@ng-icons/lucide';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-input-otp-separator',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideMinus })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: 'separator',
+    'data-slot': 'input-otp-separator',
+  },
+  template: ` <ng-icon name="lucideMinus" /> `,
+})
+export class HlmInputOtpSeparator {
+  constructor() {
+    classes(() => "[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex items-center");
+  }
+}

package/dist/generators/ui/files/shared/ui/input-otp/src/lib/hlm-input-otp-slot.ts

@@ -0,0 +1,39 @@
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  numberAttribute,
+} from '@angular/core';
+import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
+
+@Component({
+  selector: 'hlm-input-otp-slot',
+  imports: [BrnInputOtpSlot, HlmInputOtpFakeCaret],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'data-slot': 'input-otp-slot' },
+  template: `
+    <brn-input-otp-slot [index]="index()" [forceInvalid]="forceInvalid()">
+      <hlm-input-otp-fake-caret />
+    </brn-input-otp-slot>
+  `,
+})
+export class HlmInputOtpSlot {
+  /** The index of the slot to render the char or a fake caret */
+  public readonly index = input.required<number, NumberInput>({ transform: numberAttribute });
+
+  /** Whether to force the input into an invalid state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(
+      () =>
+        'dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:border-destructive size-8 border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg has-[brn-input-otp-slot[data-active="true"]]:ring-3 relative flex items-center justify-center has-[brn-input-otp-slot[data-active="true"]]:z-10',
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'brn-input-otp[hlmInputOtp], brn-input-otp[hlm]',
+  host: { 'data-slot': 'input-otp' },
+})
+export class HlmInputOtp {
+  constructor() {
+    classes(() => 'gap-2 flex items-center has-disabled:opacity-50');
+  }
+}

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

@@ -0,0 +1,35 @@
+import { HlmItem } from './lib/hlm-item';
+import { HlmItemActions } from './lib/hlm-item-actions';
+import { HlmItemContent } from './lib/hlm-item-content';
+import { HlmItemDescription } from './lib/hlm-item-description';
+import { HlmItemFooter } from './lib/hlm-item-footer';
+import { HlmItemGroup } from './lib/hlm-item-group';
+import { HlmItemHeader } from './lib/hlm-item-header';
+import { HlmItemMedia } from './lib/hlm-item-media';
+import { HlmItemSeparator } from './lib/hlm-item-separator';
+import { HlmItemTitle } from './lib/hlm-item-title';
+
+export * from './lib/hlm-item';
+export * from './lib/hlm-item-actions';
+export * from './lib/hlm-item-content';
+export * from './lib/hlm-item-description';
+export * from './lib/hlm-item-footer';
+export * from './lib/hlm-item-group';
+export * from './lib/hlm-item-header';
+export * from './lib/hlm-item-media';
+export * from './lib/hlm-item-separator';
+export * from './lib/hlm-item-title';
+export * from './lib/hlm-item-token';
+
+export const HlmItemImports = [
+  HlmItem,
+  HlmItemActions,
+  HlmItemContent,
+  HlmItemDescription,
+  HlmItemFooter,
+  HlmItemGroup,
+  HlmItemHeader,
+  HlmItemMedia,
+  HlmItemSeparator,
+  HlmItemTitle,
+] as const;

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemActions],hlm-item-actions',
+  host: { 'data-slot': 'item-actions' },
+})
+export class HlmItemActions {
+  constructor() {
+    classes(() => 'gap-2 flex items-center');
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemContent],hlm-item-content',
+  host: { 'data-slot': 'item-content' },
+})
+export class HlmItemContent {
+  constructor() {
+    classes(
+      () =>
+        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemDescription],hlm-item-description',
+  host: { 'data-slot': 'item-description' },
+})
+export class HlmItemDescription {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground text-start text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemFooter],hlm-item-footer',
+  host: { 'data-slot': 'item-footer' },
+})
+export class HlmItemFooter {
+  constructor() {
+    classes(() => 'gap-2 flex basis-full items-center justify-between');
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemGroup],hlm-item-group',
+  host: { 'data-slot': 'item-group' },
+})
+export class HlmItemGroup {
+  constructor() {
+    classes(
+      () =>
+        'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col',
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemHeader],hlm-item-header',
+  host: { 'data-slot': 'item-header' },
+})
+export class HlmItemHeader {
+  constructor() {
+    classes(() => 'gap-2 flex basis-full items-center justify-between');
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { injectHlmItemMediaConfig } from './hlm-item-token';
+
+const itemMediaVariants = cva(
+  'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]",
+        image:
+          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+
+@Directive({
+  selector: '[hlmItemMedia],hlm-item-media',
+  host: {
+    'data-slot': 'item-media',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmItemMedia {
+  private readonly _config = injectHlmItemMediaConfig();
+  public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);
+
+  constructor() {
+    classes(() => itemMediaVariants({ variant: this.variant() }));
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlmSeparatorClass } from '@blueprint-platform/ui/separator';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemSeparator],hlm-item-separator',
+  hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
+  host: { 'data-slot': 'item-separator' },
+})
+export class HlmItemSeparator {
+  constructor() {
+    classes(() => [hlmSeparatorClass, 'my-2']);
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmItemTitle],hlm-item-title',
+  host: { 'data-slot': 'item-title' },
+})
+export class HlmItemTitle {
+  constructor() {
+    classes(
+      () =>
+        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',
+    );
+  }
+}

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

@@ -0,0 +1,41 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ItemVariants } from './hlm-item';
+import type { ItemMediaVariants } from './hlm-item-media';
+
+export interface HlmItemConfig {
+  variant: ItemVariants['variant'];
+  size: ItemVariants['size'];
+}
+
+const defaultConfig: HlmItemConfig = {
+  variant: 'default',
+  size: 'default',
+};
+
+const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');
+
+export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
+  return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmItemConfig(): HlmItemConfig {
+  return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
+}
+
+export interface HlmItemMediaConfig {
+  variant: ItemMediaVariants['variant'];
+}
+
+const defaultMediaConfig: HlmItemMediaConfig = {
+  variant: 'default',
+};
+
+const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');
+
+export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
+  return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
+}
+
+export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
+  return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
+}

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

@@ -0,0 +1,46 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { injectHlmItemConfig } from './hlm-item-token';
+
+const itemVariants = cva(
+  '[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50 border-transparent',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ItemVariants = VariantProps<typeof itemVariants>;
+
+@Directive({
+  selector: '[hlmItem],hlm-item',
+  host: {
+    'data-slot': 'item',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-size]': 'size()',
+  },
+})
+export class HlmItem {
+  private readonly _config = injectHlmItemConfig();
+  public readonly variant = input<ItemVariants['variant']>(this._config.variant);
+  public readonly size = input<ItemVariants['size']>(this._config.size);
+
+  constructor() {
+    classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
+  }
+}

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

@@ -0,0 +1,7 @@
+import { HlmKbd } from './lib/hlm-kbd';
+import { HlmKbdGroup } from './lib/hlm-kbd-group';
+
+export * from './lib/hlm-kbd';
+export * from './lib/hlm-kbd-group';
+
+export const HlmKbdImports = [HlmKbd, HlmKbdGroup] as const;

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'kbd[hlmKbdGroup]',
+  host: {
+    'data-slot': 'kbd-group',
+  },
+})
+export class HlmKbdGroup {
+  constructor() {
+    classes(() => 'gap-1 inline-flex items-center');
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'kbd[hlmKbd]',
+  host: {
+    'data-slot': 'kbd',
+  },
+})
+export class HlmKbd {
+  constructor() {
+    classes(
+      () =>
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)] pointer-events-none inline-flex items-center justify-center select-none",
+    );
+  }
+}

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

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

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmLabel]',
+  hostDirectives: [{ directive: BrnLabel, inputs: ['id', 'for'] }],
+  host: { 'data-slot': 'label' },
+})
+export class HlmLabel {
+  constructor() {
+    classes(
+      () =>
+        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/language-switcher/language-switcher.ts

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { HlmButtonImports } from '@blueprint-platform/ui/button';
+import { HlmDropdownMenuImports } from '@blueprint-platform/ui/dropdown-menu';
+import { LanguageService } from '../../../core/language/language.service';
+
+/**
+ * Language picker — one item per language this project was generated with
+ * (`LanguageService.available`). Selecting one switches `ngx-translate` and,
+ * via the language registry, the document direction. Visibility is gated by the
+ * call site (`BLUEPRINT_CONFIG.showLanguageSwitcher`), not here.
+ */
+@Component({
+  selector: 'app-language-switcher',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HlmButtonImports, HlmDropdownMenuImports],
+  template: `
+    <div class="flex items-center gap-2 text-sm">
+      <span>Language</span>
+      <button
+        hlmBtn
+        variant="outline"
+        size="sm"
+        type="button"
+        class="ms-auto"
+        [hlmDropdownMenuTrigger]="menu"
+      >
+        {{ currentLabel() }}
+      </button>
+      <ng-template #menu>
+        <hlm-dropdown-menu class="w-44">
+          @for (lang of languageService.available; track lang.code) {
+            <button
+              hlmDropdownMenuItem
+              (click)="languageService.setLanguage(lang.code)"
+            >
+              {{ lang.label }}
+            </button>
+          }
+        </hlm-dropdown-menu>
+      </ng-template>
+    </div>
+  `,
+})
+export class LanguageSwitcher {
+  protected readonly languageService = inject(LanguageService);
+  protected readonly currentLabel = computed(
+    () =>
+      this.languageService.available.find(
+        (l) => l.code === this.languageService.current(),
+      )?.label ?? '',
+  );
+}

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

@@ -0,0 +1,9 @@
+import { HlmMarker } from './lib/hlm-marker';
+import { HlmMarkerContent } from './lib/hlm-marker-content';
+import { HlmMarkerIcon } from './lib/hlm-marker-icon';
+
+export * from './lib/hlm-marker';
+export * from './lib/hlm-marker-content';
+export * from './lib/hlm-marker-icon';
+
+export const HlmMarkerImports = [HlmMarker, HlmMarkerContent, HlmMarkerIcon] as const;

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMarkerContent],hlm-marker-content',
+  host: { 'data-slot': 'marker-content' },
+})
+export class HlmMarkerContent {
+  constructor() {
+    classes(
+      () =>
+        'min-w-0 *:[a]:hover:text-foreground wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3',
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMarkerIcon],hlm-marker-icon',
+  host: {
+    'data-slot': 'marker-icon',
+    'aria-hidden': 'true',
+  },
+})
+export class HlmMarkerIcon {
+  constructor() {
+    classes(() => "size-4 shrink-0 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]");
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const markerVariants = cva(
+  "text-muted-foreground gap-2 group/marker [a]:hover:text-foreground relative flex min-h-4 w-full items-center text-start text-sm [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] [a]:underline [a]:underline-offset-3",
+  {
+    variants: {
+      variant: {
+        default: '',
+        separator:
+          'before:bg-border after:bg-border before:me-1 before:h-px before:min-w-0 before:flex-1 after:ms-1 after:h-px after:min-w-0 after:flex-1',
+        border: 'border-border border-b pb-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type MarkerVariants = VariantProps<typeof markerVariants>;
+
+@Directive({
+  selector: '[hlmMarker],hlm-marker',
+  host: {
+    'data-slot': 'marker',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmMarker {
+  public readonly variant = input<MarkerVariants['variant']>('default');
+
+  constructor() {
+    classes(() => markerVariants({ variant: this.variant() }));
+  }
+}

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

@@ -0,0 +1,8 @@
+import { HlmMenubar } from './lib/hlm-menubar';
+import { HlmMenubarTrigger } from './lib/hlm-menubar-trigger';
+
+export * from './lib/hlm-menubar';
+export * from './lib/hlm-menubar-token';
+export * from './lib/hlm-menubar-trigger';
+
+export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

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

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import { type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+
+export interface HlmMenubarConfig {
+  align: MenuAlign;
+  side: MenuSide;
+}
+
+const defaultConfig: HlmMenubarConfig = {
+  align: 'start',
+  side: 'bottom',
+};
+
+const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');
+
+export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
+  return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmMenubarConfig(): HlmMenubarConfig {
+  return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
+}