@ajuarezso/sui-design-system 0.14.0 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15541,9 +15541,20 @@ class SuiProductCard {
|
|
|
15541
15541
|
/* Cada url nueva vuelve a arrancar en «cargando»: sin esto, una card
|
|
15542
15542
|
reciclada por el track del @for mostraba la foto anterior sin shimmer
|
|
15543
15543
|
mientras bajaba la nueva. */
|
|
15544
|
-
effect(() => { this.imageCfg(); this.cargandoImagen.set(true); });
|
|
15544
|
+
effect(() => { this.imageCfg(); this.cargandoImagen.set(true); this.cayoAlOriginal.set(false); });
|
|
15545
15545
|
}
|
|
15546
15546
|
imagenLista() { this.cargandoImagen.set(false); }
|
|
15547
|
+
/* Un error en la miniatura no es el final: si hay foto grande, se intenta con
|
|
15548
|
+
ella y el barrido sigue, porque todavía está cargando algo. Recién cuando
|
|
15549
|
+
también falla esa —o cuando no había alternativa— se apaga. */
|
|
15550
|
+
imagenFallo() {
|
|
15551
|
+
const cfg = this.imageCfg();
|
|
15552
|
+
if (cfg?.fallbackUrl && !this.cayoAlOriginal()) {
|
|
15553
|
+
this.cayoAlOriginal.set(true);
|
|
15554
|
+
return;
|
|
15555
|
+
}
|
|
15556
|
+
this.cargandoImagen.set(false);
|
|
15557
|
+
}
|
|
15547
15558
|
/** Nombre del producto (título de la card + fuente del color del fallback). */
|
|
15548
15559
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
15549
15560
|
/** Descripción corta (1 línea, opcional). */
|
|
@@ -15587,8 +15598,19 @@ class SuiProductCard {
|
|
|
15587
15598
|
if (!i)
|
|
15588
15599
|
return null;
|
|
15589
15600
|
const cfg = typeof i === 'string' ? { url: i } : i;
|
|
15590
|
-
return cfg.url
|
|
15601
|
+
return cfg.url
|
|
15602
|
+
? { url: cfg.url, position: cfg.position ?? 50, fallbackUrl: cfg.fallbackUrl ?? null }
|
|
15603
|
+
: null;
|
|
15591
15604
|
}, ...(ngDevMode ? [{ debugName: "imageCfg" }] : /* istanbul ignore next */ []));
|
|
15605
|
+
/** La miniatura no cargó: se pasó a la foto grande. */
|
|
15606
|
+
cayoAlOriginal = signal(false, ...(ngDevMode ? [{ debugName: "cayoAlOriginal" }] : /* istanbul ignore next */ []));
|
|
15607
|
+
/** La url que el <img> pide realmente. */
|
|
15608
|
+
urlMostrada = computed(() => {
|
|
15609
|
+
const cfg = this.imageCfg();
|
|
15610
|
+
if (!cfg)
|
|
15611
|
+
return null;
|
|
15612
|
+
return this.cayoAlOriginal() && cfg.fallbackUrl ? cfg.fallbackUrl : cfg.url;
|
|
15613
|
+
}, ...(ngDevMode ? [{ debugName: "urlMostrada" }] : /* istanbul ignore next */ []));
|
|
15592
15614
|
/** Config resuelta del fallback (null → variant `'name'`, sin color explícito). */
|
|
15593
15615
|
fallbackCfg = computed(() => {
|
|
15594
15616
|
const f = this.fallback() ?? {};
|
|
@@ -15615,11 +15637,11 @@ class SuiProductCard {
|
|
|
15615
15637
|
onInc(event) { event.stopPropagation(); this.increment.emit(); }
|
|
15616
15638
|
onDec(event) { event.stopPropagation(); this.decrement.emit(); }
|
|
15617
15639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15618
|
-
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)=\"
|
|
15640
|
+
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]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\"\n (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\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 });
|
|
15619
15641
|
}
|
|
15620
15642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
|
|
15621
15643
|
type: Component,
|
|
15622
|
-
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)=\"
|
|
15644
|
+
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]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\"\n (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\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"] }]
|
|
15623
15645
|
}], 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"] }] } });
|
|
15624
15646
|
|
|
15625
15647
|
/**
|