Saltar al contenido principal

UI - Vista General

Paquete: @tiendana/ngx-core/ui

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.

Estado, Progreso y Navegación​

tdn-tabs​

Tira de pestañas operable con teclado, controlada por el consumidor.

tdn-status​

Indicador genérico de un estado actual: punto coloreado y etiqueta.

tdn-order-status​

Estado de un pedido (OrderStatus) dibujado como tdn-status, con tono, pulso y etiqueta traducida.

tdn-timeline​

Cronología vertical de lo que le pasó a un registro, con marcadores y riel.

tdn-stepper​

Posición del usuario dentro de un flujo por pasos (wizard, onboarding).

Carga y Verificación​

tdn-busy-loader​

Loader que ocupa el lugar de un icono o de un button-icon-cover mientras corre una petición.

tdn-code-checking​

Esqueleto de las casillas de un código (OTP, PIN) mientras se envía o verifica.

Contenedores y Botones​

drawer​

Panel lateral deslizante con backdrop y control de apertura/cierre.

Demos interactivos: 3 ejemplos

backdrop​

Fondo oscuro semitransparente para modales y drawers.

button-icon-cover​

Animación de fondo con canvas para botones con icono. Cede su lugar a tdn-busy-loader mientras se guarda.

payment-method-icon​

Icono y datos de métodos de pago con soporte para tarjetas (Visa, Mastercard, Amex).

order-status-badge​

Badge coloreado con estado de pedidos. Deprecado: usa tdn-order-status.

Directivas de Clipboard y Gestos​

copyToClipboard​

Copia texto al portapapeles al hacer clic.

Demos interactivos: 2 ejemplos

longPress​

Detecta pulsaciones largas con threshold configurable.

Demos interactivos: 2 ejemplos

toggleClass​

Alterna clases CSS al hacer clic.

Directivas de Imágenes​

cfSrc y cfSrcSet​

Transforma URLs a cloudfront.net con preview local de File. Exportadas en la API pública.

cdnSrc y cdnSrcSet​

Transforma URLs a cdn-public.tiendana.com. No se exportan desde @tiendana/ngx-core/ui: la página describe su comportamiento interno.

Scroll, DOM y HTML​

whenScrolled​

Detecta cuando se llega al final del scroll (infinite scroll). Exporta también SCROLL_GAP_TOKEN y DEFAULT_SCROLL_GAP.

safeHtml​

Pipe que marca HTML como confiable para [innerHTML]. Úsalo solo con contenido propio.

rx-utils​

fromMutationObserver y fromIntersectionObserver: MutationObserver e IntersectionObserver como Observable.

Display Templates​

Componentes especializados para mostrar entidades de Tiendana. Consulta la página de Display Templates:

  • brand-display - Marcas con logo e highlight
  • category-display - Categorías
  • country-display - Países
  • country-phone-code-display - Códigos telefónicos
  • customer-display - Clientes
  • device-display - Dispositivos: terminales POS, KDS y kioscos (antes terminal-pos-display)
  • employee-display - Empleados
  • payment-method-display - Métodos de pago
  • store-display - Tiendas
  • supplier-display - Proveedores

Logomark​

El logomark de Tiendana en Angular, TdnLogomarkComponent, se importa desde @tiendana/ngx-core/logomark (otro entry point). Consulta logomark.

Instalación​

npm install @tiendana/ngx-core

Importación​

import { Component } from '@angular/core';
import { DrawerComponent, CopyToClipboardDirective } from '@tiendana/ngx-core/ui';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [DrawerComponent, CopyToClipboardDirective],
  template: `
    <drawer #drawer>Contenido</drawer>
    <button [copyToClipboard]="text">Copiar</button>
  `
})
export class MyComponent {
  text = 'Texto a copiar';
}