Componentes reutilizables

# Button + Input

Pagina dedicada a probar variantes de los componentes compartidos.

## Comunes

Primary Secondary Danger Danger secondary Cancel

## Disabled

Primary Secondary Danger Danger secondary Cancel

## Una letra

A B C D E

## Toasts

Trigger Info Trigger Success Trigger Danger

## Toasts Persistentes (No se van)

Info Persistente Success Persistente Danger Persistente

## Modal

Demo del modal global con servicio, host y devolucion de resultado.

Abrir confirm modal Abrir confirm delete Abrir modal bloqueado Abrir modal ancho Abrir simple modal
{{ lastModalResult }}

## Icon Buttons

Botones de icono pequenos con color base `#666666`, deshabilitados con `#A0A0A0` y estados hover/active con color de marca (a excepcion de trash que usa danger).

Disabled
Normal
Active / Hover

## Cart Icons

Icono de carrito con badge opcional indicando cantidad.

Disabled
Normal
Active / Hover
Texto
Numero
Email
Usuario
Password
Fecha
Periodo
Moneda
Porcentaje
Deshabilitado
Editable
Invalido
Archivo
Limpiar archivo

## Paginator

Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.

## Form Stepper

Stepper vertical reutilizable. Cada paso maneja sus propios botones de navegacion. No se puede avanzar si el paso no es valido.

Nombre
Email
Siguiente
Contraseña
Presupuesto mensual
Simular validez del paso: @if (testStep2Valid) { Valido } @else { Invalido — Siguiente bloqueado }
Volver Siguiente

Nombre: {{ user }}

Email: {{ email }}

Presupuesto: {{ amount }}

Volver Confirmar

## Accordion

Accordion reutilizable basado en las clases globales de Bootstrap. Por defecto mantiene un solo item abierto.

Elegí el producto, seleccioná sus variantes y agregalo al carrito. Desde allí podés revisar el pedido y continuar al checkout. Los medios de pago dependen de la configuración de cada tienda y se muestran durante el checkout. Este contenido no puede abrirse.

### Variante múltiple y flush

La tienda informa los métodos y costos de envío disponibles para cada pedido. Las condiciones de cambio y devolución son definidas por cada comercio.

## Carrito mock

Demo visual aislada del carrito con scroll a partir del cuarto item.

@if (!cartVisible) { Volver a mostrar carrito }
@if (cartVisible) {
}
Tenant Configuration

## Configuracion Tenant

Logo del Header
@if (tenant()?.header_logo) { } @else {
Sin Logo de Header
}
Logo del Footer

### Colores de Marca

Primario `{{ tenant()?.primary_color || 'Default' }}`
Secundario `{{ tenant()?.secondary_color || 'Default' }}`
Danger `{{ tenant()?.danger_color || 'Default' }}`
Success `{{ tenant()?.success_color || 'Default' }}`
Header BG `{{ tenant()?.header_bg_color || 'Default' }}`
Footer BG `{{ tenant()?.footer_bg_color || 'Default' }}`
Reusable Component

## Main Carousel

Carrusel panorámico compuesto únicamente por imágenes, con autoslide e indicadores.

Reusable Component

## Carousel de productos

El carousel controla únicamente el desplazamiento. Cada ítem se define externamente con un template y en este ejemplo renderiza productos con imágenes mockeadas.

ITEM {{ product.id }}
Reusable Component

## Tarjetas de Producto (Column With Image)

Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se presentan dentro de una grilla de Bootstrap.

@for (product of testProducts; track product.title) {
}
Reusable Component

## Mapa de ubicaciones

Prueba de Leaflet con múltiples puntos, encuadre automático y acceso a indicaciones.

Reusable Component

## Tarjetas de Producto (Row Layout)

Diseño horizontal que ocupa el 100% del ancho disponible.

Reusable Component

## Tarjetas de Producto (Vertical With Cart Layout)

Diseño vertical con selector de cantidad y acciones de compra y carrito.

Reusable Component

## Selector de entradas (Ticket Selector Layout)

Demo de selección encadenada por tipo, sector, fila y asiento. Las combinaciones sin stock no aparecen como disponibles.

@for (product of testProducts; track product.title) {
}