@shadng/sng-ui 1.0.0

package/src/lib/dialog/sng-dialog-title.ts

@@ -0,0 +1,52 @@
+import {
+  Component,
+  input,
+  computed,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from './cn';
+
+/** Heading level for dialog title. */
+export type SngDialogTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/**
+ * Title component for dialog content.
+ * Renders a heading element to provide consistent dialog title styling.
+ *
+ * @example
+ * ```html
+ * <sng-dialog-title>Edit Profile</sng-dialog-title>
+ * <sng-dialog-title level="h3">Settings</sng-dialog-title>
+ * ```
+ */
+@Component({
+  selector: 'sng-dialog-title',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'contents',
+  },
+  template: `
+    @switch (level()) {
+      @case ('h1') { <h1 [class]="titleClasses()"><ng-content /></h1> }
+      @case ('h3') { <h3 [class]="titleClasses()"><ng-content /></h3> }
+      @case ('h4') { <h4 [class]="titleClasses()"><ng-content /></h4> }
+      @case ('h5') { <h5 [class]="titleClasses()"><ng-content /></h5> }
+      @case ('h6') { <h6 [class]="titleClasses()"><ng-content /></h6> }
+      @default { <h2 [class]="titleClasses()"><ng-content /></h2> }
+    }
+  `,
+})
+export class SngDialogTitle {
+  /** Heading level. */
+  level = input<SngDialogTitleLevel>('h2');
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  titleClasses = computed(() =>
+    cn('text-lg leading-none font-semibold', this.class())
+  );
+}

package/src/lib/dialog/sng-dialog.service.ts

