feat(modal): add simple modal component with open and close functionality

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

@@ -0,0 +1,9 @@
+<div class="simple-modal">
+  <p class="simple-modal__content">{{ data.content }}</p>
+
+  <div class="simple-modal__actions">
+    <app-button (click)="close()">
+      {{ data.buttonLabel }}
+    </app-button>
+  </div>
+</div>

src/app/shared/components/simple-modal/simple-modal.component.scss

@@ -0,0 +1,19 @@
+.simple-modal {
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.simple-modal__content {
+  margin: 0;
+  color: #666666;
+  line-height: 1.5;
+}
+
+.simple-modal__actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,90 @@
+import '@angular/compiler';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import {
+  SimpleModalData,
+  MODAL_DATA,
+  ModalRef
+} from '../../../core/services/modal.service';
+import { SimpleModalComponent } from './simple-modal.component';
+
+describe('SimpleModalComponent', () => {
+  const data: SimpleModalData = {
+    content: 'Este es un mensaje simple.',
+    buttonLabel: 'Entendido'
+  };
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('renders the configured content and button label', async () => {
+    await TestBed.configureTestingModule({
+      imports: [SimpleModalComponent],
+      providers: [
+        {
+          provide: MODAL_DATA,
+          useValue: data
+        },
+        {
+          provide: ModalRef,
+          useValue: {
+            close: vi.fn()
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(SimpleModalComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain(data.content);
+    expect(element.textContent).toContain(data.buttonLabel);
+  });
+
+  it('closes when clicking the primary button', async () => {
+    const closeSpy = vi.fn();
+
+    await TestBed.configureTestingModule({
+      imports: [SimpleModalComponent],
+      providers: [
+        {
+          provide: MODAL_DATA,
+          useValue: data
+        },
+        {
+          provide: ModalRef,
+          useValue: {
+            close: closeSpy
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(SimpleModalComponent);
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    button.click();
+
+    expect(closeSpy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import {
+  SimpleModalData,
+  MODAL_DATA,
+  ModalRef
+} from '../../../core/services/modal.service';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-simple-modal',
+  imports: [ButtonComponent],
+  templateUrl: './simple-modal.component.html',
+  styleUrl: './simple-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SimpleModalComponent {
+  protected readonly data = inject<SimpleModalData>(MODAL_DATA);
+  private readonly modalRef = inject<ModalRef<void>>(ModalRef);
+
+  protected close(): void {
+    this.modalRef.close();
+  }
+}