@ng-zen/cli 21.1.1 → 21.2.0

package/schematics/ui/files/dialog/dialog.service.stories.ts

@@ -0,0 +1,174 @@
+import { Component, inject, input, output } from '@angular/core';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenDialog } from './dialog';
+import { DIALOG_REF, DialogConfig, ZenDialogService } from './dialog.service';
+
+type Story = StoryObj<ZenDialogService>;
+
+const component = `
+
+ZenDialogService stories demonstrate dynamic dialog usage via service.
+
+### Usage
+
+\`\`\`typescript
+// Dialog content component
+@Component({
+  template: \`
+    <p>{{ message() }}</p>
+    <button (click)="confirm.emit()">Confirm</button>
+  \`
+})
+class MyDialogContent {
+  readonly message = input<string>();
+  readonly confirm = output<void>();
+}
+
+// Open dialog
+@Component({
+  template: \`<button (click)="open()">Open</button>\`,
+   providers: [ZenDialogService],
+})
+export class OpenComponent {
+  private readonly dialogService = inject(ZenDialogService);
+
+  open(): void {
+    const ref = this.dialogService.open(MyDialogContent, {
+      header: 'My Dialog',
+      size: 'md',
+      inputs: { message: 'Hello!' },
+      outputs: { confirm: () => ref.close() },
+    });
+  }
+}
+\`\`\`
+
+### DIALOG_REF
+
+Close dialog from within the content component:
+
+\`\`\`typescript
+@Component({...})
+class MyDialogContent {
+  private readonly dialogRef = inject(DIALOG_REF);
+
+  close() {
+    this.dialogRef.close();
+  }
+}
+\`\`\`
+
+See [GitHub](https://github.com/kstepien3/ng-zen), [MDN Dialog Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+`;
+
+@Component({
+  template: `
+    <p>{{ message() }}</p>
+    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
+      <button (click)="confirmClick.emit('confirmed!')" zen-btn>Confirm</button>
+      <button (click)="cancel()" zen-btn>Cancel</button>
+    </div>
+  `,
+  standalone: true,
+  imports: [ZenButton],
+})
+class DemoDialogContent {
+  readonly message = input.required<string>();
+  readonly confirmClick = output<string>();
+  readonly cancelClick = output<void>();
+  readonly dialogRef = inject(DIALOG_REF);
+
+  cancel(): void {
+    this.cancelClick.emit();
+    this.dialogRef.close();
+  }
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-service-demo',
+  template: `
+    <button (click)="openDialog()" zen-btn>Open via Service</button>
+  `,
+  standalone: true,
+  imports: [ZenButton],
+  providers: [ZenDialogService],
+})
+class ServiceDemoComponent {
+  readonly args = input<DialogConfig<DemoDialogContent>>();
+
+  private readonly dialogService = inject(ZenDialogService);
+
+  openDialog(): void {
+    const ref = this.dialogService.open(DemoDialogContent, {
+      ...this.args(),
+      inputs: { message: 'This dialog was opened via service!' },
+      outputs: {
+        confirmClick: (value: string) => {
+          alert(`Confirmed: ${value}`);
+          ref.close();
+        },
+        cancelClick: () => {
+          console.info('Actually canceled via DIALOG_REF');
+        },
+      },
+    });
+  }
+}
+
+const meta = {
+  title: 'UI/Dialog/Dynamic',
+  component: ZenDialog,
+  tags: [],
+  parameters: {
+    docs: {
+      description: {
+        component,
+      },
+      canvas: {
+        sourceState: 'none',
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [ServiceDemoComponent],
+      providers: [ZenDialogService],
+    }),
+  ],
+  argTypes: {
+    size: {
+      name: 'size',
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+      table: {
+        category: 'inputs',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    header: { control: 'text', table: { category: 'inputs' } },
+    closable: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    backdrop: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    closeOnEscape: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    open: { control: 'boolean', table: { disable: true } },
+  },
+  args: {
+    size: 'md',
+    header: 'Dialog Title',
+    closable: true,
+    backdrop: true,
+    closeOnEscape: true,
+  },
+} satisfies Meta<ZenDialog>;
+
+export default meta;
+
+export const Default: Story = {
+  render: args => ({
+    props: { args },
+    template: `<app-service-demo [args]="args" />`,
+  }),
+};

package/schematics/ui/files/dialog/dialog.service.ts

@@ -0,0 +1,211 @@
+import {
+  ApplicationRef,
+  ComponentRef,
+  createComponent,
+  DestroyRef,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  OutputRef,
+  Type,
+  ViewContainerRef,
+} from '@angular/core';
+
+import { ZenDialog } from './dialog';
+
+type SignalValue<T> = T extends (...args: []) => infer V ? V : never;
+
+type ComponentInputs<T> = Partial<{
+  [K in keyof T as T[K] extends OutputRef<unknown> ? never : K]: SignalValue<T[K]>;
+}>;
+
+type ExtractOutputValue<T> = T extends OutputRef<infer V> ? V : never;
+
+type ComponentOutputs<T> = Partial<{
+  [K in keyof T as T[K] extends OutputRef<unknown> ? K : never]: (value: ExtractOutputValue<T[K]>) => void;
+}>;
+
+type ZenDialogInputs = Partial<ComponentInputs<Omit<ZenDialog, 'open'>>>;
+
+/**
+ * Configuration options for opening a dialog via `ZenDialogService.open()`.
+ *
+ * @typeParam T - The dynamic component type that will be rendered inside the dialog.
+ *
+ * @example
+ * ```typescript
+ * interface MyComponent {
+ *   readonly message: InputSignal<string>;
+ *   readonly confirm: OutputRef<string>;
+ * }
+ *
+ * const config: DialogConfig<MyComponent> = {
+ *   header: 'Confirm Action',
+ *   size: 'md',
+ *   inputs: { message: 'Are you sure?' },
+ *   outputs: {
+ *     confirm: (value) => console.log(value),
+ *   },
+ * };
+ * ```
+ */
+
+interface DialogConfig<T, TInputs = ComponentInputs<T>, TOutputs = ComponentOutputs<T>> extends ZenDialogInputs {
+  /** Input values for the dynamic component. */
+  inputs?: TInputs;
+
+  /** Output handlers for the dynamic component's outputs. */
+  outputs?: TOutputs;
+}
+
+/** Reference to an opened dialog. Provides `close()` and `componentInstance`. */
+class DialogRef<T> {
+  public componentInstance!: T;
+
+  constructor(private readonly closeFn: () => void) {}
+
+  close(): void {
+    this.closeFn();
+  }
+}
+
+/** Injection token to access DialogRef from within the dynamic component. */
+const DIALOG_REF = new InjectionToken<DialogRef<unknown>>('DIALOG_REF');
+
+/**
+ * ZenDialogService provides methods to dynamically open dialogs with custom components.
+ *
+ * @example
+ * ```typescript
+ * const ref = this.dialogService.open(MyComponent, {
+ *   header: 'My Dialog',
+ *   size: 'md',
+ *   inputs: { message: 'Hello!' },
+ *   outputs: { confirm: () => ref.close() },
+ * });
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ * @see [MDN Dialog Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+ */
+@Injectable()
+class ZenDialogService {
+  private readonly appRef = inject(ApplicationRef);
+  private readonly injector = inject(EnvironmentInjector);
+
+  private dialogRef: ComponentRef<ZenDialog> | null = null;
+  private contentRef: ComponentRef<unknown> | null = null;
+
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.closeInternal());
+  }
+
+  /**
+   * Opens a dialog with the specified component as content.
+   *
+   * @example
+   * ```typescript
+   * const ref = this.dialog.open(MyComponent, {
+   *   header: 'My Dialog',
+   *   size: 'md',
+   *   inputs: { message: 'Hello!' },
+   *   outputs: { confirm: () => ref.close() },
+   * });
+   * ```
+   */
+  open<T>(component: Type<T>, config?: DialogConfig<T>): DialogRef<T> {
+    if (this.dialogRef) {
+      this.closeInternal();
+    }
+
+    this.dialogRef = createComponent(ZenDialog, {
+      environmentInjector: this.injector,
+    });
+
+    this.dialogRef.instance.open.set(true);
+
+    const { inputs, outputs, ...inputMappings } = config || {};
+
+    for (const [key, value] of Object.entries(inputMappings)) {
+      if (value !== undefined) {
+        this.dialogRef.setInput(key, value);
+      }
+    }
+
+    this.appRef.attachView(this.dialogRef.hostView);
+
+    const dialogElement = this.dialogRef.location.nativeElement as HTMLDialogElement;
+    document.body.appendChild(dialogElement);
+
+    const dialogRefInstance = new DialogRef<T>(() => this.closeInternal());
+
+    const elementInjector = Injector.create({
+      parent: this.dialogRef.injector,
+      providers: [{ provide: DIALOG_REF, useValue: dialogRefInstance }],
+    });
+
+    this.contentRef = this.dialogRef.injector.get(ViewContainerRef).createComponent(component, {
+      environmentInjector: this.injector,
+      injector: elementInjector,
+    });
+
+    dialogRefInstance.componentInstance = this.contentRef.instance as T;
+
+    const contentElement = this.contentRef.location.nativeElement;
+    const contentContainer = dialogElement.querySelector('.zen-dialog-content');
+    contentContainer?.appendChild(contentElement);
+
+    if (inputs) {
+      for (const [key, value] of Object.entries(inputs)) {
+        this.contentRef.setInput(key, value);
+      }
+    }
+
+    if (outputs) {
+      const destroyRef = this.contentRef.injector.get(DestroyRef);
+
+      for (const [key, handler] of Object.entries(outputs as Record<string, (value: unknown) => void>)) {
+        const output = (this.contentRef.instance as Record<string, unknown>)[key];
+        if (this.isOutputRef(output)) {
+          const subscription = output.subscribe(handler);
+
+          destroyRef.onDestroy(() => subscription.unsubscribe());
+        }
+      }
+    }
+
+    dialogElement.addEventListener('close', () => this.closeInternal(), { once: true });
+
+    return dialogRefInstance;
+  }
+
+  private isOutputRef(value: unknown): value is OutputRef<unknown> {
+    return value !== null && typeof value === 'object' && 'subscribe' in value;
+  }
+
+  private closeInternal(): void {
+    if (!this.dialogRef) return;
+
+    const dialogElement = this.dialogRef.location.nativeElement as HTMLDialogElement;
+    if (dialogElement.open) {
+      dialogElement.close();
+    }
+
+    this.contentRef?.destroy();
+    this.contentRef = null;
+
+    dialogElement.remove();
+
+    this.dialogRef.destroy();
+    this.dialogRef = null;
+  }
+}
+
+export { DIALOG_REF, ZenDialogService };
+export type { DialogConfig, DialogRef };

