@mimi-ng/cli 0.2.0 → 0.4.0

package/dist/templates/components/input-mask/index.ts

@@ -0,0 +1 @@
+export * from './input-mask';

package/dist/templates/components/input-mask/input-mask.ts

@@ -0,0 +1,319 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import { type FormValueControl, transformedValue } from '@angular/forms/signals';
+import { cn } from '@/components/ui/utils/cn';
+import {
+  MIMI_FIELD_CONTROL,
+  injectFieldState,
+  type MimiFieldControl,
+} from '@/components/ui/utils/field-state';
+
+/*
+ * Input Mask (docs/design/Mimi F3 Slider OTP Numero Mascara.dc.html, «7 · Input Mask»; prefijo
+ * de tokens `mask`, spec 13). Control propio con `FormValueControl<string>`: el modelo guarda
+ * **solo los dígitos** («5512345678») y el campo muestra la máscara («(55) 1234 5678»), como el
+ * diseño (decidido por defecto en la G2.4, opción (b)). Usa `transformedValue()` de Signal Forms.
+ *
+ * Sintaxis: `0` es un dígito; cualquier otro carácter es un literal.
+ */
+
+/** Cuántos dígitos caben en la máscara. */
+export function mimiMaskLength(mask: string): number {
+  return [...mask].filter((c) => c === '0').length;
+}
+
+/**
+ * Aplica la máscara a unos dígitos. Un literal se escribe solo si después viene un dígito
+ * («(5», no «(5) »): así borrar hacia atrás no se traba en los literales.
+ */
+export function mimiApplyMask(mask: string, digits: string): string {
+  let out = '';
+  let i = 0;
+  for (const slot of mask) {
+    if (i >= digits.length) break;
+    if (slot === '0') out += digits[i++];
+    else out += slot;
+  }
+  return out;
+}
+
+/** Los dígitos de un texto (con o sin literales), hasta lo que cabe en la máscara. */
+export function mimiUnmask(mask: string, text: string): string {
+  return (text.match(/\d/g) ?? []).join('').slice(0, mimiMaskLength(mask));
+}
+
+/** Posición en el texto con máscara justo después del dígito número `count` (0: al principio). */
+function caretAfterDigits(masked: string, count: number): number {
+  if (count <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < masked.length; i++) {
+    if (/\d/.test(masked[i]) && ++seen === count) return i + 1;
+  }
+  return masked.length;
+}
+
+/**
+ * La caja (como Input: alto, radio, borde, hover, foco y error) con el input sin su propia caja
+ * adentro, para poder poner el prefijo y los íconos al lado (G2.4b).
+ */
+const BOX_CLASSES = cn(
+  'relative flex w-full min-w-0 cursor-text items-center gap-[var(--mimi-mask-gap,8px)] px-3 font-sans text-foreground mimi-transition',
+  'h-[var(--mimi-input-height,var(--mimi-control-height,2.5rem))] rounded-[var(--mimi-input-radius,var(--mimi-radius,0.75rem))]',
+  'border border-input bg-input-background',
+  'not-data-[disabled]:hover:border-input-hover',
+  'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring-soft',
+  'data-[invalid]:border-destructive data-[invalid]:focus-within:border-destructive data-[invalid]:focus-within:ring-destructive-ring',
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[var(--mimi-disabled-opacity,0.5)]',
+);
+
+/** El texto: 14px, cifras tabulares y un poco de espacio, como el diseño (el marcador igual). */
+const TEXT = 'text-sm tabular-nums tracking-[.02em] whitespace-pre';
+const INPUT_CLASSES = cn(
+  'relative h-full w-full min-w-0 border-0 bg-transparent p-0 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+  TEXT,
+);
+const GHOST_CLASSES = cn('pointer-events-none absolute inset-0 flex items-center', TEXT);
+
+/** Prefijo fijo dentro de la caja (`+52`): un chip `muted`. */
+@Directive({
+  selector: '[mimiMaskPrefix]',
+  host: { 'data-slot': 'prefix', '[class]': 'classes()' },
+})
+export class MimiMaskPrefix {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn(
+      'inline-flex shrink-0 items-center gap-1.5 -ms-1.5 px-2 text-[13px] font-semibold text-foreground',
+      'h-[var(--mimi-mask-prefix-height,26px)] rounded-[var(--mimi-mask-prefix-radius,var(--mimi-radius-sm))] bg-[color:var(--mimi-mask-prefix-bg,var(--mimi-muted))]',
+      this.userClass(),
+    ),
+  );
+}
+
+/** Algo al principio de la caja (un ícono): `muted-foreground`, íconos de 16px. */
+@Directive({
+  selector: '[mimiMaskStart]',
+  host: { 'data-slot': 'start', '[class]': 'classes()' },
+})
+export class MimiMaskStart {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('inline-flex shrink-0 items-center text-muted-foreground [&_svg]:size-4', this.userClass()),
+  );
+}
+
+/** Algo al final de la caja (la marca de la tarjeta, un ícono de válido). */
+@Directive({
+  selector: '[mimiMaskEnd]',
+  host: { 'data-slot': 'end', '[class]': 'classes()' },
+})
+export class MimiMaskEnd {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('inline-flex shrink-0 items-center [&_svg]:size-4', this.userClass()),
+  );
+}
+
+/**
+ * Input Mask:
+ *
+ * ```html
+ * <mimi-input-mask mask="(00) 0000 0000" autocomplete="tel-national" aria-label="Teléfono"
+ *   formControlName="phone" />   <!-- el valor: '5512345678' -->
+ * ```
+ *
+ * Implementa `FormValueControl<string>`: funciona con `[formField]`, `formControlName` y
+ * `[(ngModel)]`. Con Signal Forms, una máscara incompleta deja el campo inválido (error `mask`);
+ * con Reactive Forms y `ngModel`, agrega un validador (por ejemplo, `Validators.minLength`).
+ */
+@Component({
+  selector: 'mimi-input-mask',
+  template: `
+    <ng-content select="[mimiMaskPrefix], [mimiMaskStart]" />
+    <span class="relative flex h-full min-w-0 flex-1 items-center">
+      @if (ghostRest()) {
+        <!-- El marcador de lo que falta: debajo del texto, con lo escrito transparente. -->
+        <span aria-hidden="true" data-slot="ghost" [class]="ghostClasses"
+          ><span class="text-transparent">{{ raw() }}</span
+          ><span
+            class="text-[color:var(--mimi-mask-placeholder,var(--mimi-input-placeholder,var(--mimi-muted-foreground)))]"
+            >{{ ghostRest() }}</span
+          ></span
+        >
+      }
+      <input
+        #field
+        type="text"
+        [class]="inputClasses"
+        [id]="controlId()"
+        [value]="raw()"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        [attr.inputmode]="inputmode()"
+        [attr.autocomplete]="autocomplete() || null"
+        [attr.placeholder]="placeholder() || null"
+        [attr.maxlength]="mask().length"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledby() || null"
+        [attr.aria-describedby]="ariaDescribedby() || null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="required() || null"
+        (input)="onInput()"
+        (keydown)="onKeydown($event)"
+        (compositionstart)="composing = true"
+        (compositionend)="composing = false; onInput()"
+        (blur)="touch.emit()"
+      />
+    </span>
+    <ng-content select="[mimiMaskEnd]" />
+  `,
+  host: {
+    '[class]': 'boxClasses()',
+    '[attr.data-state]': 'complete() ? "complete" : digits() ? "partial" : "empty"',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '(click)': 'focusField($event)',
+    // El nombre y el id van al input de dentro.
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.aria-describedby]': 'null',
+    '[attr.id]': 'null',
+  },
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiInputMask }],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiInputMask implements FormValueControl<string>, MimiFieldControl {
+  /** Solo los dígitos. Con `[(value)]` o un formulario. */
+  readonly value = model('');
+  /** La máscara: `0` es un dígito; lo demás, literales. Por ejemplo, `(00) 0000 0000`. */
+  readonly mask = input.required<string>();
+  /** `numeric` por defecto (teclado de números en el móvil). */
+  readonly inputmode = input('numeric');
+  readonly autocomplete = input<string>();
+  readonly placeholder = input('');
+  /**
+   * Marcador de lo que falta, del largo de la máscara (por ejemplo, `DD/MM/AAAA`): se ve debajo
+   * de lo escrito, en el color del placeholder. Decorativo (`aria-hidden`): di el formato con
+   * texto en `aria-describedby`.
+   */
+  readonly ghost = input('');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly readonly = 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 });
+  /** id del input, para un `<label for>`. */
+  readonly id = input<string>();
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  readonly ariaDescribedby = input<string>(undefined, { alias: 'aria-describedby' });
+  /** Clases de la caja, mezcladas con `cn()` (gana la del usuario). */
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Se emite al salir del campo: marca el control como tocado. */
+  readonly touch = output<void>();
+
+  private readonly field = viewChild.required<ElementRef<HTMLInputElement>>('field');
+
+  /** Estado del formulario, para mimi-form-field. */
+  readonly fieldState = injectFieldState();
+  get controlElement(): HTMLElement {
+    return this.field().nativeElement;
+  }
+
+  private static nextId = 0;
+  private readonly baseId = `mimi-input-mask-${MimiInputMask.nextId++}`;
+  protected readonly controlId = computed(() => this.id() || this.baseId);
+  readonly showInvalid = computed(() => this.invalid() && (this.touched() || this.dirty()));
+
+  /** Lo que se pinta: el valor con la máscara. Con Signal Forms, una máscara incompleta es un error. */
+  protected readonly raw = transformedValue(this.value, {
+    parse: (text: string) => {
+      const digits = mimiUnmask(this.mask(), text);
+      const incomplete = digits.length > 0 && digits.length < mimiMaskLength(this.mask());
+      return incomplete ? { value: digits, error: { kind: 'mask' } } : { value: digits };
+    },
+    format: (digits: string) => mimiApplyMask(this.mask(), mimiUnmask(this.mask(), digits ?? '')),
+  });
+  protected readonly digits = computed(() => mimiUnmask(this.mask(), this.value() ?? ''));
+  protected readonly complete = computed(
+    () => this.digits().length === mimiMaskLength(this.mask()),
+  );
+
+  /** Lo que falta del marcador: lo que está después de lo escrito. */
+  protected readonly ghostRest = computed(() => {
+    const ghost = this.ghost();
+    return ghost ? ghost.slice(this.raw().length) : '';
+  });
+
+  protected readonly boxClasses = computed(() => cn(BOX_CLASSES, this.userClass()));
+  protected readonly inputClasses = INPUT_CLASSES;
+  protected readonly ghostClasses = GHOST_CLASSES;
+
+  /** Un clic en la caja (el prefijo, el ícono o el relleno) lleva el foco al campo. */
+  protected focusField(event: MouseEvent): void {
+    const el = this.field().nativeElement;
+    if (event.target !== el && !el.disabled) el.focus();
+  }
+
+  /** Durante la composición de texto (IME) no se reformatea. */
+  protected composing = false;
+
+  /** Reformatea lo escrito o pegado y repone el cursor después del mismo dígito. */
+  protected onInput(): void {
+    if (this.composing) return;
+    const el = this.field().nativeElement;
+    const caret = el.selectionStart ?? el.value.length;
+    const digitsBefore = (el.value.slice(0, caret).match(/\d/g) ?? []).length;
+    this.write(mimiUnmask(this.mask(), el.value), digitsBefore);
+  }
+
+  /** Borrar sobre un literal borra el dígito de al lado (si no, el literal vuelve y se traba). */
+  protected onKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Backspace' && event.key !== 'Delete') return;
+    const el = this.field().nativeElement;
+    const start = el.selectionStart ?? 0;
+    if (start !== el.selectionEnd || this.readonly()) return;
+    const text = el.value;
+    const back = event.key === 'Backspace';
+    const neighbor = back ? text[start - 1] : text[start];
+    if (neighbor === undefined || /\d/.test(neighbor)) return;
+    // Hay un literal pegado al cursor: se salta y se borra el dígito siguiente en esa dirección.
+    const before = (text.slice(0, start).match(/\d/g) ?? []).length;
+    const digits = mimiUnmask(this.mask(), text);
+    const index = back ? before - 1 : before;
+    if (index < 0 || index >= digits.length) return;
+    event.preventDefault();
+    this.write(digits.slice(0, index) + digits.slice(index + 1), back ? before - 1 : before);
+  }
+
+  private write(digits: string, digitsBefore: number): void {
+    const el = this.field().nativeElement;
+    const masked = mimiApplyMask(this.mask(), digits);
+    this.raw.set(masked);
+    if (el.value !== masked) el.value = masked;
+    const caret = caretAfterDigits(masked, Math.min(digitsBefore, digits.length));
+    if (el.ownerDocument.activeElement === el) el.setSelectionRange(caret, caret);
+  }
+}
+
+/** Todas las piezas de Input Mask, para importarlas juntas. */
+export const MimiInputMaskImports = [
+  MimiInputMask,
+  MimiMaskPrefix,
+  MimiMaskStart,
+  MimiMaskEnd,
+] as const;

