vviinn-widgets 2.136.0 → 2.136.1

package/dist/cjs/{index-f7204218.js → index-4aba5eb2.js}

@@ -44,14 +44,86 @@ const histogramPartsList = [
   "histogram-label",
 ];
 
+const productCardGeneralPartsList = [
+  "product-card",
+  "content-container",
+  "brand",
+  "product-type",
+  "currency",
+  "deeplink",
+  "image",
+  "image-container",
+  "image-link",
+  "image-picture",
+  "title",
+  "basket-button",
+  "basket-button-container",
+  "update-button-item",
+  "product-card-actions",
+  "product-card-top-actions",
+  "discount-label",
+  "discount-percentage",
+];
+const energyLabelPartsList = [
+  "energy-label-container",
+  "energy-label-icon",
+  "energy-label-product-type",
+  "energy-label-data-sheet-link",
+];
+const customLabelPartsList = [
+  "custom-label-0",
+  "custom-label-1",
+  "custom-label-2",
+  "custom-label-3",
+  "custom-label-4",
+];
+const pricePartsList = [
+  "price-container",
+  "price-regular",
+  "price-sale",
+  "price-outdated",
+  "price-amount-regular",
+  "price-amount-sale",
+  "price-amount-outdated",
+  "price-amount-base-regular",
+  "price-amount-base-sale",
+  "price-amount-base-outdated",
+  "price-prefix",
+];
+
 const makeExportPartsString = (...args) => args.flat().join(", ");
 const extendedFiltersParts = makeExportPartsString(extendedFiltersPartsList, histogramPartsList, generalFiltersPartsList);
 const filtersParts = makeExportPartsString(filtersPartsList, histogramPartsList, generalFiltersPartsList);
 makeExportPartsString(selectedFiltersPartsList, generalFiltersPartsList);
 const priceRangeParts = makeExportPartsString(histogramPartsList);
+const energyLabelParts = makeExportPartsString(energyLabelPartsList);
+const productCardParts = makeExportPartsString(productCardGeneralPartsList, pricePartsList, customLabelPartsList, energyLabelPartsList);
 const searchWidgetFilterParts = makeExportPartsString(extendedFiltersPartsList, filtersPartsList, histogramPartsList, generalFiltersPartsList);
+const searchWidgetButtonParts = makeExportPartsString([
+  "upload-photo_button",
+  "start-camera_button",
+]);
+const searchBarParts = makeExportPartsString([
+  "text-search-input",
+  "text-search-button",
+]);
+const carouselParts = makeExportPartsString([
+  "items-group",
+  "carousel-button",
+]);
+const modalParts = makeExportPartsString([
+  "results-title",
+  "close-button",
+  "secondary-action",
+]);
 
+exports.carouselParts = carouselParts;
+exports.energyLabelParts = energyLabelParts;
 exports.extendedFiltersParts = extendedFiltersParts;
 exports.filtersParts = filtersParts;
+exports.modalParts = modalParts;
 exports.priceRangeParts = priceRangeParts;
+exports.productCardParts = productCardParts;
+exports.searchBarParts = searchBarParts;
+exports.searchWidgetButtonParts = searchWidgetButtonParts;
 exports.searchWidgetFilterParts = searchWidgetFilterParts;

package/dist/cjs/{package-1ad58aed.js → package-c3453d61.js}

@@ -123,7 +123,7 @@ const slotChangeListener = (component, element) => {
   component.connectedCallback.call(component);
 };
 
-const version = "2.136.0";
+const version = "2.136.1";
 
 exports.SlotSkeleton = SlotSkeleton;
 exports.campaignTypeNames = campaignTypeNames;

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

@@ -6,8 +6,9 @@ const index = require('./index-711d38e6.js');
 const search_store = require('./search.store-2527c63a.js');
 const Rectangle = require('./Rectangle-99c25901.js');
 const index$1 = require('./index-c94b611a.js');
-const _package = require('./package-1ad58aed.js');
+const _package = require('./package-c3453d61.js');
 const index$2 = require('./index-4c9a5dbb.js');
