vviinn-widgets 2.44.2 → 2.46.0

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

@@ -3,12 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
-const index$1 = require('./index-28052f80.js');
+const search_store = require('./search.store-0b319593.js');
 const i18next = require('./i18next-74ff3413.js');
-const customizedSlots = require('./customized-slots-49c03dc1.js');
-const _package = require('./package-5912f89d.js');
-const index$2 = require('./index-7ff2ab5f.js');
+const customizedSlots = require('./customized-slots-1b59bd38.js');
+const _package = require('./package-3b910c03.js');
+const index$1 = require('./index-279a6a0f.js');
+
+const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
+
+const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  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 vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
 
@@ -263,7 +269,7 @@ const VviinnCarousel = class {
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();
-    const grouppedContent = imageSearch_store._Array.chunksOf(this.getColumnsNumber())(recommendations);
+    const grouppedContent = search_store._Array.chunksOf(this.getColumnsNumber())(recommendations);
     return this.renderRecommendationGroups(grouppedContent);
   }
   renderBullets() {
@@ -275,7 +281,7 @@ const VviinnCarousel = class {
       }, onClick: () => this.scroll(index$1) })));
   }
   render() {
-    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, !this.isSetMode && (index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(index$1.ChevronIcon, null))), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(index$1.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 && (index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(ChevronIcon, null))), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.showNext(), 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 {
@@ -353,9 +359,9 @@ class GAnalytics {
   }
 }
 
