318 lines
11 KiB
HTML
318 lines
11 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>
|
|
|
|
<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>
|
|
</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-footer-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 header-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-4 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-4 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-4 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>
|
|
</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>
|
|
|