📄️ Vista General
Componentes, directivas, pipes y utilidades de UI para interfaces de Tiendana. Todo se importa desde @tiendana/ngx-core/ui, salvo el logomark, que vive en su propio entry point.
📄️ backdrop
Fondo oscuro semitransparente que cubre toda la pantalla. Se usa automáticamente en drawer y puede usarse en modales, diálogos, etc.
📄️ button-icon-cover
Componente de animación con canvas para botones con icono. Dibuja un cuadrado redondeado que se expande y se contrae con efecto spring cuando el botón padre recibe hover o está marcado como activo.
📄️ cdnSrc y cdnSrcSet
Directivas para cargar imágenes transformando URLs de S3 al endpoint privado de Tiendana (cdn-public.tiendana.com).
📄️ cfSrc y cfSrcSet
Directivas para cargar imágenes transformando URLs al endpoint de CloudFront (cloudfront.net).
📄️ copyToClipboard
Directiva que copia texto al portapapeles al hacer clic en el elemento. Usa copyTextToClipboard de @tiendana/utils para soporte cross-browser.
📄️ Display Templates
Componentes especializados para mostrar entidades de Tiendana con formato consistente y resaltado de búsqueda. Se usan como plantilla de ítem dentro de tdn-select o de forma independiente en listados.
📄️ drawer
Panel lateral deslizante que aparece desde el lado derecho de la pantalla con animación suave. Incluye backdrop automático que cierra el drawer al hacer clic.
📄️ device-display
Template para mostrar un dispositivo registrado: una terminal POS, una pantalla de cocina (KDS) o un kiosko de autoservicio. Se usa como plantilla de ítem en tdn-select o de forma independiente en listados. Es el único display template para dispositivos y forma parte de la familia de Display Templates.
📄️ longPress
Directiva que detecta pulsaciones largas (long press) en elementos. Soporta mouse y touch con threshold configurable. Útil para acciones de eliminación, menús contextuales, etc.
📄️ order-status-badge
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.
📄️ payment-method-icon
Componente para mostrar iconos de métodos de pago con soporte para tarjetas de crédito (franchises) y métodos personalizados.
📄️ safeHtml
Pipe que marca un HTML como confiable con DomSanitizer.bypassSecurityTrustHtml, para renderizarlo con [innerHTML] sin que Angular lo sanitice.
📄️ toggleClass
Directiva que alterna clases CSS al hacer clic en el elemento.
📄️ whenScrolled
Directiva que detecta cuando un elemento ha llegado al final del scroll con threshold configurable. Ideal para infinite scroll.
📄️ tdn-tabs
Tira horizontal de pestañas operable con teclado, construida sobre los ítems .nav del sistema de diseño. Sirve para cualquier fila de opciones excluyentes que cambian lo que muestra una pantalla: secciones de un formulario, el alcance de una búsqueda, un filtro, los modos de un editor. Para el avance por pasos use tdn-stepper; para navegar entre rutas use enlaces.
📄️ tdn-status
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 `` de color locales. Cada dominio mapea su propio enum a un tono y pasa una etiqueta traducida; el color vive solo aquí.
📄️ tdn-order-status
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.
📄️ tdn-timeline
Cronología vertical de lo que le pasó a un registro, en orden, y qué tan avanzado va: el ciclo de vida de un pedido, los intentos de un pago, la auditoría de una importación. tdn-timeline es el contenedor; cada tdn-timeline-step dibuja su marcador y el tramo de riel hasta el siguiente paso.
📄️ tdn-stepper
Muestra en qué punto de un flujo que el usuario recorre se encuentra: un asistente, una importación, un onboarding, un diálogo de varios pasos. Los pasos anteriores llevan una marca de verificación, el actual va con un anillo y se anuncia como paso actual, y los siguientes son huecos numerados.
📄️ tdn-busy-loader
Indica que un control está trabajando sin quitarle su etiqueta: el spinner en línea del sistema de diseño, un glifo animado que ocupa el lugar del icono del control, o de su button-icon-cover, mientras corre una petición. Úselo dentro de un botón, un chip o un campo cuyo texto debe seguir visible durante la espera.
📄️ tdn-code-checking
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.
📄️ rx-utils
Dos helpers de RxJS que envuelven MutationObserver e IntersectionObserver en un Observable: fromMutationObserver y fromIntersectionObserver. tdn-select, tdn-input-date y tdn-input-time usan internamente fromIntersectionObserver para saber cuándo su control es visible.