vviinn-widgets 2.55.7 → 2.57.0

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"sourceProduct":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32],"updatedCardsAmount":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[1040],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"replaceSlotsContent":[16],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"locale":[1],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32],"setModeDiscount":[32],"setModeAppliedDiscounts":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"appliedDiscountPercentage":[2,"applied-discount-percentage"],"currentDiscountPercentage":[2,"current-discount-percentage"],"isSourceProduct":[4,"is-source-product"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_17.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"setShowAspectRatioError":[16],"showAspectRatioError":[4,"show-aspect-ratio-error"],"cropper":[32],"hidePreloader":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"loading":[4],"accept":[1],"resetVpsButton":[16],"capture":[1]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-text-search",{"searchQuery":[1,"search-query"],"setSearchQuery":[16],"handleTextSearch":[16]}],[1,"vviinn-wrong-aspect-ratio",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"textSearchFiltersGroup":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"cameraButtonClicked":[4,"camera-button-clicked"],"selected":[32],"videoInitialized":[32],"zoomCapabilities":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraInitializing":[32],"cameraEnabled":[32],"cameraButtonClicked":[32],"uploadSource":[32],"showAspectRatioError":[32],"products":[32],"searchQuery":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"vviinnTextSearchFilterSelected","trackTextSearchFilterSelected"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
+  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_5.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"showFilters":[4,"show-filters"],"setModeDiscounts":[1,"set-mode-discounts"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"dynamicFilters":[32],"sourceProduct":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32],"updatedCardsAmount":[32],"setModeDiscountsArray":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"],[0,"vviinnFiltersChanged","filtersChanged"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[1040],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"replaceSlotsContent":[16],"setModeDiscountsArray":[16],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"locale":[1],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32],"setModeDiscount":[32],"currentDiscountIndex":[32],"setModeAppliedDiscounts":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[1,"vviinn-filters",{"filters":[16],"widgetElementId":[1,"widget-element-id"],"selectedFilter":[32],"requestFilters":[32],"requestFiltersMore":[32],"showMore":[32],"selectedMoreOptions":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"basketButtonShow":[4,"basket-button-show"],"updateButtonLocation":[1,"update-button-location"],"appliedDiscountPercentage":[2,"applied-discount-percentage"],"currentDiscountPercentage":[2,"current-discount-percentage"],"isSourceProduct":[4,"is-source-product"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"isTransitioning":[32],"basketButonPressed":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_17.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"setShowAspectRatioError":[16],"showAspectRatioError":[4,"show-aspect-ratio-error"],"cropper":[32],"hidePreloader":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"loading":[4],"accept":[1],"resetVpsButton":[16],"capture":[1]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-text-search",{"searchQuery":[1,"search-query"],"setSearchQuery":[16],"handleTextSearch":[16]}],[1,"vviinn-wrong-aspect-ratio",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"textSearchFiltersGroup":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"cameraButtonClicked":[4,"camera-button-clicked"],"selected":[32],"videoInitialized":[32],"zoomCapabilities":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraInitializing":[32],"cameraEnabled":[32],"cameraButtonClicked":[32],"uploadSource":[32],"showAspectRatioError":[32],"products":[32],"searchQuery":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"vviinnTextSearchFilterSelected","trackTextSearchFilterSelected"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"showFilters":[4,"show-filters"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"showFilters":[4,"show-filters"],"apiPath":[1,"api-path"]}]]]], options);
   });
 };
 

package/dist/cjs/{package-5a367e60.js → package-741eaeb0.js}

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

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

@@ -230,7 +230,7 @@ const SearchFilters = class {
 };
 SearchFilters.style = searchFiltersCss;
 
