@ajuarezso/sui-design-system 0.13.2 → 0.14.0

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

@@ -15532,6 +15532,18 @@ const SUI_PRODUCT_FALLBACK_COLORS = [
     'var(--sui-state-highlighted-base)', // rosa
 ];
 class SuiProductCard {
+    /* La foto tarda en llegar y hasta entonces la card muestra un rectángulo
+       gris quieto, que no se distingue de un producto sin imagen. El shimmer
+       dice «esto está viniendo» y se apaga en cuanto la imagen carga o falla
+       —si falla, quedarse animando para siempre sería peor que no animar—. */
+    cargandoImagen = signal(true, ...(ngDevMode ? [{ debugName: "cargandoImagen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* Cada url nueva vuelve a arrancar en «cargando»: sin esto, una card
+           reciclada por el track del @for mostraba la foto anterior sin shimmer
+           mientras bajaba la nueva. */
+        effect(() => { this.imageCfg(); this.cargandoImagen.set(true); });
+    }
+    imagenLista() { this.cargandoImagen.set(false); }
     /** 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). */
@@ -15603,12 +15615,12 @@ class SuiProductCard {
     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 }, image: { classPropertyName: "image", publicName: "image", 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 }, fallback: { classPropertyName: "fallback", publicName: "fallback", 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() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\" />\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 var(--sui-stroke-soft-200, #ebebeb);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:var(--sui-bg-soft-200, #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:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #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 });
+    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 }, image: { classPropertyName: "image", publicName: "image", 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 }, fallback: { classPropertyName: "fallback", publicName: "fallback", 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       [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n       [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\"\n           (load)=\"imagenLista()\" (error)=\"imagenLista()\" />\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 var(--sui-stroke-soft-200, #ebebeb);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:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.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:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation: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() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\" />\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 var(--sui-stroke-soft-200, #ebebeb);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:var(--sui-bg-soft-200, #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:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #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 }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", 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 }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", 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"] }] } });
+            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       [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n       [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\"\n           (load)=\"imagenLista()\" (error)=\"imagenLista()\" />\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 var(--sui-stroke-soft-200, #ebebeb);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:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.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:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #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:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", 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 }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", 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