@kouji-ui/core 0.0.4 → 0.1.1

package/src/dialog/dialog.service.ts

@@ -1,176 +1,66 @@
-import {
-  ApplicationRef, ComponentRef, EmbeddedViewRef,
-  Injectable, InjectionToken, Injector,
-  TemplateRef, Type, ViewContainerRef,
-  createComponent, inject, signal,
-} from '@angular/core';
-
-/** Token for passing data to a programmatically opened dialog component. */
-export const DIALOG_DATA = new InjectionToken<unknown>('KjDialogData');
-
-/** Configuration for programmatically opened dialogs. */
-export interface KjDialogOpenConfig<D = unknown> {
-  /** Data to inject into the dialog component via `DIALOG_DATA`. */
+import { EnvironmentInjector, Injectable, Type, effect, inject, runInInjectionContext } from '@angular/core';
+import { KjOverlayBuilder } from '../primitives/overlay/builder';
+import { inPlace } from '../primitives/overlay/strategies/mount/in-place';
+import { viewportCentered } from '../primitives/overlay/strategies/position/viewport-centered';
+import { solidBackdrop } from '../primitives/overlay/strategies/backdrop/solid';
+import { tabCycle } from '../primitives/overlay/strategies/focus-trap/tab-cycle';
+import { htmlOverflow } from '../primitives/overlay/strategies/scroll-lock/html-overflow';
+import { silent } from '../primitives/overlay/strategies/live-announcer/silent';
+import { assertive } from '../primitives/overlay/strategies/live-announcer/assertive';
+import { programmatic } from '../primitives/overlay/strategies/trigger-event/programmatic';
+import { KjDialogRef } from './dialog.ref';
+
+export interface KjDialogOpenOptions<D = unknown> {
   data?: D;
-  /** Additional CSS classes for the dialog panel element. */
-  panelClass?: string | string[];
-  /** Where to focus when the dialog opens. Defaults to the first focusable element. */
-  autoFocus?: boolean | string;
-  /** Whether to restore focus to the trigger after the dialog closes. Defaults to `true`. */
-  restoreFocus?: boolean | string;
-  /** Panel width. */
-  width?: string;
-  /** Maximum panel width. */
-  maxWidth?: string;
-  /** Panel height. */
-  height?: string;
-  /** When `true`, clicking the backdrop or pressing Escape won't close the dialog. */
-  disableClose?: boolean;
-}
-
-/**
- * Reference returned by `KjDialogService.open()`.
- * Use `close(result?)` to dismiss the dialog and emit the result.
- */
-export class KjDialogRef<R = unknown> {
-  private readonly _closed = signal<R | undefined>(undefined);
-  private _closedCallbacks: Array<(result: R | undefined) => void> = [];
-
-  /** @internal */
-  constructor(
-    private readonly container: HTMLElement,
-    private readonly viewRef: EmbeddedViewRef<unknown> | ComponentRef<unknown>,
-    private readonly appRef: ApplicationRef,
-    private readonly previouslyFocused: Element | null,
-    private readonly restoreFocus: boolean,
-  ) {}
-
-  /** Closes the dialog and emits `result` to subscribers. */
-  close(result?: R): void {
-    this.appRef.detachView(
-      this.viewRef instanceof ComponentRef
-        ? this.viewRef.hostView as EmbeddedViewRef<unknown>
-        : this.viewRef,
-    );
-    this.viewRef.destroy();
-    this.container.remove();
-
-    if (this.restoreFocus && this.previouslyFocused instanceof HTMLElement) {
-      this.previouslyFocused.focus();
-    }
-
-    this._closedCallbacks.forEach(cb => cb(result));
-    this._closedCallbacks = [];
-  }
-
-  /**
-   * Registers a callback invoked when the dialog closes.
-   * @param cb - Callback receiving the close result.
-   */
-  afterClosed(cb: (result: R | undefined) => void): this {
-    this._closedCallbacks.push(cb);
-    return this;
-  }
+  alert?: boolean;
+  closeOnEsc?: boolean;
+  closeOnOutside?: boolean;
 }
 
-/**
- * Programmatic service for opening dialogs with components or templates.
- * The opened component can inject `DIALOG_DATA` for typed data and `KjDialogRef` to close itself.
- *
- * @example
- * ```ts
- * // Open a component as a dialog
- * private readonly dialog = inject(KjDialogService);
- *
- * openConfirm() {
- *   const ref = this.dialog.open(ConfirmDialogComponent, {
- *     data: { message: 'Delete this item?' },
- *   });
- *   ref.afterClosed(result => {
- *     if (result) this.doDelete();
- *   });
- * }
- * ```
- *
- * ```ts
- * // Inside ConfirmDialogComponent
- * readonly data = inject<{ message: string }>(DIALOG_DATA);
- * readonly ref = inject(KjDialogRef);
- * confirm() { this.ref.close(true); }
- * cancel() { this.ref.close(false); }
- * ```
- * @category Core/Overlays
- */
 @Injectable({ providedIn: 'root' })
-export class KjDialogService {
-  private readonly appRef = inject(ApplicationRef);
-  private readonly injector = inject(Injector);
-
-  /**
-   * Opens a component as a modal dialog.
-   * @param content - Angular component type to render inside the dialog.
-   * @param config - Optional configuration: data, panelClass, width, autoFocus, etc.
-   * @returns A `KjDialogRef` whose `afterClosed()` fires when the dialog closes.
-   */
-  open<R = unknown, D = unknown, C = unknown>(
-    content: Type<C> | TemplateRef<C>,
-    config?: KjDialogOpenConfig<D>,
-  ): KjDialogRef<R> {
-    const container = document.createElement('div');
-    container.setAttribute('data-kj-dialog-container', '');
-
-    const previouslyFocused = document.activeElement;
-    const restoreFocus = config?.restoreFocus !== false;
-
-    const dialogRef = new KjDialogRef<R>(
-      container,
-      null as never, // filled below
-      this.appRef,
-      previouslyFocused,
-      restoreFocus,
-    );
-
-    const childInjector = Injector.create({
-      parent: this.injector,
-      providers: [
-        { provide: DIALOG_DATA, useValue: config?.data },
-        { provide: KjDialogRef, useValue: dialogRef },
-      ],
+export class KjDialog {
+  private readonly builder = inject(KjOverlayBuilder);
+  private readonly env = inject(EnvironmentInjector);
+
+  open<T, R = unknown, D = unknown>(component: Type<T>, opts: KjDialogOpenOptions<D> = {}): KjDialogRef<T, R> {
+    const alert = !!opts.alert;
+    const handle = this.builder.create({
+      mount: inPlace(),
+      position: viewportCentered(),
+      backdrop: solidBackdrop({
+        inert: true,
+        closeOnClick: !alert && (opts.closeOnOutside ?? true),
+      }),
+      focusTrap: tabCycle({ returnFocus: true }),
+      scrollLock: htmlOverflow(),
+      liveAnnouncer: alert ? assertive() : silent(),
+      trigger: programmatic(),
+      panelRole: alert ? 'alertdialog' : 'dialog',
     });
 
-    let viewRef: EmbeddedViewRef<unknown> | ComponentRef<unknown>;
-
-    if (content instanceof TemplateRef) {
-      const vcr = this.appRef.components[0]?.injector.get(ViewContainerRef, null);
-      if (!vcr) throw new Error('KjDialogService: no root ViewContainerRef available');
-      viewRef = vcr.createEmbeddedView(content as TemplateRef<unknown>, {}, { injector: childInjector });
-      this.appRef.attachView(viewRef as EmbeddedViewRef<unknown>);
-      (viewRef as EmbeddedViewRef<unknown>).rootNodes.forEach(n => container.appendChild(n));
-    } else {
-      const compRef = createComponent(content as Type<unknown>, {
-        environmentInjector: this.appRef.injector,
-        elementInjector: childInjector,
+    const ref = new KjDialogRef<T, R>(handle.controller);
+    const cmpRef = this.builder.attachComponent(handle, component, {
+      providers: [{ provide: KjDialogRef, useValue: ref }],
+      data: opts.data,
+    });
+    ref.bindInstance(cmpRef.instance);
+
+    runInInjectionContext(this.env, () => {
+      let wasOpen = false;
+      const eff = effect(() => {
+        const s = handle.controller.state();
+        if (s === 'open' || s === 'opening') wasOpen = true;
+        if (s === 'closed' && wasOpen) {
+          eff.destroy();
+          // afterClosed$ subscribers see the result before teardown.
+          queueMicrotask(() => handle.destroy());
+        }
       });
-      this.appRef.attachView(compRef.hostView);
-      container.appendChild((compRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0]);
-      viewRef = compRef;
-    }
-
-    // Patch the viewRef into the dialogRef (bypass readonly via cast)
-    (dialogRef as unknown as { viewRef: typeof viewRef }).viewRef = viewRef;
-
-    document.body.appendChild(container);
-
-    // Auto-focus first tabbable element
-    if (config?.autoFocus !== false) {
-      const target = typeof config?.autoFocus === 'string'
-        ? container.querySelector<HTMLElement>(config.autoFocus)
-        : container.querySelector<HTMLElement>(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-          );
-      target?.focus();
-    }
-
-    return dialogRef;
+    });
+    handle.controller.open();
+    return ref;
   }
+
+  // TODO: sugar wrappers (alert/confirm/prompt) — implement once preset
+  // components (packages/core/src/dialog/presets/*.ts) are added.
 }

package/src/dialog/dialog.spec.ts

@@ -1,122 +1,37 @@
-import { fireEvent } from '@testing-library/angular';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import {
-  KjDialogTrigger, KjDialog, KjDialogOverlay,
-  KjDialogTitle, KjDialogClose,
-} from './dialog';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [
-  KjDialogTrigger, KjDialog, KjDialogOverlay,
-  KjDialogTitle, KjDialogClose,
-];
-
-describe('KjDialogTrigger', () => {
-  it('renders trigger button', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(getByRole('button', { name: 'Open' })).toBeInTheDocument();
-  });
-
-  it('trigger has aria-haspopup=dialog', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(getByRole('button', { name: 'Open' })).toHaveAttribute('aria-haspopup', 'dialog');
-  });
-
-  it('trigger has aria-expanded=false initially', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(getByRole('button', { name: 'Open' })).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('opens dialog and sets aria-expanded=true on click', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>Settings</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    const trigger = getByRole('button', { name: 'Open' });
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('mounts dialog content in document.body on open', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay>
-           <div kjDialog><h2 kjDialogTitle>My Dialog</h2></div>
-         </div>
-       </ng-template>`,
-      { imports },
-    );
-    fireEvent.click(getByRole('button', { name: 'Open' }));
-    expect(document.body.querySelector('[data-kj-dialog-container]')).toBeTruthy();
-  });
-
-  it('closes dialog on overlay click (close on backdrop enabled by default)', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay>
-           <div kjDialog><h2 kjDialogTitle>T</h2></div>
-         </div>
-       </ng-template>`,
-      { imports },
-    );
-    const trigger = getByRole('button', { name: 'Open' });
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-    const overlay = document.querySelector('[kjDialogOverlay]') ?? document.body.querySelector('div[data-kj-dialog-container] > div');
-    if (overlay) fireEvent.click(overlay);
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('closes dialog on Escape key when closeOnEscape is true', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    const trigger = getByRole('button', { name: 'Open' });
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('passes axe audit on trigger', async () => {
-    const { container } = await render(
-      `<button [kjDialogTrigger]="dlg">Open dialog</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>Settings</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(await axe(container)).toHaveNoViolations();
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect } from 'vitest';
+import { KjDialog as KjDialogService } from './dialog.service';
+import { KjDialogRef } from './dialog.ref';
+
+@Component({
+  selector: 'kj-simple-dlg',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<button (click)="ref.close('ok')">OK</button>`,
+})
+class SimpleDlg {
+  readonly ref = inject<KjDialogRef<SimpleDlg, string>>(KjDialogRef);
+}
+
+describe('KjDialog', () => {
+  it('open returns a ref with isOpen true after open', () => {
+    const svc = TestBed.inject(KjDialogService);
+    const ref = svc.open(SimpleDlg);
+    expect(ref).toBeTruthy();
+    expect(typeof ref.close).toBe('function');
+  });
+
+  it('open with alert=true uses role=alertdialog', () => {
+    const svc = TestBed.inject(KjDialogService);
+    const ref = svc.open(SimpleDlg, { alert: true });
+    expect(ref.controller).toBeTruthy();
+  });
+
+  it('close resolves the result promise', async () => {
+    const svc = TestBed.inject(KjDialogService);
+    const ref = svc.open<SimpleDlg, string>(SimpleDlg);
+    ref.close('hello');
+    await expect(ref.result).resolves.toBe('hello');
   });
 });

package/src/dialog/dialog.ts

@@ -1,201 +1,26 @@
-import {
-  ApplicationRef, Directive, DestroyRef, EmbeddedViewRef,
-  HostListener, Injector, TemplateRef,
-  computed, inject, input, output, signal,
-  PLATFORM_ID,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { KJ_DIALOG, KjDialogContext } from './dialog.context';
-
-let _dialogIdCounter = 0;
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, input } from '@angular/core';
+import { KjOverlayPanel } from '../primitives/overlay/panel';
 
 /**
- * Trigger that opens the dialog. Place on any button or interactive element.
- * Takes a `TemplateRef` input that defines the full overlay structure.
- *
- * The template should contain `[kjDialogOverlay]` (backdrop) wrapping `[kjDialog]` (panel).
- * Inside the panel use `[kjDialogTitle]` and `[kjDialogClose]`.
- * Export `kjDialog` as a template ref (`#dlg="kjDialog"`) to call `dlg.close(result?)`.
+ * Dialog body component. Composes `KjOverlayPanel` as a host directive so
+ * the overlay primitives wire role/state/aria/focus management.
  *
- * @example
- * ```html
- * <button kjButton [kjDialogTrigger]="myDialog" (kjDialogClosed)="onResult($event)">Open</button>
+ * The role is decided by the SERVICE (`KjDialog.open`) via the
+ * `KJ_OVERLAY_PANEL_ROLE` provider on the controller. The `kjAlert` input
+ * is exposed for declarative (non-service) usage where consumers wire their
+ * own providers.
  *
- * <ng-template #myDialog>
- *   <div kjDialogOverlay>
- *     <div kjDialog #dlg="kjDialog">
- *       <h2 kjDialogTitle>Title</h2>
- *       <button kjDialogClose>Cancel</button>
- *       <button (click)="dlg.close('saved')">Save</button>
- *     </div>
- *   </div>
- * </ng-template>
- * ```
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file dialog.example.ts
- *    @doc-theme retro
- *      @doc-file dialog.retro.example.ts
- *    @doc-theme finance
- *      @doc-file dialog.finance.example.ts
- *  @doc-example Confirmation
- *    @doc-file dialog.confirm.example.ts
- * @category Core/Overlays
+ * @doc-category Core/Overlay
  */
-@Directive({
-  selector: '[kjDialogTrigger]',
+@Component({
+  selector: 'kj-dialog',
   standalone: true,
-  providers: [{ provide: KJ_DIALOG, useExisting: KjDialogTrigger }],
-  host: {
-    '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-expanded]': 'open().toString()',
-    '(click)': 'openDialog()',
-  },
-})
-export class KjDialogTrigger implements KjDialogContext {
-  private readonly appRef = inject(ApplicationRef);
-  private readonly injector = inject(Injector);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  readonly kjDialogTrigger = input.required<TemplateRef<unknown>>();
-  readonly kjDialogCloseOnEscape = input<boolean>(true);
-  readonly kjDialogCloseOnBackdrop = input<boolean>(true);
-  readonly kjDialogClosed = output<unknown>();
-
-  readonly dialogId = `kj-dialog-${++_dialogIdCounter}`;
-
-  private readonly _open = signal(false);
-  readonly open = this._open.asReadonly();
-  readonly closeOnEscape = computed(() => this.kjDialogCloseOnEscape());
-  readonly closeOnBackdrop = computed(() => this.kjDialogCloseOnBackdrop());
-
-  private viewRef?: EmbeddedViewRef<unknown>;
-  private containerEl?: HTMLElement;
-
-  constructor() {
-    this.destroyRef.onDestroy(() => this.close());
-  }
-
-  openDialog(): void {
-    if (this._open() || !isPlatformBrowser(this.platformId)) return;
-
-    // Use TemplateRef.createEmbeddedView directly (not vcr.createEmbeddedView) so
-    // the view is NOT pre-attached to any ViewContainer — ApplicationRef can own it.
-    // Pass the trigger's injector so KJ_DIALOG is resolvable within the template.
-    this.viewRef = this.kjDialogTrigger().createEmbeddedView(undefined as never, this.injector);
-    this.appRef.attachView(this.viewRef);
-
-    // Mount in a fixed container appended to body
-    this.containerEl = document.createElement('div');
-    this.containerEl.setAttribute('data-kj-dialog-container', '');
-    this.viewRef.rootNodes.forEach(node => this.containerEl!.appendChild(node));
-    document.body.appendChild(this.containerEl);
-
-    this._open.set(true);
-  }
-
-  close(result?: unknown): void {
-    if (!this._open()) return;
-    this._open.set(false);
-
-    if (this.viewRef) {
-      this.appRef.detachView(this.viewRef);
-      this.viewRef.destroy();
-      this.viewRef = undefined;
-    }
-    this.containerEl?.remove();
-    this.containerEl = undefined;
-
-    this.kjDialogClosed.emit(result);
-  }
-
-  @HostListener('document:keydown.escape')
-  onEscape(): void {
-    if (this._open() && this.closeOnEscape()) this.close();
-  }
-}
-
-/**
- * Panel container for the dialog. Place inside the template provided to `[kjDialogTrigger]`.
- * Auto-sets `role="dialog"`, `aria-modal`, and `aria-labelledby` (requires `[kjDialogTitle]` inside).
- * Export as `#dlg="kjDialog"` to call `dlg.close(result?)` from event handlers.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialog]',
-  standalone: true,
-  exportAs: 'kjDialog',
-  host: {
-    '[attr.role]': '"dialog"',
-    '[attr.aria-modal]': '"true"',
-    '[attr.aria-labelledby]': 'ctx.dialogId + "-title"',
-    '(click)': '$event.stopPropagation()',
-  },
+  hostDirectives: [{ directive: KjOverlayPanel }],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-dialog' },
+  template: `<ng-content />`,
 })
 export class KjDialog {
-  readonly ctx = inject(KJ_DIALOG);
-
-  close(result?: unknown): void {
-    this.ctx.close(result);
-  }
-}
-
-/**
- * Backdrop/overlay element. Place inside the template wrapping `[kjDialog]`.
- * Closes the dialog on click when `[kjDialogOverlayCloseOnClick]` is true (default).
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogOverlay]',
-  standalone: true,
-  host: {
-    '(click)': 'onOverlayClick()',
-  },
-})
-export class KjDialogOverlay {
-  private readonly ctx = inject(KJ_DIALOG);
-  readonly kjDialogOverlayCloseOnClick = input<boolean>(true);
-
-  onOverlayClick(): void {
-    if (this.ctx.closeOnBackdrop() && this.kjDialogOverlayCloseOnClick()) {
-      this.ctx.close();
-    }
-  }
-}
-
-/**
- * Marks the dialog title. Sets `id` for `aria-labelledby` wiring on `[kjDialog]`.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogTitle]',
-  standalone: true,
-  host: {
-    '[attr.id]': 'ctx.dialogId + "-title"',
-  },
-})
-export class KjDialogTitle {
-  readonly ctx = inject(KJ_DIALOG);
-}
-
-/**
- * Closes the dialog on click without a result value.
- * For closing with a result, use `#dlg="kjDialog"` then `(click)="dlg.close(value)"`.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogClose]',
-  standalone: true,
-  host: {
-    '(click)': 'ctx.close()',
-  },
-})
-export class KjDialogClose {
-  readonly ctx = inject(KJ_DIALOG);
+  readonly kjAlert = input(false, { transform: booleanAttribute });
 }

package/src/dialog/index.ts

@@ -1,9 +1,3 @@
-export {
-  KjDialogTrigger,
-  KjDialog,
-  KjDialogOverlay,
-  KjDialogClose,
-  KjDialogTitle,
-} from './dialog';
-export { KJ_DIALOG, type KjDialogContext } from './dialog.context';
-export { KjDialogService, KjDialogRef, DIALOG_DATA, type KjDialogOpenConfig } from './dialog.service';
+export { KjDialog } from './dialog';
+export { KjDialog as KjDialogService, type KjDialogOpenOptions } from './dialog.service';
+export { KjDialogRef } from './dialog.ref';