@tinya-code/gas-admin-ui 0.2.0-alpha.13 → 0.2.0-alpha.15

package/src/lib/shared/components/confirm-dialog/confirm-dialog.ts

@@ -0,0 +1,48 @@
+import { Component, input, output } from '@angular/core';
+
+import { Button } from '../button/button';
+import { Modal } from '../modal/modal';
+
+/**
+ * Opciones del diálogo. Es estructuralmente compatible con
+ * `core.NotificationService['confirmation']` (mismos campos) — `shared` no
+ * importa `core`, quien une ambos lados es el shell (Fase 7).
+ */
+export interface ConfirmDialogOptions {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+@Component({
+  selector: 'app-confirm-dialog',
+  imports: [Modal, Button],
+  template: `
+    @if (options(); as opts) {
+      <app-modal [open]="true" [title]="opts.title" (close)="cancelled.emit()">
+        <p class="text-sm text-neutral">{{ opts.message }}</p>
+        <div class="mt-6 flex justify-end gap-3">
+          <button app-button variant="outline" type="button" (click)="cancelled.emit()">
+            {{ opts.cancelLabel ?? 'Cancel' }}
+          </button>
+          <button
+            app-button
+            type="button"
+            [variant]="danger() ? 'danger' : 'primary'"
+            (click)="confirmed.emit()"
+          >
+            {{ opts.confirmLabel ?? 'Confirm' }}
+          </button>
+        </div>
+      </app-modal>
+    }
+  `,
+})
+export class ConfirmDialog {
+  /** `null` = oculto (viene de `NotificationService.confirmation`). */
+  readonly options = input<ConfirmDialogOptions | null>(null);
+  readonly danger = input(false);
+  readonly confirmed = output<void>();
+  readonly cancelled = output<void>();
+}

package/src/lib/shared/components/copy-button/copy-button.ts

@@ -0,0 +1,56 @@
+import { Component, inject, input, signal } from '@angular/core';
+import { LucideCopy, LucideCheck } from '@lucide/angular';
+
+import { writeClipboard } from '../../../core/utils/clipboard';
+import { NotificationService } from '../../../core/services/notification.service';
+import { Button } from '../button/button';
+
+/**
+ * Botón para copiar un valor al portapapeles.
+ *
+ * Muestra un ícono de copiar que se reemplaza por una marca de éxito tras
+ * copiar. Usa el mismo canal de portapapeles que `CopyShare` para consistencia.
+ */
+@Component({
+  selector: 'app-copy-button',
+  imports: [Button, LucideCopy, LucideCheck],
+  template: `
+    <button
+      app-button
+      type="button"
+      variant="ghost"
+      size="icon"
+      [disabled]="copied()"
+      (click)="copy()"
+      [title]="'Copiar ' + value()"
+      class="text-neutral hover:text-primary"
+    >
+      @if (copied()) {
+        <svg lucideCheck size="16" class="text-primary" />
+      } @else {
+        <svg lucideCopy size="16" />
+      }
+    </button>
+  `,
+})
+export class CopyButton {
+  /** Valor a copiar al portapapeles. */
+  readonly value = input.required<unknown>();
+
+  private readonly notify = inject(NotificationService);
+  private readonly copied = signal(false);
+
+  protected readonly copied$ = this.copied.asReadonly();
+
+  protected async copy(): Promise<void> {
+    const text = String(this.value() ?? '');
+    const ok = await writeClipboard(text);
+    if (ok) {
+      this.copied.set(true);
+      this.notify.success('Copiado al portapapeles.');
+      setTimeout(() => this.copied.set(false), 1500);
+    } else {
+      this.notify.error('No se pudo copiar.');
+    }
+  }
+}

package/src/lib/shared/components/copy-share/copy-share.spec.ts

@@ -0,0 +1,122 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+
+import { NotificationService } from '../../../core/services/notification.service';
+import { CopyShare } from './copy-share';
+
+const URL_UNDER_TEST = 'https://ejemplo.test/p/abc123';
+
+/**
+ * `navigator.clipboard` / `navigator.share` no existen en el DOM de prueba y
+ * son propiedades del prototipo en los navegadores reales: se tapan con una
+ * propiedad propia configurable y se restaura el descriptor original.
+ */
+const OWN = new Map<string, PropertyDescriptor | undefined>();
+
+function stubNavigator(key: 'clipboard' | 'share', value: unknown): void {
+  if (!OWN.has(key)) {
+    OWN.set(key, Object.getOwnPropertyDescriptor(navigator, key));
+  }
+  Object.defineProperty(navigator, key, { value, configurable: true, writable: true });
+}
+
+function clearNavigator(key: 'clipboard' | 'share'): void {
+  if (!OWN.has(key)) {
+    OWN.set(key, Object.getOwnPropertyDescriptor(navigator, key));
+  }
+  Object.defineProperty(navigator, key, { value: undefined, configurable: true, writable: true });
+}
+
+function restoreNavigator(): void {
+  for (const [key, descriptor] of OWN) {
+    if (descriptor) {
+      Object.defineProperty(navigator, key, descriptor);
+    } else {
+      delete (navigator as unknown as Record<string, unknown>)[key];
+    }
+  }
+  OWN.clear();
+}
+
+describe('CopyShare', () => {
+  let fixture: ComponentFixture<CopyShare>;
+  let notifications: NotificationService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [CopyShare] }).compileComponents();
+    fixture = TestBed.createComponent(CopyShare);
+    // `canShare()` es un computed SIN dependencias reactivas: se cachea en el
+    // primer render. Los tests tapan `navigator` ANTES del primer detectChanges.
+    fixture.componentRef.setInput('url', URL_UNDER_TEST);
+    notifications = TestBed.inject(NotificationService);
+  });
+
+  afterEach(() => restoreNavigator());
+
+  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
+
+  const button = (text: string): HTMLButtonElement =>
+    [...root().querySelectorAll<HTMLButtonElement>('button')].find((el) =>
+      el.textContent.trim().startsWith(text),
+    )!;
+
+  const messages = (): string[] => notifications.toasts().map((toast) => toast.message);
+
+  it('copia el enlace al portapapeles y dispara la notificación de éxito', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    stubNavigator('clipboard', { writeText });
+    fixture.detectChanges();
+
+    button('Copiar enlace').click();
+    await fixture.whenStable();
+
+    expect(writeText).toHaveBeenCalledWith(URL_UNDER_TEST);
+    expect(messages()).toContain('Mensaje copiado.');
+  });
+
+  it('copia el MENSAJE formateado completo cuando hay shareText', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    stubNavigator('clipboard', { writeText });
+    const message = `Hola Ana, puede retirar su pedido A-100 aquí: ${URL_UNDER_TEST}`;
+    fixture.componentRef.setInput('shareText', message);
+    fixture.detectChanges();
+
+    button('Copiar enlace').click();
+    await fixture.whenStable();
+
+    // El bug: sólo se escribía la URL y el saludo/referencia/PIN se perdían.
+    expect(writeText).toHaveBeenCalledWith(message);
+    expect(writeText).not.toHaveBeenCalledWith(URL_UNDER_TEST);
+  });
+
+  it('sin clipboard no revienta: cae al fallback y avisa si tampoco funciona', async () => {
+    clearNavigator('clipboard');
+    fixture.detectChanges();
+
+    expect(() => button('Copiar enlace').click()).not.toThrow();
+    await fixture.whenStable();
+
+    expect(messages()).toContain('No se pudo copiar el mensaje.');
+  });
+
+  it('sin navigator.share no se muestra la acción de compartir nativa', () => {
+    clearNavigator('share');
+    fixture.detectChanges();
+
+    const labels = [...root().querySelectorAll('button')].map((el) => el.textContent.trim());
+    expect(labels).toContain('WhatsApp');
+    expect(labels).not.toContain('Compartir');
+  });
+
+  it('con navigator.share se ofrece Compartir y delega en la API nativa', async () => {
+    const share = vi.fn().mockResolvedValue(undefined);
+    stubNavigator('share', share);
+    fixture.detectChanges();
+
+    button('Compartir').click();
+    await fixture.whenStable();
+
+    expect(share).toHaveBeenCalledWith({ url: URL_UNDER_TEST, text: '' });
+    expect(button('WhatsApp')).toBeUndefined();
+  });
+});

