vviinn-widgets 2.95.1 → 2.95.3

package/dist/cjs/{emitRequestFiltersMore-dd0b6262.js → emitRequestFiltersMore-233f4997.js}

@@ -39,24 +39,31 @@ const FormattedPrice = (props) => {
     formattedPrice,
     currencyElement));
 };
-const calculatePriceLabel = (recommendation) => {
-  var _a, _b, _c, _d, _e;
-  return ((_a = recommendation.custom_label_0) !== null && _a !== void 0 ? _a : "") +
-    ((_b = recommendation.custom_label_1) !== null && _b !== void 0 ? _b : "") +
-    ((_c = recommendation.custom_label_2) !== null && _c !== void 0 ? _c : "") +
-    ((_d = recommendation.custom_label_3) !== null && _d !== void 0 ? _d : "") +
-    ((_e = recommendation.custom_label_4) !== null && _e !== void 0 ? _e : "");
+const calculatePriceLabel = ({ custom_label_0, custom_label_1, custom_label_2, custom_label_3, custom_label_4, }) => {
+  const renderLabel = (label, index$1) => {
+    console.log(label, index$1);
+    if (!label)
+      return "";
+    const partClass = `price-label-${index$1}`;
+    return (index.h("span", { part: partClass, class: partClass }, label));
+  };
+  return (index.h(index.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)));
 };
 const Price = (props) => {
-  return (index.h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
-    index.h("span", { class: "price-sale", part: "price-sale" },
-      index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale, priceType: "sale" })),
-    index.h("span", null,
-      props.priceLabel && (index.h("span", { part: "price-label", class: "price-label" }, props.priceLabel)),
+  return (index.h("span", { class: "price-container", part: "price-container" },
+    props.priceLabel && (index.h("span", { part: "price-label", class: "price-label" }, props.priceLabel)),
+    props.salePrice ? ([
+      index.h("span", { class: "price-sale", part: "price-sale" },
+        index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale, priceType: "sale" })),
       index.h("span", { class: "price-outdated", part: "price-outdated" },
-        index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" }))),
-  ]) : (index.h("span", { class: "price-regular", part: "price-regular" },
-    index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" })))));
+        index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" })),
+    ]) : (index.h("span", { class: "price-regular", part: "price-regular" },
+      index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" })))));
 };
 const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
   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 }),

package/dist/cjs/{package-d8e571dc.js → package-f89ab7be.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.95.1";
+const version = "2.95.3";
 
 exports.version = version;

package/dist/cjs/search-filters_19.cjs.entry.js

@@ -6,8 +6,8 @@ const index = require('./index-4474431a.js');
 const search_store = require('./search.store-d2b420fd.js');
 const index$1 = require('./index-105aee62.js');
 const customizedSlots = require('./customized-slots-ee9418c1.js');
-const emitRequestFiltersMore = require('./emitRequestFiltersMore-dd0b6262.js');
-const _package = require('./package-d8e571dc.js');
+const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
+const _package = require('./package-f89ab7be.js');
 
 const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   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 {
   render() {
     return (index.h(index.Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, 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: {
+      }, exportparts: "title, product-card, 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, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           search_store.searchState.results.length > 0 ||

package/dist/cjs/vviinn-carousel_8.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-d2b420fd.js');
 const customizedSlots = require('./customized-slots-ee9418c1.js');
-const emitRequestFiltersMore = require('./emitRequestFiltersMore-dd0b6262.js');
+const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
 const index$1 = require('./index-105aee62.js');
-const _package = require('./package-d8e571dc.js');
+const _package = require('./package-f89ab7be.js');
 
 const BasketIcon = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("g", { id: "shopping-bag" },
@@ -443,7 +443,7 @@ const VviinnCarousel = class {
 };
 VviinnCarousel.style = vviinnCarouselCss;
 
-const vviinnEnergyLabelCss = ":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{display:flex;line-height:0px}:host(.hidden){display:none}.container{display:flex;flex-direction:row;max-width:100%;gap:var(--spacing-75)}.info-container{width:100%;height:100%;display:flex;justify-content:center;text-align:left;flex-direction:column;font-size:var(--font-size-caption);font-weight:var(--font-weight-400);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-style:normal}.class-label-link{cursor:pointer}.class-label-icon{display:inline-block;height:32px;width:auto;flex-shrink:0}.product-type,.data-sheet-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--color-text-primary)}.product-type{color:var(--color-text-helper)}.data-sheet-link{cursor:pointer;text-decoration:none;color:var(--color-text-primary)}";
+const vviinnEnergyLabelCss = ":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{display:contents;line-height:0px}:host(.hidden){display:none}.container{display:flex;flex-direction:row;max-width:100%;gap:var(--spacing-75)}.info-container{width:100%;height:100%;display:flex;justify-content:center;text-align:left;flex-direction:column;font-size:var(--font-size-caption);font-weight:var(--font-weight-400);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-style:normal}.class-label-link{cursor:pointer}.class-label-icon{display:inline-block;height:32px;width:auto;flex-shrink:0}.product-type,.data-sheet-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--color-text-primary)}.product-type{color:var(--color-text-helper)}.data-sheet-link{cursor:pointer;text-decoration:none;color:var(--color-text-primary)}";
 
 const VviinnEnergyLabel = class {
   constructor(hostRef) {
@@ -469,7 +469,7 @@ const VviinnEnergyLabel = class {
   render() {
     return (index.h(index.Host, { class: {
         hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
-      }, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (index.h("a", { class: "class-label-link", onClick: this.labelClickHandler }, index.h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), index.h("div", { class: "info-container" }, this.productType && (index.h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (index.h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, index.h("slot", { name: "vviinn-energy-label-data-sheet-text" }, index$1.instance.t("energyLabel.dataSheetText"))))))));
+      }, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (index.h("a", { class: "class-label-link", onClick: this.labelClickHandler }, index.h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), (this.productType || this.classDataSheetUrl) && (index.h("div", { class: "info-container" }, this.productType && (index.h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (index.h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, index.h("slot", { name: "vviinn-energy-label-data-sheet-text" }, index$1.instance.t("energyLabel.dataSheetText")))))))));
   }
   get el() { return index.getElement(this); }
 };
@@ -895,7 +895,7 @@ const getCommonAnalytics = () => search_store._function.pipe(search_store.Option
 const analyticsMonoid = search_store.Option.getMonoid(search_store.Semigroup.first());
 const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
 
-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  )}";
+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  )}";
 
 const VviinnProductCard = class {
   constructor(hostRef) {
@@ -1068,7 +1068,7 @@ const VviinnProductCard = class {
         "grid-mode": this.isGridMode,
         "continuity-mode": this.isContinuityMode,
         "results-widget": this.isResultsWidget,
-      }, 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 &&
+      }, 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 &&
       !this.appliedDiscountPercentage &&
       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: {
         "basket-button": true,

package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js

@@ -97,7 +97,7 @@ const RecommendationsSidebar = class {
     });
   }
   render() {
-    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 })))));
+    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, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", 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 })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