-const vviinnDetectedObjectCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}:host::before,:host::after{content:\"\";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}";
+const vviinnDetectedObjectCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--spacer:8px;--surface-color-surface-01:#f4f4f4;--text-color-text-primary:#161616;--font-family:Inter, system-ui, sans-serif;--font-size-body:14px;--font-weight-regular:400;--line-height-body:20px;--letter-spacing-default:0px;--background-color-background:#fff;--border-color-border-01:#f4f4f4;--gray-100:#161616;--gray-10:#f4f4f4;--gray-70:#525252;--radius-radius-md:8px;--button-color-button-primary:#000;--text-color-text-inverse:#fff;--text-color-text-secondary:#525252;--button-color-button-disabled:#e0e0e0;--text-color-text-disabled:rgba(22, 22, 22, 0.25)}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}:host::before,:host::after{content:\"\";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}";
 
 const VviinnDetectedObject = class {
   constructor(hostRef) {
@@ -3999,7 +3999,7 @@ const getStyleMap = (data) => {
 const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (index.h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
   index.h(ArrowIcon, null)));
 
-const vviinnSliderCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}";
+const vviinnSliderCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--spacer:8px;--surface-color-surface-01:#f4f4f4;--text-color-text-primary:#161616;--font-family:Inter, system-ui, sans-serif;--font-size-body:14px;--font-weight-regular:400;--line-height-body:20px;--letter-spacing-default:0px;--background-color-background:#fff;--border-color-border-01:#f4f4f4;--gray-100:#161616;--gray-10:#f4f4f4;--gray-70:#525252;--radius-radius-md:8px;--button-color-button-primary:#000;--text-color-text-inverse:#fff;--text-color-text-secondary:#525252;--button-color-button-disabled:#e0e0e0;--text-color-text-disabled:rgba(22, 22, 22, 0.25)}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}";
 
 const VviinnSlider = class {
   constructor(hostRef) {

package/dist/cjs/{vviinn-carousel_4.cjs.entry.js → vviinn-carousel_5.cjs.entry.js}

@@ -7,7 +7,7 @@ const search_store = require('./search.store-d6fff13b.js');
 const customizedSlots = require('./customized-slots-8e27cac8.js');
 const i18next = require('./i18next-74ff3413.js');
 const PlusIcon = require('./PlusIcon-835a5dcc.js');
-const _package = require('./package-5a367e60.js');
+const _package = require('./package-741eaeb0.js');
 const resources = require('./resources-1a173128.js');
 
 const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -23,14 +23,21 @@ const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg",
   index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.5998 4.57C20.3898 4.19 19.8798 3.68 19.4198 0.37C19.3798 0.15 19.2198 0 19.0098 0C18.7998 0 18.6298 0.15 18.5898 0.37C18.1198 3.66 17.6298 4.13 14.4098 4.57C14.1698 4.61 14.0098 4.77 14.0098 5C14.0098 5.23 14.1698 5.39 14.4098 5.42C17.6298 5.81 18.1398 6.31 18.5898 9.62C18.6298 9.84 18.7998 10 19.0098 10C19.2198 10 19.3898 9.84 19.4198 9.62C19.8898 6.31 20.3898 5.81 23.5998 5.42C23.8398 5.38 23.9998 5.22 23.9998 5C23.9998 4.78 23.8298 4.6 23.5998 4.57Z", fill: "currentColor" }),
   index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
 
+const FiltersIcon = () => (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: "M3.66522 19.275C3.40867 19.275 3.19362 19.1862 3.02007 19.0086C2.84653 18.8311 2.75977 18.6142 2.75977 18.358C2.75977 18.1017 2.84653 17.8863 3.02007 17.7118C3.19362 17.5372 3.40867 17.45 3.66522 17.45H8.34022C8.59322 17.45 8.80972 17.5378 8.98974 17.7135C9.16976 17.8892 9.25977 18.107 9.25977 18.3667C9.25977 18.6229 9.16976 18.8384 8.98974 19.013C8.80972 19.1877 8.59322 19.275 8.34022 19.275H3.66522ZM3.66522 6.54995C3.40867 6.54995 3.19362 6.46209 3.02007 6.28638C2.84653 6.11066 2.75977 5.89293 2.75977 5.63318C2.75977 5.37696 2.84653 5.16154 3.02007 4.9869C3.19362 4.81225 3.40867 4.72493 3.66522 4.72493H12.4902C12.7432 4.72493 12.9597 4.81371 13.1397 4.99128C13.3198 5.16884 13.4098 5.38573 13.4098 5.64195C13.4098 5.89817 13.3198 6.11356 13.1397 6.28813C12.9597 6.46268 12.7432 6.54995 12.4902 6.54995H3.66522ZM11.5084 21.325C11.2549 21.325 11.0386 21.2366 10.8592 21.0599C10.6799 20.8832 10.5902 20.665 10.5902 20.4054V16.2804C10.5902 16.0239 10.6804 15.8088 10.8606 15.6353C11.0409 15.4617 11.2578 15.375 11.5112 15.375C11.7646 15.375 11.9786 15.4617 12.1533 15.6353C12.3279 15.8088 12.4152 16.0239 12.4152 16.2804V17.45H20.3348C20.5913 17.45 20.8064 17.5378 20.9799 17.7135C21.1535 17.8892 21.2402 18.107 21.2402 18.3667C21.2402 18.6229 21.1535 18.8384 20.9799 19.013C20.8064 19.1877 20.5913 19.275 20.3348 19.275H12.4152V20.4054C12.4152 20.665 12.3283 20.8832 12.1545 21.0599C11.9807 21.2366 11.7653 21.325 11.5084 21.325ZM8.33879 14.9554C8.08539 14.9554 7.87137 14.8686 7.69672 14.6951C7.52208 14.5215 7.43477 14.3065 7.43477 14.05V12.9054H3.66522C3.40867 12.9054 3.19362 12.8185 3.02007 12.6447C2.84653 12.4709 2.75977 12.2555 2.75977 11.9986C2.75977 11.7416 2.84653 11.5267 3.02007 11.3538C3.19362 11.1809 3.40867 11.0945 3.66522 11.0945H7.43477V9.89995C7.43477 9.6434 7.52167 9.42836 7.69549 9.25483C7.86929 9.08128 8.08467 8.9945 8.34162 8.9945C8.59503 8.9945 8.81141 9.08128 8.99074 9.25483C9.17009 9.42836 9.25977 9.6434 9.25977 9.89995V14.05C9.25977 14.3065 9.16962 14.5215 8.98934 14.6951C8.80906 14.8686 8.59221 14.9554 8.33879 14.9554ZM11.5098 12.9054C11.2568 12.9054 11.0403 12.8185 10.8602 12.6447C10.6802 12.4709 10.5902 12.2555 10.5902 11.9986C10.5902 11.7416 10.6802 11.5267 10.8602 11.3538C11.0403 11.1809 11.2568 11.0945 11.5098 11.0945H20.3348C20.5913 11.0945 20.8064 11.1814 20.9799 11.3552C21.1535 11.529 21.2402 11.7444 21.2402 12.0014C21.2402 12.2583 21.1535 12.4732 20.9799 12.6461C20.8064 12.819 20.5913 12.9054 20.3348 12.9054H11.5098ZM15.6584 8.62495C15.405 8.62495 15.1886 8.53818 15.0092 8.36463C14.8299 8.19109 14.7402 7.97605 14.7402 7.7195V3.5945C14.7402 3.3349 14.8304 3.11674 15.0106 2.94003C15.1909 2.76329 15.4078 2.67493 15.6612 2.67493C15.9146 2.67493 16.1286 2.76329 16.3033 2.94003C16.4779 3.11674 16.5652 3.3349 16.5652 3.5945V4.72493H20.3348C20.5913 4.72493 20.8064 4.81371 20.9799 4.99128C21.1535 5.16884 21.2402 5.38573 21.2402 5.64195C21.2402 5.89817 21.1535 6.11356 20.9799 6.28813C20.8064 6.46268 20.5913 6.54995 20.3348 6.54995H16.5652V7.7195C16.5652 7.97605 16.4783 8.19109 16.3045 8.36463C16.1307 8.53818 15.9153 8.62495 15.6584 8.62495Z", fill: "#525252" })));
+
+const NewCloseIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" },
+  index.h("g", { "clip-path": "url(#clip0_1696_811)" },
+    index.h("path", { d: "M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4L14.6 16L8 22.6L9.4 24L16 17.4L22.6 24L24 22.6L17.4 16L24 9.4Z", fill: "#C6C6C6" })),
+  index.h("defs", null,
+    index.h("clipPath", { id: "clip0_1696_811" },
+      index.h("rect", { width: "32", height: "32", fill: "white" })))));
+
 const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
 const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 const SET_MODE_IMAGE_WIDTH = "--vviinn-set-mode-image-width";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
