@3ddv/software-division-components 1.4.1 → 1.4.2

package/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/index.ts

@@ -0,0 +1,29 @@
+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/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-content.ts

@@ -0,0 +1,23 @@
+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/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-item.ts

@@ -0,0 +1,25 @@
+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/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-next.ts

@@ -0,0 +1,58 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  untracked,
+} from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '../../../../../button/ui/ui-button-helm/src';
+import { HlmIcon } from '../../../../../icon/lib/ui-icon-helm/src';
+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/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-previous.ts

@@ -0,0 +1,61 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  untracked,
+} from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '../../../../../button/ui/ui-button-helm/src';
+import { HlmIcon } from '../../../../../icon/lib/ui-icon-helm/src';
+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/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-slide-display.ts

@@ -0,0 +1,36 @@
+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/projects/software-division-components/src/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel.ts

@@ -0,0 +1,105 @@
+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/projects/software-division-components/src/generic/dialog/dialog.component.css

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

package/projects/software-division-components/src/generic/dialog/dialog.component.html

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

package/projects/software-division-components/src/generic/dialog/dialog.component.ts

@@ -0,0 +1,20 @@
+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/projects/software-division-components/src/generic/dialog/dialog.stories.ts

@@ -0,0 +1,14 @@
+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/projects/software-division-components/src/generic/dialog/index.ts

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

package/{generic/dialog/libs/ui-dialog-helm/src/index.d.ts → projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/index.ts}

@@ -1,3 +1,5 @@
+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';
@@ -6,7 +8,7 @@ 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';
-import * as i0 from "@angular/core";
+
 export * from './lib/hlm-dialog';
 export * from './lib/hlm-dialog-close';
 export * from './lib/hlm-dialog-content';
@@ -16,10 +18,20 @@ 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 declare const HlmDialogImports: readonly [typeof HlmDialog, typeof HlmDialogClose, typeof HlmDialogContent, typeof HlmDialogDescription, typeof HlmDialogFooter, typeof HlmDialogHeader, typeof HlmDialogOverlay, typeof HlmDialogTitle];
-export declare class HlmDialogModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<HlmDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmDialogModule, never, never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<HlmDialogModule>;
-}
-//# sourceMappingURL=index.d.ts.map
+
+export const HlmDialogImports = [
+  HlmDialog,
+  HlmDialogClose,
+  HlmDialogContent,
+  HlmDialogDescription,
+  HlmDialogFooter,
+  HlmDialogHeader,
+  HlmDialogOverlay,
+  HlmDialogTitle,
+] as const;
+
+@NgModule({
+  // imports: [...HlmDialogImports],
+  // exports: [...HlmDialogImports],
+})
+export class HlmDialogModule {}

package/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-close.ts

@@ -0,0 +1,20 @@
+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/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-content.ts

@@ -0,0 +1,56 @@
+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 { HlmIcon } from '../../../../../icon/lib/ui-icon-helm/src';
+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/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-description.ts

@@ -0,0 +1,17 @@
+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/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-footer.ts

@@ -0,0 +1,19 @@
+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/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-header.ts

@@ -0,0 +1,19 @@
+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/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-overlay.ts

@@ -0,0 +1,23 @@
+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/projects/software-division-components/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-title.ts

@@ -0,0 +1,19 @@
+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())
+  );
+}