+const index$3 = require('./index-4aba5eb2.js');
 const SearchModalUploadIcon = require('./SearchModalUploadIcon-23f00a14.js');
 
 const MinusIcon = () => (index.h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -3882,10 +3883,10 @@ const VviinnModal = class {
     }), search_store.Option.getOrElse(() => null));
   }
   render() {
-    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => {
+    return (index.h(index.Host, { exportparts: index$3.modalParts, class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => {
         this.resetState();
         this.resetTopScroll();
-      } }, index.h(SecondaryActionIcon, null))), index.h("div", { class: "title", part: "title" }, this.renderImage(), index.h("slot", { name: "vviinn-image-search-modal-title" }, index$1.instance.t("imageSearchModalTitle"))), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, 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: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), index.h("div", { class: "body" }, index.h("slot", null))));
+      } }, index.h(SecondaryActionIcon, null))), index.h("div", { class: "title", part: "results-title" }, this.renderImage(), index.h("slot", { name: "vviinn-image-search-modal-title" }, index$1.instance.t("imageSearchModalTitle"))), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, 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: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), index.h("div", { class: "body" }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
 };
@@ -4284,7 +4285,7 @@ const VviinnResults = class {
     var _a, _b;
     return (index.h(index.Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: "nothing-found" }, ((_a = this.getRecommendations()) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.showInWidget && (index.h("vviinn-empty-results", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() })), this.showAspectRatioError && this.showInWidget && (index.h("vviinn-wrong-aspect-ratio", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() }))), index.h("div", { class: {
+      }, exportparts: index$3.productCardParts }, index.h("div", { class: "nothing-found" }, ((_a = this.getRecommendations()) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.showInWidget && (index.h("vviinn-empty-results", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() })), this.showAspectRatioError && this.showInWidget && (index.h("vviinn-wrong-aspect-ratio", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() }))), index.h("div", { class: {
         hidden: this.showAspectRatioError ||
           (this.recommendations.length === 0 &&
             search_store.searchState.results.length === 0),
@@ -4471,7 +4472,7 @@ const VviinnTextSearch = class {
     }
   }
   render() {
-    return (index.h(index.Host, { exportparts: "text-search-input, text-search-button" }, index.h("input", { class: {
+    return (index.h(index.Host, { exportparts: index$3.searchBarParts }, index.h("input", { class: {
         "text-search-input": true,
         "text-search-input--with-icon": this.mode === "upload",
       }, part: "text-search-input", type: "text", placeholder: index$1.instance.t("textSearchPlaceholder"), value: this.searchQuery, onInput: (event) => this.handleInputChange(event), onKeyUp: (event) => this.handleKeyPress(event) }), index.h("button", { class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), disabled: search_store.searchState.loading }, this.isShowPreloader() ? (index.h("vviinn-preloader", null)) : (index.h("slot", { name: "vviinn-text-search-icon" }, index.h(TextSearchIcon, null)))), this.mode === "upload" ? (index.h("vviinn-image-selector", { token: this.token, apiPath: this.apiPath, showInTextSearch: true, uploadStartedHandler: this.showLoader.bind(this) }, index.h("span", { slot: "upload-button-text" }, index.h(SearchModalUploadIcon.SearchModalUploadIcon, null)))) : (index.h("slot", { name: "vviinn-text-search-actions" }))));

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
 const Rectangle = require('./Rectangle-99c25901.js');
+const index$1 = require('./index-4aba5eb2.js');
 
 const CrossIcon = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
@@ -116,7 +117,7 @@ const RecommendationsSidebar = class {
     });
   }
   render() {
-    return (index.h(index.Host, { class: this.getClassMap(), exportparts: "body" }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (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: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, image-picture, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-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, product-card-top-actions", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.useCarousel, 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, addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow })))));
+    return (index.h(index.Host, { class: this.getClassMap(), exportparts: "body" }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "recommendations-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: `${index$1.carouselParts}, ${index$1.productCardParts}`, token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.useCarousel, 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, addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
 const search_store = require('./search.store-2527c63a.js');
-const _package = require('./package-1ad58aed.js');
+const _package = require('./package-c3453d61.js');
 const index$1 = require('./index-4c9a5dbb.js');
 const index$2 = require('./index-c94b611a.js');
+const index$3 = require('./index-4aba5eb2.js');
 const triggerFilter = require('./triggerFilter-fcab6cac.js');
 const Rectangle = require('./Rectangle-99c25901.js');
-const index$3 = require('./index-f7204218.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" },
@@ -335,7 +335,7 @@ const VviinnCarousel = class {
     const salePrice = this.isSetMode
       ? setModeDiscount
       : recommendation.price.sale;
-    return (index.h("vviinn-product-card", { index: rank, part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: salePrice, basePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.actual, baseSalePrice: (_c = recommendation.basePrice) === null || _c === void 0 ? void 0 : _c.sale, responsive: this.isGridMode, campaignTypeId: this.campaignTypeId, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, "data-id": recommendation.productId, energyCertifications: recommendation.energyCertifications, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale, setMode: this.isSetMode, customLabels: index$1.getCustomLabels(recommendation), addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow }));
+    return (index.h("vviinn-product-card", { index: rank, productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: salePrice, basePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.actual, baseSalePrice: (_c = recommendation.basePrice) === null || _c === void 0 ? void 0 : _c.sale, responsive: this.isGridMode, campaignTypeId: this.campaignTypeId, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, "data-id": recommendation.productId, energyCertifications: recommendation.energyCertifications, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale, setMode: this.isSetMode, customLabels: index$1.getCustomLabels(recommendation), addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow }));
   }
   renderRecommendationGroup(elements) {
     return (index.h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
@@ -369,7 +369,7 @@ const VviinnCarousel = class {
   }
   render() {
     var _a, _b;
-    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (index.h("vviinn-product-card", { part: "product-part", class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: this.sourceProduct.image.thumbnail, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_a = this.sourceProduct.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = this.sourceProduct.basePrice) === null || _b === void 0 ? void 0 : _b.sale, addPriceContainer: this.addPriceContainer, imageRatio: 1, imageWidth: 300, isSourceProduct: true, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, favoriteShow: this.favoriteShow })), index.h("div", { class: this.getContentClassMap() }, !this.isSetMode && (index.h("button", { class: "prev", onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(ChevronIcon, null))), this.renderRecommendations(), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(ChevronIcon, null))))), this.showBullets() && (index.h("div", { class: "bullets" }, this.renderBullets()))));
+    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (index.h("vviinn-product-card", { class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: this.sourceProduct.image.thumbnail, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_a = this.sourceProduct.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = this.sourceProduct.basePrice) === null || _b === void 0 ? void 0 : _b.sale, addPriceContainer: this.addPriceContainer, imageRatio: 1, imageWidth: 300, isSourceProduct: true, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, favoriteShow: this.favoriteShow })), index.h("div", { class: this.getContentClassMap() }, !this.isSetMode && (index.h("button", { class: "prev", onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(ChevronIcon, null))), this.renderRecommendations(), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(ChevronIcon, null))))), this.showBullets() && (index.h("div", { class: "bullets" }, this.renderBullets()))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -394,7 +394,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("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$2.instance.t("energyLabel.dataSheetText")))))))));
+      }, exportparts: index$3.energyLabelParts }, index.h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (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$2.instance.t("energyLabel.dataSheetText")))))))));
   }
   get el() { return index.getElement(this); }
 };
