@blueprint-platform/components 0.0.0-stage → 0.2.0

package/dist/generators/ui/files/shared/ui/date-picker/src/lib/hlm-date-range-picker.ts

@@ -0,0 +1,252 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  forwardRef,
+  input,
+  linkedSignal,
+  output,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  type BrnDatePickerBase,
+  BrnDatePickerTriggerToken,
+  provideBrnDatePicker,
+} from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
+import { HlmCalendarRange } from '@blueprint-platform/ui/calendar';
+import { HlmPopoverImports } from '@blueprint-platform/ui/popover';
+import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
+
+export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmDateRangePicker),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-date-range-picker',
+  imports: [HlmPopoverImports, HlmCalendarRange],
+  providers: [
+    HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
+    provideBrnDatePicker(HlmDateRangePicker),
+    provideBrnLabelable(HlmDateRangePicker),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnFieldControl],
+  host: { class: 'block' },
+  template: `
+    <hlm-popover
+      [align]="align()"
+      sideOffset="5"
+      [state]="_popoverState()"
+      (stateChanged)="_onStateChange($event)"
+    >
+      <ng-content />
+
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
+        <hlm-calendar-range
+          class="rounded-none border-0"
+          [startDate]="_start()"
+          [captionLayout]="captionLayout()"
+          [endDate]="_end()"
+          [min]="minDate()"
+          [max]="maxDate()"
+          [disabled]="_disabled()"
+          (startDateChange)="_handleStartDayChange($event)"
+          (endDateChange)="_handleEndDateChange($event)"
+        />
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `,
+})
+export class HlmDateRangePicker<T> implements BrnDatePickerBase<[T, T]>, ControlValueAccessor {
+  private readonly _config = injectHlmDateRangePickerConfig<T>();
+
+  public readonly popover = viewChild.required(BrnPopover);
+
+  private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
+
+  public readonly align = input<BrnPopoverAlign>('center');
+
+  /** Show dropdowns to navigate between months or years. */
+  public readonly captionLayout = input<
+    'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'
+  >('label');
+
+  /** The minimum date that can be selected.*/
+  public readonly minDate = input<T>();
+
+  /** The maximum date that can be selected. */
+  public readonly maxDate = input<T>();
+
+  /** Determine if the date picker is disabled. */
+  public readonly disabled = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /** The selected value. */
+  public readonly date = input<[T, T]>();
+
+  protected readonly _mutableDate = linkedSignal(this.date);
+
+  protected readonly _start = linkedSignal(() => this._mutableDate()?.[0]);
+  protected readonly _end = linkedSignal(() => this._mutableDate()?.[1]);
+
+  /** If true, the date picker will close when the end date is selected */
+  public readonly autoCloseOnEndSelection = input<boolean, BooleanInput>(
+    this._config.autoCloseOnEndSelection,
+    {
+      transform: booleanAttribute,
+    },
+  );
+
+  /** Defines how the date should be displayed in the UI.  */
+  public readonly formatDates = input<(dates: [T | null, T | null]) => string>(
+    this._config.formatDates,
+  );
+
+  /** Defines how the date should be transformed before saving to model/form. */
+  public readonly transformDates = input<(date: [T, T]) => [T, T]>(this._config.transformDates);
+
+  protected readonly _popoverState = signal<BrnOverlayState | null>(null);
+
+  protected readonly _disabled = linkedSignal(this.disabled);
+
+  /** @internal The disabled state as a readonly signal */
+  public readonly disabledState = this._disabled.asReadonly();
+
+  public readonly formattedDate = computed(() => {
+    const start = this._start();
+    const end = this._end();
+    return start || end ? this.formatDates()([start ?? null, end ?? null]) : undefined;
+  });
+
+  public readonly dateChange = output<[T, T] | null>();
+
+  public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+  public readonly hasDate = computed(() => !!this._start() || !!this._end());
+
+  /** @internal The current raw value, used by inputs to reformat on focus. */
+  public readonly value = computed(() => this._mutableDate() ?? null);
+
+  protected _onChange?: ChangeFn<[T, T] | null>;
+  protected _onTouched?: TouchFn;
+
+  protected _onStateChange(state: BrnOverlayState) {
+    this._popoverState.set(state);
+    if (state === 'closed') {
+      this._onClose();
+      this._onTouched?.();
+    }
+  }
+
+  protected _handleStartDayChange(value: T | undefined) {
+    this._start.set(value);
+  }
+
+  protected _handleEndDateChange(value: T | undefined): void {
+    this._end.set(value);
+    if (this._disabled()) return;
+
+    const start = this._start();
+    if (start && value) {
+      const transformedDates = this.transformDates()([start, value]);
+      this._mutableDate.set(transformedDates);
+      this.dateChange.emit(transformedDates);
+      this._onChange?.(transformedDates);
+
+      if (this.autoCloseOnEndSelection()) {
+        this._popoverState.set('closed');
+      }
+    }
+  }
+
+  /**
+   * Commit a range to the picker. Updates the internal model, notifies form
+   * controls, and emits `dateChange`. Intended to be called from a text input
+   * that parses user-entered values. Pass `null` to clear the range.
+   */
+  public updateDate(value: [T, T] | null) {
+    if (this._disabled()) return;
+
+    if (!value) {
+      this._mutableDate.set(undefined);
+      this._start.set(undefined);
+      this._end.set(undefined);
+      this._onChange?.(null);
+      this.dateChange.emit(null);
+      return;
+    }
+
+    const transformedDates = this.transformDates()(value);
+    this._mutableDate.set(transformedDates);
+    this._start.set(transformedDates[0]);
+    this._end.set(transformedDates[1]);
+    this._onChange?.(transformedDates);
+    this.dateChange.emit(transformedDates);
+  }
+
+  public touched(): void {
+    this._onTouched?.();
+  }
+
+  /** CONTROL VALUE ACCESSOR */
+  public writeValue(value: [T, T] | null): void {
+    untracked(() => {
+      if (!value) {
+        this._mutableDate.set(undefined);
+      } else {
+        this._mutableDate.set(this.transformDates()(value));
+      }
+    });
+  }
+
+  public registerOnChange(fn: ChangeFn<[T, T] | null>): void {
+    this._onChange = fn;
+  }
+
+  public registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this._disabled.set(isDisabled);
+  }
+
+  public open() {
+    this._popoverState.set('open');
+  }
+
+  public close() {
+    this._popoverState.set('closed');
+  }
+
+  public reset() {
+    this._mutableDate.set(undefined);
+    this._start.set(undefined);
+    this._end.set(undefined);
+    this._onChange?.(null);
+    this.dateChange.emit(null);
+  }
+
+  protected _onClose(): void {
+    const dates = this._mutableDate();
+    if (this._start() && !this._end() && dates) {
+      this._start.set(dates[0]);
+      this._end.set(dates[1]);
+    }
+  }
+}