package/schematics/ui/files/dialog/dialog.spec.ts

@@ -0,0 +1,249 @@
+import { Component, input, output, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ZenDialog } from './dialog';
+import { ZenDialogService } from './dialog.service';
+
+@Component({
+  template: `
+    <dialog
+      [backdrop]="backdrop()"
+      [closeOnEscape]="closeOnEscape()"
+      [header]="header()"
+      [id]="id()"
+      [size]="size()"
+      [(open)]="isOpen"
+      zen-dialog
+    >
+      <p>Dialog content</p>
+    </dialog>
+  `,
+  standalone: true,
+  imports: [ZenDialog],
+})
+class DialogTestComponent {
+  readonly isOpen = signal(false);
+  readonly header = signal('Test Dialog');
+  readonly size = signal<'sm' | 'md' | 'lg' | 'xl' | 'full'>('md');
+  readonly id = signal('test-dialog');
+  readonly backdrop = signal(true);
+  readonly closeOnEscape = signal(true);
+}
+
+@Component({
+  template: `
+    <p>{{ message() }}</p>
+    <button (click)="onConfirm()">Confirm</button>
+    <button (click)="onCancel()">Cancel</button>
+  `,
+  standalone: true,
+})
+class TestDialogContent {
+  readonly message = input.required<string>();
+  readonly confirmClick = output<string>();
+  readonly cancelClick = output<void>();
+
+  onConfirm(): void {
+    this.confirmClick.emit('confirmed');
+  }
+
+  onCancel(): void {
+    this.cancelClick.emit();
+  }
+}
+
+function getDialogEl(fixture: ComponentFixture<unknown>): HTMLDialogElement | null {
+  return fixture.nativeElement.querySelector('dialog[zen-dialog]') as HTMLDialogElement | null;
+}
+
+function getDialogElFromBody(): HTMLDialogElement | null {
+  return document.body.querySelector('dialog[zen-dialog]') as HTMLDialogElement | null;
+}
+
+describe('ZenDialog', () => {
+  beforeEach(async () => {
+    HTMLDialogElement.prototype.showModal = vi.fn();
+    HTMLDialogElement.prototype.close = vi.fn();
+  });
+
+  describe('Component usage', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [DialogTestComponent],
+        providers: [provideZonelessChangeDetection()],
+      }).compileComponents();
+    });
+
+    it('should create', () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.detectChanges();
+      expect(getDialogEl(fixture)).toBeTruthy();
+    });
+
+    it('should call showModal when open is set to true', async () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.detectChanges();
+
+      const dialogEl = getDialogEl(fixture)!;
+      expect(dialogEl.showModal).not.toHaveBeenCalled();
+
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      expect(dialogEl.showModal).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call close when open is set to false', async () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const dialogEl = getDialogEl(fixture)!;
+      Object.defineProperty(dialogEl, 'open', { value: true, writable: true });
+
+      fixture.componentInstance.isOpen.set(false);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      expect(dialogEl.close).toHaveBeenCalled();
+    });
+
+    it('should render header when provided', () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.detectChanges();
+
+      const header = fixture.nativeElement.querySelector('.zen-dialog-header h2');
+      expect(header?.textContent).toBe('Test Dialog');
+    });
+
+    it('should apply size attribute', () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.componentInstance.size.set('lg');
+      fixture.detectChanges();
+
+      const dialogEl = getDialogEl(fixture)!;
+      expect(dialogEl.getAttribute('data-size')).toBe('lg');
+    });
+
+    it('should close when close button is clicked', async () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const closeBtn = fixture.nativeElement.querySelector('.zen-dialog-close') as HTMLButtonElement;
+      closeBtn?.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(false);
+    });
+
+    it('should not close when backdrop is clicked and backdrop is false', async () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.componentInstance.backdrop.set(false);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const dialogEl = getDialogEl(fixture)!;
+      Object.defineProperty(dialogEl, 'tagName', { value: 'DIALOG' });
+      dialogEl.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(true);
+    });
+
+    it('should not close on escape when closeOnEscape is false', async () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.componentInstance.closeOnEscape.set(false);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const dialogEl = getDialogEl(fixture)!;
+      const cancelEvent = new Event('cancel', { bubbles: true, cancelable: true });
+      dialogEl.dispatchEvent(cancelEvent);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(true);
+    });
+
+    it('should apply id to dialog element', () => {
+      const fixture = TestBed.createComponent(DialogTestComponent);
+      fixture.componentInstance.id.set('custom-dialog-id');
+      fixture.detectChanges();
+
+      const dialogEl = getDialogEl(fixture)!;
+      expect(dialogEl.id).toBe('custom-dialog-id');
+    });
+  });
+});
+
+describe('ZenDialogService', () => {
+  beforeEach(async () => {
+    HTMLDialogElement.prototype.showModal = vi.fn();
+    HTMLDialogElement.prototype.close = vi.fn();
+
+    await TestBed.configureTestingModule({
+      providers: [provideZonelessChangeDetection(), ZenDialogService],
+    }).compileComponents();
+  });
+
+  afterEach(() => {
+    const dialogEl = getDialogElFromBody();
+    if (dialogEl) {
+      dialogEl.remove();
+    }
+  });
+
+  it('should open dialog with component', () => {
+    const service = TestBed.inject(ZenDialogService);
+
+    const ref = service.open(TestDialogContent, { header: 'Service Dialog' });
+
+    expect(ref).toBeDefined();
+    expect(ref.componentInstance).toBeInstanceOf(TestDialogContent);
+  });
+
+  it('should pass inputs to component', () => {
+    const service = TestBed.inject(ZenDialogService);
+
+    const ref = service.open(TestDialogContent, {
+      inputs: { message: 'Hello from service' } as Record<string, unknown>,
+    });
+
+    expect(ref.componentInstance.message()).toBe('Hello from service');
+  });
+
+  it('should subscribe to outputs', () => {
+    const service = TestBed.inject(ZenDialogService);
+    const confirmHandler = vi.fn();
+    const cancelHandler = vi.fn();
+
+    service.open(TestDialogContent, {
+      outputs: {
+        confirmClick: confirmHandler,
+        cancelClick: cancelHandler,
+      },
+    });
+
+    const confirmBtn = document.body.querySelector('button') as HTMLButtonElement;
+    confirmBtn?.click();
+
+    expect(confirmHandler).toHaveBeenCalledWith('confirmed');
+  });
+
+  it('should close dialog via DialogRef', async () => {
+    const service = TestBed.inject(ZenDialogService);
+
+    const ref = service.open(TestDialogContent);
+
+    ref.close();
+
+    const dialogEl = getDialogElFromBody();
+    expect(dialogEl).toBeNull();
+  });
+});