@3ddv/software-division-components 2.0.0 → 2.0.1

package/generic/carousel/ui/ui-carousel-helm/src/index.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-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;
-
-@NgModule({
-  imports: [...HlmCarouselImports],
-  exports: [...HlmCarouselImports],
-})
-export class HlmCarouselModule {}

package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-content.ts

@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-import { HlmCarousel } from './hlm-carousel';
-
-@Component({
-  selector: 'hlm-carousel-content',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class]': '_computedClass()',
-  },
-  template: ` <ng-content /> `,
-})
-export class HlmCarouselContent {
-  private readonly _orientation = inject(HlmCarousel).orientation;
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected readonly _computedClass = computed(() =>
-    hlm('flex', this._orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this.userClass())
-  );
-}

package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-item.ts

@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-import { HlmCarousel } from './hlm-carousel';
-
-@Component({
-  selector: 'hlm-carousel-item',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class]': '_computedClass()',
-    role: 'group',
-    'aria-roledescription': 'slide',
-  },
-  template: ` <ng-content /> `,
-})
-export class HlmCarouselItem {
-  private readonly _orientation = inject(HlmCarousel).orientation;
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected readonly _computedClass = computed(() =>
-    hlm('min-w-0 shrink-0 grow-0 basis-full', this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.userClass())
-  );
-}

package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-next.ts

@@ -1,58 +0,0 @@
-import { HlmButton, provideBrnButtonConfig } from '@3ddv/software-division-components/generic/button';
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  computed,
-  effect,
-  inject,
-  input,
-  untracked,
-} from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideArrowRight } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-import { HlmCarousel } from './hlm-carousel';
-
-@Component({
-  selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[disabled]': 'isDisabled()',
-    '(click)': '_carousel.scrollNext()',
-  },
-  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
-  providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-  imports: [NgIcon, HlmIcon],
-  template: `
-    <ng-icon hlm size="sm" name="lucideArrowRight" />
-    <span class="sr-only">Next slide</span>
-  `,
-})
-export class HlmCarouselNext {
-  private readonly _button = inject(HlmButton);
-  protected readonly _carousel = inject(HlmCarousel);
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  private readonly _computedClass = computed(() =>
-    hlm(
-      'absolute h-8 w-8 rounded-full',
-      this._carousel.orientation() === 'horizontal'
-        ? '-right-12 top-1/2 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      this.userClass()
-    )
-  );
-  protected readonly isDisabled = () => !this._carousel.canScrollNext();
-
-  constructor() {
-    effect(() => {
-      const computedClass = this._computedClass();
-
-      untracked(() => this._button.setClass(computedClass));
-    });
-  }
-}

package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-previous.ts

@@ -1,61 +0,0 @@
-import { HlmButton, provideBrnButtonConfig } from '@3ddv/software-division-components/generic/button';
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  computed,
-  effect,
-  inject,
-  input,
-  untracked,
-} from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideArrowLeft } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-import { HlmCarousel } from './hlm-carousel';
-
-@Component({
-  selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[disabled]': 'isDisabled()',
-    '(click)': '_carousel.scrollPrev()',
-  },
-  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
-  providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-  imports: [NgIcon, HlmIcon],
-  template: `
-    <ng-icon hlm size="sm" name="lucideArrowLeft" />
-    <span class="sr-only">Previous slide</span>
-  `,
-})
-export class HlmCarouselPrevious {
-  private readonly _button = inject(HlmButton);
-
-  protected readonly _carousel = inject(HlmCarousel);
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-  private readonly _computedClass = computed(() =>
-    hlm(
-      'absolute h-8 w-8 rounded-full',
-      this._carousel.orientation() === 'horizontal'
-        ? '-left-12 top-1/2 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      this.userClass()
-    )
-  );
-  protected readonly isDisabled = () => !this._carousel.canScrollPrev();
-
-  constructor() {
-    effect(() => {
-      const computedClass = this._computedClass();
-
-      untracked(() => this._button.setClass(computedClass));
-    });
-  }
-}

