tdn-order-status
Paquete: @tiendana/ngx-core/ui
El OrderStatus de un pedido dibujado como un tdn-status, con el tono, el pulso y la etiqueta traducida que le da el dominio de pedidos. Úselo siempre que se muestre el estado de un pedido (listas, encabezado de detalle, historial del cliente) en lugar de mapear el enum a un tono a mano o dibujar un badge local. Para el estado de cualquier otro dominio use tdn-status directamente.
Disponible desde @tiendana/ngx-core 0.8.12. Reemplaza al componente order-status-badge, que está obsoleto.
Características
✅ Tono por estado ya resuelto, sin mapeos locales
✅ Pulso en los estados que avanzan solos
✅ Etiqueta traducida con las claves PEDIDO_*
✅ Tolera null para enlazarlo antes de que cargue el pedido
✅ Mapeo exhaustivo: un estado nuevo en @tiendana/api-types rompe la compilación de la librería hasta que reciba un tono
Selector
tdn-order-status
API
Inputs
| Input | Tipo | Default | Descripción |
|---|---|---|---|
status | OrderStatus | null | undefined | requerido | Estado del pedido. null, undefined, CREACION y FE_ENVIADA_DIAN no dibujan nada |
isFoodTech | boolean | false | Si la tienda es un restaurante: EN_ESPERA usa la clave PEDIDO_EN_ESPERA cuando es true y PEDIDO_EN_ESPERA_1 cuando es false |
variant | TdnStatusVariant | 'dot' | Peso visual que se pasa a tdn-status. 'soft' se eleva a 'solid' para ANULADA |
No tiene outputs ni contenido proyectado. OrderStatus viene de @tiendana/api-types.
Tono de cada estado
| Tono | Estados |
|---|---|
warn (ámbar) | EN_ESPERA, PENDIENTE, CONFIRMADA, PENDIENTE_PAGO, EN_PROCESO y ESPERANDO_RESPUESTA_PAGO (estos dos también pulsan porque algo sigue ocurriendo solo) |
pending (azul) | DESPACHADO, EN_CAMINO, ENTREGADO_PENDIENTE_POR_PAGO |
ok (natura) | ENTREGADO |
error (rojo) | ERROR_PAGO, TRANSACCION_RECHAZADA |
neutral (gris) | CANCELADO, DEVOLUCION, COTIZACION y ANULADA (elevada de soft a solid porque un pedido anulado cambia el significado de toda la pantalla) |
| sin dibujo | CREACION, FE_ENVIADA_DIAN, null, undefined |
Cancelado y devuelto no son rojos: nada falló.
Traducciones
La etiqueta se traduce con TranslatePipe de @ngx-translate/core a partir de la clave PEDIDO_<CLAVE_DEL_ENUM>, por ejemplo PEDIDO_ENTREGADO.
La aplicación debe proveer @ngx-translate/core con las claves PEDIDO_* cargadas; una clave ausente se dibuja como la propia clave.
Estilos y accesibilidad
El host es inline-flex con min-width: 0, por lo que se trunca dentro de una celda de tabla. El resto (contraste, truncado, esquema oscuro, prefers-reduced-motion) es el de tdn-status.