398 lines
14 KiB
HTML
398 lines
14 KiB
HTML
<main class="app-shell">
|
|
<section class="component-demo card shadow-sm">
|
|
<div class="card-body">
|
|
<span class="eyebrow">Componentes reutilizables</span>
|
|
<h1>Button + Input</h1>
|
|
<p class="lead mb-4">
|
|
Pagina dedicada a probar variantes de los componentes compartidos.
|
|
</p>
|
|
|
|
<div class="button-showcase">
|
|
<div class="button-group">
|
|
<h2>Comunes</h2>
|
|
<div class="button-grid">
|
|
<app-button>Primary</app-button>
|
|
<app-button variant="secondary">Secondary</app-button>
|
|
<app-button variant="danger">Danger</app-button>
|
|
<app-button variant="danger-secondary">Danger secondary</app-button>
|
|
<app-button variant="cancel">Cancel</app-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<h2>Disabled</h2>
|
|
<div class="button-grid">
|
|
<app-button [disabled]="true">Primary</app-button>
|
|
<app-button variant="secondary" [disabled]="true">Secondary</app-button>
|
|
|
|
<app-button variant="danger" [disabled]="true">Danger</app-button>
|
|
<app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
|
|
<app-button variant="cancel" [disabled]="true">Cancel</app-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<h2>Una letra</h2>
|
|
<div class="button-grid button-grid--single-char">
|
|
<app-button>A</app-button>
|
|
<app-button variant="secondary">B</app-button>
|
|
<app-button variant="danger">C</app-button>
|
|
<app-button variant="danger-secondary">D</app-button>
|
|
<app-button variant="cancel">E</app-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<h2>Toasts</h2>
|
|
<div class="button-grid">
|
|
<app-button (click)="triggerToast('info')">Trigger Info</app-button>
|
|
<app-button variant="secondary" (click)="triggerToast('success')">Trigger Success</app-button>
|
|
<app-button variant="danger" (click)="triggerToast('danger')">Trigger Danger</app-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<h2>Toasts Persistentes (No se van)</h2>
|
|
<div class="button-grid">
|
|
<app-button (click)="triggerPersistentToast('info')">Info Persistente</app-button>
|
|
<app-button variant="secondary" (click)="triggerPersistentToast('success')">Success Persistente</app-button>
|
|
<app-button variant="danger" (click)="triggerPersistentToast('danger')">Danger Persistente</app-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="section-divider" />
|
|
|
|
<div class="input-grid">
|
|
<div class="input-field">
|
|
<label for="search-input">Texto</label>
|
|
<app-input
|
|
id="search-input"
|
|
type="search"
|
|
placeholder="Buscar producto"
|
|
[(value)]="textValue"
|
|
[maxlength]="24"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="number-input">Numero</label>
|
|
<app-input
|
|
id="number-input"
|
|
type="number"
|
|
placeholder="0"
|
|
[(value)]="numberValue"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="email-input">Email</label>
|
|
<app-input
|
|
id="email-input"
|
|
type="email"
|
|
placeholder="mail@empresa.com"
|
|
[(value)]="email"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="user-input">Usuario</label>
|
|
<app-input
|
|
id="user-input"
|
|
type="user"
|
|
placeholder="Nombre de usuario"
|
|
[(value)]="user"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="password-input">Password</label>
|
|
<app-input
|
|
id="password-input"
|
|
type="password-toggle"
|
|
placeholder="********"
|
|
[(value)]="password"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="date-input">Fecha</label>
|
|
<app-input id="date-input" type="date" [(value)]="date" />
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="period-input">Periodo</label>
|
|
<app-input id="period-input" type="period" [(value)]="period" />
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="amount-input">Moneda</label>
|
|
<app-input
|
|
id="amount-input"
|
|
type="currency"
|
|
placeholder="0"
|
|
[(value)]="amount"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="percent-input">Porcentaje</label>
|
|
<app-input
|
|
id="percent-input"
|
|
type="percent"
|
|
placeholder="0"
|
|
[(value)]="percent"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="disabled-input">Deshabilitado</label>
|
|
<app-input
|
|
id="disabled-input"
|
|
placeholder="Campo deshabilitado"
|
|
[value]="disabledValue"
|
|
[disabled]="true"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="editable-input">Editable</label>
|
|
<app-input
|
|
id="editable-input"
|
|
type="editable"
|
|
[(value)]="editableValue"
|
|
[disabled]="editableDisabled"
|
|
(disabledChange)="editableDisabled = $event"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-field">
|
|
<label for="invalid-input">Invalido</label>
|
|
<app-input
|
|
id="invalid-input"
|
|
type="email"
|
|
placeholder="mail@empresa.com"
|
|
[(value)]="invalidEmail"
|
|
[invalid]="true"
|
|
/>
|
|
</div>
|
|
|
|
<div class="file-field">
|
|
<div class="input-field">
|
|
<label for="file-input">Archivo</label>
|
|
<app-input
|
|
id="file-input"
|
|
type="file"
|
|
accept=".pdf,.png,.jpg"
|
|
[fileName]="fileName"
|
|
[clearTrigger]="clearTrigger"
|
|
(fileChange)="onFileChange($event)"
|
|
/>
|
|
</div>
|
|
|
|
<app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="section-divider" />
|
|
|
|
<div class="paginator-showcase">
|
|
<h2>Paginator</h2>
|
|
<p class="text-muted mb-0">
|
|
Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.
|
|
</p>
|
|
<app-paginator
|
|
[page]="currentPage"
|
|
[totalPages]="paginatorTotalPages"
|
|
(pageChange)="currentPage = $event"
|
|
/>
|
|
</div>
|
|
|
|
<hr class="section-divider" />
|
|
|
|
<div class="cart-showcase">
|
|
<div class="cart-showcase__header">
|
|
<div>
|
|
<h2>Carrito mock</h2>
|
|
<p class="text-muted mb-0">
|
|
Demo visual aislada del carrito con scroll a partir del cuarto item.
|
|
</p>
|
|
</div>
|
|
|
|
@if (!cartVisible) {
|
|
<app-button variant="secondary" (click)="showCart()">Volver a mostrar carrito</app-button>
|
|
}
|
|
</div>
|
|
|
|
@if (cartVisible) {
|
|
<div class="cart-showcase__viewport">
|
|
<app-cart
|
|
[showClose]="true"
|
|
[items]="cartMockItems"
|
|
[subtotal]="366000"
|
|
[discount]="66000"
|
|
[total]="300000"
|
|
[backgroundColor]="cartBackgroundColor"
|
|
(closed)="hideCart()"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="component-demo card shadow-sm mt-4 configuracion-tennant">
|
|
<div class="card-body">
|
|
<span class="eyebrow">Tenant Configuration</span>
|
|
<h2 class="mb-4">Configuración Tenant</h2>
|
|
|
|
<!-- Logos section -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6 mb-3 mb-md-0">
|
|
<div class="tenant-logo-card">
|
|
<div class="tenant-logo-card__label">Logo del Header</div>
|
|
<div class="tenant-logo-card__container header-bg">
|
|
@if (tenant()?.header_logo) {
|
|
<img [src]="tenant()?.header_logo" alt="Header Logo" class="tenant-logo-card__img" />
|
|
} @else {
|
|
<div class="tenant-logo-card__placeholder">
|
|
<i class="fa-solid fa-image mb-2"></i>
|
|
<span>Sin Logo de Header</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="tenant-logo-card">
|
|
<div class="tenant-logo-card__label">Logo del Footer</div>
|
|
<div class="tenant-logo-card__container footer-bg">
|
|
@if (tenant()?.footer_logo) {
|
|
<img [src]="tenant()?.footer_logo" alt="Footer Logo" class="tenant-logo-card__img" />
|
|
} @else {
|
|
<div class="tenant-logo-card__placeholder">
|
|
<i class="fa-solid fa-image mb-2"></i>
|
|
<span>Sin Logo de Footer</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="section-divider" />
|
|
|
|
<!-- Colors section -->
|
|
<div class="colors-section">
|
|
<h3 class="mb-3">Colores de Marca</h3>
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<div class="color-swatch-card shadow-sm">
|
|
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-primary)'"></div>
|
|
<div class="color-swatch-card__body">
|
|
<span class="color-swatch-card__title">Primario</span>
|
|
<code class="color-swatch-card__value">{{ tenant()?.primary_color || 'Default' }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="color-swatch-card shadow-sm">
|
|
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-secondary)'"></div>
|
|
<div class="color-swatch-card__body">
|
|
<span class="color-swatch-card__title">Secundario</span>
|
|
<code class="color-swatch-card__value">{{ tenant()?.secondary_color || 'Default' }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="color-swatch-card shadow-sm">
|
|
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-danger)'"></div>
|
|
<div class="color-swatch-card__body">
|
|
<span class="color-swatch-card__title">Danger</span>
|
|
<code class="color-swatch-card__value">{{ tenant()?.danger_color || 'Default' }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="color-swatch-card shadow-sm">
|
|
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-success)'"></div>
|
|
<div class="color-swatch-card__body">
|
|
<span class="color-swatch-card__title">Success</span>
|
|
<code class="color-swatch-card__value">{{ tenant()?.success_color || 'Default' }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="color-swatch-card shadow-sm">
|
|
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-header-bg)'"></div>
|
|
<div class="color-swatch-card__body">
|
|
<span class="color-swatch-card__title">Header BG</span>
|
|
<code class="color-swatch-card__value">{{ tenant()?.header_bg_color || 'Default' }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="color-swatch-card shadow-sm">
|
|
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-footer-bg)'"></div>
|
|
<div class="color-swatch-card__body">
|
|
<span class="color-swatch-card__title">Footer BG</span>
|
|
<code class="color-swatch-card__value">{{ tenant()?.footer_bg_color || 'Default' }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="component-demo card shadow-sm mt-4">
|
|
<div class="card-body">
|
|
<span class="eyebrow">Reusable Component</span>
|
|
<h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
|
|
|
|
<p class="text-muted mb-4">
|
|
Las tarjetas se adaptan al tamaño del contenedor padre. A continuación se presentan dentro de una grilla de Bootstrap.
|
|
</p>
|
|
|
|
<div class="row">
|
|
@for (product of testProducts; track product.title) {
|
|
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
|
|
<app-product-card
|
|
[imageUrl]="product.imageUrl"
|
|
[title]="product.title"
|
|
[originalPrice]="product.originalPrice"
|
|
[discount]="product.discount"
|
|
[transferPrice]="product.transferPrice"
|
|
(buy)="onProductBuy(product.title)"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<app-store-section title="PRODUCTOS" class="component-demo store-section-demo mt-5">
|
|
<div class="row">
|
|
@for (product of testProducts; track product.title) {
|
|
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item">
|
|
<app-product-card
|
|
[imageUrl]="product.imageUrl"
|
|
[title]="product.title"
|
|
[originalPrice]="product.originalPrice"
|
|
[discount]="product.discount"
|
|
[transferPrice]="product.transferPrice"
|
|
(buy)="onProductBuy(product.title)"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</app-store-section>
|
|
</main>
|
|
|