@mimi-ng/cli 0.1.0 → 0.2.0

package/dist/templates/components/confirm/confirm.ts

@@ -0,0 +1,190 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  Directive,
+  Injector,
+  TemplateRef,
+  ViewContainerRef,
+  assertInInjectionContext,
+  effect,
+  inject,
+  input,
+  untracked,
+} from '@angular/core';
+import { MimiButton } from '@/components/ui/button';
+import {
+  MIMI_DIALOG_DATA,
+  MimiDialogDescription,
+  MimiDialogRef,
+  MimiDialogService,
+  MimiDialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/components/ui/utils/cn';
+import { MIMI_CONFIRM_TEXT } from './confirm-texts';
+
+/*
+ * Confirm (docs/design/Mimi F2 Overlays.dc.html, «2 · Confirm»; prefijo de tokens `confirm`,
+ * spec 13): un alertdialog de 380px, sin X, con un círculo de 40px para el ícono, el título, la
+ * descripción y dos botones de 36px a la derecha.
+ *
+ * Por dentro abre un Dialog (MimiDialogService): el foco, el fondo, Escape, el bloqueo del scroll
+ * y la animación son suyos. Confirm solo pone el contenido y traduce el cierre a true o false.
+ */
+
+/** Opciones de `confirm()`. */
+export interface MimiConfirmOptions {
+  /** La pregunta. Es el nombre accesible del diálogo. */
+  title: string;
+  /** Qué pasa si se confirma. Recomendada: un alertdialog la anuncia junto al título. */
+  description?: string;
+  /** Texto del botón que confirma. Por defecto, el de `MIMI_CONFIRM_TEXT`. */
+  confirmText?: string;
+  /** Texto del botón que cancela. Por defecto, el de `MIMI_CONFIRM_TEXT`. */
+  cancelText?: string;
+  /**
+   * `danger` para una acción destructiva: el botón de confirmar va en rojo y el foco inicial, en
+   * Cancelar. Por defecto, `primary` (el foco inicial va en Confirmar).
+   */
+  tone?: 'primary' | 'danger';
+  /** Ícono dentro del círculo de color: una plantilla con un `<svg>`. Sin él, no hay círculo. */
+  icon?: TemplateRef<unknown>;
+  /** Clases del panel, mezcladas con `cn()` (gana la del usuario). */
+  class?: string;
+}
+
+/** La función que devuelve `injectMimiConfirm()`. */
+export type MimiConfirmFn = (options: MimiConfirmOptions) => Promise<boolean>;
+
+const ICON_CLASSES = {
+  primary: 'bg-info-soft text-info-soft-foreground',
+  danger:
+    'bg-[color:var(--mimi-confirm-icon-bg,var(--mimi-destructive-soft-bg))] text-[color:var(--mimi-confirm-icon-fg,var(--mimi-destructive-soft-foreground))]',
+} as const;
+
+/** Crea la plantilla del ícono. Hace lo mismo que NgTemplateOutlet, sin @angular/common. */
+@Directive({ selector: '[mimiConfirmIcon]' })
+class MimiConfirmIcon {
+  readonly template = input.required<TemplateRef<unknown>>({ alias: 'mimiConfirmIcon' });
+  private readonly viewContainer = inject(ViewContainerRef);
+
+  private readonly render = effect(() => {
+    const template = this.template();
+    untracked(() => {
+      this.viewContainer.clear();
+      this.viewContainer.createEmbeddedView(template);
+    });
+  });
+}
+
+/** El contenido del diálogo: ícono, título, descripción y los dos botones. */
+@Component({
+  selector: 'mimi-confirm',
+  imports: [MimiButton, MimiDialogTitle, MimiDialogDescription, MimiConfirmIcon],
+  template: `
+    <div class="flex items-start gap-3.5">
+      @if (options.icon) {
+        <span aria-hidden="true" data-slot="icon" [class]="iconClasses">
+          <ng-container [mimiConfirmIcon]="options.icon" />
+        </span>
+      }
+      <div class="flex min-w-0 flex-col gap-1">
+        <h2 mimiDialogTitle class="text-base leading-[1.3] tracking-normal">
+          {{ options.title }}
+        </h2>
+        @if (options.description) {
+          <p mimiDialogDescription class="text-[13px] leading-normal text-pretty">
+            {{ options.description }}
+          </p>
+        }
+      </div>
+    </div>
+    <!-- Los botones miden 36px de alto con 14px a los lados, como en el diseño. -->
+    <div class="flex justify-end gap-2">
+      <button
+        mimiBtn
+        type="button"
+        variant="outline"
+        data-slot="cancel"
+        class="h-9 px-3.5"
+        (click)="ref.close(false)"
+      >
+        {{ options.cancelText ?? text.cancel }}
+      </button>
+      <button
+        mimiBtn
+        type="button"
+        [tone]="tone"
+        data-slot="confirm"
+        class="h-9 px-3.5"
+        (click)="ref.close(true)"
+      >
+        {{ options.confirmText ?? text.confirm }}
+      </button>
+    </div>
+  `,
+  host: { '[attr.data-tone]': 'tone' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class MimiConfirmContent {
+  protected readonly options = inject<MimiConfirmOptions>(MIMI_DIALOG_DATA);
+  protected readonly ref = inject<MimiDialogRef<boolean>>(MimiDialogRef);
+  protected readonly text = inject(MIMI_CONFIRM_TEXT);
+
+  protected readonly tone = this.options.tone ?? 'primary';
+  protected readonly iconClasses = cn(
+    'inline-flex size-10 shrink-0 items-center justify-center rounded-full [&_svg]:size-5 [&_svg]:shrink-0',
+    ICON_CLASSES[this.tone],
+  );
+}
+
+/**
+ * Prepara `confirm()`, que pregunta y espera la respuesta:
+ *
+ * ```ts
+ * private readonly confirm = injectMimiConfirm();
+ *
+ * async remove() {
+ *   if (await this.confirm({ title: '¿Eliminar este proyecto?', tone: 'danger' })) { … }
+ * }
+ * ```
+ *
+ * Se llama al declarar la propiedad (o en el constructor): necesita el contexto de inyección.
+ * Así toma el injector del componente y los textos de `provideMimiConfirmText` de su ruta o del
+ * propio componente. Dentro de un método falla con NG0203.
+ *
+ * `confirm()` resuelve `true` si se confirmó y `false` en cualquier otro caso (Cancelar, Escape,
+ * una navegación, `closeAll()` o el componente que se destruye), después de la animación de
+ * salida y con el foco ya devuelto. Nunca rechaza: si el diálogo no se pudo abrir, el error va al
+ * `ErrorHandler` y la respuesta es `false`. El clic en el fondo no cierra.
+ *
+ * Como todo Dialog, se abre después del render en curso: desde un ítem de menú, el foco vuelve
+ * al botón del menú al cerrar.
+ */
+export function injectMimiConfirm(): MimiConfirmFn {
+  assertInInjectionContext(injectMimiConfirm);
+  const dialog = inject(MimiDialogService);
+  const injector = inject(Injector);
+  const destroyRef = inject(DestroyRef);
+
+  return (options) =>
+    new Promise<boolean>((resolve) => {
+      const ref = dialog.open<boolean, MimiConfirmOptions>(MimiConfirmContent, {
+        data: options,
+        role: 'alertdialog',
+        closeButton: false,
+        closeOnBackdropClick: false,
+        // Lo más seguro primero: en una acción destructiva, Enter no confirma por accidente.
+        autoFocus: options.tone === 'danger' ? '[data-slot="cancel"]' : '[data-slot="confirm"]',
+        // Por clase y no con `width`: así la clase del usuario puede cambiar el ancho.
+        class: cn('w-[var(--mimi-confirm-width,380px)] gap-3.5 p-5', options.class),
+        injector,
+      });
+      // Si el componente que pregunta se destruye antes de la respuesta, se cierra con false.
+      const stop = destroyRef.onDestroy(() => ref.close(false));
+      ref.afterClosed().subscribe((result) => {
+        stop();
+        resolve(result === true);
+      });
+    });
+}

package/dist/templates/components/confirm/index.ts

@@ -0,0 +1,2 @@
+export * from './confirm';
+export * from './confirm-texts';

package/dist/templates/components/context-menu/context-menu.ts

@@ -0,0 +1,378 @@
+import {
+  CdkConnectedOverlay,
+  type FlexibleConnectedPositionStrategyOrigin,
+  type FlexibleOverlayPopoverLocation,
+  type ScrollStrategy,
+  createCloseScrollStrategy,
+  createRepositionScrollStrategy,
+} from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DOCUMENT,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  Injector,
+  TemplateRef,
+  afterNextRender,
+  booleanAttribute,
+  computed,
+  contentChild,
+  effect,
+  inject,
+  input,
+  isDevMode,
+  model,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import { MimiMenuItemsImports } from '@/components/ui/menu';
+import { MimiMenuPanel } from '@/components/ui/menu/menu';
+import {
+  MIMI_VIEWPORT_MARGIN,
+  mimiConnectedPositions,
+  mimiPointPositions,
+  mimiWaitForExit,
+} from '@/components/ui/utils/overlay';
+
+/*
+ * Context Menu (docs/design/Mimi F2 Overlays.dc.html, «6 · Context Menu»): el menú aparece en el
+ * punto del clic derecho, a 8px como mínimo de los bordes. Mismos ítems, panel y tokens que el
+ * Dropdown Menu (`@/components/ui/menu`, prefijo `menu`, spec 13).
+ *
+ * Se abre con el evento `contextmenu` (clic derecho, Shift+F10, la tecla de menú, la pulsación
+ * larga de Android). Con el puntero, el origen del CDK es el punto; con el teclado, el elemento
+ * enfocado. aria no tiene un patrón de menú contextual: la apertura y la posición son de Mimi y
+ * del CDK; el teclado dentro del menú, de aria (MimiMenuPanel).
+ */
+
+/** Distancia al elemento enfocado cuando se abre con el teclado (la del Dropdown Menu). */
+const OFFSET = 8;
+/** Margen para atribuir un `contextmenu` a Shift+F10 o a la tecla de menú. */
+const KEYBOARD_WINDOW = 1000;
+
+let nextId = 0;
+/** Eventos ya atendidos: con triggers anidados, abre el más interno. */
+const handled = new WeakSet<Event>();
+
+/**
+ * Menú contextual: uno o varios triggers (`[mimiContextMenuTrigger]`) y el contenido en un
+ * `<ng-template mimiContextMenuContent let-dato>`. No dibuja nada propio (`display: contents`): su
+ * `class` y su `aria-label` van al panel.
+ */
+@Component({
+  selector: 'mimi-context-menu',
+  imports: [CdkConnectedOverlay, MimiMenuPanel],
+  template: `
+    <ng-content />
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin()!"
+      [cdkConnectedOverlayOpen]="rendered()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayViewportMargin]="viewportMargin"
+      [cdkConnectedOverlayDisableClose]="true"
+      [cdkConnectedOverlayUsePopover]="popoverLocation"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      cdkConnectedOverlayTransformOriginOn="[data-mimi-overlay-panel]"
+      (detach)="onDetach()"
+      (overlayOutsideClick)="onOutsideClick($event)"
+    >
+      <!-- Se recrea en cada apertura: aria no tiene una API pública para reiniciar el menú. -->
+      @for (key of [openKey()]; track key) {
+        @if (content(); as content) {
+          <mimi-menu-panel
+            [template]="content.templateRef"
+            [context]="context()"
+            [menuId]="menuId"
+            [label]="ariaLabel() ?? ''"
+            [state]="state()"
+            [class]="userClass()"
+            (closeRequest)="close($event)"
+          />
+        }
+      }
+    </ng-template>
+  `,
+  host: {
+    style: 'display: contents',
+    // El class y el aria-label son del panel: en el host no tendrían efecto o se heredarían.
+    '[attr.class]': 'null',
+    '[attr.aria-label]': 'null',
+    '[attr.data-state]': 'open() ? "open" : "closed"',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiContextMenu {
+  private readonly document = inject(DOCUMENT);
+  private readonly injector = inject(Injector);
+
+  /** Abierto o cerrado. Admite `[(open)]`; abierto desde el código, va junto al primer trigger. */
+  readonly open = model(false);
+  /** Nombre accesible del menú (`aria-label`). Hace falta: no hay un botón con texto que lo nombre. */
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  /** Sin menú propio: el clic derecho muestra el del navegador. */
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /** Clases del panel, mezcladas con `cn()` (gana la del usuario). */
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly content = contentChild(MimiContextMenuContent);
+  private readonly panel = viewChild(MimiMenuPanel);
+
+  readonly menuId = `mimi-context-menu-${nextId++}`;
+
+  /** El panel está en el DOM (también mientras dura la animación de salida). */
+  protected readonly rendered = signal(false);
+  protected readonly state = signal<'open' | 'closed'>('closed');
+  /** Cambia en cada apertura para recrear el menú (ítem activo y submenús desde cero). */
+  protected readonly openKey = signal(0);
+  protected readonly origin = signal<FlexibleConnectedPositionStrategyOrigin | null>(null);
+  /** Abierto con el puntero (en un punto) o con el teclado (junto al elemento). */
+  private readonly byPointer = signal(false);
+  /** Dato del trigger que lo abrió (`let-x` en el contenido). */
+  protected readonly context = signal<unknown>(undefined);
+  /** El trigger que lo abrió (lleva `data-state="open"`). */
+  readonly activeTrigger = signal<MimiContextMenuTrigger | null>(null);
+
+  protected readonly viewportMargin = MIMI_VIEWPORT_MARGIN;
+  /** El panel va dentro de este componente, después de los triggers (orden de Tab). */
+  protected readonly popoverLocation: FlexibleOverlayPopoverLocation = {
+    type: 'parent',
+    element: inject<ElementRef<HTMLElement>>(ElementRef).nativeElement,
+  };
+  protected readonly positions = computed(() =>
+    this.byPointer() ? mimiPointPositions() : mimiConnectedPositions('bottom', 'start', OFFSET),
+  );
+
+  /**
+   * Al hacer scroll: abierto con el puntero se cierra (como el menú del sistema: el punto no
+   * sigue al contenido); abierto con el teclado, sigue al elemento.
+   */
+  protected readonly scrollStrategy: ScrollStrategy = (() => {
+    const close = createCloseScrollStrategy(this.injector);
+    const reposition = createRepositionScrollStrategy(this.injector);
+    return {
+      attach: (overlayRef) => {
+        close.attach(overlayRef);
+        reposition.attach(overlayRef);
+      },
+      enable: () => (this.byPointer() ? close : reposition).enable(),
+      disable: () => {
+        close.disable();
+        reposition.disable();
+      },
+      detach: () => {
+        close.detach?.();
+        reposition.detach?.();
+      },
+    };
+  })();
+
+  private readonly triggers = new Set<MimiContextMenuTrigger>();
+  /** Elemento con el foco antes de abrir: lo recupera al cerrar. */
+  private previousFocus: HTMLElement | null = null;
+  /** timeStamp del último Shift+F10 o tecla de menú. */
+  private keyAt: number | null = null;
+  private closing = 0;
+  private refocus = true;
+  private warnedLabel = false;
+
+  private readonly syncOpen = effect(() => {
+    const open = this.open();
+    untracked(() => (open ? this.show() : this.hide()));
+  });
+
+  private readonly syncDisabled = effect(() => {
+    if (this.disabled() && untracked(this.open)) this.close();
+  });
+
+  /** Cierra. Con `refocus` (ítem elegido, Escape) el foco vuelve a donde estaba antes de abrir. */
+  close(refocus = true): void {
+    this.refocus = refocus;
+    this.open.set(false);
+  }
+
+  /** Lo usan los triggers. */
+  register(trigger: MimiContextMenuTrigger): void {
+    this.triggers.add(trigger);
+  }
+
+  unregister(trigger: MimiContextMenuTrigger): void {
+    this.triggers.delete(trigger);
+  }
+
+  /** Shift+F10 o la tecla de menú: el `contextmenu` que sigue viene del teclado. */
+  markKeyboard(event: KeyboardEvent): void {
+    this.keyAt = event.timeStamp;
+  }
+
+  /** Abre desde un `contextmenu` en un trigger. */
+  openFrom(trigger: MimiContextMenuTrigger, event: MouseEvent): void {
+    if (this.disabled() || handled.has(event)) return;
+    handled.add(event);
+    event.preventDefault();
+    // Chrome marca con button -1 el contextmenu del teclado; los demás, por la tecla de antes.
+    const keyboard =
+      event.button === -1 ||
+      (this.keyAt !== null && event.timeStamp - this.keyAt < KEYBOARD_WINDOW);
+    this.keyAt = null;
+    if (!this.rendered()) {
+      const active = this.document.activeElement;
+      this.previousFocus = active instanceof HTMLElement ? active : null;
+    }
+    this.activeTrigger.set(trigger);
+    this.context.set(trigger.data());
+    this.byPointer.set(!keyboard);
+    const target = event.target instanceof Element ? event.target : trigger.element;
+    this.origin.set(keyboard ? target : { x: event.clientX, y: event.clientY });
+    if (this.rendered()) this.reopen();
+    this.open.set(true);
+  }
+
+  private reopen(): void {
+    this.openKey.update((key) => key + 1);
+    // El modo de scroll puede haber cambiado (puntero o teclado).
+    this.scrollStrategy.disable();
+    this.scrollStrategy.enable();
+  }
+
+  private show(): void {
+    this.closing++;
+    if (!this.origin()) {
+      // Abierto desde el código: junto al primer trigger.
+      const first = this.triggers.values().next().value;
+      if (!first) {
+        this.open.set(false);
+        return;
+      }
+      this.activeTrigger.set(first);
+      this.context.set(first.data());
+      this.byPointer.set(false);
+      this.origin.set(first.element);
+    }
+    this.warnMissingLabel();
+    this.state.set('open');
+    if (this.rendered()) this.openKey.update((key) => key + 1);
+    else this.rendered.set(true);
+  }
+
+  private hide(): void {
+    if (!this.rendered()) return;
+    this.state.set('closed');
+    const panel = this.panel()?.element;
+    const active = this.document.activeElement;
+    const focusInside = !active || active === this.document.body || panel?.contains(active);
+    if (this.refocus && focusInside) this.restoreFocus();
+    this.refocus = true;
+    const closing = ++this.closing;
+    afterNextRender(
+      {
+        read: () => {
+          void mimiWaitForExit(panel).then(() => {
+            if (closing !== this.closing) return;
+            this.rendered.set(false);
+            this.origin.set(null);
+            this.activeTrigger.set(null);
+          });
+        },
+      },
+      { injector: this.injector },
+    );
+  }
+
+  /** El elemento que tenía el foco antes de abrir o, si ya no está, el trigger (si es enfocable). */
+  private restoreFocus(): void {
+    const previous = this.previousFocus;
+    const target =
+      previous?.isConnected && previous !== this.document.body
+        ? previous
+        : this.activeTrigger()?.element;
+    target?.focus();
+  }
+
+  protected onDetach(): void {
+    // El CDK lo cerró solo (scroll): el foco estaba en el menú, que ya no existe.
+    const wasOpen = this.open();
+    this.rendered.set(false);
+    this.origin.set(null);
+    this.activeTrigger.set(null);
+    if (!wasOpen) return;
+    this.open.set(false);
+    const active = this.document.activeElement;
+    if (!active || active === this.document.body) this.restoreFocus();
+  }
+
+  /** Clic fuera cierra; un clic derecho sobre otro trigger lo reabre ahí (lo hace el trigger). */
+  protected onOutsideClick(event: MouseEvent): void {
+    const target = event.target as Node | null;
+    if (
+      event.type === 'contextmenu' &&
+      [...this.triggers].some((t) => t.element.contains(target))
+    ) {
+      return;
+    }
+    this.close(false);
+  }
+
+  private warnMissingLabel(): void {
+    if (!isDevMode() || this.warnedLabel || this.ariaLabel()) return;
+    this.warnedLabel = true;
+    console.warn(
+      '[Mimi] Context Menu: el menú no tiene nombre accesible. Agrega aria-label="…" al <mimi-context-menu>.',
+    );
+  }
+}
+
+/**
+ * Zona que abre el menú con clic derecho, Shift+F10 o la tecla de menú: cualquier elemento, uno o
+ * varios (por ejemplo, cada fila de una tabla). `mimiContextMenuTriggerData` llega al contenido.
+ */
+@Directive({
+  selector: '[mimiContextMenuTrigger]',
+  host: {
+    '[attr.data-state]': 'active() ? "open" : "closed"',
+    '(contextmenu)': 'menu.openFrom(this, $event)',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class MimiContextMenuTrigger {
+  protected readonly menu = inject(MimiContextMenu);
+  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  /** Dato para el contenido (`<ng-template mimiContextMenuContent let-fila>`). */
+  readonly data = input<unknown>(undefined, { alias: 'mimiContextMenuTriggerData' });
+
+  protected readonly active = computed(
+    () => this.menu.open() && this.menu.activeTrigger() === this,
+  );
+
+  constructor() {
+    this.menu.register(this);
+    inject(DestroyRef).onDestroy(() => this.menu.unregister(this));
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    if ((event.key === 'F10' && event.shiftKey) || event.key === 'ContextMenu') {
+      this.menu.markKeyboard(event);
+    }
+  }
+}
+
+/**
+ * Contenido del menú: `<ng-template mimiContextMenuContent let-dato>`. Se crea en cada apertura y
+ * se destruye al cerrar. `dato` es el `mimiContextMenuTriggerData` del trigger (sin tipo: anótalo
+ * en tu componente si lo necesitas).
+ */
+@Directive({ selector: 'ng-template[mimiContextMenuContent]' })
+export class MimiContextMenuContent {
+  readonly templateRef = inject(TemplateRef);
+}
+
+export const MimiContextMenuImports = [
+  MimiContextMenu,
+  MimiContextMenuTrigger,
+  MimiContextMenuContent,
+  ...MimiMenuItemsImports,
+] as const;

package/dist/templates/components/context-menu/index.ts

@@ -0,0 +1,14 @@
+export * from './context-menu';
+// Los ítems y sus tipos, para importar todo desde @/components/ui/context-menu.
+export {
+  MimiMenuCheckboxItem,
+  MimiMenuItem,
+  type MimiMenuItemTone,
+  MimiMenuLabel,
+  MimiMenuRadioGroup,
+  MimiMenuRadioItem,
+  MimiMenuSeparator,
+  MimiMenuSub,
+  MimiMenuSubContent,
+  MimiMenuSubTrigger,
+} from '@/components/ui/menu';

package/dist/templates/components/dialog/dialog-texts.ts

@@ -0,0 +1,41 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos de Dialog, en archivo propio y sin @angular/cdk: así se pueden proveer en
+ * `app.config.ts` sin llevar el Dialog al chunk inicial.
+ */
+
+/** Textos que Dialog anuncia. */
+export interface MimiDialogText {
+  /** Nombre accesible del botón de cerrar (la X). */
+  close: string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_DIALOG_TEXT_EN: MimiDialogText = {
+  close: 'Close',
+};
+
+/** Textos en español: `provideMimiDialogText(MIMI_DIALOG_TEXT_ES)`. */
+export const MIMI_DIALOG_TEXT_ES: MimiDialogText = {
+  close: 'Cerrar',
+};
+
+/** Textos activos. Sin `provideMimiDialogText`, los predeterminados en inglés. */
+export const MIMI_DIALOG_TEXT = new InjectionToken<MimiDialogText>('MIMI_DIALOG_TEXT', {
+  providedIn: 'root',
+  factory: () => MIMI_DIALOG_TEXT_EN,
+});
+
+/**
+ * Cambia los textos de Dialog. Lo que no definas sigue en inglés:
+ *
+ * ```ts
+ * provideMimiDialogText(MIMI_DIALOG_TEXT_ES)
+ * ```
+ *
+ * Va en `app.config.ts` o en los `providers` de un componente o ruta.
+ */
+export function provideMimiDialogText(text: Partial<MimiDialogText>): Provider {
+  return { provide: MIMI_DIALOG_TEXT, useValue: { ...MIMI_DIALOG_TEXT_EN, ...text } };
+}