feat: implement modal service and components for enhanced user interaction, including modal showcase in demo page

src/app/shared/components/modal-host/modal-host.component.html

@@ -0,0 +1,11 @@
+@if (activeModal(); as modal) {
+  <app-modal-shell
+    [title]="modal.config.title"
+    [size]="modal.config.size"
+    [showCloseButton]="modal.config.showCloseButton"
+    (backdropClick)="onBackdropClick()"
+    (closeRequested)="onCloseRequested()"
+  >
+    <ng-container *ngComponentOutlet="modal.component; injector: contentInjector()" />
+  </app-modal-shell>
+}

src/app/shared/components/modal-host/modal-host.component.spec.ts

@@ -0,0 +1,196 @@
+import '@angular/compiler';
+import { Component, inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest';
+
+import {
+  MODAL_DATA,
+  ModalRef,
+  ModalService
+} from '../../../core/services/modal.service';
+import { ModalHostComponent } from './modal-host.component';
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="modal-test-content">
+      <span class="modal-test-title">{{ data?.title }}</span>
+      <button type="button" class="modal-test-close" (click)="close()">Cerrar</button>
+    </div>
+  `
+})
+class ModalContentTestComponent {
+  readonly data = inject<{ title: string } | null>(MODAL_DATA);
+  readonly modalRef = inject<ModalRef<string>>(ModalRef);
+
+  close(): void {
+    this.modalRef.close('accepted');
+  }
+}
+
+describe('ModalHostComponent', () => {
+  let service: ModalService;
+  let doc: Document;
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModalHostComponent]
+    }).compileComponents();
+
+    service = TestBed.inject(ModalService);
+    doc = TestBed.inject(DOCUMENT);
+  });
+
+  afterEach(() => {
+    doc.body.style.overflow = '';
+    TestBed.resetTestingModule();
+  });
+
+  it('renders nothing when no modal is active', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent?.trim()).toBe('');
+    expect(doc.body.style.overflow).toBe('');
+  });
+
+  it('opens and renders the requested component with its title and data', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+
+    service.open(ModalContentTestComponent, {
+      title: 'Editar producto',
+      data: { title: 'Contenido del modal' }
+    });
+    fixture.detectChanges();
+
+    const title = fixture.nativeElement.querySelector('.modal-shell__title');
+    const content = fixture.nativeElement.querySelector('.modal-test-title');
+
+    expect(title?.textContent).toContain('Editar producto');
+    expect(content?.textContent).toContain('Contenido del modal');
+    expect(doc.body.style.overflow).toBe('hidden');
+  });
+
+  it('closes with a result from the child component', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Cerrar' }
+    });
+    const closedSpy = vi.fn();
+
+    ref.afterClosed$.subscribe(closedSpy);
+    fixture.detectChanges();
+
+    const closeButton = fixture.nativeElement.querySelector('.modal-test-close') as HTMLButtonElement;
+    closeButton.click();
+    fixture.detectChanges();
+
+    expect(closedSpy).toHaveBeenCalledWith('accepted');
+    expect(service.activeModal()).toBeNull();
+    expect(doc.body.style.overflow).toBe('');
+  });
+
+  it('closes on backdrop click when enabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Backdrop' },
+      closeOnBackdrop: true
+    });
+
+    fixture.detectChanges();
+
+    const backdrop = fixture.nativeElement.querySelector('.modal-shell') as HTMLDivElement;
+    backdrop.click();
+    fixture.detectChanges();
+
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBe('backdrop');
+  });
+
+  it('does not close on backdrop click when disabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Persistente' },
+      closeOnBackdrop: false
+    });
+
+    fixture.detectChanges();
+
+    const backdrop = fixture.nativeElement.querySelector('.modal-shell') as HTMLDivElement;
+    backdrop.click();
+    fixture.detectChanges();
+
+    expect(service.activeModal()?.ref).toBe(ref);
+  });
+
+  it('closes on Escape when enabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Escape' },
+      closeOnEscape: true
+    });
+
+    fixture.detectChanges();
+    doc.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBe('escape');
+  });
+
+  it('keeps the modal open on Escape when disabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'No Escape' },
+      closeOnEscape: false
+    });
+
+    fixture.detectChanges();
+    doc.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+
+    expect(service.activeModal()?.ref).toBe(ref);
+  });
+
+  it('closes from the shell close button with a programmatic dismiss reason', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      title: 'Con cierre',
+      data: { title: 'Boton' }
+    });
+
+    fixture.detectChanges();
+
+    const closeButton = fixture.debugElement.query(By.css('.btn-close')).nativeElement as HTMLButtonElement;
+    closeButton.click();
+    fixture.detectChanges();
+
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBe('programmatic');
+  });
+});

src/app/shared/components/modal-host/modal-host.component.ts

@@ -0,0 +1,93 @@
+import { DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Injector,
+  PLATFORM_ID,
+  computed,
+  effect,
+  inject,
+  viewChild
+} from '@angular/core';
+
+import {
+  MODAL_DATA,
+  ModalRef,
+  ModalService
+} from '../../../core/services/modal.service';
+import { ModalShellComponent } from '../modal-shell/modal-shell.component';
+
+@Component({
+  selector: 'app-modal-host',
+  imports: [NgComponentOutlet, ModalShellComponent],
+  templateUrl: './modal-host.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ModalHostComponent {
+  private readonly modalService = inject(ModalService);
+  private readonly injector = inject(Injector);
+  private readonly document = inject(DOCUMENT);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly modalShell = viewChild(ModalShellComponent);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+
+  readonly activeModal = this.modalService.activeModal;
+  protected readonly contentInjector = computed<Injector | undefined>(() => {
+    const modal = this.activeModal();
+
+    if (!modal) {
+      return undefined;
+    }
+
+    return Injector.create({
+      providers: [
+        { provide: ModalRef, useValue: modal.ref },
+        { provide: MODAL_DATA, useValue: modal.config.data ?? null }
+      ],
+      parent: this.injector
+    });
+  });
+
+  constructor() {
+    effect((onCleanup) => {
+      const modal = this.activeModal();
+
+      if (!this.isBrowser || !modal) {
+        return;
+      }
+
+      const body = this.document.body;
+      const previousOverflow = body.style.overflow;
+      body.style.overflow = 'hidden';
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== 'Escape' || !this.activeModal()?.config.closeOnEscape) {
+          return;
+        }
+
+        event.preventDefault();
+        this.activeModal()?.ref.dismiss('escape');
+      };
+
+      this.document.addEventListener('keydown', onKeyDown);
+      queueMicrotask(() => this.modalShell()?.focusInitialElement());
+
+      onCleanup(() => {
+        this.document.removeEventListener('keydown', onKeyDown);
+        body.style.overflow = previousOverflow;
+      });
+    });
+  }
+
+  protected onBackdropClick(): void {
+    const modal = this.activeModal();
+
+    if (modal?.config.closeOnBackdrop) {
+      modal.ref.dismiss('backdrop');
+    }
+  }
+
+  protected onCloseRequested(): void {
+    this.activeModal()?.ref.dismiss('programmatic');
+  }
+}