-const getGtagAnalytics = () => imageSearch_store._function.pipe(imageSearch_store.Option.fromNullable(window.gtag), imageSearch_store.Option.map(() => new GtagAnalytics()));
-const getCommonAnalytics = () => imageSearch_store._function.pipe(imageSearch_store.Option.fromNullable(window.ga), imageSearch_store.Option.map(() => new GAnalytics()));
-const analyticsMonoid = imageSearch_store.Option.getMonoid(imageSearch_store.Semigroup.first());
+const getGtagAnalytics = () => search_store._function.pipe(search_store.Option.fromNullable(window.gtag), search_store.Option.map(() => new GtagAnalytics()));
+const getCommonAnalytics = () => search_store._function.pipe(search_store.Option.fromNullable(window.ga), search_store.Option.map(() => new GAnalytics()));
+const analyticsMonoid = search_store.Option.getMonoid(search_store.Semigroup.first());
 const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
 
 /**
@@ -413,8 +419,8 @@ var tupleConstructors = {
     5: function (a) { return function (b) { return function (c) { return function (d) { return function (e) { return [a, b, c, d, e]; }; }; }; }; }
 };
 function getTupleConstructor(len) {
-    if (!imageSearch_store.has.call(tupleConstructors, len)) {
-        tupleConstructors[len] = curried(imageSearch_store.tuple, len - 1, []);
+    if (!search_store.has.call(tupleConstructors, len)) {
+        tupleConstructors[len] = curried(search_store.tuple, len - 1, []);
     }
     return tupleConstructors[len];
 }
@@ -436,10 +442,10 @@ function sequenceT(F) {
 
 const FIT_EXPR = /fit\/\d+\//;
 const containsFit = (url) => {
-  return imageSearch_store._function.pipe(url.match(FIT_EXPR), imageSearch_store.Either.fromNullable(url), imageSearch_store.Either.map(() => url));
+  return search_store._function.pipe(url.match(FIT_EXPR), search_store.Either.fromNullable(url), search_store.Either.map(() => url));
 };
 const processWidth = (url, size) => {
-  return imageSearch_store._function.pipe(containsFit(url), imageSearch_store.Either.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), imageSearch_store.Either.getOrElse(() => url));
+  return search_store._function.pipe(containsFit(url), search_store.Either.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), search_store.Either.getOrElse(() => url));
 };
 const Linked = (props, child) => props.deeplink ? (index.h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
 const FormattedPrice = (props) => {
@@ -484,7 +490,7 @@ const VviinnProductCard = class {
     this.productData = null;
     this.intersectionCallback = (data) => {
       if (data.some((entry) => entry.isIntersecting)) {
-        imageSearch_store._function.pipe(getAnalyticsModule, imageSearch_store.Option.map((analytics) => analytics.sendImpression(this.getProduct())));
+        search_store._function.pipe(getAnalyticsModule, search_store.Option.map((analytics) => analytics.sendImpression(this.getProduct())));
         this.vviinnProductView.emit(this.productData);
         this.intersectionObserver.disconnect();
       }
@@ -573,7 +579,7 @@ const VviinnProductCard = class {
         event.preventDefault();
         event.stopImmediatePropagation();
         this.vviinnProductClick.emit(Object.assign(Object.assign({}, this.productData), { clickEvent: event }));
-        imageSearch_store._function.pipe(getAnalyticsModule, imageSearch_store.Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+        search_store._function.pipe(getAnalyticsModule, search_store.Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
       });
       link.addEventListener("auxclick", () => {
         this.vviinnAuxClick.emit(Object.assign({}, this.productData));
@@ -581,7 +587,7 @@ const VviinnProductCard = class {
     });
   }
   getProduct() {
-    return imageSearch_store.imageSearchState.results.find((r) => r.productId === this.productId);
+    return search_store.searchState.results.find((r) => r.productId === this.productId);
   }
   renderImage() {
     const props = {
@@ -604,7 +610,7 @@ const VviinnProductCard = class {
     return (index.h(index.Host, { part: "product-card", class: {
         dimmed: this.dimmedBackground,
         animated: this.isTransitioning,
-      }, 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, 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: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : imageSearch_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : imageSearch_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : imageSearch_store.state.locale }))), this.addToBasketShow && (index.h("div", { class: "basket-button-container" }, this.isTransitioning ? (index.h("vviinn-skeleton", { height: 40 })) : (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, 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: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : search_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : search_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : search_store.state.locale }))), this.addToBasketShow && (index.h("div", { class: "basket-button-container" }, this.isTransitioning ? (index.h("vviinn-skeleton", { height: 40 })) : (index.h("button", { class: {
         "basket-button": true,
         "basket-button-grid": this.mode === "grid" || this.mode === "set",
         "basket-button-continuity ": this.mode === "continuity",
@@ -618,7 +624,7 @@ const VviinnProductCard = class {
           animationInterval: this.generateRandomNumber(800, 1400),
           productData: this.productData,
         });
-      } }, index.h("slot", { name: "vviinn-update-icon-item" }, index.h(index$1.UpdateIcon, null)))) : null));
+      } }, index.h("slot", { name: "vviinn-update-icon-item" }, index.h(UpdateIcon, null)))) : null));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -1265,19 +1271,19 @@ const createFetchAuthOptions = (x) => {
     headers: x,
   };
 };
-const createBearAuthedHeader = imageSearch_store._function.flow(createBearerString, createAuthedHeader, createFetchAuthOptions);
+const createBearAuthedHeader = search_store._function.flow(createBearerString, createAuthedHeader, createFetchAuthOptions);
 
-const sequenceToEither = sequenceT(imageSearch_store.Apply);
-const apiGet = (path, data = {}) => imageSearch_store.pipe(sequenceToEither(imageSearch_store.getApiPath(), imageSearch_store.createInitGetRequest), imageSearch_store.fromEither, imageSearch_store.chainW(imageSearch_store.makeRequest(path, data)));
+const sequenceToEither = sequenceT(search_store.Apply);
+const apiGet = (path, data = {}) => search_store.pipe(sequenceToEither(search_store.getApiPath(), search_store.createInitGetRequest), search_store.fromEither, search_store.chainW(search_store.makeRequest(path, data)));
 
 const getVPRRecommendations = (productId) => (color) => (excludedFilters) => (campaigns) => (options) => {
-  const url = imageSearch_store._function.pipe(campaigns, imageSearch_store.map(encodeURIComponent), imageSearch_store.match(() => {
+  const url = search_store._function.pipe(campaigns, search_store.map(encodeURIComponent), search_store.match(() => {
     const params = [];
     if (color)
       params.push(`color=${color}`);
     if (excludedFilters)
       params.push(excludedFilters);
-    const queryString = imageSearch_store.arrayToQueryString(params);
+    const queryString = search_store.arrayToQueryString(params);
     return `product/${productId}/similar-products${queryString}`;
   }, (encodedCampaignsIds) => {
     const params = [];
@@ -1287,20 +1293,20 @@ const getVPRRecommendations = (productId) => (color) => (excludedFilters) => (ca
       params.push(`color=${color}`);
     if (excludedFilters)
       params.push(excludedFilters);
-    const queryString = imageSearch_store.arrayToQueryString(params);
+    const queryString = search_store.arrayToQueryString(params);
     return `product/${productId}/similar-products${queryString}`;
   }));
   return apiGet(url, options);
 };
 
 const getVCSRecommendations = (productId) => (color) => (excludedFilters) => (campaigns) => (options) => {
-  const url = imageSearch_store._function.pipe(campaigns, imageSearch_store.map(encodeURIComponent), imageSearch_store.match(() => {
+  const url = search_store._function.pipe(campaigns, search_store.map(encodeURIComponent), search_store.match(() => {
     const params = [];
     if (color)
       params.push(`color=${color}`);
     if (excludedFilters)
       params.push(excludedFilters);
-    const queryString = imageSearch_store.arrayToQueryString(params);
+    const queryString = search_store.arrayToQueryString(params);
     return `product/${productId}/cross-selling-products${queryString}`;
   }, (encodedCampaignsIds) => {
     const params = [];
@@ -1310,13 +1316,13 @@ const getVCSRecommendations = (productId) => (color) => (excludedFilters) => (ca
       params.push(`color=${color}`);
     if (excludedFilters)
       params.push(excludedFilters);
-    const queryString = imageSearch_store.arrayToQueryString(params);
+    const queryString = search_store.arrayToQueryString(params);
     return `product/${productId}/cross-selling-products${queryString}`;
   }));
   return apiGet(url, options);
 };
 
-const getRecommendationsService = (campaignType) => imageSearch_store._function.pipe(customizedSlots.fromString(campaignType), customizedSlots.fold(() => getVPRRecommendations, () => getVCSRecommendations));
+const getRecommendationsService = (campaignType) => search_store._function.pipe(customizedSlots.fromString(campaignType), customizedSlots.fold(() => getVPRRecommendations, () => getVCSRecommendations));
 
 const resources = {
   de: {
@@ -1424,6 +1430,9 @@ const VviinnVprWidget = class {
       window.location.href = deeplink;
     }
   }
+  findProductById(id) {
+    return this.recommendations.find((r) => r.productId === id);
+  }
   handleProductIdChange() {
     this.getRecommendations();
   }
@@ -1434,7 +1443,7 @@ const VviinnVprWidget = class {
     this.getRecommendations();
   }
   handleApiPathChange(newPath) {
-    imageSearch_store.state.apiPath = newPath;
+    search_store.state.apiPath = newPath;
     this.getRecommendations();
   }
   trackWidgetOpen() {
@@ -1457,13 +1466,13 @@ const VviinnVprWidget = class {
   }
   connectedCallback() {
     var _a;
-    imageSearch_store.state.apiPath = this.apiPath;
-    imageSearch_store.state.pricePrefix = this.pricePrefix;
-    imageSearch_store.state.currencySign = this.currencySign;
-    imageSearch_store.state.locale = this.locale;
+    search_store.state.apiPath = this.apiPath;
+    search_store.state.pricePrefix = this.pricePrefix;
+    search_store.state.currencySign = this.currencySign;
+    search_store.state.locale = this.locale;
     this.id = (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.el.id;
-    this.uiSessionId = index$2.v4();
-    this.trackingApi = index$2.createTrackingApi(this.apiPath, this.token);
+    this.uiSessionId = index$1.v4();
+    this.trackingApi = index$1.createTrackingApi(this.apiPath, this.token);
     this.getRecommendations();
     this.vviinnWidgetLoad.emit(this.getBasicEventData());
     this.trackWidgetEvent("load");
@@ -1475,7 +1484,7 @@ const VviinnVprWidget = class {
       resources,
     });
     if (this.excluded) {
-      this.excluded = imageSearch_store.parseExcluded(this.excluded);
+      this.excluded = search_store.parseExcluded(this.excluded);
     }
   }
   trackProductLoad({ detail }) {
@@ -1502,7 +1511,7 @@ const VviinnVprWidget = class {
   }
   async trackProductClick({ detail }) {
     const { productId, clickEvent } = detail;
-    const product = this.recommendations.find((r) => r.productId === productId);
+    const product = this.findProductById(productId);
     if (!product || !product.deeplink)
       return;
     const productClickEvent = this.getProductTrackEvent(detail, "click");
@@ -1520,7 +1529,7 @@ const VviinnVprWidget = class {
   }
   async trackAuxClick({ detail }) {
     const { productId } = detail;
-    const product = this.recommendations.find((r) => r.productId === productId);
+    const product = this.findProductById(productId);
     if (!product || !product.deeplink)
       return;
     const productClickEvent = this.getProductTrackEvent(detail, "click");
@@ -1535,10 +1544,10 @@ const VviinnVprWidget = class {
     let addToBasketEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
     if (this.campaignType === "VCS") {
-      addToBasketEvent = index$2.createAddToBasketVpcEvent(eventBody);
+      addToBasketEvent = index$1.createAddToBasketVpcEvent(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      addToBasketEvent = index$2.createAddToBasketVprEvent(eventBody);
+      addToBasketEvent = index$1.createAddToBasketVprEvent(eventBody);
     }
     this.trackingApi
       .trackEvent(addToBasketEvent)
@@ -1556,10 +1565,10 @@ const VviinnVprWidget = class {
     let widgetEvent;
     const eventBody = Object.assign({ action, session_id: this.uiSessionId }, rest);
     if (this.campaignType === "VCS") {
-      widgetEvent = index$2.createWidgetVpcEvent(eventBody);
+      widgetEvent = index$1.createWidgetVpcEvent(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      widgetEvent = index$2.createWidgetVprEvent(eventBody);
+      widgetEvent = index$1.createWidgetVprEvent(eventBody);
     }
     this.trackingApi.trackEvent(widgetEvent).then(this.setTrackingDeactivated);
   }
@@ -1570,10 +1579,10 @@ const VviinnVprWidget = class {
     let resultEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId }, rest);
     if (this.campaignType === "VCS") {
-      resultEvent = index$2.createResultVpcEventByType(type)(eventBody);
+      resultEvent = index$1.createResultVpcEventByType(type)(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      resultEvent = index$2.createResultVprEventByType(type)(eventBody);
+      resultEvent = index$1.createResultVprEventByType(type)(eventBody);
     }
     this.trackingApi.trackEvent(resultEvent).then(this.setTrackingDeactivated);
   }
@@ -1584,10 +1593,10 @@ const VviinnVprWidget = class {
     let productEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
     if (campaignTypeId === "VCS") {
-      productEvent = index$2.createProductVpcEventByType(eventType)(eventBody);
+      productEvent = index$1.createProductVpcEventByType(eventType)(eventBody);
     }
     else if (campaignTypeId === "VPR") {
-      productEvent = index$2.createProductVprEventByType(eventType)(eventBody);
+      productEvent = index$1.createProductVprEventByType(eventType)(eventBody);
     }
     return productEvent;
   }
@@ -1596,9 +1605,9 @@ const VviinnVprWidget = class {
       return;
     const campaignType = this.campaignType.length > 0 ? this.campaignType : "VPR";
     const headers = createBearAuthedHeader(this.token);
-    const request = imageSearch_store._function.pipe(imageSearch_store.TaskEither.of(getRecommendationsService(campaignType)), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(this.productId)), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(this.color)), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(this.excluded)), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(imageSearch_store.checkEmpryString(this.campaigns))), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(headers)), imageSearch_store.TaskEither.flatten);
+    const request = search_store._function.pipe(search_store.TaskEither.of(getRecommendationsService(campaignType)), search_store.TaskEither.ap(search_store.TaskEither.of(this.productId)), search_store.TaskEither.ap(search_store.TaskEither.of(this.color)), search_store.TaskEither.ap(search_store.TaskEither.of(this.excluded)), search_store.TaskEither.ap(search_store.TaskEither.of(search_store.checkEmpryString(this.campaigns))), search_store.TaskEither.ap(search_store.TaskEither.of(headers)), search_store.TaskEither.flatten);
     const runRequest = await request();
-    imageSearch_store._function.pipe(runRequest, imageSearch_store.Either.fold((error) => {
+    search_store._function.pipe(runRequest, search_store.Either.fold((error) => {
       this.handleError(error);
       this.vviinnNoResult.emit(this.getBasicEventData());
       this.vviinnRecommendationsLoaded.emit();
@@ -1612,7 +1621,7 @@ const VviinnVprWidget = class {
     this.vviinnResultLoad.emit(this.getBasicEventData());
     this.trackResultEvent("load");
     this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
-    imageSearch_store.imageSearchState.results = this.recommendations;
+    search_store.searchState.results = this.recommendations;
     this.productIds = this.recommendations.map((r) => r.productId);
     this.productImageLoadedSubject.subscribe((id) => {
       this.productIds = this.productIds.filter((x) => x !== id);
@@ -1634,7 +1643,7 @@ const VviinnVprWidget = class {
         loaded: true,
         empty: this.recommendations.length == 0,
         [this.mode === "set" ? "grid" : this.mode]: true,
-      }, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state.fallbackStyles), index.h("div", { class: "title-container" }, index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.mode === "set" && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-icon-top" }, index.h(index$1.UpdateIcon, null)))) : null), this.recommendations.length > 0 &&
+      }, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, search_store.state.fallbackStyles), index.h("div", { class: "title-container" }, index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.mode === "set" && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-icon-top" }, index.h(UpdateIcon, null)))) : null), this.recommendations.length > 0 &&
       (this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (index.h("p", { class: "no-result-text" }, this.noResultText.length
       ? this.noResultText
       : i18next.instance.t("noResultText"))))));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
+const search_store = require('./search.store-0b319593.js');
 
 const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid currentColor;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
 
@@ -12,7 +12,7 @@ const VviinnPreloader = class {
     index.registerInstance(this, hostRef);
   }
   isActive() {
-    return (imageSearch_store.imageSearchState.loading || imageSearch_store.imageSearchState.objectDetectionInProgress);
+    return search_store.searchState.loading || search_store.searchState.objectDetectionInProgress;
   }
   render() {
     return (index.h(index.Host, { class: {

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const index$1 = require('./index-28052f80.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" })));
 
 const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:4;box-sizing:border-box;display:block;display:flex;height:100vh;left:0;position:fixed;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}header{position:relative;text-align:center;padding:32px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);padding:8px}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px;min-height:100px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}vviinn-vpr-widget::part(title),vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(type){text-align:left}vviinn-vpr-widget::part(price-container){align-self:start}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
 
@@ -71,7 +73,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(index$1.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 })))));
   }
   renderSourceImage() {
     return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-5912f89d.js');
-const index$1 = require('./index-28052f80.js');
+const _package = require('./package-3b910c03.js');
+const VisualSearchIcon = require('./VisualSearchIcon-1180d079.js');
 
 const vviinnVprButtonCss = ":host{display:block}";
 
@@ -50,7 +50,7 @@ const VviinnVprButton = class {
   render() {
     return (index.h(index.Host, { onClick: () => {
         this.handleClick();
-      }, role: "button", tabindex: "0" }, index.h("vviinn-button", { addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
+      }, role: "button", tabindex: "0" }, index.h("vviinn-button", { addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(VisualSearchIcon.VisualSearchIcon, null)))));
   }
   handleClick() {
     const sidebar = document.createElement("vviinn-recommendations-sidebar");

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-5912f89d.js');
-const index$1 = require('./index-28052f80.js');
-const customizedSlots = require('./customized-slots-49c03dc1.js');
+const _package = require('./package-3b910c03.js');
+const customizedSlots = require('./customized-slots-1b59bd38.js');
 const constants = require('./constants-7684cbfc.js');
 
+const CameraIcon = () => (index.h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
+
 const vviinnVpsButtonCss = ":host{display:block}";
 
 const VviinnVpsButton = class {
@@ -46,6 +48,7 @@ const VviinnVpsButton = class {
     this.productDetailNewTab = true;
     this.imageResolutionWidth = 250;
     this.exampleImageSource = constants.DEFAULT_EXAMPLE_IMAGE;
+    this.textSearchShow = false;
     this.apiPath = undefined;
     this.buttonPressed = false;
   }
@@ -65,7 +68,7 @@ const VviinnVpsButton = class {
   render() {
     return (index.h(index.Host, { tabindex: "0", role: "button" }, index.h("vviinn-button", { onClick: () => {
         this.handleClick();
-      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource })));
+      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow })));
   }
   get el() { return index.getElement(this); }
 };