package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-slide-display.ts

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import { ClassValue } from 'clsx';
-import { HlmCarousel } from './hlm-carousel';
-
-@Component({
-  selector: 'hlm-carousel-slide-display',
-  standalone: true,
-  template: `
-    <span class="sr-only">{{ _labelContent() }}</span>
-    <div aria-hidden="true" [class]="slideClass()">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class]': '_computedClass()',
-  },
-})
-export class HlmCarouselSlideDisplay {
-  protected readonly _carousel = inject(HlmCarousel);
-
-  protected readonly _currentSlide = computed(() => this._carousel.currentSlide() + 1);
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected _computedClass = computed(() => hlm('', this.userClass()));
-
-  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/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel.ts

@@ -1,105 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  type InputSignal,
-  type Signal,
-  ViewEncapsulation,
-  computed,
-  input,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-import {
-  EmblaCarouselDirective,
-  type EmblaEventType,
-  type EmblaOptionsType,
-  type EmblaPluginType,
-} from 'embla-carousel-angular';
-
-@Component({
-  selector: 'hlm-carousel',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class]': '_computedClass()',
-    role: 'region',
-    'aria-roledescription': 'carousel',
-    '(keydown)': 'onKeydown($event)',
-  },
-  imports: [EmblaCarouselDirective],
-  template: `
-    <div
-      emblaCarousel
-      class="overflow-hidden"
-      [plugins]="plugins()"
-      [options]="_emblaOptions()"
-      [subscribeToEvents]="['init', 'select', 'reInit']"
-      (emblaChange)="onEmblaEvent($event)">
-      <ng-content select="hlm-carousel-content" />
-    </div>
-    <ng-content />
-  `,
-})
-export class HlmCarousel {
-  protected readonly _emblaCarousel = viewChild.required(EmblaCarouselDirective);
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected readonly _computedClass = computed(() => hlm('relative', this.userClass()));
-
-  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(() => ({
-    ...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();
-
-  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/generic/dialog/dialog.component.css

@@ -1,5 +0,0 @@
-@media (min-width: 640px) {
-  .dialog-content {
-    max-width: 425px;
-  }
-}

package/generic/dialog/dialog.component.html

@@ -1,3 +0,0 @@
-<hlm-dialog #dialogRef>
-  <hlm-dialog-content *hlmDialogContent="let ctx" class="dialog-content" />
-</hlm-dialog>

package/generic/dialog/dialog.component.ts

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, effect, inject, viewChild } from '@angular/core';
-import { BrnDialog } from '@spartan-ng/brain/dialog';
-import { HlmDialog, HlmDialogContent, HlmDialogService } from './libs/ui-dialog-helm/src';
-
-@Component({
-  selector: 'sdc-dialog',
-  imports: [HlmDialogContent, HlmDialog],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './dialog.component.html',
-})
-export class DialogComponent {
-  public dialogService = inject(HlmDialogService);
-  public dialogComponent = viewChild(BrnDialog);
-
-  public constructor() {
-    effect(() => {
-      this.dialogService.component.set(this.dialogComponent() ?? null);
-    });
-  }
-}

package/generic/dialog/dialog.stories.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { DialogComponent } from './dialog.component';
-
-const meta: Meta<DialogComponent> = {
-  title: 'Generic/Dialog',
-  component: DialogComponent,
-  id: 'Dialog',
-};
-
-export default meta;
-
-type Story = StoryObj<DialogComponent>;
-
-export const Primary: Story = {};

package/generic/dialog/index.ts

@@ -1 +0,0 @@
-export * from './public-api';

package/generic/dialog/libs/ui-dialog-helm/src/index.ts

@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-
-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 { HlmDialogTitle } from './lib/hlm-dialog-title';
-
-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-title';
-export * from './lib/hlm-dialog.service';
-
-export const HlmDialogImports = [
-  HlmDialog,
-  HlmDialogClose,
-  HlmDialogContent,
-  HlmDialogDescription,
-  HlmDialogFooter,
-  HlmDialogHeader,
-  HlmDialogOverlay,
-  HlmDialogTitle,
-] as const;
-
-@NgModule({
-  // imports: [...HlmDialogImports],
-  // exports: [...HlmDialogImports],
-})
-export class HlmDialogModule {}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-close.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-  selector: '[hlmDialogClose],[brnDialogClose][hlm]',
-  host: {
-    '[class]': '_computedClass()',
-  },
-})
-export class HlmDialogClose {
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-  protected readonly _computedClass = computed(() =>
-    hlm(
-      'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-      this.userClass()
-    )
-  );
-}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-content.ts

@@ -1,56 +0,0 @@
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
-import { BrnDialogClose, BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
-import type { ClassValue } from 'clsx';
-import { HlmDialogClose } from './hlm-dialog-close';
-
-@Component({
-  selector: 'hlm-dialog-content',
-
-  imports: [NgComponentOutlet, BrnDialogClose, HlmDialogClose, NgIcon, HlmIcon],
-  providers: [provideIcons({ lucideX })],
-  host: {
-    '[class]': '_computedClass()',
-    '[attr.data-state]': 'state()',
-  },
-  template: `
-    @if (component) {
-      <ng-container [ngComponentOutlet]="component" [ngComponentOutletInputs]="componentInputs()" />
-    } @else {
-      <ng-content />
-    }
-
-    <button brnDialogClose class="animated-button" hlm>
-      <span class="sr-only">Close</span>
-      <ng-icon hlm name="lucideX" size="sm" />
-    </button>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class HlmDialogContent {
-  private readonly _dialogRef = inject(BrnDialogRef);
-  private readonly _dialogContext = injectBrnDialogContext({ optional: true });
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-  public readonly state = computed(() => this._dialogRef?.state() ?? 'closed');
-  public readonly componentInputs = computed(() => {
-    const { $component, $dynamicComponentClass, close, ...rest } = this._dialogContext;
-    return rest;
-  });
-  protected readonly _computedClass = computed(() =>
-    hlm(
-      'border-border grid w-full max-w-lg relative gap-4 border bg-white p-6 shadow-lg [animation-duration:200] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] rounded-lg md:w-full',
-      this.userClass(),
-      this._dynamicComponentClass
-    )
-  );
-
-  public readonly component = this._dialogContext?.$component;
-  private readonly _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
-}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-description.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-  selector: '[hlmDialogDescription]',
-
-  host: {
-    '[class]': '_computedClass()',
-  },
-  hostDirectives: [BrnDialogDescription],
-})
-export class HlmDialogDescription {
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
-}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-footer.ts

