order-status-badge
Paquete: @tiendana/ngx-core/ui
order-status-bagde (OrderStatusBagdeComponent) está deprecado. Usa tdn-order-status, que dibuja el mismo estado como un tdn-status con tono semántico, pulso para los estados en curso y nada para los estados que el comerciante nunca ve.
Badge con el estado de un pedido (OrderStatus), con una clase CSS por estado y la etiqueta traducida con @ngx-translate.
El selector real es order-status-bagde (con «bagde»), y la clase OrderStatusBagdeComponent. Se conserva así por compatibilidad.
Migración
Los inputs son los mismos. Las etiquetas son las mismas claves PEDIDO_*; cambian las clases por estado en el host, que desaparecen porque el tono ahora lo da el componente.
<!-- Antes -->
<order-status-bagde [status]="order.status" [isFoodTech]="isFoodTech()" />
<!-- Ahora -->
<tdn-order-status [status]="order.status" [isFoodTech]="isFoodTech()" />
<!-- En el encabezado de detalle de un pedido -->
<tdn-order-status [status]="order()?.status" [isFoodTech]="isFoodTech()" variant="soft" />
Características
✅ Etiqueta traducida con PEDIDO_{ENUM_KEY}
✅ Diferencia FoodTech de retail para EN_ESPERA
✅ Clase CSS en el host con la clave del enum
✅ status nulo o indefinido no dibuja texto
API
Inputs
| Input | Tipo | Descripción |
|---|---|---|
status | InputSignal<OrderStatus | null | undefined> | Estado del pedido. Requerido |
isFoodTech | InputSignal<boolean> | Si el comercio es FoodTech: cambia la etiqueta de EN_ESPERA. Requerido |
Host Classes
host: {
'[class]': 'className()'
}
La clase es la clave del enum OrderStatus (EN_ESPERA, ENTREGADO, CANCELADO, etc.). Vacía si el estado es nulo.
Etiquetas
La clave de traducción es PEDIDO_{CLAVE_DEL_ENUM}. EN_ESPERA es la excepción:
| Estado | isFoodTech | Clave |
|---|---|---|
EN_ESPERA | true | PEDIDO_EN_ESPERA |
EN_ESPERA | false | PEDIDO_EN_ESPERA_1 |
| Cualquier otro | - | PEDIDO_{CLAVE} (por ejemplo PEDIDO_ENTREGADO) |
La app debe proveer @ngx-translate/core con estas claves cargadas. Una clave que falta se dibuja como la propia clave.
Colores por estado
Estilos del host (inline-block, peso 600, padding 8px 16px, radio 14px):
| Fondo | Estados |
|---|---|
--color-sun | EN_ESPERA, PENDIENTE, CONFIRMADA, PENDIENTE_PAGO, EN_PROCESO, ESPERANDO_RESPUESTA_PAGO |
--color-lavender | ENTREGADO_PENDIENTE_POR_PAGO, EN_CAMINO, COTIZACION |
--color-green-neon | ENTREGADO |
--color-sky | DESPACHADO |
| Rojo fijo | ERROR_PAGO, CANCELADO, TRANSACCION_RECHAZADA, ANULADA, DEVOLUCION |
Los estados sin regla (CREACION, FE_ENVIADA_DIAN) se dibujan sin fondo.
Uso
<order-status-bagde [status]="order.status" [isFoodTech]="store.isFoodTech" />
import { OrderStatusBagdeComponent } from '@tiendana/ngx-core/ui';
@Component({
imports: [OrderStatusBagdeComponent],
template: `<order-status-bagde [status]="order().status" [isFoodTech]="isFoodTech()" />`
})
export class OrderCardComponent {
order = input.required<Order>();
isFoodTech = input(false);
}
Accesibilidad
El componente solo dibuja texto. Si necesitas anunciar cambios de estado a lectores de pantalla, tdn-order-status y tdn-status los resuelven con su región live; con el componente deprecado tendrías que envolverlo tú.