@ajuarezso/sui-design-system 0.3.0 → 0.4.1

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, model, signal, viewChild, effect, untracked, output, inject, ElementRef, forwardRef, TemplateRef, Directive, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injectable } from '@angular/core';
-import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
@@ -13971,6 +13971,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon], template: "<a class=\"store\"\n   [class.store--suspended]=\"store().isSuspended\"\n   [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n   [class.store--preview]=\"store().isOwnerPreview\"\n   [routerLink]=\"link()\"\n   (click)=\"onCardClick($event)\">\n\n  <div class=\"store__cover\"\n       [style.background-image]=\"store().coverUrl ? 'url(' + store().coverUrl + ')' : null\"\n       [class.store__cover--fallback]=\"!store().coverUrl\">\n    <div class=\"store__cover-grad\"></div>\n\n    @if (!store().isOwnerPreview) {\n      <button type=\"button\"\n              class=\"store__fav\"\n              [class.store__fav--active]=\"isFavorite()\"\n              (click)=\"onFavClick($event)\"\n              aria-label=\"Favorito\">\n        <sui-icon\n          [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n          [size]=\"18\"\n          color=\"#fa7319\"\n        ></sui-icon>\n      </button>\n    }\n\n    @if (store().isSuspended) {\n      <span class=\"store__status store__status--suspended\">No disponible</span>\n    } @else if (previewBadge(); as pb) {\n      <span class=\"store__status\"\n            [class.store__status--draft]=\"pb.variant === 'draft'\"\n            [class.store__status--pending]=\"pb.variant === 'pending'\"\n            [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n        {{ pb.label }}\n      </span>\n    } @else {\n      <span class=\"store__status\"\n            [class.store__status--open]=\"store().isOpen\"\n            [class.store__status--closed]=\"!store().isOpen\">\n        {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n      </span>\n    }\n  </div>\n\n  <div class=\"store__body\">\n    <div class=\"store__logo\">\n      @if (store().logoUrl) {\n        <img [src]=\"store().logoUrl\" [alt]=\"store().name\" (error)=\"$any($event).target.style.display='none'\" />\n      } @else {\n        {{ initial() }}\n      }\n    </div>\n    <div class=\"store__info\">\n      <h3 class=\"store__name\">{{ store().name }}</h3>\n      <p class=\"store__type\">{{ store().businessType }}</p>\n\n      @if (store().isOwnerPreview) {\n        <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n             solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n        <div class=\"store__meta store__meta--preview\">\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"store__meta\">\n          <button\n            type=\"button\"\n            class=\"store__stat store__stat--clickable\"\n            (click)=\"onRatingClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n            [attr.aria-label]=\"'Ver calificaciones del local'\"\n          >\n            <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ ratingLabel() }}\n            </span>\n          </button>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Distancia</span>\n            <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;background:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center}.store__cover--fallback{background:linear-gradient(135deg,#fb9a56 0%,var(--sui-primary-base, #fa7319) 100%)}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
         }], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], isFavorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavorite", required: false }] }], disableLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLink", required: false }] }], toggleFavorite: [{ type: i0.Output, args: ["toggleFavorite"] }], ratingClicked: [{ type: i0.Output, args: ["ratingClicked"] }] } });
 
