@mimi-ng/cli 0.2.0 → 0.4.0

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

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

package/dist/templates/components/date-picker/date-picker.ts

@@ -0,0 +1,240 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  LOCALE_ID,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import type { FormValueControl } from '@angular/forms/signals';
+import { MimiCalendar } from '@/components/ui/calendar/calendar';
+import { MIMI_DATE_PICKER_TEXT } from '@/components/ui/calendar/calendar-texts';
+import { type MimiDate, mimiFormatDate, mimiIsDate } from '@/components/ui/calendar/dates';
+import { MimiPopover, MimiPopoverContent, MimiPopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/components/ui/utils/cn';
+import {
+  controlInvalidStyles,
+  controlPressStyles,
+  fieldFocusStyles,
+} from '@/components/ui/utils/control-styles';
+import {
+  MIMI_FIELD_CONTROL,
+  type MimiFieldControl,
+  injectFieldState,
+} from '@/components/ui/utils/field-state';
+
+/*
+ * Date Picker (docs/design/Mimi F3 Combobox Fechas Hora.dc.html, «2 · Date Picker y Date
+ * Range»; prefijo de tokens `date`, spec 13): un botón con la fecha que abre el calendario en un
+ * Popover (`role="dialog"`). No se escribe la fecha a mano en la 0.3.0 (decidido por defecto en
+ * la G2.9, como el diseño).
+ */
+
+/** El disparador: la caja de Input con un botón (los estados de Input, spec 13, «Campos»). */
+export const MIMI_DATE_TRIGGER_CLASSES = cn(
+  'flex h-[var(--mimi-control-height,2.5rem)] w-full min-w-0 cursor-pointer items-center gap-2 px-3 text-left font-sans text-sm text-foreground',
+  'rounded-[var(--mimi-radius,0.75rem)] border border-input bg-input-background not-disabled:hover:border-input-hover',
+  'disabled:cursor-not-allowed disabled:opacity-[var(--mimi-disabled-opacity,0.5)] [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground',
+  fieldFocusStyles,
+  controlInvalidStyles,
+  controlPressStyles,
+);
+
+/** El panel del Popover con los tokens del calendario. */
+export const MIMI_DATE_PANEL_CLASSES =
+  'w-auto gap-2 p-[var(--mimi-date-padding,12px)] bg-[color:var(--mimi-date-menu-bg,var(--mimi-popover))] shadow-[shadow:var(--mimi-date-menu-shadow,var(--mimi-shadow-popover))]';
+
+/** Formato del disparador por defecto: «30 sept 2026». */
+const DEFAULT_FORMAT: Intl.DateTimeFormatOptions = {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+};
+
+let nextId = 0;
+
+/** `null` y la cadena vacía son «sin límite». */
+const toDate = (value: unknown): MimiDate | undefined =>
+  value === null || value === undefined || value === '' ? undefined : String(value);
+
+/**
+ * Date Picker:
+ *
+ * ```html
+ * <mimi-date-picker aria-label="Fecha de entrega" [(value)]="fecha" [isDateDisabled]="finDeSemana" />
+ * ```
+ *
+ * `value` es una fecha ISO (`'2026-09-30'`; `toMimiDate` y `fromMimiDate` convierten de y a
+ * `Date`). Implementa `FormValueControl`: funciona con `[formField]`, `formControlName` y
+ * `[(ngModel)]` (spec 8). `class` va al disparador y `panelClass` al panel.
+ */
+@Component({
+  selector: 'mimi-date-picker',
+  imports: [MimiPopover, MimiPopoverTrigger, MimiPopoverContent, MimiCalendar],
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiDatePicker }],
+  template: `
+    <mimi-popover
+      align="start"
+      [arrow]="false"
+      [class]="panelClasses()"
+      [(open)]="open"
+      (openChange)="onOpenChange($event)"
+      aria-label="{{ texts.pickDate }}"
+    >
+      <button
+        #trigger
+        type="button"
+        mimiPopoverTrigger
+        [id]="controlId()"
+        [class]="classes()"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledby() || null"
+        [attr.aria-describedby]="valueId"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="required() || null"
+        [attr.data-placeholder]="label() ? null : ''"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <!-- Lucide calendar (ISC) -->
+          <path d="M8 2v4" />
+          <path d="M16 2v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18" />
+        </svg>
+        <span
+          class="min-w-0 flex-1 truncate tabular-nums"
+          [class.text-muted-foreground]="!label()"
+          [id]="valueId"
+          >{{ label() || placeholder() }}</span
+        >
+      </button>
+      <ng-template mimiPopoverContent>
+        <mimi-calendar
+          [value]="calendarValue()"
+          [min]="min() ?? null"
+          [max]="max() ?? null"
+          [isDateDisabled]="isDateDisabled()"
+          [locale]="lang()"
+          [weekStart]="weekStart()"
+          (datePick)="pick($event)"
+        />
+      </ng-template>
+    </mimi-popover>
+  `,
+  host: {
+    class: 'block w-full min-w-0',
+    '[attr.class]': 'null',
+    '[attr.id]': 'null',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.data-state]': 'open() ? "open" : "closed"',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiDatePicker implements FormValueControl<MimiDate | null>, MimiFieldControl {
+  private readonly defaultLocale = inject(LOCALE_ID);
+  protected readonly texts = inject(MIMI_DATE_PICKER_TEXT);
+
+  /** La fecha elegida (`'2026-09-30'`), o `null`. Con `[(value)]` o un formulario. */
+  readonly value = model<MimiDate | null>(null);
+  /**
+   * Primera y última fecha que se pueden elegir (incluidas). Tienen el tipo del valor (lo exige
+   * `FormValueControl`). Con `[formField]`, Signal Forms no deja enlazarlas (NG8022): los límites
+   * van en `isDateDisabled` y la validación, en el esquema (spec 8).
+   */
+  readonly min = input<MimiDate | undefined, unknown>(undefined, { transform: toDate });
+  readonly max = input<MimiDate | undefined, unknown>(undefined, { transform: toDate });
+  /** Fechas que no se pueden elegir (por ejemplo, los fines de semana). */
+  readonly isDateDisabled = input<((date: MimiDate) => boolean) | null>(null);
+  /** Idioma (nombres, formato y primer día de la semana). Por defecto, `LOCALE_ID`. */
+  readonly locale = input<string>();
+  /** Primer día de la semana (1 = lunes … 7 = domingo). Por defecto, el del idioma. */
+  readonly weekStart = input<number>();
+  /** Formato del disparador (opciones de `Intl.DateTimeFormat`). Por defecto, «30 sept 2026». */
+  readonly format = input<Intl.DateTimeFormatOptions>(DEFAULT_FORMAT);
+  readonly placeholder = input('');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /** Los pasa el formulario. Se muestra el error si es inválido y se tocó o modificó. */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  readonly touched = input(false, { transform: booleanAttribute });
+  readonly dirty = input(false, { transform: booleanAttribute });
+  readonly required = input(false, { transform: booleanAttribute });
+  readonly id = input<string>();
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  /** Clases del disparador, mezcladas con `cn()`. */
+  readonly userClass = input('', { alias: 'class' });
+  /** Clases del panel. */
+  readonly panelClass = input('');
+
+  /** Se cerró el panel: marca el control como tocado. */
+  readonly touch = output<void>();
+
+  private readonly trigger = viewChild.required<ElementRef<HTMLButtonElement>>('trigger');
+  readonly fieldState = injectFieldState();
+  get controlElement(): HTMLElement {
+    return this.trigger().nativeElement;
+  }
+
+  private readonly baseId = `mimi-date-picker-${nextId++}`;
+  protected readonly controlId = computed(() => this.id() || this.baseId);
+  protected readonly valueId = `${this.baseId}-value`;
+  readonly showInvalid = computed(() => this.invalid() && (this.touched() || this.dirty()));
+
+  protected readonly open = signal(false);
+  protected readonly lang = computed(() => this.locale() || this.defaultLocale);
+  protected readonly classes = computed(() => cn(MIMI_DATE_TRIGGER_CLASSES, this.userClass()));
+  protected readonly panelClasses = computed(() => cn(MIMI_DATE_PANEL_CLASSES, this.panelClass()));
+
+  /** Solo una fecha válida llega al calendario (un valor raro del formulario se muestra igual). */
+  protected readonly calendarValue = computed(() => {
+    const value = this.value();
+    return mimiIsDate(value) ? value : null;
+  });
+  /**
+   * Texto del disparador. El valor vive en Mimi (spec 4): una fecha fuera de `min`/`max` o no
+   * disponible que llega del formulario se muestra igual; el formulario decide si es un error.
+   */
+  protected readonly label = computed(() => {
+    const value = this.calendarValue();
+    return value ? mimiFormatDate(value, this.lang(), this.format()) : '';
+  });
+
+  /** Enfoca el disparador. Lo usa Signal Forms para llevar el foco al campo con error. */
+  focus(options?: FocusOptions): void {
+    this.trigger().nativeElement.focus(options);
+  }
+
+  protected pick(date: MimiDate): void {
+    this.value.set(date);
+    this.setOpen(false);
+  }
+
+  /** Lo llama el Popover (clic, Escape, clic fuera). */
+  protected onOpenChange(open: boolean): void {
+    if (!open) this.touch.emit();
+  }
+
+  private setOpen(open: boolean): void {
+    if (this.open() === open) return;
+    this.open.set(open);
+    if (!open) this.touch.emit();
+  }
+}

