@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-inputotp.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, booleanAttribute, model, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 /**
  * InputOTP de CaribeNG: entrada de código de verificación en casillas individuales
@@ -9,6 +9,10 @@ import { cbFieldState } from '@caribeng/ui';
  */
 class CbInputOtp {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.hostRef = inject(ElementRef);
         this.length = input(6, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
@@ -22,7 +26,7 @@ class CbInputOtp {
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Estado de validación: inputs manuales + estado de Angular Forms. */
         this.fieldState = cbFieldState({ invalid: () => this.invalid() });
-        this.ariaLabel = input('Código de verificación', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -87,6 +91,8 @@ class CbInputOtp {
         const next = cleaned.slice(0, this.length());
         this.value.set(next);
         this.onChange(next);
+        if (next)
+            this.focusSlot(Math.min(next.length, this.length()) - 1);
     }
     onBlur() {
         this.onTouched();
@@ -96,7 +102,7 @@ class CbInputOtp {
         slots[idx]?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInputOtp, isStandalone: true, selector: "cb-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || \"C\u00F3digo de verificaci\u00F3n\"" }, classAttribute: "cb-input-otp" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInputOtp, isStandalone: true, selector: "cb-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().verificationCode)" }, classAttribute: "cb-input-otp" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbInputOtp),
@@ -113,7 +119,7 @@ class CbInputOtp {
         [attr.inputmode]="integerOnly() ? 'numeric' : 'text'"
         [value]="charAt(idx)"
         [disabled]="isDisabled()"
-        [attr.aria-label]="'Dígito ' + (idx + 1)"
+        [attr.aria-label]="fmt(t().digit, idx + 1)"
         (input)="onSlotInput($event, idx)"
         (keydown)="onSlotKeydown($event, idx)"
         (paste)="onPaste($event)"
@@ -133,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: 'cb-input-otp',
                         role: 'group',
-                        '[attr.aria-label]': 'ariaLabel() || "Código de verificación"',
+                        '[attr.aria-label]': '(ariaLabel() ?? t().verificationCode)',
                     }, template: `
     @for (idx of indices(); track idx) {
       <input
@@ -145,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [attr.inputmode]="integerOnly() ? 'numeric' : 'text'"
         [value]="charAt(idx)"
         [disabled]="isDisabled()"
-        [attr.aria-label]="'Dígito ' + (idx + 1)"
+        [attr.aria-label]="fmt(t().digit, idx + 1)"
         (input)="onSlotInput($event, idx)"
         (keydown)="onSlotKeydown($event, idx)"
         (paste)="onPaste($event)"