@@ -1285,7 +1285,7 @@ const VviinnProductCard = class {
     var _a, _b, _c;
     return (index.h(index.Host, { part: "product-card", class: {
         animated: this.isTransitioning,
-      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, image-picture, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, 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, product-card-actions, product-card-top-actions" }, index.h("div", { class: "image-container", part: "image-container" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h("div", { class: "product-card-top-actions", part: "product-card-top-actions" }, index.h("button", { class: {
+      }, exportparts: index$3.productCardParts }, index.h("div", { class: "image-container", part: "image-container" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h("div", { class: "product-card-top-actions", part: "product-card-top-actions" }, index.h("button", { class: {
         hidden: !this.favoriteShow,
       }, part: "favorite-button", onClick: this.favoriteButtonClickHandler.bind(this) }, index.h("div", { key: "favorite-not-pressed", class: {
         hidden: this.favoriteButonPressed,
@@ -2350,7 +2350,7 @@ const VviinnVprWidget = class {
   }
   renderRecommendation(recommendation, index$2) {
     var _a, _b;
-    return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: recommendation.price.sale, basePrice: (_a = recommendation.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.sale, energyCertifications: recommendation.energyCertifications, addPriceContainer: this.addPriceContainer, responsive: this.isGridMode, addToBasketShow: this.addToBasketShow, campaignTypeId: this.campaignType, index: index$2, widgetElementId: this.id, widgetVersion: _package.version, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, customLabels: index$1.getCustomLabels(recommendation), favoriteShow: this.favoriteShow }));
+    return (index.h("vviinn-product-card", { productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: recommendation.price.sale, basePrice: (_a = recommendation.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.sale, energyCertifications: recommendation.energyCertifications, addPriceContainer: this.addPriceContainer, responsive: this.isGridMode, addToBasketShow: this.addToBasketShow, campaignTypeId: this.campaignType, index: index$2, widgetElementId: this.id, widgetVersion: _package.version, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, customLabels: index$1.getCustomLabels(recommendation), favoriteShow: this.favoriteShow }));
   }
   renderResults() {
     return (index.h("div", { class: `recommendations-results recommendations-${this.mode}`, part: "recommendations-results" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
-const _package = require('./package-1ad58aed.js');
+const _package = require('./package-c3453d61.js');
 const SearchModalUploadIcon = require('./SearchModalUploadIcon-23f00a14.js');
 const constants = require('./constants-7684cbfc.js');
 

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-711d38e6.js');
 const search_store = require('./search.store-2527c63a.js');
 const index$1 = require('./index-c94b611a.js');
-const _package = require('./package-1ad58aed.js');
+const _package = require('./package-c3453d61.js');
 const constants = require('./constants-7684cbfc.js');
-const index$2 = require('./index-f7204218.js');
+const index$2 = require('./index-4aba5eb2.js');
 require('./Rectangle-99c25901.js');
 
 const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
@@ -34,7 +34,7 @@ const checkDeviceType = () => {
   return "desktop";
 };
 
-const vviinnVpsWidgetCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-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;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:40px 62px}#start-page_block.error{align-content:center}#start-page_block vviinn-text-search{margin-top:var(--spacing-150)}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-150)}.buttons-group{display:flex;flex-direction:column;gap:var(--spacing-150);margin-top:24px}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;font-family:var(--font-family, var(--font-family-base));transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--button-bg-color-primary));border-color:var(--color-primary, var(--button-bg-color-primary));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--button-bg-color-primary-hover));border-color:var(\n    --color-primary-hover,\n    var(--button-bg-color-primary-hover)\n  )}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;font-family:var(--font-family, var(--font-family-base));grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px);scrollbar-width:thin;-ms-overflow-style:none}@supports (scrollbar-color: unset){.filters-wrapper{scrollbar-color:transparent transparent}.filters-wrapper:hover{scrollbar-color:initial}}vviinn-filters,vviinn-extended-filters.modal-extended-filters{display:none}vviinn-extended-filters.preview-extended-filters{display:block;position:absolute;width:100%}.extended-filters-button{display:none}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--button-bg-color-primary));color:white}.results-page:not(.active){display:none}.results-page vviinn-text-search{width:calc(100% + 24px)}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.results-page vviinn-text-search{width:auto}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}vviinn-filters,vviinn-extended-filters.modal-extended-filters{display:block;overflow:hidden}vviinn-extended-filters.preview-extended-filters{display:none}.extended-filters-button{display:block;position:absolute;right:var(--spacing-300);top:0}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}}@media (max-width: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const vviinnVpsWidgetCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-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;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(results-title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:40px 62px}#start-page_block.error{align-content:center}#start-page_block vviinn-text-search{margin-top:var(--spacing-150)}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-150)}.buttons-group{display:flex;flex-direction:column;gap:var(--spacing-150);margin-top:24px}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;font-family:var(--font-family, var(--font-family-base));transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--button-bg-color-primary));border-color:var(--color-primary, var(--button-bg-color-primary));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--button-bg-color-primary-hover));border-color:var(\n    --color-primary-hover,\n    var(--button-bg-color-primary-hover)\n  )}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;font-family:var(--font-family, var(--font-family-base));grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px);scrollbar-width:thin;-ms-overflow-style:none}@supports (scrollbar-color: unset){.filters-wrapper{scrollbar-color:transparent transparent}.filters-wrapper:hover{scrollbar-color:initial}}vviinn-filters,vviinn-extended-filters.modal-extended-filters{display:none}vviinn-extended-filters.preview-extended-filters{display:block;position:absolute;width:100%}.extended-filters-button{display:none}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--button-bg-color-primary));color:white}.results-page:not(.active){display:none}.results-page vviinn-text-search{width:calc(100% + 24px)}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.results-page vviinn-text-search{width:auto}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}vviinn-filters,vviinn-extended-filters.modal-extended-filters{display:block;overflow:hidden}vviinn-extended-filters.preview-extended-filters{display:none}.extended-filters-button{display:block;position:absolute;right:var(--spacing-300);top:0}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}}@media (max-width: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -396,11 +396,11 @@ const VviinnVpsWidget = class {
   }
   render() {
     var _a, _b;
-    return (index.h(index.Host, { exportparts: `image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, text-search-button, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link ${index$2.searchWidgetFilterParts}` }, !this.showingInButton && _package.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: ({ detail }) => {
+    return (index.h(index.Host, { exportparts: `${index$2.modalParts}, ${index$2.productCardParts}, ${index$2.searchBarParts}, ${index$2.searchWidgetFilterParts}, ${index$2.searchWidgetButtonParts}` }, !this.showingInButton && _package.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: ({ detail }) => {
         if (detail.campaignTypeId !== "VPR")
           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", { position: this.slidePosition }, index.h("vviinn-slide", { class: {
+        (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: index$2.modalParts }, index.h("vviinn-slider", { position: this.slidePosition }, index.h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,
       } }, index.h("vviinn-example-image", { onVviinnImageUploadFinished: this.handleVviinnImageUploadFinished, onVviinnImageUpload: () => {

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

@@ -281,7 +281,7 @@ export class VviinnCarousel {
     const salePrice = this.isSetMode
       ? setModeDiscount
       : recommendation.price.sale;
-    return (h("vviinn-product-card", { index: rank, part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: salePrice, basePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.actual, baseSalePrice: (_c = recommendation.basePrice) === null || _c === void 0 ? void 0 : _c.sale, responsive: this.isGridMode, campaignTypeId: this.campaignTypeId, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, "data-id": recommendation.productId, energyCertifications: recommendation.energyCertifications, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale, setMode: this.isSetMode, customLabels: getCustomLabels(recommendation), addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow }));
+    return (h("vviinn-product-card", { index: rank, productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: salePrice, basePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.actual, baseSalePrice: (_c = recommendation.basePrice) === null || _c === void 0 ? void 0 : _c.sale, responsive: this.isGridMode, campaignTypeId: this.campaignTypeId, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, "data-id": recommendation.productId, energyCertifications: recommendation.energyCertifications, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale, setMode: this.isSetMode, customLabels: getCustomLabels(recommendation), addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow }));
   }
   renderRecommendationGroup(elements) {
     return (h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
@@ -315,7 +315,7 @@ export class VviinnCarousel {
   }
   render() {
     var _a, _b;
-    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (h("vviinn-product-card", { part: "product-part", class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: this.sourceProduct.image.thumbnail, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_a = this.sourceProduct.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = this.sourceProduct.basePrice) === null || _b === void 0 ? void 0 : _b.sale, addPriceContainer: this.addPriceContainer, imageRatio: 1, imageWidth: 300, isSourceProduct: true, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, favoriteShow: this.favoriteShow })), h("div", { class: this.getContentClassMap() }, !this.isSetMode && (h("button", { class: "prev", onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, h(ChevronIcon, null))), this.renderRecommendations(), !this.isSetMode && (h("button", { class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, h(ChevronIcon, null))))), this.showBullets() && (h("div", { class: "bullets" }, this.renderBullets()))));
+    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (h("vviinn-product-card", { class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: this.sourceProduct.image.thumbnail, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_a = this.sourceProduct.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = this.sourceProduct.basePrice) === null || _b === void 0 ? void 0 : _b.sale, addPriceContainer: this.addPriceContainer, imageRatio: 1, imageWidth: 300, isSourceProduct: true, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, favoriteShow: this.favoriteShow })), h("div", { class: this.getContentClassMap() }, !this.isSetMode && (h("button", { class: "prev", onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, h(ChevronIcon, null))), this.renderRecommendations(), !this.isSetMode && (h("button", { class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, h(ChevronIcon, null))))), this.showBullets() && (h("div", { class: "bullets" }, this.renderBullets()))));
   }
   static get is() { return "vviinn-carousel"; }
   static get originalStyleUrls() {

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

@@ -7,6 +7,7 @@ import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { sequenceToOption } from "../../utils/option/option";
 import { SecondaryActionIcon } from "../vviinn-icons/";
+import { modalParts } from "../../cssParts";
 export class VviinnModal {
   constructor() {
     this.active = false;
@@ -49,10 +50,10 @@ export class VviinnModal {
     }), O.getOrElse(() => null));
   }
   render() {
-    return (h(Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { class: "head" }, !this.hideBackButton && (h("button", { part: "secondary-action", onClick: () => {
+    return (h(Host, { exportparts: modalParts, class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { class: "head" }, !this.hideBackButton && (h("button", { part: "secondary-action", onClick: () => {
         this.resetState();
         this.resetTopScroll();
-      } }, h(SecondaryActionIcon, null))), h("div", { class: "title", part: "title" }, this.renderImage(), h("slot", { name: "vviinn-image-search-modal-title" }, i18next.t("imageSearchModalTitle"))), h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), h("div", { class: "body" }, h("slot", null))));
+      } }, h(SecondaryActionIcon, null))), h("div", { class: "title", part: "results-title" }, this.renderImage(), h("slot", { name: "vviinn-image-search-modal-title" }, i18next.t("imageSearchModalTitle"))), h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), h("div", { class: "body" }, h("slot", null))));
   }
   static get is() { return "vviinn-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import i18next from "i18next";
 import { slotChangeListener } from "../../customized-slots";
+import { energyLabelParts } from "../../../cssParts";
 /**
  * @part energy-label-container - Energy label container.
  * @part energy-label-icon - Icon with an energy class.
@@ -22,7 +23,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("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")))))))));
+      }, exportparts: energyLabelParts }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (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.js

@@ -11,6 +11,7 @@ import { slotChangeListener } from "../customized-slots";
 import { BasketIcon, CheckCircleIcon, UpdateIcon, FavoriteIcon, FavoriteIconPressed, } from "../vviinn-icons";
 import { generateRandomNumber } from "../../utils/number";
 import { resources } from "../../locale";
+import { productCardParts } from "../../cssParts";
 /**
  * @part image-container - Product Card's image container.
  * @part content-container - Product Card's content container.
@@ -234,7 +235,7 @@ export class VviinnProductCard {
     var _a, _b, _c;
     return (h(Host, { part: "product-card", class: {
         animated: this.isTransitioning,
-      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, image-picture, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, 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, product-card-actions, product-card-top-actions" }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h("div", { class: "product-card-top-actions", part: "product-card-top-actions" }, h("button", { class: {
+      }, exportparts: productCardParts }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h("div", { class: "product-card-top-actions", part: "product-card-top-actions" }, h("button", { class: {
         hidden: !this.favoriteShow,
       }, part: "favorite-button", onClick: this.favoriteButtonClickHandler.bind(this) }, h("div", { key: "favorite-not-pressed", class: {
         hidden: this.favoriteButonPressed,

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

@@ -24,6 +24,7 @@ import i18next from "i18next";
 import { resources } from "../../locale";
 import { slotChangeListener } from "../customized-slots";
 import { getCustomLabels } from "../../recommendation";
+import { productCardParts } from "../../cssParts";
 /**
  * @part product-card - Product Card itself.
  * @part image-container - Product Card's image container.
@@ -384,7 +385,7 @@ export class VviinnResults {
     var _a, _b;
     return (h(Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "nothing-found" }, ((_a = this.getRecommendations()) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.showInWidget && (h("vviinn-empty-results", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() })), this.showAspectRatioError && this.showInWidget && (h("vviinn-wrong-aspect-ratio", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() }))), h("div", { class: {
+      }, exportparts: productCardParts }, h("div", { class: "nothing-found" }, ((_a = this.getRecommendations()) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.showInWidget && (h("vviinn-empty-results", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() })), this.showAspectRatioError && this.showInWidget && (h("vviinn-wrong-aspect-ratio", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() }))), h("div", { class: {
         hidden: this.showAspectRatioError ||
           (this.recommendations.length === 0 &&
             searchState.results.length === 0),

package/dist/collection/components/vviinn-text-search/vviinn-text-search.js

@@ -6,6 +6,7 @@ import i18next from "i18next";
 import { resources } from "../../locale";
 import * as E from "fp-ts/Either";
 import { pipe } from "fp-ts/lib/function";
+import { searchBarParts } from "../../cssParts";
 /**
  * @part text-search-input - Text search input.
  * @part text-search-button - Text search input's search button.
@@ -89,7 +90,7 @@ export class VviinnTextSearch {
     }
   }
   render() {
-    return (h(Host, { exportparts: "text-search-input, text-search-button" }, h("input", { class: {
+    return (h(Host, { exportparts: searchBarParts }, h("input", { class: {
         "text-search-input": true,
         "text-search-input--with-icon": this.mode === "upload",
       }, part: "text-search-input", type: "text", placeholder: i18next.t("textSearchPlaceholder"), value: this.searchQuery, onInput: (event) => this.handleInputChange(event), onKeyUp: (event) => this.handleKeyPress(event) }), h("button", { class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), disabled: searchState.loading }, this.isShowPreloader() ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null)))), this.mode === "upload" ? (h("vviinn-image-selector", { token: this.token, apiPath: this.apiPath, showInTextSearch: true, uploadStartedHandler: this.showLoader.bind(this) }, h("span", { slot: "upload-button-text" }, h(SearchModalUploadIcon, null)))) : (h("slot", { name: "vviinn-text-search-actions" }))));

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { CrossIcon } from "../../vviinn-icons";
 import { isClickedInRectBound } from "../../../geometry/Rectangle";
+import { carouselParts, productCardParts } from "../../../cssParts";
 export class RecommendationsSidebar {
   constructor() {
     this.isSourceImageValid = () => { var _a; return !!((_a = this.sourceProduct) === null || _a === void 0 ? void 0 : _a.image); };
@@ -89,7 +90,7 @@ export class RecommendationsSidebar {
     });
   }
   render() {
-    return (h(Host, { class: this.getClassMap(), exportparts: "body" }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (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: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, image-picture, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-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, product-card-top-actions", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.useCarousel, 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, addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow })))));
+    return (h(Host, { class: this.getClassMap(), exportparts: "body" }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "recommendations-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: `${carouselParts}, ${productCardParts}`, token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.useCarousel, 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, addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

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

@@ -5,7 +5,6 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
  * @part button - Clickable button element.
  * @part vviinn-button - Button element container.
  * @part product-card - Product Card itself.
- * @part product-part - Will be deprecated. Use "product-card" instead.
  * @part title - Title inside Product Card.
  * @part brand - Brand inside Product Card.
  * @part product-type - Product Type inside Product Card.

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

@@ -366,7 +366,7 @@ export class VviinnVprWidget {
   }
   renderRecommendation(recommendation, index) {
     var _a, _b;
-    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: recommendation.price.sale, basePrice: (_a = recommendation.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.sale, energyCertifications: recommendation.energyCertifications, addPriceContainer: this.addPriceContainer, responsive: this.isGridMode, addToBasketShow: this.addToBasketShow, campaignTypeId: this.campaignType, index: index, widgetElementId: this.id, widgetVersion: version, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, customLabels: getCustomLabels(recommendation), favoriteShow: this.favoriteShow }));
+    return (h("vviinn-product-card", { productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: recommendation.price.actual, salePrice: recommendation.price.sale, basePrice: (_a = recommendation.basePrice) === null || _a === void 0 ? void 0 : _a.actual, baseSalePrice: (_b = recommendation.basePrice) === null || _b === void 0 ? void 0 : _b.sale, energyCertifications: recommendation.energyCertifications, addPriceContainer: this.addPriceContainer, responsive: this.isGridMode, addToBasketShow: this.addToBasketShow, campaignTypeId: this.campaignType, index: index, widgetElementId: this.id, widgetVersion: version, currency: this.currencySign, pricePrefix: this.pricePrefix, setMode: this.isSetMode, locale: this.locale, customLabels: getCustomLabels(recommendation), favoriteShow: this.favoriteShow }));
   }
   renderResults() {
     return (h("div", { class: `recommendations-results recommendations-${this.mode}`, part: "recommendations-results" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));

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

@@ -18,9 +18,8 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
  *
  * @part close-button - Close Button in the modal's header.
  * @part secondary-action - Back Button in the modal's header.
- * @part title - Modal window title.
+ * @part results-title - Title on the results page.
  * @part upload-photo_button - Upload Photo Button.
- * @part show-files_button - Show Files Button.
  * @part start-camera_button - Start Camera Button.
  * @part product-card - Product Card itself.
  * @part brand - Brand inside Product Card.

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

@@ -236,7 +236,7 @@
   height: 1px;
 }
 
-vviinn-overlayed-modal.first-screen::part(title),
+vviinn-overlayed-modal.first-screen::part(results-title),
 vviinn-overlayed-modal.first-screen::part(secondary-action) {
   visibility: hidden;
 }

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

@@ -28,7 +28,7 @@ import { CameraActionIcon, UploadActionIcon } from "../vviinn-icons";
 import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
 import { videoStreamSettings } from "../../video/settings";
 import { checkDeviceType } from "../../helpers";
-import { extendedFiltersParts, filtersParts, searchWidgetFilterParts, } from "../../cssParts";
+import { extendedFiltersParts, filtersParts, modalParts, productCardParts, searchBarParts, searchWidgetButtonParts, searchWidgetFilterParts, } from "../../cssParts";
 const CAMERA_START_DELAY = 500;
 /**
  * @slot vviinn-teaser-text - Text on the widget's main screen.
@@ -45,9 +45,8 @@ const CAMERA_START_DELAY = 500;
  *
  * @part close-button - Close Button in the modal's header.
  * @part secondary-action - Back Button in the modal's header.
- * @part title - Modal window title.
+ * @part results-title - Title on the results page.
  * @part upload-photo_button - Upload Photo Button.
- * @part show-files_button - Show Files Button.
  * @part start-camera_button - Start Camera Button.
  * @part product-card - Product Card itself.
  * @part image-container - Product Card's image container.
@@ -419,11 +418,11 @@ export class VviinnVpsWidget {
   }
   render() {
     var _a, _b;
-    return (h(Host, { exportparts: `image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, text-search-button, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link ${searchWidgetFilterParts}` }, !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: ({ detail }) => {
+    return (h(Host, { exportparts: `${modalParts}, ${productCardParts}, ${searchBarParts}, ${searchWidgetFilterParts}, ${searchWidgetButtonParts}` }, !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: ({ detail }) => {
         if (detail.campaignTypeId !== "VPR")
           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", { position: this.slidePosition }, h("vviinn-slide", { class: {
+        (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: modalParts }, h("vviinn-slider", { position: this.slidePosition }, h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,
       } }, h("vviinn-example-image", { onVviinnImageUploadFinished: this.handleVviinnImageUploadFinished, onVviinnImageUpload: () => {