@ajuarezso/sui-design-system 0.4.2 → 0.4.3
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.
|
@@ -14026,25 +14026,22 @@ class SuiProductCard {
|
|
|
14026
14026
|
showStepper = computed(() => this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
|
|
14027
14027
|
showNamedFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'name', ...(ngDevMode ? [{ debugName: "showNamedFallback" }] : /* istanbul ignore next */ []));
|
|
14028
14028
|
showIconFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'icon', ...(ngDevMode ? [{ debugName: "showIconFallback" }] : /* istanbul ignore next */ []));
|
|
14029
|
-
/** Token de color
|
|
14030
|
-
*
|
|
14031
|
-
|
|
14032
|
-
|
|
14033
|
-
|
|
14034
|
-
|
|
14035
|
-
h = (h * 31 + s.charCodeAt(i)) | 0;
|
|
14036
|
-
return FALLBACK_COLOR_TOKENS[Math.abs(h) % FALLBACK_COLOR_TOKENS.length];
|
|
14037
|
-
}, ...(ngDevMode ? [{ debugName: "fallbackColor" }] : /* istanbul ignore next */ []));
|
|
14029
|
+
/** Token de color asignado UNA sola vez al construir la card (random por
|
|
14030
|
+
* montaje). Se mantiene estable durante la vida de la instancia → NO parpadea
|
|
14031
|
+
* en re-renders (scroll, stepper, abrir modal); cambia en la próxima visita a
|
|
14032
|
+
* la tienda, cuando Angular recrea el componente. Es un `var(--sui-...)` que
|
|
14033
|
+
* resuelve contra los tokens del DS. */
|
|
14034
|
+
fallbackColor = FALLBACK_COLOR_TOKENS[Math.floor(Math.random() * FALLBACK_COLOR_TOKENS.length)];
|
|
14038
14035
|
onCard() { this.openDetail.emit(); }
|
|
14039
14036
|
onAdd(event) { event.stopPropagation(); this.add.emit(); }
|
|
14040
14037
|
onInc(event) { event.stopPropagation(); this.increment.emit(); }
|
|
14041
14038
|
onDec(event) { event.stopPropagation(); this.decrement.emit(); }
|
|
14042
14039
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14043
|
-
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
|
|
14040
|
+
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:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.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 });
|
|
14044
14041
|
}
|
|
14045
14042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
|
|
14046
14043
|
type: Component,
|
|
14047
|
-
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
|
|
14044
|
+
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:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.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"] }]
|
|
14048
14045
|
}], 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"] }] } });
|
|
14049
14046
|
|
|
14050
14047
|
/**
|