tdn-code-checking

Paquete: @tiendana/ngx-core/ui

El esqueleto que una pantalla de ingreso de código (OTP de inicio de sesión, MFA, emparejamiento de dispositivo, PIN) dibuja en lugar de las casillas de tdn-input-pin mientras el código viaja o se verifica, celda por celda para que la fila no salte cuando vuelvan las casillas. Úselo en lugar de un spinner o de tdn-busy-loader en esas pantallas: el usuario conserva la forma de lo que escribió y oye lo que está pasando.

Disponible desde @tiendana/ngx-core 0.8.11.

Características

✅ Dos modos: checking (verificación, anunciada) y request (envío, inerte)
✅ Misma forma que las casillas para que la fila no salte
✅ Región en vivo que habla una sola vez y toma el foco si nadie lo tiene
✅ Esquema oscuro heredado de .content-placeholder

Selector

tdn-code-checking

API

Inputs

Input	Tipo	Default	Descripción
mode	'checking' | 'request'	'checking'	checking: un código enviado se está verificando (región en vivo, hablada, toma el foco). request: se está enviando uno nuevo (inerte). Se lee una sola vez tras el primer render
length	number	6	Celdas a dibujar; iguale el codeLength del tdn-input-pin al que reemplaza
translations	Partial<TdnCodeCheckingTranslations>	undefined	Reemplaza las cadenas accesibles; solo cambian las claves dadas

Sin outputs ni contenido proyectado.

Cadenas accesibles

Clave de TdnCodeCheckingTranslations	Default	Descripción
checking	'Verificando código…'	En modo checking, nombre accesible de la región en vivo y el texto que habla una vez. Los valores por defecto están en la constante TDN_CODE_CHECKING_TRANSLATIONS (no es un token de inyección)

Modos

• checking: el host se vuelve role="status" con aria-label igual a translations.checking, dice ese texto una vez y toma el foco (tabindex="-1") si nada más lo tiene: las casillas que lo tenían ya no están y el foco caería al body.
• request: sin rol, sin texto, sin foco.

Propiedades CSS

Propiedad	Default	Descripción
--code-checking-cell-width	50px	Ancho de cada celda, el de la casilla del pin
--code-checking-cell-height	50px	Alto de cada celda
--code-checking-gap	var(--spacing-sm)	Espacio entre celdas

Las celdas son .tdn-code-checking__cell con la clase .content-placeholder de @tiendana/web-foundation, que aporta el brillo y responde a .scheme-dark; llevan las mismas esquinas superiores redondeadas que las casillas, centradas en una fila. Sin esa hoja de estilos las celdas son invisibles.

Accesibilidad

• Las celdas son aria-hidden.
• En checking el texto hablado se escribe en la región en vivo solo tras el primer render, porque una región insertada junto con su texto suele pasar inadvertida para los lectores de pantalla.
• El foco se toma únicamente cuando document.activeElement es el body, para no arrancar de un enlace «reenviar código» o de un control de diálogo a quien ya está allí. El host enfocado no dibuja contorno.

Trampas que fallan sin error

• mode se lee una vez, justo tras el primer render. Cambiar una instancia existente de request a checking cambia su rol y nombre pero no habla nada ni toma foco: renderice una instancia nueva (@if o @switch sobre la fase).
• Sin la hoja de estilos de web-foundation, .content-placeholder no dibuja nada.
• Mantenga length igual al codeLength del pin, o la fila cambia de ancho al volver las casillas.
• Cuando la verificación falla y vuelven las casillas, devuelva el foco a ellas (TdnInputPinComponent.setFocus()): la región enfocada acaba de destruirse.

Ejemplos y Demos

Los dos modos

Cargando demo...

Ver código

Reemplazando el pin según la fase

@switch (phase()) {
    @case ('sending') {
        <tdn-code-checking mode="request" />
    }
    @case ('verifying') {
        <tdn-code-checking [translations]="{ checking: 'Verifying code…' }" />
    }
    @default {
        <tdn-input-pin tdnControl formControlName="code" [codeLength]="6" autocomplete="one-time-code" />
    }
}

Celdas del tamaño de las casillas de la app

<tdn-code-checking [length]="4"
                   style="--code-checking-cell-width: 44px; --code-checking-cell-height: 52px; --code-checking-gap: 8px" />