@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Component({
-  selector: 'hlm-dialog-footer',
-
-  template: ` <ng-content /> `,
-  host: {
-    '[class]': '_computedClass()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HlmDialogFooter {
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected _computedClass = computed(() =>
-    hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.userClass())
-  );
-}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-header.ts

@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Component({
-  selector: 'hlm-dialog-header',
-
-  template: ` <ng-content /> `,
-  host: {
-    '[class]': '_computedClass()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HlmDialogHeader {
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected _computedClass = computed(() =>
-    hlm('flex flex-col space-y-1.5 text-center sm:text-left', this.userClass())
-  );
-}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-overlay.ts

@@ -1,23 +0,0 @@
-import { computed, Directive, effect, input, untracked } from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-export const hlmDialogOverlayClass =
-  'bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
-
-@Directive({
-  selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',
-})
-export class HlmDialogOverlay {
-  private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
-
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected readonly _computedClass = computed(() => hlm(hlmDialogOverlayClass, this.userClass()));
-
-  constructor() {
-    effect(() => {
-      const newClass = this._computedClass();
-      untracked(() => this._classSettable?.setClassToCustomElement(newClass));
-    });
-  }
-}

package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-title.ts

@@ -1,19 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-  selector: '[hlmDialogTitle]',
-
-  host: {
-    '[class]': '_computedClass()',
-  },
-  hostDirectives: [BrnDialogTitle],
-})
-export class HlmDialogTitle {
-  public readonly userClass = input<ClassValue>('', { alias: 'class' });
-  protected readonly _computedClass = computed(() =>
-    hlm('text-lg font-semibold leading-none tracking-tight', this.userClass())
-  );
-}