vviinn-widgets 2.95.1 → 2.95.2
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/{emitRequestFiltersMore-dd0b6262.js → emitRequestFiltersMore-233f4997.js} +22 -15
- package/dist/cjs/{package-d8e571dc.js → package-ddca40d7.js} +1 -1
- package/dist/cjs/search-filters_19.cjs.entry.js +3 -3
- package/dist/cjs/vviinn-carousel_8.cjs.entry.js +4 -4
- package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +2 -2
- package/dist/collection/components/vviinn-product-card/render-helpers.js +12 -9
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.css +4 -2
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +8 -2
- package/dist/collection/components/vviinn-results/vviinn-results.js +8 -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 +7 -1
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.js +7 -1
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +7 -1
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +8 -2
- package/dist/esm/{emitRequestFiltersMore-35557c91.js → emitRequestFiltersMore-2bda46cb.js} +23 -16
- package/dist/esm/{package-4421a2a5.js → package-63e182dc.js} +1 -1
- package/dist/esm/search-filters_19.entry.js +3 -3
- package/dist/esm/vviinn-carousel_8.entry.js +4 -4
- package/dist/esm/vviinn-recommendations-sidebar.entry.js +1 -1
- package/dist/esm/vviinn-vpr-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-widget.entry.js +2 -2
- package/dist/types/components/vviinn-product-card/render-helpers.d.ts +1 -1
- package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts +7 -1
- package/dist/types/components/vviinn-results/vviinn-results.d.ts +7 -1
- package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts +7 -1
- package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-widget.d.ts +7 -1
- package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts +7 -1
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +7 -1
- package/dist/vviinn-widgets/{p-0b730cf0.entry.js → p-11a523db.entry.js} +1 -1
- package/{www/build/p-3588dabc.entry.js → dist/vviinn-widgets/p-2d96b041.entry.js} +1 -1
- package/dist/vviinn-widgets/p-422424ef.js +1 -0
- package/dist/vviinn-widgets/{p-3701ac2f.entry.js → p-4432fd8e.entry.js} +2 -2
- package/dist/vviinn-widgets/{p-8c017dc4.entry.js → p-4f2ba200.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-083fbaca.entry.js → p-9401e8ef.entry.js} +1 -1
- package/dist/vviinn-widgets/p-c63ce47d.entry.js +1 -0
- package/dist/vviinn-widgets/p-d1fb7e12.js +1 -0
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-0b730cf0.entry.js → p-11a523db.entry.js} +1 -1
- package/{dist/vviinn-widgets/p-3588dabc.entry.js → www/build/p-2d96b041.entry.js} +1 -1
- package/www/build/p-422424ef.js +1 -0
- package/www/build/{p-3701ac2f.entry.js → p-4432fd8e.entry.js} +2 -2
- package/www/build/{p-8c017dc4.entry.js → p-4f2ba200.entry.js} +1 -1
- package/www/build/{p-083fbaca.entry.js → p-9401e8ef.entry.js} +1 -1
- package/www/build/p-c63ce47d.entry.js +1 -0
- package/www/build/p-d1fb7e12.js +1 -0
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-385976ee.entry.js +0 -1
- package/dist/vviinn-widgets/p-61f6b763.js +0 -1
- package/dist/vviinn-widgets/p-dfa1ccc2.js +0 -1
- package/www/build/p-385976ee.entry.js +0 -1
- package/www/build/p-61f6b763.js +0 -1
- package/www/build/p-dfa1ccc2.js +0 -1
|
@@ -39,24 +39,31 @@ const FormattedPrice = (props) => {
|
|
|
39
39
|
formattedPrice,
|
|
40
40
|
currencyElement));
|
|
41
41
|
};
|
|
42
|
-
const calculatePriceLabel = (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
((
|
|
42
|
+
const calculatePriceLabel = ({ custom_label_0, custom_label_1, custom_label_2, custom_label_3, custom_label_4, }) => {
|
|
43
|
+
const renderLabel = (label, index$1) => {
|
|
44
|
+
console.log(label, index$1);
|
|
45
|
+
if (!label)
|
|
46
|
+
return "";
|
|
47
|
+
const partClass = `price-label-${index$1}`;
|
|
48
|
+
return (index.h("span", { part: partClass, class: partClass }, label));
|
|
49
|
+
};
|
|
50
|
+
return (index.h(index.Fragment, null,
|
|
51
|
+
renderLabel(custom_label_0, 0),
|
|
52
|
+
renderLabel(custom_label_1, 1),
|
|
53
|
+
renderLabel(custom_label_2, 2),
|
|
54
|
+
renderLabel(custom_label_3, 3),
|
|
55
|
+
renderLabel(custom_label_4, 4)));
|
|
49
56
|
};
|
|
50
57
|
const Price = (props) => {
|
|
51
|
-
return (index.h("span", { class: "price-container", part: "price-container" },
|
|
52
|
-
index.h("span", {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
58
|
+
return (index.h("span", { class: "price-container", part: "price-container" },
|
|
59
|
+
props.priceLabel && (index.h("span", { part: "price-label", class: "price-label" }, props.priceLabel)),
|
|
60
|
+
props.salePrice ? ([
|
|
61
|
+
index.h("span", { class: "price-sale", part: "price-sale" },
|
|
62
|
+
index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale, priceType: "sale" })),
|
|
56
63
|
index.h("span", { class: "price-outdated", part: "price-outdated" },
|
|
57
|
-
index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" }))
|
|
58
|
-
|
|
59
|
-
|
|
64
|
+
index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" })),
|
|
65
|
+
]) : (index.h("span", { class: "price-regular", part: "price-regular" },
|
|
66
|
+
index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" })))));
|
|
60
67
|
};
|
|
61
68
|
const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
|
|
62
69
|
index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }),
|
|
@@ -6,8 +6,8 @@ const index = require('./index-4474431a.js');
|
|
|
6
6
|
const search_store = require('./search.store-d2b420fd.js');
|
|
7
7
|
const index$1 = require('./index-105aee62.js');
|
|
8
8
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
9
|
-
const emitRequestFiltersMore = require('./emitRequestFiltersMore-
|
|
10
|
-
const _package = require('./package-
|
|
9
|
+
const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
|
|
10
|
+
const _package = require('./package-ddca40d7.js');
|
|
11
11
|
|
|
12
12
|
const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
13
|
index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
|
|
@@ -4174,7 +4174,7 @@ const VviinnResults = class {
|
|
|
4174
4174
|
render() {
|
|
4175
4175
|
return (index.h(index.Host, { id: "results-block", class: {
|
|
4176
4176
|
"show-in-widget": this.showInWidget,
|
|
4177
|
-
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, price-label" }, index.h("div", { class: {
|
|
4177
|
+
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, index.h("div", { class: {
|
|
4178
4178
|
"nothing-found": true,
|
|
4179
4179
|
hidden: this.recommendations.length > 0 ||
|
|
4180
4180
|
search_store.searchState.results.length > 0 ||
|
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-4474431a.js');
|
|
6
6
|
const search_store = require('./search.store-d2b420fd.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
8
|
-
const emitRequestFiltersMore = require('./emitRequestFiltersMore-
|
|
8
|
+
const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
|
|
9
9
|
const index$1 = require('./index-105aee62.js');
|
|
10
|
-
const _package = require('./package-
|
|
10
|
+
const _package = require('./package-ddca40d7.js');
|
|
11
11
|
|
|
12
12
|
const BasketIcon = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
13
|
index.h("g", { id: "shopping-bag" },
|
|
@@ -895,7 +895,7 @@ const getCommonAnalytics = () => search_store._function.pipe(search_store.Option
|
|
|
895
895
|
const analyticsMonoid = search_store.Option.getMonoid(search_store.Semigroup.first());
|
|
896
896
|
const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
|
|
897
897
|
|
|
898
|
-
const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--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:130px;--product-card-results-min-width:250px;--image-set-mode-min-size: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;--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(.grid-mode){--product-card-content-align-default:center;--product-card-text-align-default:center;--product-card-image-border-default:1px solid var(--color-border-02);--product-card-image-bg-color-default:unset}:host(.continuity-mode){--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:var(--surface-bg-color-01);--product-card-image-bg-color-default:var(--surface-bg-color-01)}:host(.set-mode){--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)}:host(.results-widget){--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:1px solid var(--color-border-02);--product-card-image-bg-color-default:unset}:host{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-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)}.price-container{display:flex;flex-direction:column}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.price-label{margin-right:5px}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center}.image.responsive{width:100%;height:auto;aspect-ratio:1}.brand{display:none}.title{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);color:var(--color-text-primary);-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title,.brand{text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n )}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{position:relative;margin-bottom:var(--spacing-50);width:100%}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.update-button{position:absolute;width:32px;height:32px;top:var(--spacing-100);right:var(--spacing-100);z-index:1;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));padding:var(--spacing-50);border:none;cursor:pointer}.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:\"\"}.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.update-button.hidden{display:none}.basket-button{box-sizing:border-box;border:none;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-500);cursor:pointer}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}.basket-button-grid{width:100%;background-color:unset;border:1px solid var(--color-border-02)}.basket-button-continuity{background-color:var(--button-bg-color-secondary);align-self:start}.basket-button-continuity:hover,:host(.set-mode) .basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-grid:hover{background-color:var(--button-bg-color-ghost-hover)}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) .update-button{display:none}.basket-button-wrapper{width:100%;display:flex;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.grid-mode) .image,:host(.continuity-mode) .image{border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}:host(.grid-mode) .image-link{width:100%}:host(.results-widget) .image{border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;min-width:var(--image-set-mode-min-size);min-height:var(--image-set-mode-min-size);border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n );aspect-ratio:1}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;max-width:var(--source-card-set-mode-max-width);flex-grow:1}:host(.set-mode.product-card--source) .image{width:100%;height:100%;aspect-ratio:1}:host(.set-mode) 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%}:host(.set-mode) .basket-button{background-color:var(--button-bg-color-secondary);border:none}:host(.set-mode:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .price-container{flex-direction:row;flex-wrap:wrap;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}:host(.set-mode) .basket-button.pressed{background:transparent;border:1px solid var(--color-border-02)}:host(.set-mode) .basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}:host(.set-mode) .basket-button--hidden{display:none}:host(.set-mode) .price-amount{margin-right:var(--spacing-150)}@media (max-width: 1080px){:host(.set-mode) .price-amount{margin-right:var(--spacing-100)}}@media (max-width: 768px){:host(.set-mode) 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 )}";
|
|
898
|
+
const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--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:130px;--product-card-results-min-width:250px;--image-set-mode-min-size: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;--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(.grid-mode){--product-card-content-align-default:center;--product-card-text-align-default:center;--product-card-image-border-default:1px solid var(--color-border-02);--product-card-image-bg-color-default:unset}:host(.continuity-mode){--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:var(--surface-bg-color-01);--product-card-image-bg-color-default:var(--surface-bg-color-01)}:host(.set-mode){--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)}:host(.results-widget){--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:1px solid var(--color-border-02);--product-card-image-bg-color-default:unset}:host{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-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)}.price-container{display:flex;flex-direction:column}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.price-label>span{margin-right:5px}.price-label>span:last-child{margin-right:0}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center}.image.responsive{width:100%;height:auto;aspect-ratio:1}.brand{display:none}.title{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);color:var(--color-text-primary);-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title,.brand{text-align:var(\n --product-card-text-align,\n var(--product-card-text-align-default)\n )}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{position:relative;margin-bottom:var(--spacing-50);width:100%}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.update-button{position:absolute;width:32px;height:32px;top:var(--spacing-100);right:var(--spacing-100);z-index:1;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));padding:var(--spacing-50);border:none;cursor:pointer}.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:\"\"}.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.update-button.hidden{display:none}.basket-button{box-sizing:border-box;border:none;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-500);cursor:pointer}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}.basket-button-grid{width:100%;background-color:unset;border:1px solid var(--color-border-02)}.basket-button-continuity{background-color:var(--button-bg-color-secondary);align-self:start}.basket-button-continuity:hover,:host(.set-mode) .basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-grid:hover{background-color:var(--button-bg-color-ghost-hover)}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) .update-button{display:none}.basket-button-wrapper{width:100%;display:flex;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.grid-mode) .image,:host(.continuity-mode) .image{border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}:host(.grid-mode) .image-link{width:100%}:host(.results-widget) .image{border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n )}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;min-width:var(--image-set-mode-min-size);min-height:var(--image-set-mode-min-size);border:var(\n --product-card-image-border,\n var(--product-card-image-border-default)\n );aspect-ratio:1}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;max-width:var(--source-card-set-mode-max-width);flex-grow:1}:host(.set-mode.product-card--source) .image{width:100%;height:100%;aspect-ratio:1}:host(.set-mode) 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%}:host(.set-mode) .basket-button{background-color:var(--button-bg-color-secondary);border:none}:host(.set-mode:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .price-container{flex-direction:row;flex-wrap:wrap;justify-content:var(\n --product-card-content-align,\n var(--product-card-content-align-default)\n )}:host(.set-mode) .basket-button.pressed{background:transparent;border:1px solid var(--color-border-02)}:host(.set-mode) .basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}:host(.set-mode) .basket-button--hidden{display:none}:host(.set-mode) .price-amount{margin-right:var(--spacing-150)}@media (max-width: 1080px){:host(.set-mode) .price-amount{margin-right:var(--spacing-100)}}@media (max-width: 768px){:host(.set-mode) 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 )}";
|
|
899
899
|
|
|
900
900
|
const VviinnProductCard = class {
|
|
901
901
|
constructor(hostRef) {
|
|
@@ -1068,7 +1068,7 @@ const VviinnProductCard = class {
|
|
|
1068
1068
|
"grid-mode": this.isGridMode,
|
|
1069
1069
|
"continuity-mode": this.isContinuityMode,
|
|
1070
1070
|
"results-widget": this.isResultsWidget,
|
|
1071
|
-
}, exportparts: "brand, price-label, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h(emitRequestFiltersMore.Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 40 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(emitRequestFiltersMore.Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), ((_a = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _a !== void 0 ? _a : []).map((energyCertification) => (index.h("vviinn-energy-label", { classLabelUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classLabelUrl, 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, productClickHandler: this.productClickHandler.bind(this) }))), index.h(emitRequestFiltersMore.Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, salePrice: this.salePrice, locale: this.locale, priceLabel: this.priceLabel }), this.isSetMode &&
|
|
1071
|
+
}, exportparts: "brand, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h(emitRequestFiltersMore.Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 40 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(emitRequestFiltersMore.Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), ((_a = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _a !== void 0 ? _a : []).map((energyCertification) => (index.h("vviinn-energy-label", { classLabelUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classLabelUrl, 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, productClickHandler: this.productClickHandler.bind(this) }))), index.h(emitRequestFiltersMore.Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, salePrice: this.salePrice, locale: this.locale, priceLabel: this.priceLabel }), this.isSetMode &&
|
|
1072
1072
|
!this.appliedDiscountPercentage &&
|
|
1073
1073
|
this.currentDiscountPercentage && (index.h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), (this.basketButtonShow || this.isSetMode) && (index.h(index.Fragment, null, this.isTransitioning && index.h("vviinn-skeleton", { height: 40 }), index.h("div", { class: "basket-button-wrapper" }, index.h("button", { class: {
|
|
1074
1074
|
"basket-button": true,
|
|
@@ -97,7 +97,7 @@ const RecommendationsSidebar = class {
|
|
|
97
97
|
});
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
|
-
return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group, price-label", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
100
|
+
return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
101
101
|
}
|
|
102
102
|
renderSourceImage() {
|
|
103
103
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4474431a.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-ddca40d7.js');
|
|
7
7
|
|
|
8
8
|
const SimilarProductsIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
9
9
|
index.h("path", { d: "M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z", fill: "#161616" }),
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4474431a.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-ddca40d7.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
8
8
|
const constants = require('./constants-7684cbfc.js');
|
|
9
9
|
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-4474431a.js');
|
|
6
6
|
const search_store = require('./search.store-d2b420fd.js');
|
|
7
7
|
const index$1 = require('./index-105aee62.js');
|
|
8
|
-
const _package = require('./package-
|
|
8
|
+
const _package = require('./package-ddca40d7.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
10
10
|
const constants = require('./constants-7684cbfc.js');
|
|
11
11
|
|
|
@@ -385,7 +385,7 @@ const VviinnVpsWidget = class {
|
|
|
385
385
|
}
|
|
386
386
|
render() {
|
|
387
387
|
var _a, _b;
|
|
388
|
-
return (index.h(index.Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label" }, !this.showingInButton && customizedSlots.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
388
|
+
return (index.h(index.Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, !this.showingInButton && customizedSlots.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
389
389
|
(!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
|
|
390
390
|
"start-page": true,
|
|
391
391
|
"camera-enabled": this.cameraEnabled,
|
|
@@ -2,6 +2,7 @@ import { pipe } from "fp-ts/lib/function";
|
|
|
2
2
|
import * as E from "fp-ts/lib/Either";
|
|
3
3
|
import { h } from "@stencil/core";
|
|
4
4
|
import { PlusIcon } from "../vviinn-icons";
|
|
5
|
+
import { Fragment } from "@stencil/core";
|
|
5
6
|
const FIT_EXPR = /fit\/\d+\//;
|
|
6
7
|
export const containsFit = (url) => {
|
|
7
8
|
return pipe(url.match(FIT_EXPR), E.fromNullable(url), E.map(() => url));
|
|
@@ -20,18 +21,20 @@ const FormattedPrice = (props) => {
|
|
|
20
21
|
const currencyElement = props.currency ? (h("span", { part: "currency" }, "\u00A0", props.currency)) : null;
|
|
21
22
|
return (h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` }, prefixElement, formattedPrice, currencyElement));
|
|
22
23
|
};
|
|
23
|
-
export const calculatePriceLabel = (
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
((
|
|
24
|
+
export const calculatePriceLabel = ({ custom_label_0, custom_label_1, custom_label_2, custom_label_3, custom_label_4, }) => {
|
|
25
|
+
const renderLabel = (label, index) => {
|
|
26
|
+
console.log(label, index);
|
|
27
|
+
if (!label)
|
|
28
|
+
return "";
|
|
29
|
+
const partClass = `price-label-${index}`;
|
|
30
|
+
return (h("span", { part: partClass, class: partClass }, label));
|
|
31
|
+
};
|
|
32
|
+
return (h(Fragment, null, renderLabel(custom_label_0, 0), renderLabel(custom_label_1, 1), renderLabel(custom_label_2, 2), renderLabel(custom_label_3, 3), renderLabel(custom_label_4, 4)));
|
|
30
33
|
};
|
|
31
34
|
export const Price = (props) => {
|
|
32
|
-
return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
|
|
35
|
+
return (h("span", { class: "price-container", part: "price-container" }, props.priceLabel && (h("span", { part: "price-label", class: "price-label" }, props.priceLabel)), props.salePrice ? ([
|
|
33
36
|
h("span", { class: "price-sale", part: "price-sale" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale, priceType: "sale" })),
|
|
34
|
-
h("span",
|
|
37
|
+
h("span", { class: "price-outdated", part: "price-outdated" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" })),
|
|
35
38
|
]) : (h("span", { class: "price-regular", part: "price-regular" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" })))));
|
|
36
39
|
};
|
|
37
40
|
export const Image = (props, onLoadEnd = () => undefined) => (h("picture", null, h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }), props.isSource && h(PlusIcon, null)));
|
|
@@ -277,10 +277,12 @@
|
|
|
277
277
|
color: var(--color-text-helper);
|
|
278
278
|
text-decoration: line-through;
|
|
279
279
|
}
|
|
280
|
-
|
|
281
|
-
.price-label {
|
|
280
|
+
.price-label > span {
|
|
282
281
|
margin-right: 5px;
|
|
283
282
|
}
|
|
283
|
+
.price-label > span:last-child {
|
|
284
|
+
margin-right: 0;
|
|
285
|
+
}
|
|
284
286
|
.product-type {
|
|
285
287
|
word-wrap: anywhere;
|
|
286
288
|
}
|
|
@@ -20,7 +20,6 @@ import { resources } from "../../locale/resources";
|
|
|
20
20
|
* @part price-amount-sale - numeric part of price.
|
|
21
21
|
* @part price-amount-outdated - numeric part of price.
|
|
22
22
|
* @part price-amount-regular - numeric part of price.
|
|
23
|
-
* @part price-label - string part of price.
|
|
24
23
|
* @part price-container - block contains all prices.
|
|
25
24
|
* @part price-outdated - renders inside price-container when "sale-price" property filled. Contains regular price.
|
|
26
25
|
* @part price-regular - renders inside price-container when "sale-price" property is empty.
|
|
@@ -36,6 +35,13 @@ import { resources } from "../../locale/resources";
|
|
|
36
35
|
* @part energy-label-product-type - Product type.
|
|
37
36
|
* @part energy-label-data-sheet-link - Data sheet link.
|
|
38
37
|
*
|
|
38
|
+
* @part price-label - string part of price.
|
|
39
|
+
* @part price-label-0 - string part of price with index 0.
|
|
40
|
+
* @part price-label-1 - string part of price with index 1.
|
|
41
|
+
* @part price-label-2 - string part of price with index 2.
|
|
42
|
+
* @part price-label-3 - string part of price with index 3.
|
|
43
|
+
* @part price-label-4 - string part of price with index 4.
|
|
44
|
+
*
|
|
39
45
|
* @slot vviinn-update-button-icon - Icon of Update Button (Set mode).
|
|
40
46
|
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
41
47
|
* @slot vviinn-basket-button-icon - Icon of Add to Basket button.
|
|
@@ -205,7 +211,7 @@ export class VviinnProductCard {
|
|
|
205
211
|
"grid-mode": this.isGridMode,
|
|
206
212
|
"continuity-mode": this.isContinuityMode,
|
|
207
213
|
"results-widget": this.isResultsWidget,
|
|
208
|
-
}, exportparts: "brand, price-label, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), 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)), h("span", { class: "brand", part: "brand" }, this.brand), ((_a = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _a !== void 0 ? _a : []).map((energyCertification) => (h("vviinn-energy-label", { classLabelUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classLabelUrl, 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, productClickHandler: this.productClickHandler.bind(this) }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, salePrice: this.salePrice, locale: this.locale, priceLabel: this.priceLabel }), this.isSetMode &&
|
|
214
|
+
}, exportparts: "brand, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), 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)), h("span", { class: "brand", part: "brand" }, this.brand), ((_a = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _a !== void 0 ? _a : []).map((energyCertification) => (h("vviinn-energy-label", { classLabelUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classLabelUrl, 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, productClickHandler: this.productClickHandler.bind(this) }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, salePrice: this.salePrice, locale: this.locale, priceLabel: this.priceLabel }), this.isSetMode &&
|
|
209
215
|
!this.appliedDiscountPercentage &&
|
|
210
216
|
this.currentDiscountPercentage && (h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), (this.basketButtonShow || this.isSetMode) && (h(Fragment, null, this.isTransitioning && h("vviinn-skeleton", { height: 40 }), h("div", { class: "basket-button-wrapper" }, h("button", { class: {
|
|
211
217
|
"basket-button": true,
|
|
@@ -39,9 +39,15 @@ import { slotChangeListener } from "../customized-slots";
|
|
|
39
39
|
* @part price-regular - Block for a price if no sale price is presented.
|
|
40
40
|
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
41
41
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
42
|
-
* @part price-label - string part of price.
|
|
43
42
|
* @part title - Title inside Product Card.
|
|
44
43
|
*
|
|
44
|
+
* @part price-label - string part of price.
|
|
45
|
+
* @part price-label-0 - string part of price with index 0.
|
|
46
|
+
* @part price-label-1 - string part of price with index 1.
|
|
47
|
+
* @part price-label-2 - string part of price with index 2.
|
|
48
|
+
* @part price-label-3 - string part of price with index 3.
|
|
49
|
+
* @part price-label-4 - string part of price with index 4.
|
|
50
|
+
*
|
|
45
51
|
* @slot vviinn-energy-label-data-sheet-text - Text of the data sheet link for the energy label.
|
|
46
52
|
*/
|
|
47
53
|
export class VviinnResults {
|
|
@@ -280,7 +286,7 @@ export class VviinnResults {
|
|
|
280
286
|
render() {
|
|
281
287
|
return (h(Host, { id: "results-block", class: {
|
|
282
288
|
"show-in-widget": this.showInWidget,
|
|
283
|
-
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, price-label" }, h("div", { class: {
|
|
289
|
+
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, h("div", { class: {
|
|
284
290
|
"nothing-found": true,
|
|
285
291
|
hidden: this.recommendations.length > 0 ||
|
|
286
292
|
searchState.results.length > 0 ||
|
|
@@ -86,7 +86,7 @@ export class RecommendationsSidebar {
|
|
|
86
86
|
});
|
|
87
87
|
}
|
|
88
88
|
render() {
|
|
89
|
-
return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group, price-label", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
89
|
+
return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
90
90
|
}
|
|
91
91
|
renderSourceImage() {
|
|
92
92
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -20,7 +20,6 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
|
|
|
20
20
|
* @part price-regular - Block for a price if no sale price is presented.
|
|
21
21
|
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
22
22
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
23
|
-
* @part price-label - string part of price.
|
|
24
23
|
* @part carousel-button - Button for carousel navigation.
|
|
25
24
|
* @part recommendations-grid - For internal usage only!
|
|
26
25
|
* @part recommendations-title - Title of the recommendations grid.
|
|
@@ -29,6 +28,13 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
|
|
|
29
28
|
* @part update-button-top - Update Button on the top (Set mode).
|
|
30
29
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
31
30
|
*
|
|
31
|
+
* @part price-label - string part of price.
|
|
32
|
+
* @part price-label-0 - string part of price with index 0.
|
|
33
|
+
* @part price-label-1 - string part of price with index 1.
|
|
34
|
+
* @part price-label-2 - string part of price with index 2.
|
|
35
|
+
* @part price-label-3 - string part of price with index 3.
|
|
36
|
+
* @part price-label-4 - string part of price with index 4.
|
|
37
|
+
*
|
|
32
38
|
* @slot vviinn-recommendations-title - Recommendations title text.
|
|
33
39
|
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
34
40
|
*
|
|
@@ -40,7 +40,6 @@ import { calculatePriceLabel } from "../vviinn-product-card/render-helpers";
|
|
|
40
40
|
* @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
|
|
41
41
|
* @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
|
|
42
42
|
* @part price-amount-sale - Numeric part of the price.
|
|
43
|
-
* @part price-label - Label for the price.
|
|
44
43
|
* @part price-amount-outdated - Numeric part of the price.
|
|
45
44
|
* @part price-amount-regular - Numeric part of the price.
|
|
46
45
|
* @part price-container - Block of prices.
|
|
@@ -58,6 +57,13 @@ import { calculatePriceLabel } from "../vviinn-product-card/render-helpers";
|
|
|
58
57
|
* @part discount-label - Discount label in Product Card (Set mode).
|
|
59
58
|
* @part discount-percentage - Discount percentage inside the Add to Basket button (Set mode).
|
|
60
59
|
*
|
|
60
|
+
* @part price-label - string part of price.
|
|
61
|
+
* @part price-label-0 - string part of price with index 0.
|
|
62
|
+
* @part price-label-1 - string part of price with index 1.
|
|
63
|
+
* @part price-label-2 - string part of price with index 2.
|
|
64
|
+
* @part price-label-3 - string part of price with index 3.
|
|
65
|
+
* @part price-label-4 - string part of price with index 4.
|
|
66
|
+
*
|
|
61
67
|
* @slot vviinn-recommendations-title - Recommendations title text.
|
|
62
68
|
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
63
69
|
*
|
|
@@ -33,7 +33,6 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
|
|
|
33
33
|
* @part price-amount-regular - Numeric part of the price.
|
|
34
34
|
* @part price-container - Block of prices.
|
|
35
35
|
* @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
|
|
36
|
-
* @part price-label - string part of price.
|
|
37
36
|
* @part price-regular - Block for a price if no sale price is presented.
|
|
38
37
|
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
39
38
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
@@ -41,6 +40,13 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
|
|
|
41
40
|
* @part text-search-input - Text search input.
|
|
42
41
|
* @part button - Clickable button element.
|
|
43
42
|
* @part vviinn-button - Button element container.
|
|
43
|
+
*
|
|
44
|
+
* @part price-label - string part of price.
|
|
45
|
+
* @part price-label-0 - string part of price with index 0.
|
|
46
|
+
* @part price-label-1 - string part of price with index 1.
|
|
47
|
+
* @part price-label-2 - string part of price with index 2.
|
|
48
|
+
* @part price-label-3 - string part of price with index 3.
|
|
49
|
+
* @part price-label-4 - string part of price with index 4.
|
|
44
50
|
*/
|
|
45
51
|
export class VviinnVpsButton {
|
|
46
52
|
constructor() {
|
|
@@ -56,7 +56,6 @@ const CAMERA_START_DELAY = 500;
|
|
|
56
56
|
* @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
|
|
57
57
|
* @part price-amount-sale - Numeric part of the price.
|
|
58
58
|
* @part price-amount-outdated - Numeric part of the price.
|
|
59
|
-
* @part price-label - string part of price.
|
|
60
59
|
* @part price-amount-regular - Numeric part of the price.
|
|
61
60
|
* @part price-container - Block of prices.
|
|
62
61
|
* @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
|
|
@@ -65,6 +64,13 @@ const CAMERA_START_DELAY = 500;
|
|
|
65
64
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
66
65
|
* @part title - Title inside Product Card.
|
|
67
66
|
* @part text-search-input - Text search input.
|
|
67
|
+
*
|
|
68
|
+
* @part price-label - string part of price.
|
|
69
|
+
* @part price-label-0 - string part of price with index 0.
|
|
70
|
+
* @part price-label-1 - string part of price with index 1.
|
|
71
|
+
* @part price-label-2 - string part of price with index 2.
|
|
72
|
+
* @part price-label-3 - string part of price with index 3.
|
|
73
|
+
* @part price-label-4 - string part of price with index 4.
|
|
68
74
|
*/
|
|
69
75
|
export class VviinnVpsWidget {
|
|
70
76
|
constructor() {
|
|
@@ -393,7 +399,7 @@ export class VviinnVpsWidget {
|
|
|
393
399
|
}
|
|
394
400
|
render() {
|
|
395
401
|
var _a, _b;
|
|
396
|
-
return (h(Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
402
|
+
return (h(Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
397
403
|
(!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
|
|
398
404
|
"start-page": true,
|
|
399
405
|
"camera-enabled": this.cameraEnabled,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as _function, E as Either } from './search.store-24896fcf.js';
|
|
2
|
-
import { h } from './index-abf408d8.js';
|
|
2
|
+
import { h, F as Fragment } from './index-abf408d8.js';
|
|
3
3
|
|
|
4
4
|
const PlusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "plus-icon" },
|
|
5
5
|
h("path", { d: "M14.6667 17.3333H8.00001C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H14.6667V8.00001C14.6667 7.62223 14.7944 7.30556 15.05 7.05001C15.3056 6.79445 15.6222 6.66667 16 6.66667C16.3778 6.66667 16.6944 6.79445 16.95 7.05001C17.2056 7.30556 17.3333 7.62223 17.3333 8.00001V14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H17.3333V24C17.3333 24.3778 17.2056 24.6944 16.95 24.95C16.6944 25.2056 16.3778 25.3333 16 25.3333C15.6222 25.3333 15.3056 25.2056 15.05 24.95C14.7944 24.6944 14.6667 24.3778 14.6667 24V17.3333Z", fill: "currentColor" })));
|
|
@@ -37,24 +37,31 @@ const FormattedPrice = (props) => {
|
|
|
37
37
|
formattedPrice,
|
|
38
38
|
currencyElement));
|
|
39
39
|
};
|
|
40
|
-
const calculatePriceLabel = (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
((
|
|
40
|
+
const calculatePriceLabel = ({ custom_label_0, custom_label_1, custom_label_2, custom_label_3, custom_label_4, }) => {
|
|
41
|
+
const renderLabel = (label, index) => {
|
|
42
|
+
console.log(label, index);
|
|
43
|
+
if (!label)
|
|
44
|
+
return "";
|
|
45
|
+
const partClass = `price-label-${index}`;
|
|
46
|
+
return (h("span", { part: partClass, class: partClass }, label));
|
|
47
|
+
};
|
|
48
|
+
return (h(Fragment, null,
|
|
49
|
+
renderLabel(custom_label_0, 0),
|
|
50
|
+
renderLabel(custom_label_1, 1),
|
|
51
|
+
renderLabel(custom_label_2, 2),
|
|
52
|
+
renderLabel(custom_label_3, 3),
|
|
53
|
+
renderLabel(custom_label_4, 4)));
|
|
47
54
|
};
|
|
48
55
|
const Price = (props) => {
|
|
49
|
-
return (h("span", { class: "price-container", part: "price-container" },
|
|
50
|
-
h("span", {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
return (h("span", { class: "price-container", part: "price-container" },
|
|
57
|
+
props.priceLabel && (h("span", { part: "price-label", class: "price-label" }, props.priceLabel)),
|
|
58
|
+
props.salePrice ? ([
|
|
59
|
+
h("span", { class: "price-sale", part: "price-sale" },
|
|
60
|
+
h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale, priceType: "sale" })),
|
|
54
61
|
h("span", { class: "price-outdated", part: "price-outdated" },
|
|
55
|
-
h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" }))
|
|
56
|
-
|
|
57
|
-
|
|
62
|
+
h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" })),
|
|
63
|
+
]) : (h("span", { class: "price-regular", part: "price-regular" },
|
|
64
|
+
h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" })))));
|
|
58
65
|
};
|
|
59
66
|
const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
|
|
60
67
|
h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }),
|
|
@@ -2,8 +2,8 @@ import { h, r as registerInstance, c as createEvent, H as Host, g as getElement
|
|
|
2
2
|
import { s as searchState, _ as _function, O as Option, k as fromAlt, l as foldValueObject, n as scaleWithSized, o as center, q as makeRectangularSearchRequest, r as detectedObjectEq, u as toFile, v as processSelectedFile, E as Either, w as match, i as createCommonjsModule, e as commonjsGlobal, x as sequenceToOption, y as fromImage, z as dimensionsFromImage, B as scaleByLargestSide, d as state, C as makeSearchIdRequest, D as getOrElse, F as makeTextSearchRequest, G as makeSearchQueryRequest, H as makeProductListingPageRequest, N as NonEmptyArray } from './search.store-24896fcf.js';
|
|
3
3
|
import { i as instance, r as resources, c as createTrackingApi, v as v4, n as createResultVpsEventByType, o as createProductVpsEventByType } from './index-279b5fe1.js';
|
|
4
4
|
import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-7fa3856f.js';
|
|
5
|
-
import { d as PlusIcon, c as calculatePriceLabel, s as subFilterSelection, e as emitRequestFiltersMore, a as showActiveOnSubButton, R as RenderButton } from './emitRequestFiltersMore-
|
|
6
|
-
import { v as version } from './package-
|
|
5
|
+
import { d as PlusIcon, c as calculatePriceLabel, s as subFilterSelection, e as emitRequestFiltersMore, a as showActiveOnSubButton, R as RenderButton } from './emitRequestFiltersMore-2bda46cb.js';
|
|
6
|
+
import { v as version } from './package-63e182dc.js';
|
|
7
7
|
|
|
8
8
|
const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
9
9
|
h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
|
|
@@ -4170,7 +4170,7 @@ const VviinnResults = class {
|
|
|
4170
4170
|
render() {
|
|
4171
4171
|
return (h(Host, { id: "results-block", class: {
|
|
4172
4172
|
"show-in-widget": this.showInWidget,
|
|
4173
|
-
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, price-label" }, h("div", { class: {
|
|
4173
|
+
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, h("div", { class: {
|
|
4174
4174
|
"nothing-found": true,
|
|
4175
4175
|
hidden: this.recommendations.length > 0 ||
|
|
4176
4176
|
searchState.results.length > 0 ||
|