@ajuarezso/sui-design-system 0.18.9 → 0.19.0
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.
|
@@ -15867,8 +15867,22 @@ class SuiStatusBadge {
|
|
|
15867
15867
|
* En appearance="light", el texto mantiene state-base salvo para status="disabled".
|
|
15868
15868
|
*/
|
|
15869
15869
|
withDot = input(false, ...(ngDevMode ? [{ debugName: "withDot" }] : /* istanbul ignore next */ []));
|
|
15870
|
-
/**
|
|
15871
|
-
|
|
15870
|
+
/**
|
|
15871
|
+
* Icono propio, en lugar del que trae el status.
|
|
15872
|
+
*
|
|
15873
|
+
* El status manda el COLOR y, por defecto, también el icono — que es lo
|
|
15874
|
+
* correcto para un estado: un pago completado siempre lleva el mismo check.
|
|
15875
|
+
* Pero el componente también se usa para etiquetas de marca («Local
|
|
15876
|
+
* exclusivo», «Mismo precio que en el local»), donde el color semántico
|
|
15877
|
+
* sirve y el icono no: ahí la «i» de `information` no dice exclusividad.
|
|
15878
|
+
*
|
|
15879
|
+
* Nombre Remix SIN prefijo, igual que `sui-icon` (`vip-crown-2-fill`).
|
|
15880
|
+
* Vacío = el del status. No hace nada con `withDot`.
|
|
15881
|
+
*/
|
|
15882
|
+
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
15883
|
+
/** El icono que se pinta: el propio si lo hay, si no el del status. */
|
|
15884
|
+
iconName = computed(() => this.icon().trim() || this.iconoDelStatus(), ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
15885
|
+
iconoDelStatus = computed(() => {
|
|
15872
15886
|
switch (this.status()) {
|
|
15873
15887
|
case 'completed': return 'checkbox-circle-fill';
|
|
15874
15888
|
case 'pending': return 'alert-fill';
|
|
@@ -15876,9 +15890,9 @@ class SuiStatusBadge {
|
|
|
15876
15890
|
case 'information': return 'information-fill';
|
|
15877
15891
|
case 'disabled': return 'forbid-fill';
|
|
15878
15892
|
}
|
|
15879
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
15893
|
+
}, ...(ngDevMode ? [{ debugName: "iconoDelStatus" }] : /* istanbul ignore next */ []));
|
|
15880
15894
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStatusBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15881
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStatusBadge, isStandalone: true, selector: "sui-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-status": "status()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-with-dot": "withDot() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (withDot()) {\n <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStatusBadge, isStandalone: true, selector: "sui-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-status": "status()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-with-dot": "withDot() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (withDot()) {\n <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15882
15896
|
}
|
|
15883
15897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStatusBadge, decorators: [{
|
|
15884
15898
|
type: Component,
|
|
@@ -15888,7 +15902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
15888
15902
|
'[attr.data-sui-with-dot]': 'withDot() ? "" : null',
|
|
15889
15903
|
'[attr.role]': '"status"',
|
|
15890
15904
|
}, template: "@if (withDot()) {\n <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"] }]
|
|
15891
|
-
}], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }] } });
|
|
15905
|
+
}], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
15892
15906
|
|
|
15893
15907
|
/**
|
|
15894
15908
|
* SUI Stepper — SUI Design System 2.0
|
|
@@ -16347,6 +16361,13 @@ class SuiProductCard {
|
|
|
16347
16361
|
fallback = input(null, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
|
|
16348
16362
|
/** Texto del tag cuando no está disponible. */
|
|
16349
16363
|
unavailableLabel = input('Agotado', ...(ngDevMode ? [{ debugName: "unavailableLabel" }] : /* istanbul ignore next */ []));
|
|
16364
|
+
/** Qué hace el botón redondo del pie.
|
|
16365
|
+
* - `'add'` (default): «+» para agregar al carrito (y stepper si ya está).
|
|
16366
|
+
* - `'edit'`: lápiz para editar el producto — la grilla del DUEÑO del local
|
|
16367
|
+
* usa la misma tarjeta que su cliente, pero ahí el botón edita. El lápiz
|
|
16368
|
+
* se ve SIEMPRE: también con `available=false` (el agotado es justo el
|
|
16369
|
+
* que el dueño quiere tocar) y sin que `closed` lo apague. Nunca stepper. */
|
|
16370
|
+
action = input('add', ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
|
|
16350
16371
|
/** Tap en la card (abrir detalle del producto). */
|
|
16351
16372
|
openDetail = output();
|
|
16352
16373
|
/** Tap en el botón "+" (agregar al carrito). */
|
|
@@ -16355,8 +16376,10 @@ class SuiProductCard {
|
|
|
16355
16376
|
increment = output();
|
|
16356
16377
|
/** Tap en "−" / basurero del stepper (decrementar / quitar). */
|
|
16357
16378
|
decrement = output();
|
|
16379
|
+
/** Tap en el lápiz (solo con `action="edit"`). */
|
|
16380
|
+
edit = output();
|
|
16358
16381
|
formattedPrice = computed(() => (this.price() ?? 0).toFixed(2), ...(ngDevMode ? [{ debugName: "formattedPrice" }] : /* istanbul ignore next */ []));
|
|
16359
|
-
showStepper = computed(() => this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
|
|
16382
|
+
showStepper = computed(() => this.action() !== 'edit' && this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
|
|
16360
16383
|
/** Config resuelta de la imagen (string → { url }; `position` default 50).
|
|
16361
16384
|
* null = sin imagen → fallback. */
|
|
16362
16385
|
imageCfg = computed(() => {
|
|
@@ -16402,13 +16425,14 @@ class SuiProductCard {
|
|
|
16402
16425
|
onAdd(event) { event.stopPropagation(); this.add.emit(); }
|
|
16403
16426
|
onInc(event) { event.stopPropagation(); this.increment.emit(); }
|
|
16404
16427
|
onDec(event) { event.stopPropagation(); this.decrement.emit(); }
|
|
16428
|
+
onEdit(event) { event.stopPropagation(); this.edit.emit(); }
|
|
16405
16429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16406
|
-
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 });
|
|
16430
|
+
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 }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement", edit: "edit" }, ngImport: i0, template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\n [class.product--edit]=\"action() === 'edit'\"\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 (action() === 'edit') {\n <button type=\"button\" class=\"product__add product__add--edit\"\n (click)=\"onEdit($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Editar\">\n <sui-icon name=\"pencil-line\" [size]=\"18\" />\n </button>\n } @else 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--edit{cursor:pointer}.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 });
|
|
16407
16431
|
}
|
|
16408
16432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
|
|
16409
16433
|
type: Component,
|
|
16410
|
-
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"] }]
|
|
16411
|
-
}], 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"] }] } });
|
|
16434
|
+
args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\n [class.product--edit]=\"action() === 'edit'\"\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 (action() === 'edit') {\n <button type=\"button\" class=\"product__add product__add--edit\"\n (click)=\"onEdit($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Editar\">\n <sui-icon name=\"pencil-line\" [size]=\"18\" />\n </button>\n } @else 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--edit{cursor:pointer}.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"] }]
|
|
16435
|
+
}], 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 }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", 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"] }], edit: [{ type: i0.Output, args: ["edit"] }] } });
|
|
16412
16436
|
|
|
16413
16437
|
/**
|
|
16414
16438
|
* SUI Switch Card — SUI Design System 2.0
|