package/dist/templates/components/input-otp/index.ts

@@ -0,0 +1 @@
+export * from './input-otp';

package/dist/templates/components/input-otp/input-otp.ts

@@ -0,0 +1,212 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  booleanAttribute,
+  computed,
+  input,
+  model,
+  numberAttribute,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import type { FormValueControl } from '@angular/forms/signals';
+import { cn } from '@/components/ui/utils/cn';
+import {
+  MIMI_FIELD_CONTROL,
+  injectFieldState,
+  type MimiFieldControl,
+} from '@/components/ui/utils/field-state';
+
+/*
+ * Input OTP (docs/design/Mimi F3 Slider OTP Numero Mascara.dc.html, «5 · Input OTP»; prefijo de
+ * tokens `otp`, spec 13). **Un solo `<input>` real**, transparente y encima de las casillas
+ * (decidido por defecto en la G2.5, como el diseño): el lector lee un campo con el código entero,
+ * y pegar, borrar y el autocompletado del SMS (`autocomplete="one-time-code"`) son los nativos.
+ * Las casillas son `aria-hidden`.
+ */
+
+const BOX_BASE =
+  'relative flex shrink-0 items-center justify-center border font-semibold tabular-nums text-foreground mimi-transition w-[var(--mimi-otp-width,46px)] h-[var(--mimi-otp-height,54px)] rounded-[var(--mimi-otp-radius,var(--mimi-radius,0.75rem))] text-[length:var(--mimi-otp-font-size,22px)] bg-[color:var(--mimi-otp-bg,var(--mimi-input-background))]';
+/** Borde y anillo de cada casilla según el estado (elegidos en TypeScript: menos CSS global). */
+const BOX_STATE = {
+  idle: 'border-[color:var(--mimi-otp-border,var(--mimi-input))]',
+  active: 'border-ring ring-3 ring-ring-soft',
+  success: 'border-success ring-3 ring-success-ring',
+  error: 'border-destructive ring-3 ring-destructive-ring',
+} as const;
+
+/**
+ * Input OTP:
+ *
+ * ```html
+ * <mimi-input-otp aria-label="Código de verificación" [length]="6" [separatorAfter]="3"
+ *   formControlName="code" />
+ * ```
+ *
+ * Implementa `FormValueControl<string>`: funciona con `[formField]`, `formControlName` y
+ * `[(ngModel)]`. El valor son los caracteres escritos, sin espacios ni guiones.
+ */
+@Component({
+  selector: 'mimi-input-otp',
+  template: `
+    @for (box of boxes(); track $index) {
+      @if (box.separator) {
+        <span
+          aria-hidden="true"
+          data-slot="separator"
+          class="h-0.5 w-3 shrink-0 rounded-[2px] bg-[color:var(--mimi-otp-separator,var(--mimi-border))]"
+        ></span>
+      }
+      <span
+        aria-hidden="true"
+        data-slot="box"
+        [class]="box.classes"
+        [attr.data-active]="box.active ? '' : null"
+      >
+        {{ box.char }}
+        @if (box.caret) {
+          <span
+            data-slot="caret"
+            class="h-[22px] w-0.5 rounded-[1px] bg-[color:var(--mimi-otp-caret,var(--mimi-foreground))] animate-[mimi-caret_1s_steps(1)_infinite] motion-reduce:animate-none"
+          ></span>
+        }
+      </span>
+    }
+    <input
+      #field
+      type="text"
+      class="absolute inset-0 h-full w-full cursor-text border-0 bg-transparent p-0 text-base text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed"
+      [id]="controlId()"
+      [value]="value() ?? ''"
+      [disabled]="disabled()"
+      [readOnly]="readonly()"
+      [attr.maxlength]="safeLength()"
+      [attr.inputmode]="alphanumeric() ? 'text' : 'numeric'"
+      [attr.autocomplete]="autocomplete()"
+      [attr.autocapitalize]="alphanumeric() ? 'characters' : null"
+      [attr.spellcheck]="false"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-describedby]="ariaDescribedby() || null"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.aria-required]="required() || null"
+      (input)="onInput()"
+      (focus)="focused.set(true)"
+      (blur)="focused.set(false); touch.emit()"
+    />
+  `,
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-state]': 'state()',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.data-success]': 'success() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.aria-describedby]': 'null',
+    '[attr.id]': 'null',
+  },
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiInputOtp }],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiInputOtp implements FormValueControl<string>, MimiFieldControl {
+  /** El código: solo dígitos (o letras y dígitos con `alphanumeric`). */
+  readonly value = model('');
+  /** Cuántas casillas (6 en el diseño). */
+  readonly length = input(6, { transform: numberAttribute });
+  /** Después de qué casilla va el guion (3 en el diseño). Sin él, no hay guion. */
+  readonly separatorAfter = input<number | undefined, unknown>(undefined, {
+    transform: (v: unknown) =>
+      v === null || v === undefined || v === '' ? undefined : numberAttribute(v),
+  });
+  /** Letras y dígitos (algunos códigos los tienen). Por defecto, solo dígitos. */
+  readonly alphanumeric = input(false, { transform: booleanAttribute });
+  /** El código se verificó: borde y anillo `success` (como «Código verificado.» del diseño). */
+  readonly success = input(false, { transform: booleanAttribute });
+  /** `one-time-code` por defecto: el sistema propone el código del SMS. */
+  readonly autocomplete = input('one-time-code');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly readonly = 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 });
+  /** id del input, para un `<label for>`. */
+  readonly id = input<string>();
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  readonly ariaDescribedby = input<string>(undefined, { alias: 'aria-describedby' });
+  /** Clases de la fila de casillas, mezcladas con `cn()` (gana la del usuario). */
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Se emite al salir del campo: marca el control como tocado. */
+  readonly touch = output<void>();
+
+  private readonly field = viewChild.required<ElementRef<HTMLInputElement>>('field');
+
+  readonly fieldState = injectFieldState();
+  get controlElement(): HTMLElement {
+    return this.field().nativeElement;
+  }
+
+  private static nextId = 0;
+  private readonly baseId = `mimi-input-otp-${MimiInputOtp.nextId++}`;
+  protected readonly controlId = computed(() => this.id() || this.baseId);
+  readonly showInvalid = computed(() => this.invalid() && (this.touched() || this.dirty()));
+  protected readonly focused = signal(false);
+
+  protected readonly safeLength = computed(() => {
+    const n = Math.floor(this.length());
+    return Number.isFinite(n) && n > 0 ? n : 6;
+  });
+  private readonly chars = computed(() => this.clean(this.value() ?? ''));
+  protected readonly state = computed(() => {
+    const n = this.chars().length;
+    return n === 0 ? 'empty' : n >= this.safeLength() ? 'complete' : 'partial';
+  });
+
+  protected readonly boxes = computed(() => {
+    const chars = this.chars();
+    const length = this.safeLength();
+    const after = this.separatorAfter();
+    // La casilla activa: la siguiente a llenar (la última si está completo), con el foco.
+    const activeIndex = Math.min(chars.length, length - 1);
+    const status = this.showInvalid() ? 'error' : this.success() ? 'success' : null;
+    return Array.from({ length }, (_, i) => {
+      const active = this.focused() && !this.disabled() && i === activeIndex && !status;
+      return {
+        char: chars[i] ?? '',
+        separator: after !== undefined && after > 0 && after < length && i === after,
+        active,
+        caret: active && !chars[i],
+        classes: cn(BOX_BASE, BOX_STATE[status ?? (active ? 'active' : 'idle')]),
+      };
+    });
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      'relative inline-flex items-center gap-[var(--mimi-otp-gap,8px)] align-middle font-sans',
+      'data-[disabled]:opacity-[var(--mimi-disabled-opacity,0.5)]',
+      // Error: la fila se sacude una vez (sin movimiento con «reducir movimiento»).
+      'data-[invalid]:animate-[mimi-shake_.4s] motion-reduce:data-[invalid]:animate-none',
+      this.userClass(),
+    ),
+  );
+
+  /** Solo los caracteres válidos, hasta la longitud (quita espacios y guiones de lo pegado). */
+  private clean(text: string): string {
+    const pattern = this.alphanumeric() ? /[^\p{L}\p{N}]/gu : /\D/g;
+    return text.replace(pattern, '').slice(0, this.safeLength());
+  }
+
+  protected onInput(): void {
+    const el = this.field().nativeElement;
+    const clean = this.clean(el.value);
+    if (el.value !== clean) el.value = clean;
+    if (clean !== this.value()) this.value.set(clean);
+  }
+}

