tdn-status

Paquete: @tiendana/ngx-core/ui

Un estado actual de algo, como un punto de color y su etiqueta: el resultado de un pago, la salud de una integración, la conexión de un dispositivo, el estado de una factura ante la DIAN. Es el indicador de estado genérico del sistema de diseño y reemplaza a los chips, badges o <span> de color locales. Cada dominio mapea su propio enum a un tono y pasa una etiqueta traducida; el color vive solo aquí.

Disponible desde @tiendana/ngx-core 0.8.12.

Úselo para un único estado sin historia. Para la secuencia de eventos que llevaron hasta allí use tdn-timeline; para el progreso por un flujo que el usuario recorre use tdn-stepper; para el estado de un pedido use tdn-order-status, que ya conoce el tono y la etiqueta de cada estado.

Características

✅ Cinco tonos semánticos: ok, pending, warn, error, neutral
✅ Tres variantes según el lugar y no según el estado: dot, soft, solid
✅ Punto pulsante con live para algo en curso, que respeta prefers-reduced-motion
✅ Región en vivo opcional con announce
✅ Esquema oscuro sin configuración y contraste de 3:1 en el punto (WCAG 1.4.11)

Selector

tdn-status

API

Inputs

Input	Tipo	Default	Descripción
tone	TdnStatusTone	'neutral'	Tono semántico, que elige el color
variant	TdnStatusVariant	'soft'	Peso visual, elegido por el lugar
label	string	''	Texto visible, ya traducido, nunca una clave de enum. También es el title del host
live	boolean	false	Hace pulsar el punto. Acepta el atributo sin valor
announce	boolean	false	Convierte el host en una región en vivo cortés (role="status"). Acepta el atributo sin valor

No tiene outputs.

Tonos

Tono	Color	Cuándo
ok	--color-natura	Terminó bien: pagado, entregado, conectado
pending	--color-info	Espera a otro sin que algo falle: despachado, en camino
warn	--color-warning	Pide atención o acción del comerciante: en espera, credenciales por vencer
error	--color-error	Falló: pago rechazado, sincronización fallida
neutral	--color-gray-500	Terminó o se registró sin fallar: cancelado, devuelto, cotización

Variantes

Variante	Descripción
dot	El punto y la etiqueta, sin contenedor. Para listas densas y tablas
soft	Píldora con tinte ligero del tono y borde fino; el texto conserva el color del cuerpo. Para paneles de detalle y encabezados de tarjeta
solid	Píldora rellena con el tono; el texto es negro o blanco según la luminosidad del tono para sostener 4.5:1 en ambos esquemas. Solo para un estado que cambia el significado de toda la pantalla (factura anulada, cuenta bloqueada)

Tipos TdnStatusTone y TdnStatusVariant

export type TdnStatusTone = 'ok' | 'pending' | 'warn' | 'error' | 'neutral';

export type TdnStatusVariant = 'dot' | 'soft' | 'solid';

Contenido proyectado

El contenido proyectado se agrega dentro de la etiqueta, después de su texto, por ejemplo un contador o una hora. No forma parte del title del host.

<tdn-status tone="warn" label="Pendiente de pago">(2)</tdn-status>

Estilos

• Clases del host: tdn-status, tdn-status--{variant} y tdn-status--{tone}, calculadas desde los inputs.
• Elementos internos: .tdn-status__dot (con .tdn-status__dot--live mientras pulsa) y .tdn-status__label.
• display: inline-flex, white-space: nowrap, --font-size-sm. La etiqueta se trunca con puntos suspensivos cuando su contenedor la limita: dé min-width: 0 al padre flex.
• No lee propiedades CSS públicas. Tonos: --color-natura, --color-info, --color-warning, --color-error, --color-gray-500; el anillo del punto es el tono mezclado hacia el color del texto, y el texto de solid se calcula con colores relativos donde el navegador los soporta (si no, texto oscuro).

Accesibilidad

• La etiqueta siempre se dibuja, así que el color nunca lleva el significado solo (WCAG 1.4.1).
• El punto es un elemento vacío y decorativo; no se anuncia.
• El title del host repite la etiqueta, de modo que una etiqueta cortada con puntos suspensivos se lee al pasar el cursor.
• Con announce, un cambio posterior de label se anuncia sin mover el foco. live solo anima el punto y se detiene con prefers-reduced-motion: reduce.
• Con forced-colors, el punto y la píldora llevan borde CanvasText.

Trampas que fallan sin error

• Una región en vivo solo se oye si su texto cambia estando ya en la página. Un tdn-status creado por un @if junto con su etiqueta nueva, o cuyo announce se activa en el mismo cambio, normalmente no se anuncia: manténgalo renderizado y cambie label.
• No active announce en cada fila de una lista: cada cambio se vuelve una interrupción.
• live es para algo todavía en curso. Un estado terminal que pulsa promete un cambio que no llegará.

Ejemplos y Demos

Tonos y variantes

Cargando demo...

Ver código

Un enum de dominio mapeado a un tono

import { computed } from '@angular/core';
import { TdnStatusTone } from '@tiendana/ngx-core/ui';

readonly syncTone = computed<TdnStatusTone>(() => {
    switch (this.integration().status) {
        case 'CONNECTED': return 'ok';
        case 'SYNCING': return 'pending';
        case 'EXPIRED': return 'warn';
        case 'FAILED': return 'error';
        default: return 'neutral';
    }
});

<tdn-status [tone]="syncTone()" [label]="syncLabel() | translate" [live]="syncing()" announce />