package/dist/generators/ui/files/shared/ui/date-picker/src/lib/hlm-month-year-input.ts

@@ -0,0 +1,105 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCalendar, lucideX } from '@ng-icons/lucide';
+import {
+  BrnDateInput,
+  type BrnDatePickerTriggerBase,
+  provideBrnDatePickerTrigger,
+} from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
+import { HlmInputGroup, HlmInputGroupImports } from '@blueprint-platform/ui/input-group';
+import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
+
+@Component({
+  selector: 'hlm-month-year-input',
+  imports: [HlmInputGroupImports, NgIcon],
+  providers: [
+    provideIcons({ lucideCalendar, lucideX }),
+    provideBrnDatePickerTrigger(HlmMonthYearInput),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [HlmInputGroup],
+  template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="_ariaInvalid()"
+      [attr.data-invalid]="_ariaInvalid()"
+      [attr.data-touched]="_touched?.() ? 'true' : null"
+      [attr.data-dirty]="_dirty?.() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `,
+})
+export class HlmMonthYearInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
+  private readonly _config = injectHlmMonthYearPickerConfig<T>();
+  private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+  private readonly _invalid = this._fieldControl?.invalid;
+  protected readonly _spartanInvalid = computed(
+    () => this.forceInvalid() || this._fieldControl?.spartanInvalid(),
+  );
+  protected readonly _dirty = this._fieldControl?.dirty;
+  protected readonly _touched = this._fieldControl?.touched;
+
+  protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
+
+  /**
+   * Parses input text into a date value. Return `null` for invalid
+   * input - the picker's date is cleared while the text is preserved so
+   * the user can fix it.
+   *
+   * Defaults to `parseDate` from `HlmMonthYearPickerConfig`.
+   */
+  public readonly parseDate = input<(value: string) => T | null>(this._config.parseDate);
+
+  /**
+   * Formats the current date into the input/edit format shown while the
+   * input is focused. On blur the picker's display format is restored.
+   *
+   * Defaults to `formatInputDate` from `HlmMonthYearPickerConfig`.
+   */
+  public readonly formatInputDate = input<(date: T) => string>(this._config.formatInputDate);
+
+  protected override parseValue(value: string): T | null {
+    return this.parseDate()(value);
+  }
+
+  protected override formatInputValue(value: T): string {
+    return this.formatInputDate()(value);
+  }
+}

package/dist/generators/ui/files/shared/ui/date-picker/src/lib/hlm-month-year-picker.token.ts