package/dist/templates/components/number-input/index.ts

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

package/dist/templates/components/number-input/number-input-texts.ts

@@ -0,0 +1,46 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos de Number Input, en archivo propio: así se pueden proveer en `app.config.ts` sin llevar
+ * el componente al chunk inicial (como Select, G1.5).
+ */
+
+/** Nombres accesibles de los botones. `label` es el nombre del campo (puede venir vacío). */
+export interface MimiNumberInputText {
+  decrement: (label: string) => string;
+  increment: (label: string) => string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_NUMBER_INPUT_TEXT_EN: MimiNumberInputText = {
+  decrement: (label) => (label ? `Decrease ${label}` : 'Decrease'),
+  increment: (label) => (label ? `Increase ${label}` : 'Increase'),
+};
+
+/** Textos en español: `provideMimiNumberInputText(MIMI_NUMBER_INPUT_TEXT_ES)`. */
+export const MIMI_NUMBER_INPUT_TEXT_ES: MimiNumberInputText = {
+  decrement: (label) => (label ? `Disminuir ${label}` : 'Disminuir'),
+  increment: (label) => (label ? `Aumentar ${label}` : 'Aumentar'),
+};
+
+/** Textos activos. Sin `provideMimiNumberInputText`, los predeterminados en inglés. */
+export const MIMI_NUMBER_INPUT_TEXT = new InjectionToken<MimiNumberInputText>(
+  'MIMI_NUMBER_INPUT_TEXT',
+  { providedIn: 'root', factory: () => MIMI_NUMBER_INPUT_TEXT_EN },
+);
+
+/**
+ * Cambia los textos de Number Input. Lo que no definas sigue en inglés:
+ *
+ * ```ts
+ * provideMimiNumberInputText(MIMI_NUMBER_INPUT_TEXT_ES)
+ * ```
+ *
+ * Va en `app.config.ts` o en los `providers` de un componente o ruta.
+ */
+export function provideMimiNumberInputText(text: Partial<MimiNumberInputText>): Provider {
+  return {
+    provide: MIMI_NUMBER_INPUT_TEXT,
+    useValue: { ...MIMI_NUMBER_INPUT_TEXT_EN, ...text },
+  };
+}