@@ -0,0 +1,222 @@
+import {
+  Injectable,
+  Injector,
+  InjectionToken,
+  Type,
+  inject,
+  signal,
+} from '@angular/core';
+import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+import { SNG_DIALOG_CLOSE, SNG_DIALOG_INSTANCE } from './sng-dialog';
+
+/** Injection token for passing data to dialog components */
+export const SNG_DIALOG_DATA = new InjectionToken<unknown>('SNG_DIALOG_DATA');
+
+/** Configuration options for opening a dialog */
+export interface SngDialogConfig<D = unknown> {
+  /** Data to pass to the dialog component (inject with SNG_DIALOG_DATA) */
+  data?: D;
+  /** Width of the dialog (e.g., '400px', '80vw') */
+  width?: string;
+  /** Max width of the dialog */
+  maxWidth?: string;
+  /** Height of the dialog */
+  height?: string;
+  /** Max height of the dialog */
+  maxHeight?: string;
+  /** Whether clicking the backdrop closes the dialog (default: true) */
+  disableClose?: boolean;
+  /** Custom panel class for styling */
+  panelClass?: string | string[];
+  /** Whether the dialog has a backdrop (default: true) */
+  hasBackdrop?: boolean;
+  /** Custom backdrop class */
+  backdropClass?: string;
+}
+
+/** Reference to an opened dialog */
+export class SngDialogRef<T = unknown, R = unknown> {
+  private readonly _afterClosed = new Subject<R | undefined>();
+  private _result: R | undefined;
+  private _closing = false;
+
+  /** @internal Signal for SngDialogContent to track open state */
+  _isOpenSignal: ReturnType<typeof signal<boolean>> | null = null;
+
+  /** Observable that emits when the dialog is closed */
+  readonly afterClosed$ = this._afterClosed.asObservable();
+
+  constructor(
+    private overlayRef: OverlayRef,
+    /** The component instance inside the dialog */
+    public readonly componentInstance: T
+  ) { }
+
+  /**
+   * Closes the dialog with a CSS exit animation, then disposes the overlay.
+   *
+   * **Animation lifecycle only** — triggers the exit animation by setting
+   * `data-state="closed"` on overlay elements and waits for all CSS animations
+   * to finish (via Web Animations API) before removing the overlay.
+   *
+   * Do not add business logic here. Instead, use `afterClosed$` to react
+   * after the dialog is fully closed:
+   * ```typescript
+   * dialogRef.afterClosed$.subscribe(result => {
+   *   if (result) this.saveData(result);
+   * });
+   * ```
+   *
+   * @param result Optional value to pass to `afterClosed$` subscribers.
+   */
+  close(result?: R): void {
+    if (this._closing) return;
+    this._closing = true;
+    this._result = result;
+
+    // Signal SngDialogContent that we're closing
+    this._isOpenSignal?.set(false);
+
+    // Set data-state="closed" directly on DOM to trigger CSS exit animations
+    const panel = this.overlayRef.overlayElement;
+    panel.querySelectorAll('[data-state]').forEach(el =>
+      el.setAttribute('data-state', 'closed')
+    );
+
+    const doDispose = () => {
+      this.overlayRef.dispose();
+      this._afterClosed.next(result);
+      this._afterClosed.complete();
+    };
+
+    // getAnimations() flushes styles, so newly triggered animations are returned.
+    const animations = panel.getAnimations({ subtree: true });
+    if (animations.length > 0) {
+      Promise.allSettled(animations.map(animation => animation.finished)).finally(doDispose);
+    } else {
+      doDispose();
+    }
+  }
+
+  /** Get the result (available after close) */
+  get result(): R | undefined {
+    return this._result;
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class SngDialogService {
+  private overlay = inject(Overlay);
+  private injector = inject(Injector);
+
+  /** Currently open dialogs (any type to allow heterogeneous dialog types) */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private openDialogs: SngDialogRef<any, any>[] = [];
+
+  /**
+   * Open a dialog with the given component
+   *
+   * @example
+   * ```typescript
+   * const dialogRef = this.dialogService.open(MyDialogComponent, {
+   *   data: { name: 'World' },
+   *   width: '400px'
+   * });
+   *
+   * dialogRef.afterClosed$.subscribe(result => {
+   *   console.log('Dialog closed with:', result);
+   * });
+   * ```
+   */
+  open<T, D = unknown, R = unknown>(
+    component: Type<T>,
+    config: SngDialogConfig<D> = {}
+  ): SngDialogRef<T, R> {
+    const overlayRef = this.createOverlay(config);
+    const dialogRef = new SngDialogRef<T, R>(overlayRef, null as unknown as T);
+
+    // Create adapter for SNG_DIALOG_INSTANCE (used by SngDialogContent)
+    // Start as false so the closed→open transition triggers sng-dialog-enter animation
+    const isOpenSignal = signal(false);
+    dialogRef._isOpenSignal = isOpenSignal;
+    const dialogInstanceAdapter = {
+      isOpen: isOpenSignal,
+      close: () => dialogRef.close(),
+      alert: () => false,
+    };
+
+    // Create injector with dialog-specific providers
+    const dialogInjector = Injector.create({
+      providers: [
+        { provide: SNG_DIALOG_DATA, useValue: config.data },
+        { provide: SNG_DIALOG_CLOSE, useValue: () => dialogRef.close() },
+        { provide: SngDialogRef, useValue: dialogRef },
+        { provide: SNG_DIALOG_INSTANCE, useValue: dialogInstanceAdapter },
+      ],
+      parent: this.injector,
+    });
+
+    // Create and attach the component
+    const portal = new ComponentPortal(component, null, dialogInjector);
+    const componentRef = overlayRef.attach(portal);
+
+    // Set open after attach so SngDialogContent transitions from closed→open
+    isOpenSignal.set(true);
+
+    // Update dialogRef with actual component instance
+    (dialogRef as SngDialogRef<T, R> & { componentInstance: T }).componentInstance = componentRef.instance;
+
+    // Handle backdrop click
+    if (!config.disableClose) {
+      overlayRef.backdropClick().subscribe(() => dialogRef.close());
+    }
+
+    // Track open dialogs
+    this.openDialogs.push(dialogRef);
+    dialogRef.afterClosed$.subscribe(() => {
+      const index = this.openDialogs.indexOf(dialogRef);
+      if (index > -1) {
+        this.openDialogs.splice(index, 1);
+      }
+    });
+
+    return dialogRef;
+  }
+
+  /** Close all open dialogs */
+  closeAll(): void {
+    // Make a copy because close() modifies the openDialogs array
+    [...this.openDialogs].forEach((dialogRef) => dialogRef.close());
+  }
+
+  private createOverlay(config: SngDialogConfig): OverlayRef {
+    const overlayConfig = new OverlayConfig({
+      hasBackdrop: false, // SngDialogContent handles its own backdrop overlay
+      panelClass: this.getPanelClasses(config),
+      width: config.width,
+      maxWidth: config.maxWidth || '90vw',
+      height: config.height,
+      maxHeight: config.maxHeight || '90vh',
+      positionStrategy: this.overlay
+        .position()
+        .global(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+    });
+
+    return this.overlay.create(overlayConfig);
+  }
+
+  private getPanelClasses(config: SngDialogConfig): string[] {
+    const classes = ['sng-dialog-panel'];
+    if (config.panelClass) {
+      if (Array.isArray(config.panelClass)) {
+        classes.push(...config.panelClass);
+      } else {
+        classes.push(config.panelClass);
+      }
+    }
+    return classes;
+  }
+}

package/src/lib/dialog/sng-dialog.ts

@@ -0,0 +1,224 @@
+import {
+  Component,
+  signal,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  Injector,
+  InjectionToken,
+  OnDestroy,
+  booleanAttribute,
+  Signal,
+  ElementRef,
+} from '@angular/core';
+import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+
+export const SNG_DIALOG_CLOSE = new InjectionToken<() => void>('SNG_DIALOG_CLOSE');
+export const SNG_DIALOG_INSTANCE = new InjectionToken<SngDialog>('SNG_DIALOG_INSTANCE');
+export const SNG_DIALOG_STATE = new InjectionToken<Signal<boolean>>('SNG_DIALOG_STATE');
+
+/**
+ * Modal dialog container using CDK Overlay.
+ * Manages dialog lifecycle including open/close animations.
+ *
+ * @example
+ * ```html
+ * <sng-dialog #dialog>
+ *   <sng-button (click)="dialog.open(dialogContent)">Open Dialog</sng-button>
+ *   <ng-template #dialogContent>
+ *     <sng-dialog-content>
+ *       <sng-dialog-header>
+ *         <sng-dialog-title>Dialog Title</sng-dialog-title>
+ *         <sng-dialog-description>Dialog description text.</sng-dialog-description>
+ *       </sng-dialog-header>
+ *       <sng-dialog-footer>
+ *         <sng-button class="border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground" (click)="dialog.close()">Cancel</sng-button>
+ *         <sng-button (click)="dialog.close()">Confirm</sng-button>
+ *       </sng-dialog-footer>
+ *     </sng-dialog-content>
+ *   </ng-template>
+ * </sng-dialog>
+ * ```
+ */
+@Component({
+  selector: 'sng-dialog',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'contents',
+  },
+  template: `<ng-content />`,
+})
+export class SngDialog implements OnDestroy {
+  private overlay = inject(Overlay);
+  private viewContainerRef = inject(ViewContainerRef);
+  private hostElementRef = inject(ElementRef<HTMLElement>);
+  private document = inject(DOCUMENT);
+  private overlayRef: OverlayRef | null = null;
+  private subscriptions = new Subscription();
+  private _closing = false;
+  /** Element that had focus before dialog opened (for focus restoration in alert mode) */
+  private triggerElement: HTMLElement | null = null;
+  /** Active signal driving the current dialog instance (for mimicking service behavior) */
+  private _activeOpenSignal: ReturnType<typeof signal<boolean>> | null = null;
+
+  /**
+   * When true, behaves like an alert dialog:
+   * - Uses role="alertdialog" instead of role="dialog"
+   * - Does NOT close on backdrop click (requires explicit action)
+   * - Restores focus to trigger element on close
+   */
+  alert = input(false, { transform: booleanAttribute });
+
+  /**
+   * Emits when open state changes.
+   */
+  openChange = output<boolean>();
+
+  /** Whether the dialog is currently open. */
+  isOpen = signal(false);
+
+  /**
+   * Opens the dialog with the given template content.
+   * Creates a CDK Overlay, attaches the template, and triggers the CSS enter animation.
+   *
+   * This method is part of the **animation lifecycle** — it handles overlay creation
+   * and the open transition. Do not place business logic here.
+   * Use `openChange` output or template event handlers for user actions.
+   *
+   * @param template The template to render inside the overlay.
+   * @param triggerElement Optional element to restore focus to on close (alert mode).
+   */
+  open(template: TemplateRef<unknown>, triggerElement?: HTMLElement) {
+    if (this.overlayRef || this._closing) return;
+
+    // Store trigger for focus restoration in alert mode
+    if (this.alert()) {
+      this.triggerElement = this.resolveTriggerElement(triggerElement);
+    }
+
+    // Create a fresh signal for this specific dialog instance to ensure
+    // pristine state for the animation (mimicking SngDialogService behavior)
+    const localIsOpen = signal(false);
+    this._activeOpenSignal = localIsOpen;
+
+    const dialogAdapter = {
+      isOpen: localIsOpen,
+      close: () => this.close(),
+      alert: this.alert,
+    };
+
+    const config = new OverlayConfig({
+      hasBackdrop: false, // We handle overlay in sng-dialog-content
+      panelClass: this.alert() ? 'sng-alert-dialog-panel' : 'sng-dialog-panel',
+      positionStrategy: this.overlay.position()
+        .global(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+    });
+
+    this.overlayRef = this.overlay.create(config);
+    const injector = Injector.create({
+      providers: [
+        { provide: SNG_DIALOG_CLOSE, useValue: () => this.close() },
+        { provide: SNG_DIALOG_INSTANCE, useValue: dialogAdapter },
+        // Use local signal for state token as well
+        { provide: SNG_DIALOG_STATE, useValue: localIsOpen },
+      ],
+      parent: this.viewContainerRef.injector,
+    });
+    const portal = new TemplatePortal(template, this.viewContainerRef, null, injector);
+    this.overlayRef.attach(portal);
+
+    // Sync local state with public state
+    localIsOpen.set(true);
+    this.isOpen.set(true);
+    this.openChange.emit(true);
+
+    // Overlay click is handled by sng-dialog-content's overlay div
+  }
+
+  /**
+   * Closes the dialog with a CSS exit animation, then disposes the overlay.
+   *
+   * **Animation lifecycle only** — this method triggers the exit animation by
+   * setting `data-state="closed"` on overlay elements and waits for all CSS
+   * animations to finish (via Web Animations API) before removing the overlay.
+   *
+   * Do not add business logic (API calls, navigation, data saving) here.
+   * Instead, use the `openChange` output or template event handlers:
+   * ```html
+   * <sng-button (click)="onSave(); dialog.close()">Save</sng-button>
+   * ```
+   * Or listen to `openChange`:
+   * ```html
+   * <sng-dialog (openChange)="onDialogStateChange($event)">
+   * ```
+   */
+  close() {
+    if (!this.overlayRef || this._closing) return;
+    this._closing = true;
+
+    this.isOpen.set(false);
+    this._activeOpenSignal?.set(false);
+    this.openChange.emit(false);
+
+    // Set data-state="closed" directly on DOM to trigger CSS exit animations
+    // immediately (Angular's signal binding will also set this on next CD — same value).
+    const panel = this.overlayRef.overlayElement;
+    panel.querySelectorAll('[data-state]').forEach(el =>
+      el.setAttribute('data-state', 'closed')
+    );
+
+    // getAnimations() flushes styles, so newly triggered animations are returned.
+    const animations = panel.getAnimations({ subtree: true });
+    if (animations.length > 0) {
+      Promise.allSettled(animations.map(animation => animation.finished)).finally(() => this.dispose());
+    } else {
+      this.dispose();
+    }
+  }
+
+  /** @internal Immediately removes the overlay from DOM. Called after exit animation completes. */
+  private dispose() {
+    this._closing = false;
+    this.subscriptions.unsubscribe();
+    this.subscriptions = new Subscription();
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+    this.isOpen.set(false);
+
+    // Restore focus to trigger element in alert mode
+    if (this.alert() && this.triggerElement) {
+      this.triggerElement.focus();
+      this.triggerElement = null;
+    }
+  }
+
+  /** Resolves a reliable trigger element for alert-mode focus restoration. */
+  private resolveTriggerElement(explicitTrigger?: HTMLElement): HTMLElement | null {
+    if (explicitTrigger) return explicitTrigger;
+
+    const activeElement = this.document.activeElement;
+    if (activeElement instanceof HTMLElement && activeElement !== this.document.body) {
+      return activeElement;
+    }
+
+    const host = this.hostElementRef.nativeElement;
+    const fallbackTrigger = host.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    ) as HTMLElement | null;
+    return fallbackTrigger ?? null;
+  }
+
+  ngOnDestroy() {
+    this.dispose();
+  }
+}

package/src/lib/drawer/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/drawer/index.ts

@@ -0,0 +1,36 @@
+export * from './sng-drawer';
+export * from './sng-drawer-trigger';
+export * from './sng-drawer-content';
+export * from './sng-drawer-header';
+export * from './sng-drawer-footer';
+export * from './sng-drawer-title';
+export * from './sng-drawer-description';
+export * from './sng-drawer-close';
+export * from './sng-drawer-handle';
+export * from './sng-drawer-wrapper';
+
+// =============================================================================
+// Sheet Backwards Compatibility Aliases (deprecated)
+// =============================================================================
+// Note: These are TypeScript-level aliases only. Template selectors have changed:
+// - Old: <sng-sheet>, <sng-sheet-content>, etc.
+// - New: <sng-drawer [modal]="true">, <sng-drawer-content>, etc.
+
+/** @deprecated Use SngDrawer with [modal]="true" instead */
+export { SngDrawer as SngSheet } from './sng-drawer';
+/** @deprecated Use SngDrawerTrigger instead */
+export { SngDrawerTrigger as SngSheetTrigger } from './sng-drawer-trigger';
+/** @deprecated Use SngDrawerContent instead */
+export { SngDrawerContent as SngSheetContent } from './sng-drawer-content';
+/** @deprecated Use SngDrawerHeader instead */
+export { SngDrawerHeader as SngSheetHeader } from './sng-drawer-header';
+/** @deprecated Use SngDrawerTitle instead */
+export { SngDrawerTitle as SngSheetTitle } from './sng-drawer-title';
+/** @deprecated Use SngDrawerDescription instead */
+export { SngDrawerDescription as SngSheetDescription } from './sng-drawer-description';
+/** @deprecated Use SngDrawerFooter instead */
+export { SngDrawerFooter as SngSheetFooter } from './sng-drawer-footer';
+/** @deprecated Use SngDrawerClose instead */
+export { SngDrawerClose as SngSheetClose } from './sng-drawer-close';
+/** @deprecated Use SngDrawerHandle instead */
+export { SngDrawerHandle as SngSheetHandle } from './sng-drawer-handle';

package/src/lib/drawer/sng-drawer-close.ts

@@ -0,0 +1,28 @@
+import { Directive, inject } from '@angular/core';
+import { SNG_DRAWER_CLOSE } from './sng-drawer';
+
+/**
+ * Directive that closes the drawer when clicked.
+ * Use as an element wrapper around any clickable content.
+ *
+ * @example
+ * ```html
+ * <sng-drawer-close>
+ *   <sng-button class="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90">Save</sng-button>
+ * </sng-drawer-close>
+ * ```
+ */
+@Directive({
+  selector: 'sng-drawer-close',
+  standalone: true,
+  host: {
+    '(click)': 'onClick()',
+  },
+})
+export class SngDrawerClose {
+  private closeFn = inject(SNG_DRAWER_CLOSE, { optional: true });
+
+  onClick() {
+    this.closeFn?.();
+  }
+}