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

## 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

## 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

## 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.

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