package/src/lib/shared/components/copy-share/copy-share.ts

@@ -0,0 +1,107 @@
+import { Component, computed, inject, input } from '@angular/core';
+
+import { LucideCopy, LucideShare } from '@lucide/angular';
+
+import { buildShareMessage, writeClipboard } from '../../../core/utils/clipboard';
+import { NotificationService } from '../../../core/services/notification.service';
+import { Button } from '../button/button';
+
+/**
+ * Copia el enlace de un registro al portapapeles y ofrece compartirlo.
+ *
+ * Es lo que hace útil `public_base_url` (Etapa 2, S5): con este botón el
+ * operador entrega el enlace público del pedido.
+ *
+ * Tres caminos, todos degradando en vez de romper:
+ *
+ * 1. **Copiar** — `navigator.clipboard.writeText`; si el navegador no lo
+ *    tiene (contexto no seguro) cae a un `textarea` + `execCommand('copy')`.
+ * 2. **Compartir** — `navigator.share`, sólo renderizado si existe
+ *    (`'share' in navigator`; no está en desktop).
+ * 3. **WhatsApp** — el reemplazo del 2 cuando no hay `navigator.share`:
+ *    `wa.me/?text=` con `shareText` + `url`.
+ *
+ * `navigator.share` se llama con `{ url, text }`: no se envía `title` porque
+ * no hay input dedicado y `label` es el rótulo del botón de copiar, no un
+ * título de compartir.
+ */
+@Component({
+  selector: 'app-copy-share',
+  imports: [Button, LucideCopy, LucideShare],
+  template: `
+    <div class="flex flex-wrap items-center gap-2">
+      <button app-button type="button" variant="outline" (click)="copy()">
+        <svg lucideCopy size="16" />
+        {{ label() }}
+      </button>
+
+      @if (canShare()) {
+        <button app-button type="button" variant="ghost" (click)="share()">
+          <svg lucideShare size="16" />
+          Compartir
+        </button>
+      } @else {
+        <button app-button type="button" variant="ghost" (click)="shareWhatsApp()">
+          <svg lucideShare size="16" />
+          WhatsApp
+        </button>
+      }
+    </div>
+  `,
+})
+export class CopyShare {
+  /** Enlace público a copiar/compartir. */
+  readonly url = input.required<string>();
+  /** Rótulo del botón de copiar. */
+  readonly label = input('Copiar enlace');
+  /** Texto que viaja junto al enlace al compartir (nativo o WhatsApp). */
+  readonly shareText = input('');
+
+  private readonly notify = inject(NotificationService);
+
+  /**
+   * El share nativo no existe en desktop: sin él se ofrece WhatsApp.
+   *
+   * Se comprueba `typeof … === 'function'` y no `'share' in navigator` como
+   * dice el plan: el `in` da `true` también para una propiedad propia con
+   * valor `undefined` (polyfills y stubs hacen exactamente eso), y eso
+   * montaría un botón que revienta al pulsarlo.
+   */
+  protected readonly canShare = computed(
+    () => typeof navigator !== 'undefined' && typeof navigator.share === 'function',
+  );
+
+  protected readonly waUrl = computed(() => {
+    // Mismo texto que copia el botón: `buildShareMessage` evita pegar el
+    // enlace DOS veces cuando el `shareTextTemplate` ya lo trae escrito.
+    const text = buildShareMessage(this.url(), this.shareText());
+    return `https://wa.me/?text=${encodeURIComponent(text)}`;
+  });
+
+  protected async copy(): Promise<void> {
+    // El mensaje formateado completo (saludo + ref + enlace + PIN), no sólo
+    // la URL: es lo que el operador pega en la conversación con el cliente.
+    const copied = await writeClipboard(buildShareMessage(this.url(), this.shareText()));
+    if (copied) {
+      this.notify.success('Mensaje copiado.');
+    } else {
+      this.notify.error('No se pudo copiar el mensaje.');
+    }
+  }
+
+  protected async share(): Promise<void> {
+    if (!this.canShare()) {
+      this.shareWhatsApp();
+      return;
+    }
+    try {
+      await navigator.share({ url: this.url(), text: this.shareText() });
+    } catch {
+      // Cancelar la hoja de compartir dispara AbortError: no es un error.
+    }
+  }
+
+  protected shareWhatsApp(): void {
+    window.open(this.waUrl(), '_blank', 'noopener,noreferrer');
+  }
+}