package/dist/cjs/vviinn-vpr-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
-const _package = require('./package-d8e571dc.js');
+const _package = require('./package-f89ab7be.js');
 
 const SimilarProductsIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
   index.h("path", { d: "M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z", fill: "#161616" }),

package/dist/cjs/vviinn-vps-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
-const _package = require('./package-d8e571dc.js');
+const _package = require('./package-f89ab7be.js');
 const customizedSlots = require('./customized-slots-ee9418c1.js');
 const constants = require('./constants-7684cbfc.js');
 

package/dist/cjs/vviinn-vps-widget.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-d2b420fd.js');
 const index$1 = require('./index-105aee62.js');
-const _package = require('./package-d8e571dc.js');
+const _package = require('./package-f89ab7be.js');
 const customizedSlots = require('./customized-slots-ee9418c1.js');
 const constants = require('./constants-7684cbfc.js');
 
@@ -385,7 +385,7 @@ const VviinnVpsWidget = class {
   }
   render() {
     var _a, _b;
-    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) ||
+    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, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !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) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,

package/dist/collection/components/vviinn-product-card/render-helpers.js

@@ -2,6 +2,7 @@ import { pipe } from "fp-ts/lib/function";
 import * as E from "fp-ts/lib/Either";
 import { h } from "@stencil/core";
 import { PlusIcon } from "../vviinn-icons";