-const SET_MODE_INITIAL_DISCOUNT = 5;
-const SET_MODE_MAX_DISCOUNT = 15;
-const SET_MODE_DISCOUNT_STEP = 5;
 
 const numberUnderDivisionSemigroup = {
   concat: (x, y) => x / y,
@@ -129,6 +136,7 @@ const VviinnCarousel = class {
     this.columns = 0;
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.defaultAnimationInterval = 2000;
+    this.setModeMaxDiscount = null;
     this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
     this.handleWindowResize = () => this.setImageWidthSetMode("100%");
     this.isLastGroup = () => this.isGridMode &&
@@ -164,7 +172,8 @@ const VviinnCarousel = class {
     this.activeContentGroup = 0;
     this.isRTL = false;
     this.crossSellingRecommendations = [];
-    this.setModeDiscount = SET_MODE_INITIAL_DISCOUNT;
+    this.setModeDiscount = null;
+    this.currentDiscountIndex = 0;
     this.setModeAppliedDiscounts = {};
     this.mode = "continuity";
     this.imageWidth = 140;
@@ -178,6 +187,7 @@ const VviinnCarousel = class {
     this.updatingAllCards = undefined;
     this.updateButtonLocation = undefined;
     this.replaceSlotsContent = undefined;
+    this.setModeDiscountsArray = undefined;
     this.currencySign = undefined;
     this.pricePrefix = "";
     this.locale = undefined;
@@ -207,6 +217,9 @@ const VviinnCarousel = class {
     if (this.isSetMode) {
       window.addEventListener("resize", this.handleWindowResize);
       this.sourceProduct = search_store.searchState.sourceProduct;
+      this.setModeDiscount = this.setModeDiscountsArray[0];
+      this.setModeMaxDiscount =
+        this.setModeDiscountsArray[this.setModeDiscountsArray.length - 1];
     }
     if (this.isSetMode && this.recommendations.length >= columnsNumber) {
       this.crossSellingRecommendations = this.recommendations.slice(0, columnsNumber);
@@ -255,9 +268,11 @@ const VviinnCarousel = class {
     if (this.setModeAppliedDiscounts.hasOwnProperty(productId))
       return;
     this.setModeAppliedDiscounts = Object.assign(Object.assign({}, this.setModeAppliedDiscounts), { [productId]: this.setModeDiscount });
-    const isMaxDiscount = this.setModeDiscount === SET_MODE_MAX_DISCOUNT;
+    const isMaxDiscount = this.setModeDiscount === this.setModeMaxDiscount;
     if (!isMaxDiscount) {
-      this.setModeDiscount += SET_MODE_DISCOUNT_STEP;
+      this.currentDiscountIndex += 1;
+      this.setModeDiscount =
+        this.setModeDiscountsArray[this.currentDiscountIndex];
     }
   }
   setItemWidth() {
@@ -385,7 +400,7 @@ const VviinnCarousel = class {
     const salePrice = this.isSetMode
       ? setModeDiscount
       : recommendation.price.sale;
-    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: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale }));
+    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: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, basketButtonShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale }));
   }
   renderRecommendationGroup(elements) {
     return (index.h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
@@ -427,6 +442,143 @@ const VviinnCarousel = class {
 };
 VviinnCarousel.style = vviinnCarouselCss;
 
+const getFilterOptions = (filter) => {
+  return filter && "values" in filter
+    ? filter.values
+    : filter && "suggestions" in filter
+      ? filter.suggestions
+      : [];
+};
+
+const vviinnFiltersCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--spacer:8px;--surface-color-surface-01:#f4f4f4;--text-color-text-primary:#161616;--font-family:Inter, system-ui, sans-serif;--font-size-body:14px;--font-weight-regular:400;--line-height-body:20px;--letter-spacing-default:0px;--background-color-background:#fff;--border-color-border-01:#f4f4f4;--gray-100:#161616;--gray-10:#f4f4f4;--gray-70:#525252;--radius-radius-md:8px;--button-color-button-primary:#000;--text-color-text-inverse:#fff;--text-color-text-secondary:#525252;--button-color-button-disabled:#e0e0e0;--text-color-text-disabled:rgba(22, 22, 22, 0.25)}:host{overflow:hidden}.filters-header,.filters-footer{overflow-x:auto}.filters-header{display:flex;justify-content:space-between;gap:14px}.filters-modal-list,.sub-filters-wrapper,.main-filters-wrapper,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.sub-filters-wrapper,.main-filters-wrapper{display:flex}.main-filters-wrapper{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01)}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{cursor:pointer;border:none}.filters-sub-button,.filters-main-button{font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);display:flex;justify-content:center;align-items:center;gap:10px;border-radius:6px}.filters-main-button{color:var(--text-color-text-primary);padding:10px 16px;flex:1 0 0;background:var(--surface-color-surface-01)}.filters-main-button:hover{color:var(--text-color-text-secondary)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.filters-sub-button.active{border-color:#000}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);text-align:center;font-family:var(--font-family);font-size:16px;font-style:normal;font-weight:500;line-height:24px;border-bottom:1px solid var(--gray-10)}.filters-modal-list{margin:4px 24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-modal-actions{position:absolute;bottom:0;left:0;right:0;border-top:1px solid var(--gray-10);padding:24px}.filters-modal-apply{color:var(--text-color-text-inverse);text-align:center;font-family:var(--font-family);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}";
+
+const VviinnFilters = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vviinnFiltersChanged = index.createEvent(this, "vviinnFiltersChanged", 7);
+    this.mainFilters = [];
+    this.moreFilters = [];
+    this.filters = [];
+    this.widgetElementId = undefined;
+    this.selectedFilter = undefined;
+    this.requestFilters = [];
+    this.requestFiltersMore = [];
+    this.showMore = false;
+    this.selectedMoreOptions = [];
+  }
+  connectedCallback() {
+    this.setMainAndMoreFilters();
+  }
+  setMainAndMoreFilters() {
+    this.mainFilters = this.filters.slice(0, 4);
+    this.moreFilters = this.filters.slice(4);
+  }
+  handleMainFilterSelection(filter) {
+    this.selectedFilter = filter;
+  }
+  subFilterSelection(filters, { column: selectedColumn }, filterValue) {
+    var _a, _b;
+    const value = (_a = filterValue.interval) !== null && _a !== void 0 ? _a : filterValue;
+    const index = filters.findIndex(({ column }) => column === selectedColumn);
+    const valueIndex = (_b = filters[index]) === null || _b === void 0 ? void 0 : _b.values.findIndex((val) => val === value);
+    const pushObject = { column: selectedColumn, values: [] };
+    if (valueIndex > -1)
+      pushObject.values.splice(valueIndex, 1);
+    else
+      pushObject.values.push(value);
+    if (index === -1)
+      filters = [...filters, pushObject];
+    else {
+      filters[index] = pushObject;
+      if (filters[index].values.length === 0) {
+        filters = [...filters.filter((filter) => filters[index] !== filter)];
+      }
+      else {
+        filters = [...filters];
+      }
+    }
+    return filters;
+  }
+  emitTequestFiltersMore(requestFilters) {
+    this.vviinnFiltersChanged.emit(requestFilters);
+    this.showMore = false;
+  }
+  handleSubFilterSelection(filterValue, seletedFilter, type = "main") {
+    if (type === "main") {
+      this.requestFilters = this.subFilterSelection(this.requestFilters, seletedFilter, filterValue);
+      this.emitTequestFiltersMore(Object.assign({}, this.requestFilters));
+    }
+    else {
+      this.requestFiltersMore = this.subFilterSelection(this.requestFiltersMore, seletedFilter, filterValue);
+    }
+  }
+  showActiveOnMainButton({ column }) {
+    if (!this.selectedFilter)
+      return "";
+    return this.selectedFilter.column === column ? "active" : "";
+  }
+  showActiveOnSubButton(requestFilters, filterValue) {
+    if (!this.selectedFilter)
+      return "";
+    const mainFilter = requestFilters.find((filter) => filter.column === this.selectedFilter.column);
+    if (!mainFilter)
+      return "";
+    return mainFilter.values.some((value) => value === filterValue || value === filterValue.interval)
+      ? "active"
+      : "";
+  }
+  showActiveOnModalSubButton(requestFilters, filterValue) {
+    let className = "";
+    requestFilters.forEach((filter) => {
+      if (filter.values.some((value) => value === filterValue || value === filterValue.interval)) {
+        className = "active";
+      }
+    });
+    return className;
+  }
+  handleMoreOptionsMainClick(column) {
+    if (this.selectedMoreOptions.includes(column)) {
+      this.selectedMoreOptions = this.selectedMoreOptions.filter((option) => option !== column);
+    }
+    else {
+      this.selectedMoreOptions = [...this.selectedMoreOptions, column];
+    }
+  }
+  filtersModalApply() {
+    this.emitTequestFiltersMore(Object.assign(Object.assign({}, this.requestFilters), this.requestFiltersMore));
+  }
+  render() {
+    const selectedFilterOptions = getFilterOptions(this.selectedFilter);
+    let moreFiltersOptionCount = 0;
+    this.moreFilters.forEach((filter) => {
+      moreFiltersOptionCount += getFilterOptions(filter).length;
+    });
+    return (index.h(index.Host, { part: "filters" }, index.h("div", { class: "filters-header" }, index.h("ul", { class: "main-filters-wrapper" }, this.mainFilters.map((filter) => {
+      return (index.h("li", null, index.h("button", { class: `filters-main-button ${this.showActiveOnMainButton(filter)}`, onClick: () => this.handleMainFilterSelection(filter) }, filter.column)));
+    })), this.moreFilters.length > 0 && (index.h("button", { class: "filters-more-button", onClick: () => (this.showMore = true) }, index.h(FiltersIcon, null)))), this.selectedFilter !== undefined && (index.h("div", { class: "filters-footer" }, index.h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
+      selectedFilterOptions.map((filter) => {
+        return (index.h("li", null, index.h("button", { onClick: () => this.handleSubFilterSelection(filter.value, this.selectedFilter), class: `filters-sub-button ${this.showActiveOnSubButton(this.requestFilters, filter.value)}` }, filter.label)));
+      })))), index.h("div", { class: `filters-modal ${this.showMore ? "open" : ""}` }, index.h("div", { class: "filters-modal-wrapper" }, index.h("div", { class: "filters-modal-header" }, "Filters", moreFiltersOptionCount > 0 ? ` (${moreFiltersOptionCount})` : "", index.h("button", { class: "filters-modal-close", onClick: () => {
+        this.showMore = false;
+        this.requestFiltersMore = [];
+      } }, index.h(NewCloseIcon, null))), index.h("ul", { class: "filters-modal-list" }, this.moreFilters.map((mainFilter) => {
+      const filterOptions = getFilterOptions(mainFilter);
+      return (index.h("li", null, index.h("button", { onClick: () => this.handleMoreOptionsMainClick(mainFilter.column), class: "filters-modal-main-button" }, mainFilter.column, " ", filterOptions.length > 0
+        ? `(${filterOptions.length})`
+        : ""), index.h("ul", { class: `filters-modal-sub-list ${this.selectedMoreOptions.includes(mainFilter.column)
+          ? "open"
+          : ""}` }, filterOptions &&
+        filterOptions.map((filter) => {
+          return (index.h("li", null, index.h("button", { onClick: () => this.handleSubFilterSelection(filter.value, mainFilter, "more"), class: `filters-more-modal-button ${this.showActiveOnModalSubButton(this.requestFiltersMore, filter.value)}` }, filter.label)));
+        }))));
+    })), index.h("div", { class: "filters-modal-actions" }, index.h("button", { class: "filters-modal-apply", onClick: () => this.filtersModalApply(), disabled: this.requestFiltersMore.length === 0 }, "Apply"), index.h("button", { class: "filters-modal-reset", onClick: () => (this.requestFiltersMore = []) }, "Reset Filters"))))));
+  }
+  static get watchers() { return {
+    "filters": ["setMainAndMoreFilters"]
+  }; }
+};
+VviinnFilters.style = vviinnFiltersCss;
+
 class GtagAnalytics {
   sendImpression(product) {
     var _a, _b, _c;
@@ -541,7 +693,7 @@ const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
 const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
   index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
 
-const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%;--min-image-size-set-mode:155px}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}.image.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;padding:6px;width:32px;height:32px;z-index:1;background-color:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button svg{width:20px;height:20px}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background-color:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button{font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button.basket-button-grid{width:100%;background-color:unset;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background-color:#f7f7f7}.basket-button-continuity:hover{background-color:#eaeaea}.basket-button-grid:hover{background-color:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background-color:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}: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\");background-color:transparent;position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}:host(.animated) .update-button{display:none}:host(.set-mode){line-height:20px;align-items:flex-start;height:auto}:host(.set-mode) .basket-button{display:flex;gap:8px;align-items:center;box-sizing:border-box;justify-content:center;border:none;background-color:#f4f4f4;font-weight:500;color:#525252}:host(.set-mode:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .basket-button:hover{background-color:rgb(234, 234, 234)}:host(.set-mode) .title{font-weight:400}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;border:none;aspect-ratio:1;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode) picture .plus-icon{background-color:white;position:absolute;z-index:1;padding:16px;top:calc(50% - 32px);color:#a8a8a8;right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode) picture .plus-icon{padding:8px;top:calc(50% - 24px);right:-24px}}:host(.set-mode) .basket-button.applied-discount{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .basket-button--hidden{display:none}:host(.set-mode) .price-container{flex-direction:row;flex-wrap:wrap}:host(.set-mode) .price-amount{margin-right:12px}@media (max-width: 1080px){:host(.set-mode) .price-amount{margin-right:8px}}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}.discount-label{position:absolute;left:0;top:13px;line-height:20px;padding:2px 4px;border-radius:0px 4px 4px 0px;color:white;background-color:#ff3944;letter-spacing:0.5px}";
+const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%;--min-image-size-set-mode:155px}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}.image.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;padding:6px;width:32px;height:32px;z-index:1;background-color:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button svg{width:20px;height:20px}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background-color:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button{font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}.basket-button.basket-button-grid{width:100%;background-color:unset;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background-color:#f7f7f7}.basket-button-continuity:hover{background-color:#eaeaea}.basket-button-grid:hover{background-color:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background-color:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}: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\");background-color:transparent;position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}:host(.animated) .update-button{display:none}:host(.set-mode){line-height:20px;align-items:flex-start;height:auto}:host(.set-mode) .basket-button{border:none;background-color:#f4f4f4;font-weight:500;color:#525252}:host(.set-mode) .basket-button-container{display:flex;gap:8px;align-items:center;box-sizing:border-box;justify-content:center}:host(.set-mode:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .basket-button:hover{background-color:rgb(234, 234, 234)}:host(.set-mode) .title{font-weight:400}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;border:none;aspect-ratio:1;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode) picture .plus-icon{background-color:white;position:absolute;z-index:1;padding:16px;top:calc(50% - 32px);color:#a8a8a8;right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode) picture .plus-icon{padding:8px;top:calc(50% - 24px);right:-24px}}:host(.set-mode) .basket-button.pressed{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .basket-button.pressed .discount-percentage{padding-right:5px}:host(.set-mode) .basket-button--hidden{display:none}:host(.set-mode) .price-container{flex-direction:row;flex-wrap:wrap}:host(.set-mode) .price-amount{margin-right:12px}@media (max-width: 1080px){:host(.set-mode) .price-amount{margin-right:8px}}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}.discount-label{position:absolute;left:0;top:13px;line-height:20px;padding:2px 4px;border-radius:0px 4px 4px 0px;color:white;background-color:#ff3944;letter-spacing:0.5px}";
 
 const VviinnProductCard = class {
   constructor(hostRef) {
@@ -577,7 +729,7 @@ const VviinnProductCard = class {
     this.responsive = false;
     this.dimmedBackground = false;
     this.mode = undefined;
-    this.addToBasketShow = undefined;
+    this.basketButtonShow = undefined;
     this.updateButtonLocation = undefined;
     this.appliedDiscountPercentage = undefined;
     this.currentDiscountPercentage = undefined;
@@ -590,6 +742,7 @@ const VviinnProductCard = class {
     this.updatingAllCards = undefined;
     this.defaultAnimationInterval = undefined;
     this.isTransitioning = false;
+    this.basketButonPressed = false;
   }
   connectedCallback() {
     this.productData = this.getProductData();
@@ -609,6 +762,7 @@ const VviinnProductCard = class {
   crossSellingClickListener({ detail }) {
     const { animationInterval } = detail;
     this.isTransitioning = true;
+    this.basketButonPressed = false;
     const animationTimer = setTimeout(() => {
       this.isTransitioning = false;
       clearTimeout(animationTimer);
@@ -618,6 +772,7 @@ const VviinnProductCard = class {
     if (!this.updatingAllCards)
       return;
     this.isTransitioning = true;
+    this.basketButonPressed = false;
     const animationTimer = setTimeout(() => {
       this.vviinnUpdatingAllCardsFinished.emit();
       this.isTransitioning = false;
@@ -682,15 +837,18 @@ const VviinnProductCard = class {
         dimmed: this.dimmedBackground,
         animated: this.isTransitioning,
         "set-mode": this.isSetMode,
-      }, exportparts: "brand, 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, title, basket-button, update-button-item" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 20 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, salePrice: this.salePrice, locale: this.locale }), this.isSetMode && !this.appliedDiscountPercentage && (index.h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), (this.addToBasketShow || this.isSetMode) && (index.h(index.Fragment, null, this.isTransitioning && index.h("vviinn-skeleton", { height: 44 }), index.h("button", { class: {
+      }, exportparts: "brand, 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" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 20 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, salePrice: this.salePrice, locale: this.locale }), 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: 44 }), index.h("button", { class: {
         "basket-button": true,
         "basket-button--hidden": this.isTransitioning,
         "basket-button-grid": this.isGridMode || this.isSetMode,
         "basket-button-continuity ": this.isContinuityMode,
-        "applied-discount": !!this.appliedDiscountPercentage,
+        pressed: this.basketButonPressed,
       }, part: "basket-button", onClick: () => {
         this.vviinnAddToBasket.emit(Object.assign(Object.assign({}, this.productData), { discount: this.currentDiscountPercentage }));
-      } }, this.isSetMode ? (index.h(index.Fragment, null, this.appliedDiscountPercentage ? (index.h("span", null, index.h("slot", { name: "vviinn-basket-button-icon-pressed" }, index.h(CheckCircleIcon, null)))) : (index.h("span", null, index.h("slot", { name: "vviinn-basket-button-icon" }, index.h(BasketIcon, null)))), this.appliedDiscountPercentage ? (index.h(index.Fragment, null, index.h("span", null, this.appliedDiscountPercentage, "% "), index.h("span", null, index.h("slot", { name: "vviinn-basket-button-text-pressed" }, i18next.instance.t("setMode.appliedDiscountText"))))) : (index.h("slot", { name: "vviinn-basket-button-text" }, i18next.instance.t("setMode.basketButtonText"))))) : (index.h("span", null, index.h("slot", { name: "vviinn-basket-button-text" }, i18next.instance.t("basketButtonText"))))))), this.isSetMode && !this.appliedDiscountPercentage && (index.h("button", { class: {
+        this.basketButonPressed = true;
+      } }, this.isSetMode ? (index.h(index.Fragment, null, !this.basketButonPressed && (index.h("div", { key: "set-not-pressed", class: "basket-button-container" }, index.h("span", { class: "basket-button-icon-container" }, index.h("slot", { name: "vviinn-basket-button-icon" }, index.h(BasketIcon, null))), index.h("span", null, index.h("slot", { name: "vviinn-basket-button-text" }, i18next.instance.t("setMode.basketButtonText"))))), this.basketButonPressed && (index.h("div", { key: "set-pressed", class: "basket-button-container" }, index.h("span", { class: "basket-button-icon-container" }, index.h("slot", { name: "vviinn-basket-button-icon-pressed" }, index.h(CheckCircleIcon, null))), index.h("span", null, this.appliedDiscountPercentage && (index.h("span", { class: "discount-percentage", part: "discount-percentage" }, this.appliedDiscountPercentage, "%")), index.h("slot", { name: "vviinn-basket-button-text-pressed" }, i18next.instance.t("setMode.appliedDiscountText"))))))) : (index.h("slot", { name: "vviinn-basket-button-text" }, i18next.instance.t("basketButtonText")))))), this.isSetMode && !this.basketButonPressed && (index.h("button", { class: {
         "update-button": true,
         hidden: this.updateButtonLocation === "onTop",
       }, part: "update-button-item", onClick: () => {
@@ -1376,9 +1534,9 @@ const parseCampaigns = (campaigns) => campaigns.split(",").map((value) => {
     ? parseInt(trimmedValue)
     : trimmedValue;
 });
-const getRecommendationsBody = ({ productId, campaigns, color, excluded, }) => {
+const getRecommendationsBody = ({ productId, campaigns, color, excluded, dynamicFilters = [], }) => {
   const staticFilters = Object.assign(Object.assign({}, (color.length ? { color } : {})), (excluded.length ? { excluded: parseExcluded(excluded) } : {}));
-  return Object.assign(Object.assign({ productId }, (campaigns.length ? { campaigns: parseCampaigns(campaigns) } : {})), (Object.keys(staticFilters).length ? { staticFilters } : {}));
+  return Object.assign(Object.assign({ productId, dynamicFilters: dynamicFilters !== null && dynamicFilters !== void 0 ? dynamicFilters : undefined }, (campaigns.length ? { campaigns: parseCampaigns(campaigns) } : {})), (Object.keys(staticFilters).length ? { staticFilters } : {}));
 };
 
 const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}:host(.set) vviinn-carousel{overflow-x:auto}:host(.set) vviinn-carousel{scrollbar-width:thin}.widget-header{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.widget-header h3{margin-top:8px;margin-bottom:0;font-size:14px;font-weight:400;line-height:20px}.update-button{display:flex;align-items:center;justify-content:center;color:#525252;gap:8px;padding:8px 10px;background:rgb(244, 244, 244);border:none;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f;width:24px;height:24px}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
@@ -1406,12 +1564,14 @@ const VviinnVprWidget = class {
     this.vviinnResultView = index.createEvent(this, "vviinnResultView", 7);
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
     this.vviinnAddToBasket = index.createEvent(this, "vviinnAddToBasket", 7);
+    this.vviinnFiltersChanged = index.createEvent(this, "vviinnFiltersChanged", 7);
     this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
     this.vviinnRecommendationsLoaded = index.createEvent(this, "vviinnRecommendationsLoaded", 7);
     this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
     this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
     this.productImageLoadedSubject = new Subject();
     this.resultViewed = false;
+    this.requestDynamicFilters = [];
     this.setTrackingDeactivated = (result) => {
       if (result.status === "rejected") {
         this.trackingDeactivated = true;
@@ -1438,6 +1598,8 @@ const VviinnVprWidget = class {
     this.productDetailNewTab = false;
     this.addToBasketShow = false;
     this.updateButtonLocation = "topAndItem";
+    this.showFilters = false;
+    this.setModeDiscounts = this.mode === "set" ? "5, 10, 15" : "";
     this.apiPath = "https://api.vviinn.com";
     this.useCarousel = true;
     this.showingInButton = false;
@@ -1445,11 +1607,13 @@ const VviinnVprWidget = class {
     this.closed = undefined;
     this.opened = undefined;
     this.recommendations = [];
+    this.dynamicFilters = [];
     this.sourceProduct = null;
     this.trackingDeactivated = false;
     this.hasErrorOnLoad = false;
     this.updatingAllCards = false;
     this.updatedCardsAmount = 0;
+    this.setModeDiscountsArray = [];
   }
   getBasicEventData() {
     return {
@@ -1529,6 +1693,12 @@ const VviinnVprWidget = class {
     this.isSetMode = this.mode === "set";
     this.isGridMode = this.mode === "grid";
     this.isContinuityMode = this.mode === "continuity";
+    if (this.isSetMode && this.setModeDiscounts.length) {
+      this.setModeDiscountsArray = this.setModeDiscounts
+        .split(",")
+        .map((d) => parseInt(d.trim()))
+        .filter((d) => !isNaN(d));
+    }
   }
   async componentWillLoad() {
     await i18next.instance.init({
@@ -1609,6 +1779,10 @@ const VviinnVprWidget = class {
       return;
     this.updatingAllCards = false;
   }
+  async filtersChanged({ detail }) {
+    this.requestDynamicFilters = detail;
+    this.getRecommendations();
+  }
   trackWidgetEvent(action) {
     if (this.trackingDeactivated)
       return;
@@ -1662,6 +1836,7 @@ const VviinnVprWidget = class {
       color: this.color,
       excluded: this.excluded,
       campaigns: this.campaigns,
+      dynamicFilters: this.requestDynamicFilters,
     });
     const request = search_store._function.pipe(search_store.TaskEither.of(getRecommendationsService(campaignType)), search_store.TaskEither.ap(search_store.TaskEither.of(body)), search_store.TaskEither.ap(search_store.TaskEither.of(headers)), search_store.TaskEither.flatten);
     const runRequest = await request();
@@ -1678,9 +1853,10 @@ const VviinnVprWidget = class {
   handleError(_) {
     this.hasErrorOnLoad = true;
   }
-  handleRecommendationsSuccess({ data, }) {
+  handleRecommendationsSuccess({ data, interactions, }) {
     this.vviinnResultLoad.emit(this.getBasicEventData());
     this.trackResultEvent("load");
+    this.dynamicFilters = interactions.dynamicFilters;
     const { products, sourceProduct } = data;
     this.recommendations = products;
     this.sourceProduct = sourceProduct;
@@ -1709,14 +1885,14 @@ const VviinnVprWidget = class {
         [this.mode]: true,
       }, "aria-hidden": "false" }, index.h(index.Fragment, null, this.renderExternalCSS(), customizedSlots.SlotSkeleton("vpr"), index.h("style", null, search_store.state.fallbackStyles), index.h("div", { class: "widget-header" }, index.h("div", null, index.h("h2", { part: "recommendations-title" }, index.h("slot", { name: "vviinn-recommendations-title" }, this.isSetMode
       ? i18next.instance.t("setMode.widgetTitle")
-      : this.blockTitle)), this.isSetMode && (index.h("h3", { part: "recommendations-subtitle" }, index.h("slot", { name: "vviinn-recommendations-subtitle" }, i18next.instance.t("setMode.widgetSubtitle"))))), this.isSetMode && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-button-icon" }, index.h(UpdateIcon, null)), index.h("slot", { name: "vviinn-update-button-text" }, index.h("span", null, i18next.instance.t("setMode.updateButtonText"))))) : null), this.recommendations.length > 0 &&
+      : this.blockTitle)), this.isSetMode && (index.h("h3", { part: "recommendations-subtitle" }, index.h("slot", { name: "vviinn-recommendations-subtitle" }, i18next.instance.t("setMode.widgetSubtitle"))))), this.isSetMode && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-button-icon" }, index.h(UpdateIcon, null)), index.h("slot", { name: "vviinn-update-button-text" }, index.h("span", null, i18next.instance.t("setMode.updateButtonText"))))) : null), this.showFilters && (index.h("vviinn-filters", { filters: this.dynamicFilters, widgetElementId: this.id })), this.recommendations.length > 0 &&
       (this.useCarousel ? this.renderCarousel() : this.renderResults()), (this.recommendations.length === 0 || this.hasErrorOnLoad) &&
       !search_store.searchState.loading && (index.h("p", { class: "no-result-text" }, this.noResultText.length
       ? this.noResultText
       : i18next.instance.t("noResultText"))))));
   }
   renderRecommendation(recommendation, index$1) {
-    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: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.isGridMode, addToBasketShow: this.addToBasketShow, mode: this.mode, dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale }));
+    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: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.isGridMode, basketButtonShow: this.addToBasketShow, mode: this.mode, dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version, currency: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale }));
   }
   useDimmedBackgroundInCard() {
     return this.isContinuityMode || this.isSetMode || !this.useCarousel;
@@ -1725,7 +1901,7 @@ const VviinnVprWidget = class {
     return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
   }
   renderCarousel() {
-    return (index.h("vviinn-carousel", { mode: this.mode, campaignTypeId: this.campaignType, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations, widgetElementId: this.id, widgetVersion: _package.version, gridArrowsDynamic: this.gridArrowsDynamic, addToBasketShow: this.addToBasketShow, updatingAllCards: this.updatingAllCards, updateButtonLocation: this.updateButtonLocation, replaceSlotsContent: this.replaceSlotsContent.bind(this), currencySign: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale }));
+    return (index.h("vviinn-carousel", { mode: this.mode, campaignTypeId: this.campaignType, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations, widgetElementId: this.id, widgetVersion: _package.version, gridArrowsDynamic: this.gridArrowsDynamic, addToBasketShow: this.addToBasketShow, updatingAllCards: this.updatingAllCards, updateButtonLocation: this.updateButtonLocation, replaceSlotsContent: this.replaceSlotsContent.bind(this), setModeDiscountsArray: this.setModeDiscountsArray, currencySign: this.currencySign, pricePrefix: this.pricePrefix, locale: this.locale }));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -1740,6 +1916,7 @@ const VviinnVprWidget = class {
 VviinnVprWidget.style = vviinnVprWidgetCss;
 
 exports.vviinn_carousel = VviinnCarousel;
+exports.vviinn_filters = VviinnFilters;
 exports.vviinn_product_card = VviinnProductCard;
 exports.vviinn_skeleton = VviinnSkeleton;
 exports.vviinn_vpr_widget = VviinnVprWidget;

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

@@ -32,6 +32,7 @@ const RecommendationsSidebar = class {
     this.excluded = undefined;
     this.productDetailNewTab = undefined;
     this.addToBasketShow = false;
+    this.showFilters = false;
     this.buttonChildren = undefined;
     this.apiPath = "https://api.vviinn.com";
     this.buttonElementId = undefined;
@@ -73,7 +74,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.isSourceImageValid() ? this.renderSourceImage() : null, 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", token: this.token, productId: this.productId, imageWidth: this.imageWidth, 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, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow })))));
+    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.isSourceImageValid() ? this.renderSourceImage() : null, 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", token: this.token, productId: this.productId, imageWidth: this.imageWidth, 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, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, showFilters: this.showFilters })))));
   }
   renderSourceImage() {
     return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));