@ajuarezso/sui-design-system 0.4.2 → 0.4.4
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.
|
@@ -13980,10 +13980,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13980
13980
|
* color se deriva del nombre (mismo producto → siempre el mismo color).
|
|
13981
13981
|
* - `'icon'`: gradiente brand + ícono de imagen (el fallback histórico).
|
|
13982
13982
|
*/
|
|
13983
|
-
/** Paleta
|
|
13984
|
-
* los mismos que el badge `filled` usa con texto blanco
|
|
13985
|
-
*
|
|
13986
|
-
|
|
13983
|
+
/** Paleta sugerida para el fallback `'name'`: tokens semánticos del DS
|
|
13984
|
+
* (`--sui-state-*-base`), los mismos que el badge `filled` usa con texto blanco
|
|
13985
|
+
* → contraste garantizado y coherencia (siguen el tema claro/oscuro).
|
|
13986
|
+
*
|
|
13987
|
+
* Se EXPORTA para que el consumidor implemente su estrategia de color afuera
|
|
13988
|
+
* (ej. random por visita) y la pase por `[fallbackColor]`. El componente NO
|
|
13989
|
+
* hace random internamente — se mantiene presentacional y puro. */
|
|
13990
|
+
const SUI_PRODUCT_FALLBACK_COLORS = [
|
|
13987
13991
|
'var(--sui-state-information-base)', // azul
|
|
13988
13992
|
'var(--sui-state-warning-base)', // naranja
|
|
13989
13993
|
'var(--sui-state-error-base)', // rojo
|
|
@@ -14012,6 +14016,10 @@ class SuiProductCard {
|
|
|
14012
14016
|
currencySymbol = input('S/', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : /* istanbul ignore next */ []));
|
|
14013
14017
|
/** Fallback sin imagen: `'name'` = banda de color + nombre; `'icon'` = ícono. */
|
|
14014
14018
|
fallbackVariant = input('name', ...(ngDevMode ? [{ debugName: "fallbackVariant" }] : /* istanbul ignore next */ []));
|
|
14019
|
+
/** Color del fallback `'name'` (CSS color o `var(--sui-...)`). Lo decide el
|
|
14020
|
+
* consumidor (ej. random por visita usando `SUI_PRODUCT_FALLBACK_COLORS`).
|
|
14021
|
+
* Si no se pasa, cae a un default determinista por nombre (puro, sin random). */
|
|
14022
|
+
fallbackColor = input(null, ...(ngDevMode ? [{ debugName: "fallbackColor" }] : /* istanbul ignore next */ []));
|
|
14015
14023
|
/** Texto del tag cuando no está disponible. */
|
|
14016
14024
|
unavailableLabel = input('Agotado', ...(ngDevMode ? [{ debugName: "unavailableLabel" }] : /* istanbul ignore next */ []));
|
|
14017
14025
|
/** Tap en la card (abrir detalle del producto). */
|
|
@@ -14026,26 +14034,31 @@ class SuiProductCard {
|
|
|
14026
14034
|
showStepper = computed(() => this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
|
|
14027
14035
|
showNamedFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'name', ...(ngDevMode ? [{ debugName: "showNamedFallback" }] : /* istanbul ignore next */ []));
|
|
14028
14036
|
showIconFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'icon', ...(ngDevMode ? [{ debugName: "showIconFallback" }] : /* istanbul ignore next */ []));
|
|
14029
|
-
/**
|
|
14030
|
-
*
|
|
14031
|
-
|
|
14037
|
+
/** Color resuelto del fallback `'name'`. Usa `fallbackColor` si el consumidor
|
|
14038
|
+
* lo pasa; si no, un default DETERMINISTA por nombre (puro, sin `Math.random`
|
|
14039
|
+
* ni efectos → seguro para SSR/hidratación y testeable). La variedad "random
|
|
14040
|
+
* por visita" la implementa el consumidor pasando `[fallbackColor]`. */
|
|
14041
|
+
resolvedFallbackColor = computed(() => {
|
|
14042
|
+
const explicit = this.fallbackColor();
|
|
14043
|
+
if (explicit)
|
|
14044
|
+
return explicit;
|
|
14032
14045
|
const s = this.name() ?? '';
|
|
14033
14046
|
let h = 0;
|
|
14034
14047
|
for (let i = 0; i < s.length; i++)
|
|
14035
14048
|
h = (h * 31 + s.charCodeAt(i)) | 0;
|
|
14036
|
-
return
|
|
14037
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
14049
|
+
return SUI_PRODUCT_FALLBACK_COLORS[Math.abs(h) % SUI_PRODUCT_FALLBACK_COLORS.length];
|
|
14050
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedFallbackColor" }] : /* istanbul ignore next */ []));
|
|
14038
14051
|
onCard() { this.openDetail.emit(); }
|
|
14039
14052
|
onAdd(event) { event.stopPropagation(); this.add.emit(); }
|
|
14040
14053
|
onInc(event) { event.stopPropagation(); this.increment.emit(); }
|
|
14041
14054
|
onDec(event) { event.stopPropagation(); this.decrement.emit(); }
|
|
14042
14055
|
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() ?
|
|
14056
|
+
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 }, fallbackColor: { classPropertyName: "fallbackColor", publicName: "fallbackColor", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement" }, ngImport: i0, template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\n (click)=\"onCard()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <div class=\"product__img\"\n [class.product__img--icon]=\"showIconFallback()\"\n [class.product__img--named]=\"showNamedFallback()\"\n [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (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
14057
|
}
|
|
14045
14058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
|
|
14046
14059
|
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() ?
|
|
14048
|
-
}], 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"] }] } });
|
|
14060
|
+
args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\n (click)=\"onCard()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <div class=\"product__img\"\n [class.product__img--icon]=\"showIconFallback()\"\n [class.product__img--named]=\"showNamedFallback()\"\n [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (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"] }]
|
|
14061
|
+
}], 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 }] }], fallbackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackColor", 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
14062
|
|
|
14050
14063
|
/**
|
|
14051
14064
|
* SUI Switch Card — SUI Design System 2.0
|
|
@@ -14521,11 +14534,16 @@ class SuiTabChips {
|
|
|
14521
14534
|
nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
|
|
14522
14535
|
}
|
|
14523
14536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14525
14538
|
}
|
|
14526
14539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, decorators: [{
|
|
14527
14540
|
type: Component,
|
|
14528
|
-
args: [{ selector: 'sui-tab-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true,
|
|
14541
|
+
args: [{ selector: 'sui-tab-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
|
|
14542
|
+
/* En modo sticky, el :host pasa a `display: contents` (ver scss) para que el
|
|
14543
|
+
<nav> sticky resuelva contra el scroll container real y no contra el host
|
|
14544
|
+
(que mide ~50px → el sticky no se enganchaba). Gate por clase de host. */
|
|
14545
|
+
'[class.sui-tab-chips--host-sticky]': 'sticky()',
|
|
14546
|
+
}, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
|
|
14529
14547
|
}], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
|
|
14530
14548
|
type: ViewChild,
|
|
14531
14549
|
args: ['sentinel']
|
|
@@ -16877,5 +16895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
16877
16895
|
* Generated bundle index. Do not edit.
|
|
16878
16896
|
*/
|
|
16879
16897
|
|
|
16880
|
-
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
16898
|
+
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
16881
16899
|
//# sourceMappingURL=ajuarezso-sui-design-system.mjs.map
|