package/dist/templates/components/date-picker/index.ts

@@ -0,0 +1,3 @@
+// Solo la API pública: las clases del disparador y del panel son internas (las usa el Date Range
+// desde './date-picker').
+export { MimiDatePicker } from './date-picker';

package/dist/templates/components/date-range/date-range.ts

@@ -0,0 +1,308 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  LOCALE_ID,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import type { FormValueControl } from '@angular/forms/signals';
+import { MimiCalendar } from '@/components/ui/calendar/calendar';
+import { MIMI_DATE_PICKER_TEXT } from '@/components/ui/calendar/calendar-texts';
+import {
+  type MimiDate,
+  type MimiDateRange,
+  mimiDaysBetween,
+  mimiFormatDate,
+  mimiIsDate,
+} from '@/components/ui/calendar/dates';
+import {
+  MIMI_DATE_PANEL_CLASSES,
+  MIMI_DATE_TRIGGER_CLASSES,
+} from '@/components/ui/date-picker/date-picker';
+import { MimiPopover, MimiPopoverContent, MimiPopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/components/ui/utils/cn';
+import { buttonFocusStyles } from '@/components/ui/utils/control-styles';
+import {
+  MIMI_FIELD_CONTROL,
+  type MimiFieldControl,
+  injectFieldState,
+} from '@/components/ui/utils/field-state';
+
+/*
+ * Date Range (docs/design/Mimi F3 Combobox Fechas Hora.dc.html, «2 · Date Picker y Date
+ * Range»; prefijo de tokens `date`, spec 13): un botón con el periodo y la cuenta de días que
+ * abre el calendario en modo rango, con atajos opcionales. Componente aparte del Date Picker
+ * (decidido por defecto en la G2.9), con el mismo calendario.
+ *
+ * Elección: el primer clic marca el inicio; el segundo, el fin (si es anterior, se intercambian);
+ * el siguiente empieza otro periodo. El modelo cambia solo con los dos extremos (decidido por
+ * defecto en la G2.9): lo que se ve con solo el inicio vive en Mimi.
+ */
+
+/** Un atajo: texto y periodo (`{ label: 'Últimos 7 días', range: { start, end } }`). */
+export interface MimiDateRangePreset {
+  label: string;
+  range: MimiDateRange;
+}
+
+const DEFAULT_FORMAT: Intl.DateTimeFormatOptions = {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+};
+
+const PRESET_BASE = cn(
+  'h-8 cursor-pointer rounded-[var(--mimi-radius-sm)] border-0 px-2 text-left text-[13px] text-foreground mimi-transition hover:bg-accent active:scale-[0.96]',
+  buttonFocusStyles,
+);
+const PRESET = {
+  on: cn(PRESET_BASE, 'bg-accent font-semibold'),
+  off: cn(PRESET_BASE, 'bg-transparent'),
+} as const;
+
+const toDate = (value: unknown): MimiDate | undefined =>
+  value === null || value === undefined || value === '' ? undefined : String(value);
+
+const isRange = (value: unknown): value is MimiDateRange =>
+  !!value &&
+  typeof value === 'object' &&
+  mimiIsDate((value as MimiDateRange).start) &&
+  mimiIsDate((value as MimiDateRange).end);
+
+let nextId = 0;
+
+/**
+ * Date Range:
+ *
+ * ```html
+ * <mimi-date-range aria-label="Periodo" [(value)]="periodo" [maxDate]="hoy" [presets]="atajos" />
+ * ```
+ *
+ * `value` es `{ start, end }` con fechas ISO (`MimiDateRange`), o `null`. Implementa
+ * `FormValueControl`. `class` va al disparador y `panelClass` al panel.
+ */
+@Component({
+  selector: 'mimi-date-range',
+  imports: [MimiPopover, MimiPopoverTrigger, MimiPopoverContent, MimiCalendar],
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiDateRangePicker }],
+  template: `
+    <mimi-popover
+      align="start"
+      [arrow]="false"
+      [class]="panelClasses()"
+      [(open)]="open"
+      (openChange)="onOpenChange($event)"
+      aria-label="{{ texts.pickRange }}"
+    >
+      <button
+        #trigger
+        type="button"
+        mimiPopoverTrigger
+        [id]="controlId()"
+        [class]="classes()"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledby() || null"
+        [attr.aria-describedby]="valueId"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="required() || null"
+        [attr.data-placeholder]="label() ? null : ''"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <!-- Lucide calendar-range (ISC) -->
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M16 2v4" />
+          <path d="M3 10h18" />
+          <path d="M8 2v4" />
+          <path d="M17 14h-6" />
+          <path d="M13 18H7" />
+          <path d="M7 14h.01" />
+          <path d="M17 18h.01" />
+        </svg>
+        <span [id]="valueId" class="flex min-w-0 flex-1 items-center gap-2">
+          <span
+            class="min-w-0 flex-1 truncate tabular-nums"
+            [class.text-muted-foreground]="!label()"
+            >{{ label() || placeholder() }}</span
+          >
+          @if (days(); as days) {
+            <!-- La coma separa la fecha de los días para el lector (el espacio lo da el flex). -->
+            <span class="sr-only">, </span>
+            <span data-slot="days" class="shrink-0 text-xs text-muted-foreground">{{ days }}</span>
+          }
+        </span>
+      </button>
+      <ng-template mimiPopoverContent>
+        @if (presets().length) {
+          <div
+            data-slot="presets"
+            class="flex w-[var(--mimi-date-presets-width,130px)] shrink-0 flex-col gap-0.5 border-e border-border p-2"
+          >
+            @for (preset of presets(); track preset.label) {
+              <button
+                type="button"
+                [class]="isPreset(preset) ? presetOn : presetOff"
+                [attr.aria-pressed]="isPreset(preset)"
+                (click)="pickPreset(preset)"
+              >
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+        <div class="flex flex-col gap-2 p-[var(--mimi-date-padding,12px)]">
+          <mimi-calendar
+            mode="range"
+            [rangeStart]="shownStart()"
+            [rangeEnd]="shownEnd()"
+            [min]="minDate() ?? null"
+            [max]="maxDate() ?? null"
+            [isDateDisabled]="isDateDisabled()"
+            [locale]="lang()"
+            [weekStart]="weekStart()"
+            (datePick)="pickDay($event)"
+          />
+          <span data-slot="help" class="text-xs text-muted-foreground" aria-live="polite">{{
+            startPick() ? texts.pickEnd : texts.pickStart
+          }}</span>
+        </div>
+      </ng-template>
+    </mimi-popover>
+  `,
+  host: {
+    class: 'block w-full min-w-0',
+    '[attr.class]': 'null',
+    '[attr.id]': 'null',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.data-state]': 'open() ? "open" : "closed"',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiDateRangePicker
+  implements FormValueControl<MimiDateRange | null>, MimiFieldControl
+{
+  private readonly defaultLocale = inject(LOCALE_ID);
+  protected readonly texts = inject(MIMI_DATE_PICKER_TEXT);
+
+  /** El periodo (`{ start: '2026-09-24', end: '2026-09-30' }`), o `null`. */
+  readonly value = model<MimiDateRange | null>(null);
+  /**
+   * Primera y última fecha que se pueden elegir. No se llaman `min`/`max`: `FormValueControl` les
+   * daría el tipo del valor (un periodo).
+   */
+  readonly minDate = input<MimiDate | undefined, unknown>(undefined, { transform: toDate });
+  readonly maxDate = input<MimiDate | undefined, unknown>(undefined, { transform: toDate });
+  /** Fechas que no se pueden elegir como inicio o fin. */
+  readonly isDateDisabled = input<((date: MimiDate) => boolean) | null>(null);
+  /** Atajos de la columna izquierda. Sin atajos, no hay columna. */
+  readonly presets = input<readonly MimiDateRangePreset[]>([]);
+  readonly locale = input<string>();
+  readonly weekStart = input<number>();
+  /** Formato de cada fecha en el botón (opciones de `Intl.DateTimeFormat`). */
+  readonly format = input<Intl.DateTimeFormatOptions>(DEFAULT_FORMAT);
+  readonly placeholder = input('');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly invalid = input(false, { transform: booleanAttribute });
+  readonly touched = input(false, { transform: booleanAttribute });
+  readonly dirty = input(false, { transform: booleanAttribute });
+  readonly required = input(false, { transform: booleanAttribute });
+  readonly id = input<string>();
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  readonly userClass = input('', { alias: 'class' });
+  readonly panelClass = input('');
+
+  /** Se cerró el panel: marca el control como tocado. */
+  readonly touch = output<void>();
+
+  private readonly trigger = viewChild.required<ElementRef<HTMLButtonElement>>('trigger');
+  readonly fieldState = injectFieldState();
+  get controlElement(): HTMLElement {
+    return this.trigger().nativeElement;
+  }
+
+  private readonly baseId = `mimi-date-range-${nextId++}`;
+  protected readonly controlId = computed(() => this.id() || this.baseId);
+  protected readonly valueId = `${this.baseId}-value`;
+  readonly showInvalid = computed(() => this.invalid() && (this.touched() || this.dirty()));
+
+  protected readonly open = signal(false);
+  /** Inicio elegido mientras falta el fin (no está en el modelo). */
+  protected readonly startPick = signal<MimiDate | null>(null);
+  protected readonly presetOn = PRESET.on;
+  protected readonly presetOff = PRESET.off;
+
+  protected readonly lang = computed(() => this.locale() || this.defaultLocale);
+  protected readonly classes = computed(() => cn(MIMI_DATE_TRIGGER_CLASSES, this.userClass()));
+  protected readonly panelClasses = computed(() =>
+    cn(MIMI_DATE_PANEL_CLASSES, 'flex-row gap-0 overflow-hidden p-0', this.panelClass()),
+  );
+
+  private readonly range = computed(() => {
+    const value = this.value();
+    return isRange(value) ? value : null;
+  });
+  protected readonly shownStart = computed(() => this.startPick() ?? this.range()?.start ?? null);
+  protected readonly shownEnd = computed(() =>
+    this.startPick() ? null : (this.range()?.end ?? null),
+  );
+
+  protected readonly label = computed(() => {
+    const range = this.range();
+    if (!range) return '';
+    const format = (date: MimiDate) => mimiFormatDate(date, this.lang(), this.format());
+    return `${format(range.start)} – ${format(range.end)}`;
+  });
+  protected readonly days = computed(() => {
+    const range = this.range();
+    return range ? this.texts.days(mimiDaysBetween(range.start, range.end)) : '';
+  });
+
+  protected isPreset(preset: MimiDateRangePreset): boolean {
+    const range = this.range();
+    return !!range && range.start === preset.range.start && range.end === preset.range.end;
+  }
+
+  focus(options?: FocusOptions): void {
+    this.trigger().nativeElement.focus(options);
+  }
+
+  protected pickDay(date: MimiDate): void {
+    const start = this.startPick();
+    if (start === null) {
+      this.startPick.set(date);
+      return;
+    }
+    this.startPick.set(null);
+    this.value.set(date < start ? { start: date, end: start } : { start, end: date });
+  }
+
+  protected pickPreset(preset: MimiDateRangePreset): void {
+    this.startPick.set(null);
+    this.value.set({ ...preset.range });
+  }
+
+  protected onOpenChange(open: boolean): void {
+    if (open) return;
+    this.startPick.set(null);
+    this.touch.emit();
+  }
+}

package/dist/templates/components/date-range/index.ts

@@ -0,0 +1 @@
+export * from './date-range';

package/dist/templates/components/file-upload/file-upload-texts.ts

@@ -0,0 +1,77 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos de File Upload, en archivo propio: así se pueden proveer en `app.config.ts` sin llevar
+ * el componente al chunk inicial. Los tamaños se escriben con `Intl.NumberFormat` y el idioma.
+ */
+
+export interface MimiFileUploadText {
+  /** Título de la zona en reposo (también su nombre accesible). */
+  title: string;
+  /** Título con archivos encima. */
+  drop: (count: number) => string;
+  /** Nombre de la lista. */
+  list: string;
+  /** Nombre de la barra de un archivo. */
+  uploading: (name: string) => string;
+  uploaded: string;
+  retry: string;
+  remove: (name: string) => string;
+  /** Motivos de rechazo. */
+  tooLarge: (max: string) => string;
+  wrongType: string;
+  tooMany: (max: number) => string;
+  /** Anuncios. */
+  added: (count: number) => string;
+  rejected: (name: string, reason: string) => string;
+  done: (name: string) => string;
+  failed: (name: string, error: string) => string;
+}
+
+export const MIMI_FILE_UPLOAD_TEXT_EN: MimiFileUploadText = {
+  title: 'Drag files here or click',
+  drop: (count) =>
+    count > 0 ? `Drop to upload ${count} ${count === 1 ? 'file' : 'files'}` : 'Drop to upload',
+  list: 'Files',
+  uploading: (name) => `Uploading ${name}`,
+  uploaded: 'Uploaded',
+  retry: 'Retry',
+  remove: (name) => `Remove ${name}`,
+  tooLarge: (max) => `Exceeds the ${max} limit.`,
+  wrongType: 'File type not allowed.',
+  tooMany: (max) => `Up to ${max} ${max === 1 ? 'file' : 'files'}.`,
+  added: (count) => `${count} ${count === 1 ? 'file' : 'files'} added`,
+  rejected: (name, reason) => `${name} not added: ${reason}`,
+  done: (name) => `${name} uploaded`,
+  failed: (name, error) => `${name} failed: ${error}`,
+};
+
+export const MIMI_FILE_UPLOAD_TEXT_ES: MimiFileUploadText = {
+  title: 'Arrastra archivos o haz clic',
+  drop: (count) =>
+    count > 0
+      ? `Suelta para subir ${count} ${count === 1 ? 'archivo' : 'archivos'}`
+      : 'Suelta para subir',
+  list: 'Archivos',
+  uploading: (name) => `Subiendo ${name}`,
+  uploaded: 'Subido',
+  retry: 'Reintentar',
+  remove: (name) => `Quitar ${name}`,
+  tooLarge: (max) => `Supera el máximo de ${max}.`,
+  wrongType: 'Tipo de archivo no permitido.',
+  tooMany: (max) => `Hasta ${max} ${max === 1 ? 'archivo' : 'archivos'}.`,
+  added: (count) => `${count} ${count === 1 ? 'archivo agregado' : 'archivos agregados'}`,
+  rejected: (name, reason) => `${name} no se agregó: ${reason}`,
+  done: (name) => `${name} subido`,
+  failed: (name, error) => `${name} con error: ${error}`,
+};
+
+export const MIMI_FILE_UPLOAD_TEXT = new InjectionToken<MimiFileUploadText>(
+  'MIMI_FILE_UPLOAD_TEXT',
+  { providedIn: 'root', factory: () => MIMI_FILE_UPLOAD_TEXT_EN },
+);
+
+/** Cambia los textos de File Upload. Lo que no definas sigue en inglés. */
+export function provideMimiFileUploadText(text: Partial<MimiFileUploadText>): Provider {
+  return { provide: MIMI_FILE_UPLOAD_TEXT, useValue: { ...MIMI_FILE_UPLOAD_TEXT_EN, ...text } };
+}