+/**
+ * Card de producto (catálogo del cliente). Presentacional: recibe los datos por
+ * inputs primitivos y emite eventos; el consumidor cablea el carrito.
+ *
+ * Fallback sin imagen — DOS variantes:
+ *  - `'name'` (default): banda de color centrada con el nombre en blanco. El
+ *    color se deriva del nombre (mismo producto → siempre el mismo color).
+ *  - `'icon'`: gradiente brand + ícono de imagen (el fallback histórico).
+ */
+/** Paleta del fallback `'name'`: tokens semánticos del DS (`--sui-state-*-base`),
+ *  los mismos que el badge `filled` usa con texto blanco → contraste garantizado
+ *  y coherencia con el resto del sistema (siguen el tema claro/oscuro). */
+const FALLBACK_COLOR_TOKENS = [
+    'var(--sui-state-information-base)', // azul
+    'var(--sui-state-warning-base)', // naranja
+    'var(--sui-state-error-base)', // rojo
+    'var(--sui-state-success-base)', // verde
+    'var(--sui-state-feature-base)', // morado
+    'var(--sui-state-highlighted-base)', // rosa
+];
+class SuiProductCard {
+    /** Nombre del producto (título de la card + fuente del color del fallback). */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Descripción corta (1 línea, opcional). */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Precio numérico; se formatea a 2 decimales. */
+    price = input.required(...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
+    /** URL de la imagen. Ausente → se usa `fallbackVariant`. */
+    imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+    /** Encuadre vertical de la imagen (CSS object-position Y, 0–100). */
+    imagePosition = input(50, ...(ngDevMode ? [{ debugName: "imagePosition" }] : /* istanbul ignore next */ []));
+    /** false → card atenuada + tag "Agotado", sin botón de agregar. */
+    available = input(true, ...(ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []));
+    /** Cantidad en el carrito. > 0 → muestra el stepper en vez del botón "+". */
+    quantity = input(0, ...(ngDevMode ? [{ debugName: "quantity" }] : /* istanbul ignore next */ []));
+    /** Local cerrado → deshabilita agregar / incrementar. */
+    closed = input(false, ...(ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []));
+    /** Prefijo de moneda. */
+    currencySymbol = input('S/', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : /* istanbul ignore next */ []));
+    /** Fallback sin imagen: `'name'` = banda de color + nombre; `'icon'` = ícono. */
+    fallbackVariant = input('name', ...(ngDevMode ? [{ debugName: "fallbackVariant" }] : /* istanbul ignore next */ []));
+    /** Texto del tag cuando no está disponible. */
+    unavailableLabel = input('Agotado', ...(ngDevMode ? [{ debugName: "unavailableLabel" }] : /* istanbul ignore next */ []));
+    /** Tap en la card (abrir detalle del producto). */
+    openDetail = output();
+    /** Tap en el botón "+" (agregar al carrito). */
+    add = output();
+    /** Tap en "+" del stepper (incrementar cantidad). */
+    increment = output();
+    /** Tap en "−" / basurero del stepper (decrementar / quitar). */
+    decrement = output();
+    formattedPrice = computed(() => (this.price() ?? 0).toFixed(2), ...(ngDevMode ? [{ debugName: "formattedPrice" }] : /* istanbul ignore next */ []));
+    showStepper = computed(() => this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
+    showNamedFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'name', ...(ngDevMode ? [{ debugName: "showNamedFallback" }] : /* istanbul ignore next */ []));
+    showIconFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'icon', ...(ngDevMode ? [{ debugName: "showIconFallback" }] : /* istanbul ignore next */ []));
+    /** Token de color estable derivado del nombre (hash → índice de paleta).
+     *  Devuelve un `var(--sui-...)` que se resuelve contra los tokens del DS. */
+    fallbackColor = computed(() => {
+        const s = this.name() ?? '';
+        let h = 0;
+        for (let i = 0; i < s.length; i++)
+            h = (h * 31 + s.charCodeAt(i)) | 0;
+        return FALLBACK_COLOR_TOKENS[Math.abs(h) % FALLBACK_COLOR_TOKENS.length];
+    }, ...(ngDevMode ? [{ debugName: "fallbackColor" }] : /* istanbul ignore next */ []));
+    onCard() { this.openDetail.emit(); }
+    onAdd(event) { event.stopPropagation(); this.add.emit(); }
+    onInc(event) { event.stopPropagation(); this.increment.emit(); }
+    onDec(event) { event.stopPropagation(); this.decrement.emit(); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProductCard, isStandalone: true, selector: "sui-product-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, available: { classPropertyName: "available", publicName: "available", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, fallbackVariant: { classPropertyName: "fallbackVariant", publicName: "fallbackVariant", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement" }, ngImport: i0, template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [style.--fallback-color]=\"showNamedFallback() ? fallbackColor() : null\">\n    @if (imageUrl()) {\n      <img [ngSrc]=\"imageUrl()!\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + imagePosition() + '%'\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.04);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product__img{width:100%;aspect-ratio:1/1;background-color:#e5e7eb;background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:#ffffffb3}.product__band{width:46%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:12px 8px}.product__band-name{color:#fff;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [style.--fallback-color]=\"showNamedFallback() ? fallbackColor() : null\">\n    @if (imageUrl()) {\n      <img [ngSrc]=\"imageUrl()!\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + imagePosition() + '%'\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.04);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product__img{width:100%;aspect-ratio:1/1;background-color:#e5e7eb;background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:#ffffffb3}.product__band{width:46%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:12px 8px}.product__band-name{color:#fff;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], imagePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePosition", required: false }] }], available: [{ type: i0.Input, args: [{ isSignal: true, alias: "available", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], closed: [{ type: i0.Input, args: [{ isSignal: true, alias: "closed", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], fallbackVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackVariant", required: false }] }], unavailableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableLabel", required: false }] }], openDetail: [{ type: i0.Output, args: ["openDetail"] }], add: [{ type: i0.Output, args: ["add"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }] } });
+
 /**
  * SUI Switch Card — SUI Design System 2.0
  *
@@ -16801,5 +16877,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
 //# sourceMappingURL=ajuarezso-sui-design-system.mjs.map