+import { Fragment } from "@stencil/core";
 const FIT_EXPR = /fit\/\d+\//;
 export const containsFit = (url) => {
   return pipe(url.match(FIT_EXPR), E.fromNullable(url), E.map(() => url));
@@ -20,18 +21,20 @@ const FormattedPrice = (props) => {
   const currencyElement = props.currency ? (h("span", { part: "currency" }, "\u00A0", props.currency)) : null;
   return (h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` }, prefixElement, formattedPrice, currencyElement));
 };
-export const calculatePriceLabel = (recommendation) => {
-  var _a, _b, _c, _d, _e;
-  return ((_a = recommendation.custom_label_0) !== null && _a !== void 0 ? _a : "") +
-    ((_b = recommendation.custom_label_1) !== null && _b !== void 0 ? _b : "") +
-    ((_c = recommendation.custom_label_2) !== null && _c !== void 0 ? _c : "") +
-    ((_d = recommendation.custom_label_3) !== null && _d !== void 0 ? _d : "") +
-    ((_e = recommendation.custom_label_4) !== null && _e !== void 0 ? _e : "");
+export const calculatePriceLabel = ({ custom_label_0, custom_label_1, custom_label_2, custom_label_3, custom_label_4, }) => {
+  const renderLabel = (label, index) => {
+    console.log(label, index);
+    if (!label)
+      return "";
+    const partClass = `price-label-${index}`;
+    return (h("span", { part: partClass, class: partClass }, label));
+  };
+  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)));
 };
 export const Price = (props) => {
-  return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
+  return (h("span", { class: "price-container", part: "price-container" }, props.priceLabel && (h("span", { part: "price-label", class: "price-label" }, props.priceLabel)), props.salePrice ? ([
     h("span", { class: "price-sale", part: "price-sale" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale, priceType: "sale" })),
-    h("span", null, props.priceLabel && (h("span", { part: "price-label", class: "price-label" }, props.priceLabel)), h("span", { class: "price-outdated", part: "price-outdated" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" }))),
+    h("span", { class: "price-outdated", part: "price-outdated" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "outdated" })),
   ]) : (h("span", { class: "price-regular", part: "price-regular" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" })))));
 };
 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)));

package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.css

@@ -211,7 +211,7 @@
 
 
 :host {
-  display: flex;
+  display: contents;
   line-height: 0px;
 }
 

package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.js

@@ -32,7 +32,7 @@ export class VviinnEnergyLabel {
   render() {
     return (h(Host, { class: {
         hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
-      }, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("a", { class: "class-label-link", onClick: this.labelClickHandler }, h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), h("div", { class: "info-container" }, this.productType && (h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "vviinn-energy-label-data-sheet-text" }, i18next.t("energyLabel.dataSheetText"))))))));
+      }, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("a", { class: "class-label-link", onClick: this.labelClickHandler }, h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), (this.productType || this.classDataSheetUrl) && (h("div", { class: "info-container" }, this.productType && (h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "vviinn-energy-label-data-sheet-text" }, i18next.t("energyLabel.dataSheetText")))))))));
   }
   static get is() { return "vviinn-energy-label"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-product-card/vviinn-product-card.css

@@ -277,10 +277,12 @@
   color: var(--color-text-helper);
   text-decoration: line-through;
 }
-
-.price-label {
+.price-label > span {
   margin-right: 5px;
 }
+.price-label > span:last-child {
+  margin-right: 0;
+}
 .product-type {
   word-wrap: anywhere;
 }

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -20,7 +20,6 @@ import { resources } from "../../locale/resources";
  * @part price-amount-sale - numeric part of price.
  * @part price-amount-outdated - numeric part of price.
  * @part price-amount-regular - numeric part of price.
- * @part price-label - string part of price.
  * @part price-container - block contains all prices.
  * @part price-outdated - renders inside price-container when "sale-price" property filled. Contains regular price.
  * @part price-regular - renders inside price-container when "sale-price" property is empty.
@@ -36,6 +35,13 @@ import { resources } from "../../locale/resources";
  * @part energy-label-product-type - Product type.
  * @part energy-label-data-sheet-link - Data sheet link.
  *
+ * @part price-label - string part of price.
+ * @part price-label-0 - string part of price with index 0.
+ * @part price-label-1 - string part of price with index 1.
+ * @part price-label-2 - string part of price with index 2.
+ * @part price-label-3 - string part of price with index 3.
+ * @part price-label-4 - string part of price with index 4.
+ *
  * @slot vviinn-update-button-icon - Icon of Update Button (Set mode).
  * @slot vviinn-basket-button-text - Text of Add to Basket button.
  * @slot vviinn-basket-button-icon - Icon of Add to Basket button.
@@ -205,7 +211,7 @@ export class VviinnProductCard {
         "grid-mode": this.isGridMode,
         "continuity-mode": this.isContinuityMode,
         "results-widget": this.isResultsWidget,
-      }, 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 &&
+      }, 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 &&
       !this.appliedDiscountPercentage &&
       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: {
         "basket-button": true,

package/dist/collection/components/vviinn-results/vviinn-results.js

@@ -39,8 +39,18 @@ import { slotChangeListener } from "../customized-slots";
  * @part price-regular - Block for a price if no sale price is presented.
  * @part price-sale - Block for sale price. Rendered only if the sale price is presented.
  * @part price-prefix - Block rendered before each price element (for ex. "from").
- * @part price-label - string part of price.
  * @part title - Title inside Product Card.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
+ *
+ * @part price-label - string part of price.
+ * @part price-label-0 - string part of price with index 0.
+ * @part price-label-1 - string part of price with index 1.
+ * @part price-label-2 - string part of price with index 2.
+ * @part price-label-3 - string part of price with index 3.
+ * @part price-label-4 - string part of price with index 4.
  *
  * @slot vviinn-energy-label-data-sheet-text - Text of the data sheet link for the energy label.
  */
@@ -280,7 +290,7 @@ export class VviinnResults {
   render() {
     return (h(Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, 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: {
+      }, exportparts: "title, product-card, 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, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           searchState.results.length > 0 ||

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js

@@ -86,7 +86,7 @@ export class RecommendationsSidebar {
     });
   }
   render() {
-    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 })))));
+    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, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", 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 })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js

@@ -20,15 +20,25 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
  * @part price-regular - Block for a price if no sale price is presented.
  * @part price-sale - Block for sale price. Rendered only if the sale price is presented.
  * @part price-prefix - Block rendered before each price element (for ex. "from").
- * @part price-label - string part of price.
  * @part carousel-button - Button for carousel navigation.
  * @part recommendations-grid - For internal usage only!
  * @part recommendations-title - Title of the recommendations grid.
  * @part recommendations-subtitle - Subtitle of the recommendations grid.
  * @part basket-button - Add to Basket button.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
  * @part update-button-top - Update Button on the top (Set mode).
  * @part update-button-item - Update Button inside the Product Card (Set mode).
  *
+ * @part price-label - string part of price.
+ * @part price-label-0 - string part of price with index 0.
+ * @part price-label-1 - string part of price with index 1.
+ * @part price-label-2 - string part of price with index 2.
+ * @part price-label-3 - string part of price with index 3.
+ * @part price-label-4 - string part of price with index 4.
+ *
  * @slot vviinn-recommendations-title - Recommendations title text.
  * @slot vviinn-basket-button-text - Text of Add to Basket button.
  *

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.js

@@ -40,7 +40,6 @@ import { calculatePriceLabel } from "../vviinn-product-card/render-helpers";
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
  * @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
  * @part price-amount-sale - Numeric part of the price.
- * @part price-label - Label for the price.
  * @part price-amount-outdated - Numeric part of the price.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-container - Block of prices.
@@ -53,11 +52,22 @@ import { calculatePriceLabel } from "../vviinn-product-card/render-helpers";
  * @part recommendations-title - Title of the recommendations grid.
  * @part recommendations-subtitle - Subtitle of the recommendations grid.
  * @part basket-button - Add to Basket button.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
  * @part update-button-top - Update Button on the top (Set mode).
  * @part update-button-item - Update Button inside the Product Card (Set mode).
  * @part discount-label - Discount label in Product Card (Set mode).
  * @part discount-percentage - Discount percentage inside the Add to Basket button (Set mode).
  *
+ * @part price-label - string part of price.
+ * @part price-label-0 - string part of price with index 0.
+ * @part price-label-1 - string part of price with index 1.
+ * @part price-label-2 - string part of price with index 2.
+ * @part price-label-3 - string part of price with index 3.
+ * @part price-label-4 - string part of price with index 4.
+ *
  * @slot vviinn-recommendations-title - Recommendations title text.
  * @slot vviinn-basket-button-text - Text of Add to Basket button.
  *

package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js

@@ -33,7 +33,6 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
  * @part price-amount-regular - Numeric part of the price.
  * @part price-container - Block of prices.
  * @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
- * @part price-label - string part of price.
  * @part price-regular - Block for a price if no sale price is presented.
  * @part price-sale - Block for sale price. Rendered only if the sale price is presented.
  * @part price-prefix - Block rendered before each price element (for ex. "from").
@@ -41,6 +40,16 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
  * @part text-search-input - Text search input.
  * @part button - Clickable button element.
  * @part vviinn-button - Button element container.
+ * @part price-label - string part of price.
+ * @part price-label-0 - string part of price with index 0.
+ * @part price-label-1 - string part of price with index 1.
+ * @part price-label-2 - string part of price with index 2.
+ * @part price-label-3 - string part of price with index 3.
+ * @part price-label-4 - string part of price with index 4.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
  */
 export class VviinnVpsButton {
   constructor() {

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js

@@ -56,7 +56,6 @@ const CAMERA_START_DELAY = 500;
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.
- * @part price-label - string part of price.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-container - Block of prices.
  * @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
@@ -65,6 +64,16 @@ const CAMERA_START_DELAY = 500;
  * @part price-prefix - Block rendered before each price element (for ex. "from").
  * @part title - Title inside Product Card.
  * @part text-search-input - Text search input.
+ * @part price-label - string part of price.
+ * @part price-label-0 - string part of price with index 0.
+ * @part price-label-1 - string part of price with index 1.
+ * @part price-label-2 - string part of price with index 2.
+ * @part price-label-3 - string part of price with index 3.
+ * @part price-label-4 - string part of price with index 4.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
  */
 export class VviinnVpsWidget {
   constructor() {
@@ -393,7 +402,7 @@ export class VviinnVpsWidget {
   }
   render() {
     var _a, _b;
-    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) ||
+    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, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !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) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,