package/src/lib/shared/components/drawer/drawer.spec.ts

@@ -0,0 +1,127 @@
+import { Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+
+import { Drawer } from './drawer';
+
+/** Disparador real: el foco tiene que volver a él al cerrar. */
+@Component({
+  template: `
+    <button type="button" data-testid="trigger">Abrir</button>
+    <app-drawer [open]="open()" [title]="title()" (close)="open.set(false)">
+      <button type="button" data-testid="body-action">Dentro del cuerpo</button>
+      <div drawer-actions>
+        <button type="button" data-testid="footer-action">Guardar</button>
+      </div>
+    </app-drawer>
+  `,
+  imports: [Drawer],
+})
+class DrawerHost {
+  readonly open = signal(false);
+  readonly title = signal('Panel de prueba');
+}
+
+describe('Drawer', () => {
+  let fixture: ComponentFixture<DrawerHost>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [DrawerHost] }).compileComponents();
+    fixture = TestBed.createComponent(DrawerHost);
+    fixture.detectChanges();
+  });
+
+  const dialog = (): HTMLElement | null => fixture.nativeElement.querySelector('[role="dialog"]');
+  const trigger = (): HTMLButtonElement =>
+    fixture.nativeElement.querySelector('[data-testid="trigger"]');
+
+  const open = async (): Promise<void> => {
+    trigger().focus();
+    fixture.componentInstance.open.set(true);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  };
+
+  it('cerrado no hay diálogo; abierto hay uno con nombre y aria-modal', async () => {
+    expect(dialog()).toBeNull();
+
+    await open();
+
+    const panel = dialog();
+    expect(panel).not.toBeNull();
+    expect(panel!.getAttribute('aria-modal')).toBe('true');
+    const labelledBy = panel!.getAttribute('aria-labelledby');
+    expect(document.getElementById(labelledBy!)?.textContent).toContain('Panel de prueba');
+  });
+
+  it('Escape y el clic en el fondo piden cerrar', async () => {
+    await open();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+
+    await open();
+    (fixture.nativeElement.querySelector('.absolute.inset-0') as HTMLElement).click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+  });
+
+  it('el foco entra al abrir y vuelve al disparador al cerrar', async () => {
+    await open();
+    expect(dialog()!.contains(document.activeElement)).toBe(true);
+
+    fixture.componentInstance.open.set(false);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  it('destruirse con el panel abierto devuelve el foco (no se pierde detrás del fondo)', async () => {
+    await open();
+    expect(dialog()!.contains(document.activeElement)).toBe(true);
+
+    // Es lo que pasa cuando el consumidor lo monta bajo un @if y borra el
+    // nodo sin que la señal pase por `false`.
+    fixture.componentInstance.open.set(false);
+    fixture.destroy();
+
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  it('el Tab queda atrapado: del último salta al primero', async () => {
+    await open();
+
+    const focusable = Array.from(
+      dialog()!.querySelectorAll<HTMLElement>('button, [href], input, select, textarea'),
+    );
+    const last = focusable[focusable.length - 1];
+    last.focus();
+    expect(document.activeElement).toBe(last);
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+    expect(document.activeElement).toBe(focusable[0]);
+  });
+
+  it('el Shift+Tab queda atrapado: del primero salta al último', async () => {
+    await open();
+
+    const focusable = Array.from(
+      dialog()!.querySelectorAll<HTMLElement>('button, [href], input, select, textarea'),
+    );
+    expect(focusable.length).toBeGreaterThan(1);
+
+    // Angular iguala `fullKey` contra la tecla armada con los modificadores:
+    // sin el binding `keydown.shift.tab` este evento no llega al trap.
+    const first = focusable[0];
+    first.focus();
+    expect(document.activeElement).toBe(first);
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, shiftKey: true }),
+    );
+    expect(document.activeElement).toBe(focusable[focusable.length - 1]);
+  });
+});