@@ -0,0 +1,89 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmMonthYearPickerConfig<T> {
+  /**
+   * If true, the date picker will close when a date is selected.
+   */
+  autoCloseOnSelect: boolean;
+
+  /**
+   * Defines how the date should be displayed in the UI.
+   *
+   * @param date
+   * @returns formatted date
+   */
+  formatDate: (date: T) => string;
+
+  /**
+   * Defines how the date should be displayed while the input is focused,
+   * i.e. the format the user is expected to type in.
+   *
+   * @param date
+   * @returns formatted date in the input/edit format
+   */
+  formatInputDate: (date: T) => string;
+
+  /**
+   * Defines how the date should be transformed before saving to model/form.
+   *
+   * @param date
+   * @returns transformed date
+   */
+  transformDate: (date: T) => T;
+
+  /**
+   * Parse a user-entered string into a date.
+   *
+   * @param value the raw string from the input
+   * @returns the parsed date, or `null` when the value can't be parsed
+   */
+  parseDate: (value: string) => T | null;
+}
+
+const mmYYYY = <T>(date: T) => {
+  if (!(date instanceof Date)) return `${date}`;
+
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = date.getFullYear();
+
+  return `${month}/${year}`;
+};
+
+function getDefaultConfig<T>(): HlmMonthYearPickerConfig<T> {
+  return {
+    formatDate: mmYYYY,
+    formatInputDate: mmYYYY,
+    transformDate: (date) => date,
+    parseDate: (value) => {
+      if (typeof value !== 'string') return null;
+
+      const match = value.match(/^(\d{2})\/(\d{4})$/);
+      if (!match) return null;
+
+      const month = Number(match[1]);
+      const year = Number(match[2]);
+
+      if (month < 1 || month > 12) return null;
+
+      const date = new Date(year, month - 1, 1);
+
+      return date as T;
+    },
+    autoCloseOnSelect: false,
+  };
+}
+
+const HlmMonthYearPickerConfigToken = new InjectionToken<HlmMonthYearPickerConfig<unknown>>(
+  'HlmMonthYearPickerConfig',
+);
+
+export function provideHlmMonthYearPickerConfig<T>(
+  config: Partial<HlmMonthYearPickerConfig<T>>,
+): ValueProvider {
+  return { provide: HlmMonthYearPickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmMonthYearPickerConfig<T>(): HlmMonthYearPickerConfig<T> {
+  const injectedConfig = inject(HlmMonthYearPickerConfigToken, { optional: true });
+  return injectedConfig ? (injectedConfig as HlmMonthYearPickerConfig<T>) : getDefaultConfig();
+}

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

@@ -0,0 +1,196 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  forwardRef,
+  input,
+  linkedSignal,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  type BrnDatePickerBase,
+  BrnDatePickerTriggerToken,
+  provideBrnDatePicker,
+} from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
+import { HlmCalendarImports } from '@blueprint-platform/ui/calendar';
+import { HlmPopoverImports } from '@blueprint-platform/ui/popover';
+import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
+
+export const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmMonthYearPicker),
+  multi: true,
+};
+@Component({
+  selector: 'hlm-month-year-picker',
+  imports: [HlmPopoverImports, HlmCalendarImports],
+  providers: [
+    HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR,
+    provideBrnDatePicker(HlmMonthYearPicker),
+    provideBrnLabelable(HlmMonthYearPicker),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnFieldControl],
+  host: { class: 'block' },
+  template: `
+    <hlm-popover
+      [align]="align()"
+      sideOffset="5"
+      [state]="_popoverState()"
+      (stateChanged)="_onStateChange($event)"
+    >
+      <ng-content />
+
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
+        <hlm-month-year-calendar
+          class="rounded-none border-0"
+          [date]="_mutableDate()"
+          [defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
+          [min]="minDate()"
+          [max]="maxDate()"
+          [disabled]="_disabled()"
+          (dateChange)="_handleChange($event)"
+        />
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `,
+})
+export class HlmMonthYearPicker<T> implements BrnDatePickerBase<T>, ControlValueAccessor {
+  private readonly _config = injectHlmMonthYearPickerConfig<T>();
+
+  public readonly popover = viewChild.required(BrnPopover);
+
+  private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
+
+  public readonly align = input<BrnPopoverAlign>('center');
+
+  /** The minimum date that can be selected.*/
+  public readonly minDate = input<T>();
+
+  /** The maximum date that can be selected. */
+  public readonly maxDate = input<T>();
+
+  /** Determine if the date picker is disabled. */
+  public readonly disabled = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /** The selected value. */
+  public readonly date = input<T>();
+
+  /** The date the calendar focuses on first open when no date is selected. */
+  public readonly defaultFocusedDate = input<T>();
+
+  protected readonly _mutableDate = linkedSignal(this.date);
+
+  /** If true, the date picker will close when a date is selected. */
+  public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
+    transform: booleanAttribute,
+  });
+
+  /** Defines how the date should be displayed in the UI.  */
+  public readonly formatDate = input<(date: T) => string>(this._config.formatDate);
+
+  /** Defines how the date should be transformed before saving to model/form. */
+  public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
+
+  protected readonly _popoverState = signal<BrnOverlayState | null>(null);
+
+  protected readonly _disabled = linkedSignal(this.disabled);
+
+  /** @internal The disabled state as a readonly signal */
+  public readonly disabledState = this._disabled.asReadonly();
+
+  public readonly formattedDate = computed(() => {
+    const date = this._mutableDate();
+    return date ? this.formatDate()(date) : undefined;
+  });
+
+  public readonly dateChange = output<T | null>();
+
+  public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+  public readonly hasDate = computed(() => !!this._mutableDate());
+
+  /** @internal The current raw value, used by inputs to reformat on focus. */
+  public readonly value = computed(() => this._mutableDate() ?? null);
+
+  protected _onChange?: ChangeFn<T | null>;
+  protected _onTouched?: TouchFn;
+
+  protected _onStateChange(state: BrnOverlayState) {
+    this._popoverState.set(state);
+    if (state === 'closed') this._onTouched?.();
+  }
+
+  protected _handleChange(value: T | undefined) {
+    if (this._disabled()) return;
+    this.updateDate(value ?? null);
+
+    if (this.autoCloseOnSelect()) {
+      this._popoverState.set('closed');
+    }
+  }
+
+  /**
+   * Commit a date to the picker. Updates the internal model, notifies form
+   * controls, and emits `dateChange`. Unlike `_handleChange`, this does not
+   * close the popover - it's intended to be called from a text input that
+   * is parsing user-entered values while typing.
+   */
+  public updateDate(value: T | null) {
+    if (this._disabled()) return;
+    const transformedDate = value != null ? this.transformDate()(value) : undefined;
+
+    this._mutableDate.set(transformedDate);
+    this._onChange?.(transformedDate ?? null);
+    this.dateChange.emit(transformedDate ?? null);
+  }
+
+  /** CONTROL VALUE ACCESSOR */
+  public writeValue(value: T | null): void {
+    this._mutableDate.set(value ? this.transformDate()(value) : undefined);
+  }
+
+  public registerOnChange(fn: ChangeFn<T | null>): void {
+    this._onChange = fn;
+  }
+
+  public registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  public touched(): void {
+    this._onTouched?.();
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this._disabled.set(isDisabled);
+  }
+
+  public open() {
+    this._popoverState.set('open');
+  }
+
+  public close() {
+    this._popoverState.set('closed');
+  }
+
+  public reset() {
+    this._mutableDate.set(undefined);
+    this._onChange?.(null);
+    this.dateChange.emit(null);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { HlmDialog } from './lib/hlm-dialog';
+import { HlmDialogClose } from './lib/hlm-dialog-close';
+import { HlmDialogContent } from './lib/hlm-dialog-content';
+import { HlmDialogDescription } from './lib/hlm-dialog-description';
+import { HlmDialogFooter } from './lib/hlm-dialog-footer';
+import { HlmDialogHeader } from './lib/hlm-dialog-header';
+import { HlmDialogOverlay } from './lib/hlm-dialog-overlay';
+import { HlmDialogPortal } from './lib/hlm-dialog-portal';
+import { HlmDialogTitle } from './lib/hlm-dialog-title';
+import { HlmDialogTrigger } from './lib/hlm-dialog-trigger';
+
+export * from './lib/hlm-dialog';
+export * from './lib/hlm-dialog-close';
+export * from './lib/hlm-dialog-content';
+export * from './lib/hlm-dialog-description';
+export * from './lib/hlm-dialog-footer';
+export * from './lib/hlm-dialog-header';
+export * from './lib/hlm-dialog-overlay';
+export * from './lib/hlm-dialog-portal';
+export * from './lib/hlm-dialog-title';
+export * from './lib/hlm-dialog-trigger';
+export * from './lib/hlm-dialog.service';
+
+export const HlmDialogImports = [
+  HlmDialog,
+  HlmDialogContent,
+  HlmDialogDescription,
+  HlmDialogFooter,
+  HlmDialogHeader,
+  HlmDialogOverlay,
+  HlmDialogPortal,
+  HlmDialogTitle,
+  HlmDialogTrigger,
+  HlmDialogClose,
+] as const;

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
+
+@Directive({
+  selector: 'button[hlmDialogClose]',
+  hostDirectives: [BrnDialogClose],
+  host: { 'data-slot': 'dialog-close' },
+})
+export class HlmDialogClose {}