vviinn-widgets 2.95.0 → 2.95.2

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-81a87480.js → package-ddca40d7.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.95.0";
+const version = "2.95.2";
 
 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-81a87480.js');
+const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
+const _package = require('./package-ddca40d7.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" }, index.h("div", { class: {
+      }, 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: {
         "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-81a87480.js');
+const _package = require('./package-ddca40d7.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" },
@@ -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, 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 })))));
   }
   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-81a87480.js');
+const _package = require('./package-ddca40d7.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-81a87480.js');
+const _package = require('./package-ddca40d7.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-81a87480.js');
+const _package = require('./package-ddca40d7.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" }, !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" }, !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-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

@@ -35,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.
@@ -204,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

@@ -41,6 +41,13 @@ import { slotChangeListener } from "../customized-slots";
  * @part price-prefix - Block rendered before each price element (for ex. "from").
  * @part title - Title inside Product Card.
  *
+ * @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.
  */
 export class VviinnResults {
@@ -279,7 +286,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" }, h("div", { class: {
+      }, 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: {
         "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, 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 })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

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

@@ -28,6 +28,13 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
  * @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.
@@ -58,6 +57,13 @@ import { calculatePriceLabel } from "../vviinn-product-card/render-helpers";
  * @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

@@ -40,6 +40,13 @@ 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.
  */
 export class VviinnVpsButton {
   constructor() {

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

@@ -64,6 +64,13 @@ 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.
  */
 export class VviinnVpsWidget {
   constructor() {
@@ -392,7 +399,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" }, !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" }, !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,

package/dist/esm/{emitRequestFiltersMore-35557c91.js → emitRequestFiltersMore-2bda46cb.js}

@@ -1,5 +1,5 @@
 import { _ as _function, E as Either } from './search.store-24896fcf.js';
-import { h } from './index-abf408d8.js';
+import { h, F as Fragment } from './index-abf408d8.js';
 
 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" },
   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) => {
     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) => {
+    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)));
 };
 const Price = (props) => {
-  return (h("span", { class: "price-container", part: "price-container" }, 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)),
+  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", { 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" })))));
+        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" })))));
 };
 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 }),

package/dist/esm/{package-b75ad0e0.js → package-63e182dc.js}

@@ -1,3 +1,3 @@
-const version = "2.95.0";
+const version = "2.95.2";
 
 export { version as v };

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

@@ -2,8 +2,8 @@ import { h, r as registerInstance, c as createEvent, H as Host, g as getElement
 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';
 import { i as instance, r as resources, c as createTrackingApi, v as v4, n as createResultVpsEventByType, o as createProductVpsEventByType } from './index-279b5fe1.js';
 import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-7fa3856f.js';
-import { d as PlusIcon, c as calculatePriceLabel, s as subFilterSelection, e as emitRequestFiltersMore, a as showActiveOnSubButton, R as RenderButton } from './emitRequestFiltersMore-35557c91.js';
-import { v as version } from './package-b75ad0e0.js';
+import { d as PlusIcon, c as calculatePriceLabel, s as subFilterSelection, e as emitRequestFiltersMore, a as showActiveOnSubButton, R as RenderButton } from './emitRequestFiltersMore-2bda46cb.js';
+import { v as version } from './package-63e182dc.js';
 
 const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   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 {
   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" }, h("div", { class: {
+      }, 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: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           searchState.results.length > 0 ||