vviinn-widgets 2.166.0 → 2.167.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.
- package/dist/cjs/{index-B9ytLPxZ.js → index-DYvhURIh.js} +12 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-cwS3_cup.js → package-CTmKiTyO.js} +1 -1
- package/dist/cjs/vviinn-button_2.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-camera_12.cjs.entry.js +16 -16
- package/dist/cjs/vviinn-carousel_10.cjs.entry.js +77 -32
- package/dist/cjs/vviinn-detected-object_7.cjs.entry.js +7 -7
- package/dist/cjs/vviinn-text-search.cjs.entry.js +3 -3
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-widgets.cjs.js +1 -1
- package/dist/collection/Image/renderTitleImage.js +2 -0
- package/dist/collection/components/vviinn-modal/vviinn-modal.js +3 -3
- package/dist/collection/components/vviinn-product-card/render-helpers.js +29 -9
- package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.js +2 -2
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.css +42 -0
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +79 -16
- package/dist/collection/components/vviinn-results/vviinn-results.js +3 -3
- package/dist/collection/components/vviinn-skeleton/vviinn-skeleton.js +1 -1
- package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.js +1 -1
- package/dist/collection/components/vviinn-slider/vviinn-slider.js +1 -1
- package/dist/collection/components/vviinn-teaser/vviinn-teaser.js +1 -1
- package/dist/collection/components/vviinn-text-search/vviinn-text-search.js +2 -2
- package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js +1 -1
- package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +2 -2
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.css +1 -1
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +2 -2
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +9 -9
- package/dist/collection/cssParts/index.js +2 -1
- package/dist/collection/cssParts/product.js +10 -0
- package/dist/collection/helpers/url/getLastUrlPath.js +14 -0
- package/dist/collection/helpers/url/getLastUrlPath.test.js +23 -0
- package/dist/collection/store/search.store.js +1 -1
- package/dist/collection/utils/string/joinTruthy.js +3 -0
- package/dist/collection/utils/string/joinTruthy.test.js +17 -0
- package/dist/esm/{index-DJLLuTh-.js → index-CYUAT3RF.js} +12 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{package-BRkye-3Y.js → package-Ds0qJGAs.js} +1 -1
- package/dist/esm/vviinn-button_2.entry.js +2 -2
- package/dist/esm/vviinn-camera_12.entry.js +16 -16
- package/dist/esm/vviinn-carousel_10.entry.js +77 -32
- package/dist/esm/vviinn-detected-object_7.entry.js +7 -7
- package/dist/esm/vviinn-text-search.entry.js +3 -3
- package/dist/esm/vviinn-vps-button.entry.js +2 -2
- package/dist/esm/vviinn-widgets.js +1 -1
- package/dist/types/Image/renderTitleImage.d.ts +1 -0
- package/dist/types/components/vviinn-product-card/render-helpers.d.ts +10 -2
- package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts +8 -1
- package/dist/types/components.d.ts +24 -0
- package/dist/types/cssParts/index.d.ts +1 -0
- package/dist/types/cssParts/product.d.ts +1 -0
- package/dist/types/helpers/url/getLastUrlPath.d.ts +1 -0
- package/dist/types/helpers/url/getLastUrlPath.test.d.ts +1 -0
- package/dist/types/utils/string/joinTruthy.d.ts +1 -0
- package/dist/types/utils/string/joinTruthy.test.d.ts +1 -0
- package/dist/vviinn-widgets/p-08c03082.entry.js +1 -0
- package/{www/build/p-f97aa42e.entry.js → dist/vviinn-widgets/p-177e130c.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-d06c3d98.entry.js → p-53347933.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-e70adb2f.entry.js → p-6e0b7760.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-464d7e0c.entry.js → p-7d12f926.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-DJLLuTh-.js → p-CYUAT3RF.js} +1 -1
- package/dist/vviinn-widgets/{p-BRkye-3Y.js → p-Ds0qJGAs.js} +1 -1
- package/dist/vviinn-widgets/{p-f4a75f92.entry.js → p-bb74e1b1.entry.js} +2 -2
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-08c03082.entry.js +1 -0
- package/{dist/vviinn-widgets/p-f97aa42e.entry.js → www/build/p-177e130c.entry.js} +1 -1
- package/www/build/{p-d06c3d98.entry.js → p-53347933.entry.js} +1 -1
- package/www/build/{p-e70adb2f.entry.js → p-6e0b7760.entry.js} +1 -1
- package/www/build/{p-464d7e0c.entry.js → p-7d12f926.entry.js} +1 -1
- package/www/build/p-9fa69445.js +1 -0
- package/www/build/{p-DJLLuTh-.js → p-CYUAT3RF.js} +1 -1
- package/www/build/{p-BRkye-3Y.js → p-Ds0qJGAs.js} +1 -1
- package/www/build/{p-f4a75f92.entry.js → p-bb74e1b1.entry.js} +2 -2
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/collection/Image/renderImage.js +0 -2
- package/dist/collection/helpers/index.js +0 -1
- package/dist/collection/utils/string/index.js +0 -1
- package/dist/types/Image/renderImage.d.ts +0 -1
- package/dist/types/helpers/index.d.ts +0 -1
- package/dist/types/utils/string/index.d.ts +0 -1
- package/dist/vviinn-widgets/p-d6ea882d.entry.js +0 -1
- package/www/build/p-ca47d016.js +0 -1
- package/www/build/p-d6ea882d.entry.js +0 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, F as Fragment, H as Host, g as getElement } from './index-BcMtFp89.js';
|
|
2
2
|
import { o as has, q as tuple, c as addIfNotEmpty, _ as _functionExports, v as _ArrayExports, g as globalState, u as useSearchStore, w as requireSemigroup, O as OptionExports, E as EitherExports, s as searchState, x as pipe$1, y as chainW, z as makeRequest, A as fromEither, B as getApiPath, C as createInitPostRequest, D as Apply, a as updateGlobalState, l as trackEvent, T as TaskEitherExports } from './search.store-yqygS_Os.js';
|
|
3
|
-
import { c as campaignTypeNames, f as fromString, a as fold, v as version } from './package-
|
|
3
|
+
import { c as campaignTypeNames, f as fromString, a as fold, v as version } from './package-Ds0qJGAs.js';
|
|
4
4
|
import { C as CONTENT_GROUP_CSS_CLASS, i as CAROUSEL_IMAGE_WIDTH_CSS_VAR, S as SET_MODE_IMAGE_WIDTH_CSS_VAR, j as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, g as getCustomLabels, P as PlusIcon, v as v4, b as createAddToBasketEvent, d as createAddToWishlistEvent, c as createWidgetEvent, e as createResultEventByType, f as createProductEventByType, k as getRecommendationsBody } from './index-DHDA4hJT.js';
|
|
5
5
|
import { P as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH } from './constants-CR1-OmNa.js';
|
|
6
6
|
import { i as instance, a as isClickedInRectBound } from './Rectangle-Blhy9XN1.js';
|
|
7
7
|
import { s as slotChangeListener, S as SlotSkeleton } from './customized-slots-s64pq2zp.js';
|
|
8
|
-
import { g as energyLabelParts, h as priceRangeParts, p as productCardParts } from './index-
|
|
8
|
+
import { g as energyLabelParts, h as priceRangeParts, i as contentCardParts, p as productCardParts } from './index-CYUAT3RF.js';
|
|
9
9
|
import { i as isIntervalFilter, b as triggerResetFilters, g as getPriceLabel, a as isSubFilterActive, R as RenderFilterButton, t as triggerFilter } from './triggerFilter-B6lQhawz.js';
|
|
10
10
|
import { r as resources } from './resources-DcA7Zxs5.js';
|
|
11
11
|
|
|
@@ -477,9 +477,9 @@ const VviinnEnergyLabel = class {
|
|
|
477
477
|
slotChangeListener(this, this.el);
|
|
478
478
|
}
|
|
479
479
|
render() {
|
|
480
|
-
return (h(Host, { key: '
|
|
480
|
+
return (h(Host, { key: '7342ec4499392827d9255605eb5d00587b1d59b9', class: {
|
|
481
481
|
hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
|
|
482
|
-
}, exportparts: energyLabelParts }, h("div", { key: '
|
|
482
|
+
}, exportparts: energyLabelParts }, h("div", { key: '4d1ec82fefe845a6168091584ec1d65e4f4cce9c', class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("img", { key: 'cf6e369e1aa542648cae38bd7434ecf3aeb5f62b', class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] })), (this.productType || this.classDataSheetUrl) && (h("div", { key: 'ae0e42d623443b26c3614c8adc24ebc55627877b', class: "info-container" }, this.productType && (h("span", { key: 'd139a2c9d57764bc02fbd7bffc4d9b1a2a0b5cb4', class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { key: '194d6282f79f2854c2e47e703bf50ffff967b258', class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { key: '16b7c90e062b5f7f5eb15b0ecef44aec6520df16', name: "vviinn-energy-label-data-sheet-text" }, instance.t("energyLabel.dataSheetText")))))))));
|
|
483
483
|
}
|
|
484
484
|
get el() { return getElement(this); }
|
|
485
485
|
};
|
|
@@ -1085,6 +1085,25 @@ const getCommonAnalytics = () => _functionExports.pipe(OptionExports.fromNullabl
|
|
|
1085
1085
|
const analyticsMonoid = OptionExports.getMonoid(SemigroupExports.first());
|
|
1086
1086
|
const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
|
|
1087
1087
|
|
|
1088
|
+
function getLastUrlPath(url) {
|
|
1089
|
+
if (!url)
|
|
1090
|
+
return "";
|
|
1091
|
+
if (!url.includes("://"))
|
|
1092
|
+
return url;
|
|
1093
|
+
try {
|
|
1094
|
+
const parsed = new URL(url);
|
|
1095
|
+
const segments = parsed.pathname.split("/").filter(Boolean);
|
|
1096
|
+
return segments.length ? `/${segments.pop()}` : url;
|
|
1097
|
+
}
|
|
1098
|
+
catch (_a) {
|
|
1099
|
+
return url;
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
function joinTruthy(arr) {
|
|
1104
|
+
return arr.filter(Boolean).join(" ");
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1088
1107
|
const FIT_EXPR = /fit\/\d+\//;
|
|
1089
1108
|
const containsFit = (url) => {
|
|
1090
1109
|
return _functionExports.pipe(url.match(FIT_EXPR), EitherExports.fromNullable(url), EitherExports.map(() => url));
|
|
@@ -1162,7 +1181,7 @@ const ImageOrPlaceholder = (props) => {
|
|
|
1162
1181
|
const hasImage = !!props.src;
|
|
1163
1182
|
const { num: widthNum, px: widthPx } = getDimensionValues(props.width);
|
|
1164
1183
|
const { num: heightNum, px: heightPx } = getDimensionValues(props.height);
|
|
1165
|
-
return hasImage ? (h("img", { src: props.src, width: widthNum, height: heightNum, alt: props.alt, title: props.title, class: props.className, ref: props.ref, onLoad: props.onLoad, loading: "lazy", part:
|
|
1184
|
+
return hasImage ? (h("img", { src: props.src, width: widthNum, height: heightNum, alt: props.alt, title: props.title, class: props.className, ref: props.ref, onLoad: props.onLoad, loading: "lazy", part: props.part })) : (h("div", { style: {
|
|
1166
1185
|
width: widthPx,
|
|
1167
1186
|
height: heightPx,
|
|
1168
1187
|
}, class: "image-placeholder", part: "image-placeholder", ref: props.ref },
|
|
@@ -1172,19 +1191,40 @@ const ImageOrPlaceholder = (props) => {
|
|
|
1172
1191
|
const getProcessedSrc = (src, imageResolutionWidth) => {
|
|
1173
1192
|
return imageResolutionWidth ? processWidth(src, imageResolutionWidth) : src;
|
|
1174
1193
|
};
|
|
1175
|
-
const
|
|
1176
|
-
const processedSrc = getProcessedSrc(
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1194
|
+
const UniversalImage = ({ width, height, title, src, ref, isSource, imageResolutionWidth, isResponsive = false, isFullHeight = false, additionalClasses = [], additionalParts = [], onLoadEnd = () => undefined, }) => {
|
|
1195
|
+
const processedSrc = getProcessedSrc(src, imageResolutionWidth);
|
|
1196
|
+
const classes = joinTruthy([
|
|
1197
|
+
"image",
|
|
1198
|
+
isResponsive && "responsive",
|
|
1199
|
+
isFullHeight && "content-card-image",
|
|
1200
|
+
...additionalClasses,
|
|
1201
|
+
]);
|
|
1202
|
+
const computeParts = (base) => joinTruthy([
|
|
1203
|
+
base,
|
|
1204
|
+
isFullHeight &&
|
|
1205
|
+
(base === "image-picture"
|
|
1206
|
+
? "content-card-image-picture"
|
|
1207
|
+
: "content-card-image"),
|
|
1208
|
+
...additionalParts,
|
|
1209
|
+
]);
|
|
1210
|
+
const parts = computeParts("image-picture");
|
|
1211
|
+
const imageParts = computeParts("image");
|
|
1212
|
+
return (h("picture", { part: parts },
|
|
1213
|
+
h(ImageOrPlaceholder, { src: processedSrc, width: !isResponsive ? width : undefined, height: !isResponsive ? height : undefined, alt: title, title: title, part: imageParts, className: classes, ref: ref, onLoad: onLoadEnd }),
|
|
1214
|
+
isSource && h(PlusIcon, null)));
|
|
1215
|
+
};
|
|
1216
|
+
const renderImage = (imageProps, isResponsive, isFullHeight = false) => {
|
|
1217
|
+
return UniversalImage(Object.assign(Object.assign({}, imageProps), { isResponsive,
|
|
1218
|
+
isFullHeight }));
|
|
1180
1219
|
};
|
|
1181
|
-
const
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
h(
|
|
1220
|
+
const ContentCardContent = (contentText, contentLink, labelText = "Content") => {
|
|
1221
|
+
return (h("div", { class: "content-container", part: "content-container content-card-content-container" },
|
|
1222
|
+
h("div", { class: "content-label", part: "content-label" }, labelText),
|
|
1223
|
+
contentText && (h("div", { class: "content-text", part: "content-text", title: contentText }, contentText)),
|
|
1224
|
+
contentLink && (h(Linked, { deeplink: contentLink, class: "content-link", part: "content-link" }, getLastUrlPath(contentLink)))));
|
|
1185
1225
|
};
|
|
1186
1226
|
|
|
1187
|
-
const vviinnProductCardCss$1 = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative;width:100%}.image-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f0f0;aspect-ratio:1 / 1;width:100%;height:auto}.basket-button-container{width:100%;display:flex;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.brand,.title,.product-type{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title{font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-line-clamp:2}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.product-card-actions,.product-card-actions-top{line-height:0px;position:absolute;right:var(--spacing-75)}.product-card-actions-top{top:var(--spacing-75)}.product-card-actions{bottom:var(--spacing-75)}::slotted([slot=\"vviinn-product-card-actions\"]),.product-card-actions-top,.product-card-actions{display:flex;flex-direction:column;gap:4px}.product-card-actions-top button,.product-card-actions button,vviinn-vpr-button::part(button),.update-button{width:24px;height:24px;line-height:0px;z-index:1;border:none;cursor:pointer;background:none;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));border-radius:var(--border-radius-100);padding:var(--spacing-50);display:flex;justify-content:center;align-items:center}.product-card-actions-top button:hover,.product-card-actions button:hover,.product-card-actions vviinn-vpr-button::part(button):hover,.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.product-card-actions-top button::after,.product-card-actions button::after,.product-card-actions vviinn-vpr-button::part(button)::after,.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\";cursor:pointer}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));color:var(--color-text-primary);background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n --product-card-image-bg-color,\n var(--product-card-image-bg-color-default)\n );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .product-card-actions,:host(.animated) .product-card-actions-top{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.product-card--source){flex-grow:1}:host(.product-card--source) picture{aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n --basket-button-bg-color-pressed,\n var(--basket-button-bg-color-pressed-default)\n )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.footer-arrow{position:absolute;bottom:-35px;left:50%;width:0;height:0;transform:translate(-50%, 0) rotate(90deg);border-top:22px solid transparent;border-bottom:22px solid transparent;border-right:22px solid var(--color-border-02);z-index:99}.footer-arrow::after{content:\"\";width:0;height:0;border-top:21px solid transparent;border-bottom:21px solid transparent;border-right:21.5px solid #ffffff;position:absolute;top:-21px;left:1px}.hidden{display:none !important}";
|
|
1227
|
+
const vviinnProductCardCss$1 = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative;width:100%}.image-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f0f0;aspect-ratio:1 / 1;width:100%;height:auto}.basket-button-container{width:100%;display:flex;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.brand,.title,.product-type{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title{font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-line-clamp:2}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.product-card-actions,.product-card-actions-top{line-height:0px;position:absolute;right:var(--spacing-75)}.product-card-actions-top{top:var(--spacing-75)}.product-card-actions{bottom:var(--spacing-75)}::slotted([slot=\"vviinn-product-card-actions\"]),.product-card-actions-top,.product-card-actions{display:flex;flex-direction:column;gap:4px}.product-card-actions-top button,.product-card-actions button,vviinn-vpr-button::part(button),.update-button{width:24px;height:24px;line-height:0px;z-index:1;border:none;cursor:pointer;background:none;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));border-radius:var(--border-radius-100);padding:var(--spacing-50);display:flex;justify-content:center;align-items:center}.product-card-actions-top button:hover,.product-card-actions button:hover,.product-card-actions vviinn-vpr-button::part(button):hover,.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.product-card-actions-top button::after,.product-card-actions button::after,.product-card-actions vviinn-vpr-button::part(button)::after,.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\";cursor:pointer}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));color:var(--color-text-primary);background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n --product-card-image-bg-color,\n var(--product-card-image-bg-color-default)\n );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .product-card-actions,:host(.animated) .product-card-actions-top{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.product-card--source){flex-grow:1}:host(.product-card--source) picture{aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n --basket-button-bg-color-pressed,\n var(--basket-button-bg-color-pressed-default)\n )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}:host(.content-card){height:auto}.content-card-image-container{height:100%}.content-card-image{aspect-ratio:unset;-o-object-fit:cover;object-fit:cover}.content-card-image.responsive{min-width:100%;height:100%}.content-text,.content-link{display:-webkit-box;-webkit-box-orient:vertical;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.content-text{-webkit-line-clamp:3;font-size:var(--font-size-headline);font-weight:var(--font-weight-600);line-height:var(--line-height-headline);letter-spacing:var(--letter-spacing-headline)}.content-link{-webkit-line-clamp:1;color:var(--color-content-accent);text-decoration:none}.footer-arrow{position:absolute;bottom:-35px;left:50%;width:0;height:0;transform:translate(-50%, 0) rotate(90deg);border-top:22px solid transparent;border-bottom:22px solid transparent;border-right:22px solid var(--color-border-02);z-index:99}.footer-arrow::after{content:\"\";width:0;height:0;border-top:21px solid transparent;border-bottom:21px solid transparent;border-right:21.5px solid #ffffff;position:absolute;top:-21px;left:1px}.hidden{display:none !important}";
|
|
1188
1228
|
|
|
1189
1229
|
const VviinnProductCard = class {
|
|
1190
1230
|
constructor(hostRef) {
|
|
@@ -1206,6 +1246,8 @@ const VviinnProductCard = class {
|
|
|
1206
1246
|
this.responsive = false;
|
|
1207
1247
|
this.customLabels = "";
|
|
1208
1248
|
this.addPriceContainer = false;
|
|
1249
|
+
/** If true, renders the card in 'Content' mode (special layout) */
|
|
1250
|
+
this.isContentCard = false;
|
|
1209
1251
|
/** @internal */
|
|
1210
1252
|
this.index = 0;
|
|
1211
1253
|
/** @internal */
|
|
@@ -1241,6 +1283,7 @@ const VviinnProductCard = class {
|
|
|
1241
1283
|
}
|
|
1242
1284
|
connectedCallback() {
|
|
1243
1285
|
this.productData = this.getProductData();
|
|
1286
|
+
this.imageProps = this.getImageProps();
|
|
1244
1287
|
this.isStandalone &&
|
|
1245
1288
|
instance.init({
|
|
1246
1289
|
lng: this.locale,
|
|
@@ -1325,8 +1368,8 @@ const VviinnProductCard = class {
|
|
|
1325
1368
|
getProduct() {
|
|
1326
1369
|
return searchState.results.find((r) => r.productId === this.productId);
|
|
1327
1370
|
}
|
|
1328
|
-
|
|
1329
|
-
|
|
1371
|
+
getImageProps() {
|
|
1372
|
+
return {
|
|
1330
1373
|
width: this.imageWidth,
|
|
1331
1374
|
height: this.imageWidth * this.imageRatio,
|
|
1332
1375
|
src: this.image,
|
|
@@ -1337,19 +1380,21 @@ const VviinnProductCard = class {
|
|
|
1337
1380
|
},
|
|
1338
1381
|
isSource: this.isSourceProduct,
|
|
1339
1382
|
};
|
|
1340
|
-
return this.responsive ? ResponsiveImage(props) : Image(props);
|
|
1341
1383
|
}
|
|
1342
1384
|
render() {
|
|
1343
1385
|
var _a, _b, _c;
|
|
1344
|
-
|
|
1386
|
+
if (this.isContentCard) {
|
|
1387
|
+
return (h(Host, { part: "product-card content-card", class: "content-card", exportparts: contentCardParts }, h("div", { class: "image-container content-card-image-container", part: "image-container" }, h(Linked, { deeplink: this.contentLink, part: "image-link content-image-link" }, renderImage(this.imageProps, this.responsive, true))), ContentCardContent(this.contentText, this.contentLink)));
|
|
1388
|
+
}
|
|
1389
|
+
return (h(Host, { part: "product-card", class: {
|
|
1345
1390
|
animated: this.isTransitioning,
|
|
1346
|
-
}, exportparts: productCardParts }, h("div", {
|
|
1391
|
+
}, exportparts: productCardParts }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, renderImage(this.imageProps, this.responsive)), h("div", { class: "product-card-actions-top", part: "product-card-actions-top" }, h("button", { class: {
|
|
1347
1392
|
hidden: !this.favoriteShow || this.isSourceProduct,
|
|
1348
1393
|
}, part: "favorite-button", onClick: this.favoriteButtonClickHandler.bind(this) }, h("div", { key: "favorite-not-pressed", class: {
|
|
1349
1394
|
hidden: this.favoriteButonPressed,
|
|
1350
|
-
} }, h("slot", {
|
|
1395
|
+
} }, h("slot", { name: "vviinn-favorite-icon" }, h(FavoriteIcon, { width: 14, height: 14 }))), h("div", { key: "favorite-pressed", class: {
|
|
1351
1396
|
hidden: !this.favoriteButonPressed,
|
|
1352
|
-
} }, h("slot", {
|
|
1397
|
+
} }, h("slot", { name: "vviinn-favorite-icon-pressed" }, h(FavoriteIconPressed, { width: 14, height: 14 })))), h("button", { class: {
|
|
1353
1398
|
"update-button": true,
|
|
1354
1399
|
hidden: !this.isShowUpdateButton(),
|
|
1355
1400
|
}, part: "update-button-item", onClick: () => {
|
|
@@ -1357,26 +1402,26 @@ const VviinnProductCard = class {
|
|
|
1357
1402
|
animationInterval: generateRandomNumber(800, 1400),
|
|
1358
1403
|
productData: this.productData,
|
|
1359
1404
|
});
|
|
1360
|
-
} }, h("div",
|
|
1405
|
+
} }, h("div", null, h("slot", { name: "vviinn-update-button-icon" }, h(UpdateIcon, { width: 14, height: 14 }))))), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" }))), h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, locale: this.locale, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), showInContainer: this.addPriceContainer }), this.setMode &&
|
|
1361
1406
|
!this.appliedDiscountPercentage &&
|
|
1362
|
-
this.currentDiscountPercentage && (h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)), renderCustomLabels(this.customLabels.split(",")))), h("vviinn-skeleton", {
|
|
1407
|
+
this.currentDiscountPercentage && (h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)), renderCustomLabels(this.customLabels.split(",")))), h("vviinn-skeleton", { height: 40, class: {
|
|
1363
1408
|
hidden: !this.isTransitioning,
|
|
1364
|
-
} })), h("div", {
|
|
1409
|
+
} })), h("div", { class: {
|
|
1365
1410
|
"basket-button-container": true,
|
|
1366
1411
|
hidden: !this.isShowBasketButton(),
|
|
1367
|
-
}, part: "basket-button-container" }, h("button", {
|
|
1412
|
+
}, part: "basket-button-container" }, h("button", { class: {
|
|
1368
1413
|
"basket-button": true,
|
|
1369
1414
|
hidden: this.isTransitioning,
|
|
1370
1415
|
pressed: this.basketButonPressed,
|
|
1371
1416
|
}, part: "basket-button", onClick: this.basketButtonClickHandler.bind(this) }, h("div", { class: {
|
|
1372
1417
|
"basket-button-content": true,
|
|
1373
1418
|
hidden: this.basketButonPressed,
|
|
1374
|
-
}, key: "not-pressed" }, h("span", {
|
|
1419
|
+
}, key: "not-pressed" }, h("span", { class: "basket-button-icon-container" }, h("slot", { name: "vviinn-basket-button-icon" }, h(BasketIcon, null))), h("span", null, this.setMode ? (h("slot", { name: "vviinn-basket-button-text", key: "button-text-set" }, instance.t("setMode.basketButtonText"))) : (h("slot", { name: "vviinn-basket-button-text", key: "button-text-default" }, instance.t("basketButtonText"))))), h("div", { key: "pressed", class: {
|
|
1375
1420
|
"basket-button-content": true,
|
|
1376
1421
|
hidden: !this.basketButonPressed,
|
|
1377
|
-
} }, h("span", {
|
|
1422
|
+
} }, h("span", { class: "basket-button-icon-container" }, h("slot", { name: "vviinn-basket-button-icon-pressed" }, h(CheckCircleIcon, null))), h("span", null, h("span", { class: "discount-percentage", part: "discount-percentage", hidden: !(this.setMode && this.appliedDiscountPercentage) }, this.appliedDiscountPercentage, "%"), h("slot", { name: "vviinn-basket-button-text-pressed" }, this.setMode
|
|
1378
1423
|
? instance.t("setMode.basketButtonPressedText")
|
|
1379
|
-
: instance.t("basketButtonPressedText")))))), this.showFooterArrow && h("div", {
|
|
1424
|
+
: instance.t("basketButtonPressedText")))))), this.showFooterArrow && h("div", { class: "footer-arrow" })));
|
|
1380
1425
|
}
|
|
1381
1426
|
get el() { return getElement(this); }
|
|
1382
1427
|
static get watchers() { return {
|
|
@@ -1386,7 +1431,7 @@ const VviinnProductCard = class {
|
|
|
1386
1431
|
};
|
|
1387
1432
|
VviinnProductCard.style = vviinnProductCardCss$1;
|
|
1388
1433
|
|
|
1389
|
-
const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative;width:100%}.image-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f0f0;aspect-ratio:1 / 1;width:100%;height:auto}.basket-button-container{width:100%;display:flex;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.brand,.title,.product-type{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title{font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-line-clamp:2}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.product-card-actions,.product-card-actions-top{line-height:0px;position:absolute;right:var(--spacing-75)}.product-card-actions-top{top:var(--spacing-75)}.product-card-actions{bottom:var(--spacing-75)}::slotted([slot=\"vviinn-product-card-actions\"]),.product-card-actions-top,.product-card-actions{display:flex;flex-direction:column;gap:4px}.product-card-actions-top button,.product-card-actions button,vviinn-vpr-button::part(button),.update-button{width:24px;height:24px;line-height:0px;z-index:1;border:none;cursor:pointer;background:none;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));border-radius:var(--border-radius-100);padding:var(--spacing-50);display:flex;justify-content:center;align-items:center}.product-card-actions-top button:hover,.product-card-actions button:hover,.product-card-actions vviinn-vpr-button::part(button):hover,.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.product-card-actions-top button::after,.product-card-actions button::after,.product-card-actions vviinn-vpr-button::part(button)::after,.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\";cursor:pointer}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));color:var(--color-text-primary);background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n --product-card-image-bg-color,\n var(--product-card-image-bg-color-default)\n );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .product-card-actions,:host(.animated) .product-card-actions-top{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.product-card--source){flex-grow:1}:host(.product-card--source) picture{aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n --basket-button-bg-color-pressed,\n var(--basket-button-bg-color-pressed-default)\n )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.footer-arrow{position:absolute;bottom:-35px;left:50%;width:0;height:0;transform:translate(-50%, 0) rotate(90deg);border-top:22px solid transparent;border-bottom:22px solid transparent;border-right:22px solid var(--color-border-02);z-index:99}.footer-arrow::after{content:\"\";width:0;height:0;border-top:21px solid transparent;border-bottom:21px solid transparent;border-right:21.5px solid #ffffff;position:absolute;top:-21px;left:1px}.hidden{display:none !important}";
|
|
1434
|
+
const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative;width:100%}.image-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f0f0;aspect-ratio:1 / 1;width:100%;height:auto}.basket-button-container{width:100%;display:flex;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.brand,.title,.product-type{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n );-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title{font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-line-clamp:2}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.product-card-actions,.product-card-actions-top{line-height:0px;position:absolute;right:var(--spacing-75)}.product-card-actions-top{top:var(--spacing-75)}.product-card-actions{bottom:var(--spacing-75)}::slotted([slot=\"vviinn-product-card-actions\"]),.product-card-actions-top,.product-card-actions{display:flex;flex-direction:column;gap:4px}.product-card-actions-top button,.product-card-actions button,vviinn-vpr-button::part(button),.update-button{width:24px;height:24px;line-height:0px;z-index:1;border:none;cursor:pointer;background:none;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));border-radius:var(--border-radius-100);padding:var(--spacing-50);display:flex;justify-content:center;align-items:center}.product-card-actions-top button:hover,.product-card-actions button:hover,.product-card-actions vviinn-vpr-button::part(button):hover,.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.product-card-actions-top button::after,.product-card-actions button::after,.product-card-actions vviinn-vpr-button::part(button)::after,.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\";cursor:pointer}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));color:var(--color-text-primary);background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n --product-card-image-bg-color,\n var(--product-card-image-bg-color-default)\n );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .product-card-actions,:host(.animated) .product-card-actions-top{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.product-card--source){flex-grow:1}:host(.product-card--source) picture{aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n --basket-button-bg-color-pressed,\n var(--basket-button-bg-color-pressed-default)\n )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}:host(.content-card){height:auto}.content-card-image-container{height:100%}.content-card-image{aspect-ratio:unset;-o-object-fit:cover;object-fit:cover}.content-card-image.responsive{min-width:100%;height:100%}.content-text,.content-link{display:-webkit-box;-webkit-box-orient:vertical;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.content-text{-webkit-line-clamp:3;font-size:var(--font-size-headline);font-weight:var(--font-weight-600);line-height:var(--line-height-headline);letter-spacing:var(--letter-spacing-headline)}.content-link{-webkit-line-clamp:1;color:var(--color-content-accent);text-decoration:none}.footer-arrow{position:absolute;bottom:-35px;left:50%;width:0;height:0;transform:translate(-50%, 0) rotate(90deg);border-top:22px solid transparent;border-bottom:22px solid transparent;border-right:22px solid var(--color-border-02);z-index:99}.footer-arrow::after{content:\"\";width:0;height:0;border-top:21px solid transparent;border-bottom:21px solid transparent;border-right:21.5px solid #ffffff;position:absolute;top:-21px;left:1px}.hidden{display:none !important}";
|
|
1390
1435
|
|
|
1391
1436
|
const VviinnProductCardSkeleton = class {
|
|
1392
1437
|
constructor(hostRef) {
|
|
@@ -1410,7 +1455,7 @@ const VviinnSkeleton = class {
|
|
|
1410
1455
|
this.halfWidth = false;
|
|
1411
1456
|
}
|
|
1412
1457
|
render() {
|
|
1413
|
-
return (h(Host, { key: '
|
|
1458
|
+
return (h(Host, { key: '749d83daa34563328a2e9bd99d9e0698c8092842' }, h("div", { key: 'dee29d665b867b7d6a6f2b17e96de450b0c3d733', class: {
|
|
1414
1459
|
"vviinn-skeleton": true,
|
|
1415
1460
|
}, style: {
|
|
1416
1461
|
height: this.height ? `${this.height.toString()}px` : "100%",
|
|
@@ -10909,7 +10954,7 @@ const getVCSRecommendations = (body) => (options) => {
|
|
|
10909
10954
|
|
|
10910
10955
|
const getRecommendationsService = (campaignType) => _functionExports.pipe(fromString(campaignType), fold(() => getVPRRecommendations, () => getVCSRecommendations));
|
|
10911
10956
|
|
|
10912
|
-
const vviinnVprWidgetCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:grid;grid-gap:var(--spacing-200);width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.set){grid-gap:var(--spacing-300)}:host(.set) vviinn-carousel{overflow-x:auto;scrollbar-width:thin}:host(.set) vviinn-product-card::part(image){width:var(--vviinn-set-mode-image-width, 100%);height:
|
|
10957
|
+
const vviinnVprWidgetCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:grid;grid-gap:var(--spacing-200);width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.set){grid-gap:var(--spacing-300)}:host(.set) vviinn-carousel{overflow-x:auto;scrollbar-width:thin}:host(.set) vviinn-product-card::part(image){width:var(--vviinn-set-mode-image-width, 100%);height:100%;min-width:var(--image-set-mode-min-width);aspect-ratio:1 / 1}:host(.set) vviinn-product-card.product-card--source::part(image){width:100%;height:auto}:host(.grid) h2{justify-content:center}.filters-header{display:flex;justify-content:space-between;gap:14px}.filters-header>vviinn-extended-filters{width:44px;height:44px}@media (max-width: 768px){.filters-header>vviinn-filters{flex:1;width:100px}}.widget-header{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.widget-header h3{margin-top:8px;margin-bottom:0;font-size:14px;font-weight:400;line-height:20px}.widget-header h2,.widget-header h3{margin:0;font-family:var(--font-family, var(--font-family-base))}.widget-header h2{font-weight:var(--font-weight-600);line-height:var(--line-height-title)}.widget-header h3{line-height:var(--line-height-body);margin-top:var(--spacing-100)}.update-button{display:flex;align-items:center;align-self:flex-end;justify-content:center;font-family:var(--font-family, var(--font-family-base));color:#525252;gap:8px;padding:8px 10px;background:rgb(244, 244, 244);border:none;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}.results{display:grid;grid-gap:1rem}.no-result-text{line-height:var(--line-height-headline);font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-headline);padding-bottom:48px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}.recommendations-results.recommendations-grid{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(\n auto-fill,\n minmax(\n var(--product-card-width, var(--product-card-results-min-width)),\n 1fr\n )\n );padding-bottom:var(--spacing-300)}@media (max-width: 768px){:host(.show-in-widget) .recommendations-results.recommendations-grid{width:unset;grid-gap:24px 16px;justify-content:center;grid-template-columns:repeat(auto-fill, minmax(155px, 1fr))}}";
|
|
10913
10958
|
|
|
10914
10959
|
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
10915
10960
|
var t = {};
|
|
@@ -3,8 +3,8 @@ import { _ as _functionExports, O as OptionExports, d as detectedObjectEq, s as
|
|
|
3
3
|
import { s as scaleWithSized, c as center, i as instance } from './Rectangle-Blhy9XN1.js';
|
|
4
4
|
import { W as WarningIcon } from './WarningIcon-d_dhTVTw.js';
|
|
5
5
|
import { s as slotChangeListener } from './customized-slots-s64pq2zp.js';
|
|
6
|
-
import { c as campaignTypeNames, v as version } from './package-
|
|
7
|
-
import { m as modalParts } from './index-
|
|
6
|
+
import { c as campaignTypeNames, v as version } from './package-Ds0qJGAs.js';
|
|
7
|
+
import { m as modalParts } from './index-CYUAT3RF.js';
|
|
8
8
|
import { P as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH } from './constants-CR1-OmNa.js';
|
|
9
9
|
|
|
10
10
|
const SecondaryActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
@@ -68,7 +68,7 @@ const VviinnEmptyResults = class {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
-
const
|
|
71
|
+
const renderTitleImage = (image) => image ? (h("img", { width: "28", height: "28", src: image.src, class: "title-image" })) : null;
|
|
72
72
|
|
|
73
73
|
const vviinnModalCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{background:white;border-radius:var(--modal-border-radius, var(--border-radius-300));box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{height:64px;font-family:var(--font-family, var(--font-family-base));position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:var(--font-weight-600);font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:160px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
|
|
74
74
|
|
|
@@ -101,10 +101,10 @@ const VviinnModal = class {
|
|
|
101
101
|
this.slider = true;
|
|
102
102
|
}
|
|
103
103
|
render() {
|
|
104
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: '2b55d24feb158395efb28601b6dd4ea7cb44c8ac', exportparts: modalParts, class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { key: 'ee63734e3825bc1d1a84bae2e0c16a458145c0fc', class: "head" }, !this.hideBackButton && (h("button", { key: '504e4e580cb092883d423f51cafb0188e8466566', part: "secondary-action", onClick: () => {
|
|
105
105
|
this.resetState();
|
|
106
106
|
this.resetTopScroll();
|
|
107
|
-
} }, h(SecondaryActionIcon, { key: '
|
|
107
|
+
} }, h(SecondaryActionIcon, { key: 'f8f41fee98264906fa76666eeb11fc24c507853c' }))), h("div", { key: 'ace69d25186ed7eba74d408a2cf97ed6ce780159', class: "title", part: "results-title" }, renderTitleImage(searchState.image), h("slot", { key: '183a67aa73731bda97a7401d7d7581913f021f5c', name: "vviinn-image-search-modal-title" }, instance.t("imageSearchModalTitle"))), h("button", { key: 'ce0803f9b42a861a01d5672fc983f0dcbd93b763', onClick: () => this.close(), class: "close-button", part: "close-button" }, h("svg", { key: '186c273af33ab58b785759e74f5e6d0f9a056137', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '0c444b987ec0d748fe7f4339c7be78973ef02774', d: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), h("div", { key: 'a6f61fc03402c68460b981c5e7a5e1c5fed3f521', class: "body" }, h("slot", { key: 'e7ee82a4e8add5bf2bb0f3adc0e5e76761fdb5d7' }))));
|
|
108
108
|
}
|
|
109
109
|
get el() { return getElement(this); }
|
|
110
110
|
};
|
|
@@ -233,7 +233,7 @@ const VviinnVprButton = class {
|
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
235
|
render() {
|
|
236
|
-
return (h(Host, { key: '
|
|
236
|
+
return (h(Host, { key: '09dfd61dbbc3bc43ae2d4cc034faa105d676999f', onClick: () => {
|
|
237
237
|
if (this.appendSidebarToId && !this.targetAppendSidebarTo) {
|
|
238
238
|
setTimeout(() => {
|
|
239
239
|
this.handleClick();
|
|
@@ -242,7 +242,7 @@ const VviinnVprButton = class {
|
|
|
242
242
|
else {
|
|
243
243
|
this.handleClick();
|
|
244
244
|
}
|
|
245
|
-
}, role: "button", tabindex: "0" }, h("vviinn-button", { key: '
|
|
245
|
+
}, role: "button", tabindex: "0" }, h("vviinn-button", { key: '60b4167b9189c9b396c003a043ed231776bf8210', addStyle: this.addStyle, part: "vviinn-button" }, h("slot", { key: '158ae74be03b06097840931dba71301354368ac8' }, this.campaignType === "VCS" ? (h(CrossSellingIcon, { width: this.iconSideSize, height: this.iconSideSize })) : (h(SimilarProductsIcon, { width: this.iconSideSize, height: this.iconSideSize }))))));
|
|
246
246
|
}
|
|
247
247
|
handleClick() {
|
|
248
248
|
const sidebar = document.createElement("vviinn-recommendations-sidebar");
|
|
@@ -3,7 +3,7 @@ import { a as updateGlobalState, u as useSearchStore, g as globalState, _ as _fu
|
|
|
3
3
|
import { s as slotChangeListener } from './customized-slots-s64pq2zp.js';
|
|
4
4
|
import { i as instance } from './Rectangle-Blhy9XN1.js';
|
|
5
5
|
import { r as resources } from './resources-DcA7Zxs5.js';
|
|
6
|
-
import { s as searchBarParts } from './index-
|
|
6
|
+
import { s as searchBarParts } from './index-CYUAT3RF.js';
|
|
7
7
|
|
|
8
8
|
const TextSearchIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
9
9
|
h("path", { d: "M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z", fill: "#525252" }),
|
|
@@ -226,8 +226,8 @@ const VviinnTextSearch = class {
|
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
228
|
render() {
|
|
229
|
-
return (h(Host, { key: '
|
|
230
|
-
this.recognition && (h("button", { key: '
|
|
229
|
+
return (h(Host, { key: 'c4929073c1229ccdc941c4168ce4c20e7ab86748', exportparts: searchBarParts }, h("div", { key: '6b18110e89fce5f80de212cdcd8bb4aa93c9a252', class: "text-search-container", part: "text-search-container" }, h("input", { key: 'd65c310e2ead8f2e918e29c23c6ee6810d3f023f', class: "text-search-input", part: "text-search-input", type: "text", placeholder: this.getPlaceholderText(), value: this.searchQuery, onInput: (event) => this.handleInputChange(event), onKeyUp: (event) => this.handleKeyPress(event) }), this.mode === "extended" && (h("vviinn-vps-button", { key: '63c12d90c876c52d3b1ac0672657ba9034d566e2', token: globalState.token, locale: globalState.locale, apiPath: globalState.apiPath, addStyle: false, showInWidget: false, exportparts: "vviinn-button" })), this.mode === "basic" && (h("slot", { key: 'b0d3250b809ea692bff4a0c9f8ae9c88e4afe702', name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
|
|
230
|
+
this.recognition && (h("button", { key: 'f59432039bddcae76e224e9ad4dd1dc4a57f56da', class: "speech-button", part: "speech-button", onClick: () => this.handleSpeech() }, h(MicIcon, { key: '155bee4ac5cb4e7b86ffcd28483027d36a378caa' }), this.isShowRecording() && (h("span", { key: 'da1ab308baab739ccb48f0eb68f32c6c40b68e30', class: "recording-indicator" })))), h("button", { key: 'bbe403e8e4a5940fa43f884782a788765d55b846', class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), disabled: this.state.loading }, this.isShowPreloader() ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null))))), this.showTooltip && (h("p", { key: '8e40fff9010c28394a8896d5387a5c4141d72f19', class: "text-search-tooltip", part: "text-search-tooltip" }, instance.t(this.tooltipText)))));
|
|
231
231
|
}
|
|
232
232
|
get el() { return getElement(this); }
|
|
233
233
|
};
|
|
@@ -108,9 +108,9 @@ const VviinnVpsButton = class {
|
|
|
108
108
|
}
|
|
109
109
|
render() {
|
|
110
110
|
var _a;
|
|
111
|
-
return (h(Host, { key: '
|
|
111
|
+
return (h(Host, { key: '1dd180283436297aae545d11108190958b847077', tabindex: "0", role: "button" }, h("vviinn-button", { key: '51c208321957d7d448316935ec63cc42ef3f0d5d', onClick: () => {
|
|
112
112
|
this.handleClick();
|
|
113
|
-
}, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", { key: '
|
|
113
|
+
}, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", { key: '916552c8f50c743b4604b2596234ef7e612a218e' }, this.mode === "camera" ? (h(SearchModalCameraIcon, null)) : this.textSearchShow ? (h(SearchModalFullSearchIcon, null)) : (h(SearchModalImageSearchIcon, null)))), SlotSkeleton("search"), h("vviinn-vps-widget", { key: '2a375cf4b45c81595756939062e35080bee051c4', mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, pricePrefix: this.pricePrefix, campaignId: this.campaignId, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed &&
|
|
114
114
|
(this.mode === "modal" || this.mode === "camera"), excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow, addToBasketShow: this.addToBasketShow, addPriceContainer: this.addPriceContainer, replaceSlotsContentInButton: this.replaceSlotsContent.bind(this), oneClickDiscoveryShow: (_a = this.oneClickDiscoveryShow) !== null && _a !== void 0 ? _a : !!this.oneClickDiscoveryMode, oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, favoriteShow: this.favoriteShow, showInWidget: this.showInWidget, parentSlots: this.slots })));
|
|
115
115
|
}
|
|
116
116
|
get el() { return getElement(this); }
|