package/src/lib/shared/components/drawer/drawer.ts

@@ -0,0 +1,172 @@
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  afterRenderEffect,
+  computed,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LucideX } from '@lucide/angular';
+
+import { FOCUSABLE, isVisibleNow } from '../../utils/dialog-focus';
+
+/** Ancho del panel: `sm` para 1–3 campos, `md`/`lg` para formularios. */
+export type DrawerSize = 'sm' | 'md' | 'lg';
+
+const WIDTHS: Record<DrawerSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+};
+
+let titleCounter = 0;
+
+/**
+ * Panel lateral (drawer) — guía §5: «edición rápida de pocos campos: panel
+ * lateral en lugar de pantalla nueva, para no perder contexto».
+ *
+ * Sigue el mismo contrato que `modal`: `role="dialog"` con nombre por
+ * `aria-labelledby`, foco al abrirse y restaurado al cerrarse, Escape y el
+ * fondo cierran. Además ATRAPA el Tab dentro del panel: sin eso un modal se
+ * puede tabular hacia la página de atrás y el foco se pierde detrás del
+ * fondo oscuro.
+ *
+ * Componente tonto: `open`/`title` entran por `input()` y el estado vive
+ * fuera. El cuerpo se proyecta en el área con scroll y el pie con el
+ * atributo `drawer-actions`.
+ */
+@Component({
+  selector: 'app-drawer',
+  imports: [LucideX],
+  host: {
+    '(document:keydown.escape)': 'onEscape()',
+    // Angular arma la tecla CON sus modificadores y exige igualdad exacta:
+    // sin esta segunda entrada, Shift+Tab llega como `shift.tab`, no casa con
+    // `tab` y el foco escapa del panel hacia atrás.
+    '(document:keydown.tab)': 'onTab($event)',
+    '(document:keydown.shift.tab)': 'onTab($event)',
+  },
+  template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-50">
+        <div class="absolute inset-0 bg-black/50" aria-hidden="true" (click)="close.emit()"></div>
+        <section
+          #dialog
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          tabindex="-1"
+          class="absolute inset-y-0 right-0 flex w-full flex-col bg-surface-raised shadow-2xl focus:outline-none"
+          [class]="widthClass()"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-neutral/20 px-5 py-4"
+          >
+            <div>
+              <h2 [id]="titleId" class="font-display text-section font-semibold">{{ title() }}</h2>
+              @if (subtitle(); as subtitleText) {
+                <p class="mt-1 text-sm text-neutral/70">{{ subtitleText }}</p>
+              }
+            </div>
+            <button
+              type="button"
+              class="flex min-h-11 min-w-11 items-center justify-center rounded text-neutral hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-primary lg:min-h-0 lg:min-w-0"
+              [attr.aria-label]="closeLabel()"
+              (click)="close.emit()"
+            >
+              <svg lucideX size="18" />
+            </button>
+          </header>
+
+          <div class="flex-1 overflow-y-auto px-5 py-4">
+            <ng-content />
+          </div>
+
+          <div class="border-t border-neutral/20 px-5 py-4">
+            <ng-content select="[drawer-actions]" />
+          </div>
+        </section>
+      </div>
+    }
+  `,
+})
+export class Drawer implements OnDestroy {
+  readonly open = input(false);
+  readonly title = input('Editar');
+  readonly subtitle = input<string | null>(null);
+  readonly size = input<DrawerSize>('md');
+  readonly closeLabel = input('Cerrar');
+  readonly close = output<void>();
+
+  readonly titleId = `drawer-title-${++titleCounter}`;
+  readonly widthClass = computed(() => WIDTHS[this.size()]);
+
+  private readonly dialogRef = viewChild<ElementRef<HTMLElement>>('dialog');
+  private lastFocused: HTMLElement | null = null;
+
+  private readonly focusEffect = afterRenderEffect(() => {
+    const open = this.open();
+    const dialog = this.dialogRef();
+    if (open && dialog) {
+      const active = document.activeElement;
+      if (active !== dialog.nativeElement && this.lastFocused === null) {
+        this.lastFocused = active instanceof HTMLElement ? active : null;
+      }
+      dialog.nativeElement.focus();
+    } else if (!open && this.lastFocused !== null) {
+      this.lastFocused.focus();
+      this.lastFocused = null;
+    }
+  });
+
+  /**
+   * El consumidor puede destruir el componente con el panel todavía abierto
+   * (se monta bajo un `@if`): en ese caso el effect nunca ve la transición a
+   * `false` y el foco se quedaría perdido en el body.
+   */
+  ngOnDestroy(): void {
+    if (this.lastFocused?.isConnected) {
+      this.lastFocused.focus();
+    }
+    this.lastFocused = null;
+  }
+
+  onEscape(): void {
+    if (this.open()) {
+      this.close.emit();
+    }
+  }
+
+  /**
+   * Mantiene el Tab dentro del panel mientras el diálogo está abierto.
+   * Recibe `Event` porque los host listeners de Angular tipean `$event` así;
+   * el teclado se relee acá dentro.
+   */
+  onTab(rawEvent: Event): void {
+    const event = rawEvent as KeyboardEvent;
+    const dialog = this.dialogRef()?.nativeElement;
+    if (!this.open() || !dialog) {
+      return;
+    }
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+      (element) => isVisibleNow(element),
+    );
+    if (focusable.length === 0) {
+      event.preventDefault();
+      dialog.focus();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && (active === first || active === dialog)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}

package/src/lib/shared/components/empty-state/empty-state.ts

@@ -0,0 +1,30 @@
+import { Component, input } from '@angular/core';
+import { LucideInbox } from '@lucide/angular';
+
+/**
+ * Estado vacío universal (structure.md §6). El contenido proyectado es la
+ * acción opcional (normalmente un `button[app-button]`).
+ */
+@Component({
+  selector: 'app-empty-state',
+  imports: [LucideInbox],
+  host: { role: 'status' },
+  template: `
+    <div
+      class="flex flex-col items-center gap-2 rounded-xl border border-dashed border-neutral/30 px-6 py-12 text-center"
+    >
+      <svg lucideInbox size="32" class="text-neutral" />
+      <h2 class="font-display text-base font-semibold">{{ title() }}</h2>
+      @if (message()) {
+        <p class="text-sm text-neutral">{{ message() }}</p>
+      }
+      <div class="mt-2">
+        <ng-content />
+      </div>
+    </div>
+  `,
+})
+export class EmptyState {
+  readonly title = input.required<string>();
+  readonly message = input('');
+}