vviinn-widgets 2.0.0 → 2.2.1

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-141137b2.js');
+
+const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
+
+let VviinnError = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "icon" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("slot", { name: "action" })));
+  }
+};
+VviinnError.style = vviinnErrorCss;
+
+exports.vviinn_error = VviinnError;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-141137b2.js');
+const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
+require('./Handler-d1a8a86a.js');
+
+const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;-webkit-animation:rotate 3s linear infinite;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;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}@-webkit-keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
+
+let VviinnPreloader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  isActive() {
+    return (imageSearch_store.imageSearchState.loading || imageSearch_store.imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        active: this.isActive(),
+      } }));
+  }
+};
+VviinnPreloader.style = vviinnPreloaderCss;
+
+exports.vviinn_preloader = VviinnPreloader;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-141137b2.js');
+const index$1 = require('./index-a5e15a0c.js');
+const customizedSlots = require('./customized-slots-14b77e4a.js');
+
+const vviinnVpsButtonCss = "";
+
+let VviinnVpsButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.pressed = false;
+  }
+  handleModalClosed() {
+    this.pressed = false;
+  }
+  componentDidLoad() {
+    const slots = this.el.querySelectorAll("[slot]");
+    this.globalSlotsChanged.emit(Array.from(slots));
+  }
+  handleKeyDown(ev) {
+    if (ev.code !== "Enter" && ev.code !== "Space")
+      return;
+    this.pressed = true;
+  }
+  handleClick() {
+    this.pressed = true;
+  }
+  render() {
+    return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", null, index.h(index$1.CameraIcon, null)), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card" })));
+  }
+  get el() { return index.getElement(this); }
+};
+VviinnVpsButton.style = vviinnVpsButtonCss;
+
+exports.vviinn_vps_button = VviinnVpsButton;

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

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-141137b2.js');
+const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
+const customizedSlots = require('./customized-slots-14b77e4a.js');
+require('./Handler-d1a8a86a.js');
+
+const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #F4F4F4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{border-right:unset;box-sizing:border-box;grid-gap:24px;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));border-radius:2px;color:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #F4F4F4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#F4F4F4;border-radius:4px;border:1px solid #F4F4F4;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#EAEAEA}search-filters::part(filter):hover{background:#EAEAEA}search-filters::part(filter):focus{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:-webkit-min-content;grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@media (max-width: 640px) and (min-width: 415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width: 415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.results-page{grid-template-columns:unset;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
+
+let VviinnVpsWidget = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** When true modal window with widget will be shown */
+    this.active = false;
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.slidePosition = 0;
+    this.width = 0;
+    this.wrongImageFormat = false;
+  }
+  activeWatcher(value) {
+    if (value) {
+      this.overflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    else {
+      document.body.style.overflow = this.overflow;
+    }
+  }
+  componentWillLoad() {
+    customizedSlots.slotChangeListener(this, this.el);
+  }
+  connectedCallback() {
+    imageSearch_store.state$1.apiPath = this.apiPath;
+    imageSearch_store.state$1.currencySign = this.currencySign;
+    imageSearch_store.state$1.locale = this.locale;
+    imageSearch_store.imageSearchState.token = this.token;
+  }
+  handleImageSelection() {
+    this.slidePosition = 1;
+    const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
+    const overlay = root.shadowRoot.querySelector("vviinn-overlay");
+    const modal = overlay.querySelector("vviinn-modal");
+    const modalBody = modal.shadowRoot.querySelector(".body");
+    modalBody.scrollTop = 0;
+  }
+  resetState() {
+    this.resetScroll("onboarding-block");
+    this.slidePosition = 0;
+    imageSearch_store.imageSearchState.image = imageSearch_store.Option.none;
+    imageSearch_store.imageSearchState.imageUrl = imageSearch_store.Option.none;
+    imageSearch_store.imageSearchState.imageBounds = imageSearch_store.Option.none;
+    imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.none;
+    imageSearch_store.imageSearchState.results = [];
+    imageSearch_store.imageSearchState.filters = [];
+    imageSearch_store.imageSearchState.detectedObjects = [];
+    imageSearch_store.imageSearchState.activeIonLink = undefined;
+    imageSearch_store.imageSearchState.rectangleSearchForm = undefined;
+    this.resetScroll("results-block");
+  }
+  haveErrors() {
+    return this.wrongImageFormat || imageSearch_store.imageSearchState.serverError;
+  }
+  resetScroll(elementId, behavior = "auto") {
+    const element = this.el.shadowRoot.getElementById(elementId);
+    element.scroll({ top: 0, left: 0, behavior });
+  }
+  handleModalClose() {
+    this.active = false;
+    this.resetState();
+    const elementsToReset = ["onboarding-block", "results-block"];
+    elementsToReset.forEach((name) => this.resetScroll(name));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, onSecondaryActionClicked: () => this.resetState(), onModalClosed: () => this.handleModalClose(), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
+        error: this.haveErrors(),
+        "start-page_block": true,
+      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, onActionClick: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }), index.h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", null), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: { "nothing-found": true, hidden: imageSearch_store.imageSearchState.results.length > 0 } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
+        hidden: imageSearch_store.imageSearchState.results.length <= 0,
+        products: true,
+      } }, imageSearch_store.imageSearchState.results.map((p) => {
+      var _a;
+      return (index.h("vviinn-product-card", { hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card" }));
+    }))))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "active": ["activeWatcher"]
+  }; }
+};
+VviinnVpsWidget.style = vviinnVpsWidgetCss;
+
+exports.vviinn_vps_widget = VviinnVpsWidget;

package/dist/cjs/vviinn-widgets.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-7adce49f.js');
-const appGlobals = require('./app-globals-de6924b5.js');
+const index = require('./index-141137b2.js');
+const appGlobals = require('./app-globals-d0251be8.js');
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -17,5 +17,5 @@ const patchBrowser = () => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["vviinn-carousel.cjs",[[4,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["cropper-handler_28.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]],[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}],[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[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"],"imageLoaded":[32]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"]]],["vviinn-vpr-widget.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"columns":[2],"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],"apiPath":[1,"api-path"],"showScroll":[4,"show-scroll"],"recommendations":[32],"loaded":[32]}]]]], options);
+  return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_5.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"]}],[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]],[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],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[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"],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -27,6 +27,8 @@
     "./components/vviinn-slider/vviinn-slider.js",
     "./components/vviinn-slider/vviinn-slide/vviinn-slide.js",
     "./components/vviinn-teaser/vviinn-teaser.js",
+    "./components/vviinn-vpr-button/vviinn-vpr-button.js",
+    "./components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js",
     "./components/vviinn-vpr-widget/vviinn-vpr-vidget.js",
     "./components/vviinn-vps-button/vviinn-vps-button.js",
     "./components/vviinn-vps-widget/vviinn-vps-widget.js"

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

@@ -35,22 +35,21 @@
   height: 10px;
   background: #E0E0E0;
   border-radius: 50%;
+  cursor: pointer;
 }
 
 .bullet.active {
   background: #161616;
 }
 
-:host(:not(.show-scrollbar)) .content {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    overflow: hidden;
+.content:not(.show-scrollbar),
+.content.grid {
+  scrollbar-color: #fff0 #fff0;
 }
 
-@media(max-width: 480px) {
-  :host(.modern) button {
-    display: none;
-  }
+.content:not(.show-scrollbar)::-webkit-scrollbar,
+.content.grid::-webkit-scrollbar {
+  opacity: 0;
 }
 
 .content {
@@ -62,6 +61,7 @@
   overflow-y: hidden;
   overflow-x: auto;
   flex-grow: 1;
+  padding-bottom: 16px;
 }
 
 .content.left > * {
@@ -72,11 +72,11 @@
   scroll-snap-align: end;
 }
 
-:host(.modern) button {
+:host(.continuity) button {
   border-radius: 2px;
 }
 
-:host(.classic) button {
+:host(.grid) button {
   border-radius: 50%;
 }
 
@@ -112,15 +112,9 @@ button.prev svg {
 
 .items-group {
   display: grid;
-  min-width: 100%;
-  grid-template-columns: repeat(auto-fit, minmax(var(--vviinn-carousel-image-width, --vviinn-carousel-image-width-system), 1fr));
-  align-items: center;
-  justify-items: center;
   grid-gap: 16px;
-}
-
-.items-group.incomplete {
-  grid-template-columns: repeat(auto-fit, minmax(var(--vviinn-carousel-image-width, --vviinn-carousel-image-width-system), 1fr));
+  grid-template-columns: repeat(var(--vviinn-carousel-columns-internal), 1fr);
+  min-width: 100%;
 }
 
 vviinn-product-card::part(price-container) {
@@ -132,3 +126,13 @@ vviinn-product-card::part(price-container) {
 :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);
+  }
+}

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

@@ -5,16 +5,15 @@ 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 CONTENT_GROUP_CSS_CLASS = "items-group";
-const INCOMPLETE_GROUP_CSS_CLASS = "incomplete";
 export class VviinnCarousel {
   constructor() {
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
-    this.mode = "modern";
+    this.mode = "continuity";
     this.imageWidth = 140;
     this.showScroll = true;
-    this.content = [];
+    this.recommendations = [];
     this.columns = 0;
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
@@ -25,19 +24,22 @@ export class VviinnCarousel {
   disconnectedCallback() {
     this.resizeObserver.disconnect();
   }
-  componentDidRender() {
+  componentDidLoad() {
     this.setWidth();
     this.processScrollbarWidth();
     this.columns = this.getColumnsNumber();
-    const slot = this.el.querySelector("#slot");
+    const slot = this.el.querySelector(".content");
     this.mutationObserver.observe(slot, { subtree: true, childList: true });
+    this.resizeObserver.observe(this.getHostParent());
   }
   getItemWidthFromDocument() {
     return parseInt(getComputedStyle(document.body).getPropertyValue(CAROUSEL_IMAGE_WIDTH_CSS_VAR));
   }
   setItemWidth() {
     const widthInDocument = this.getItemWidthFromDocument();
-    const itemWidth = isNaN(widthInDocument) ? this.imageWidth : widthInDocument;
+    const itemWidth = isNaN(widthInDocument)
+      ? this.imageWidth
+      : widthInDocument;
     this.el.style.setProperty(CAROUSEL_IMAGE_WIDTH_CSS_VAR, `${itemWidth}px`);
   }
   getContentClassMap() {
@@ -45,6 +47,7 @@ export class VviinnCarousel {
       content: true,
       [this.moveDirection]: true,
       [this.mode]: true,
+      "show-scrollbar": this.showScroll
     };
   }
   handleResize() {
@@ -53,7 +56,6 @@ export class VviinnCarousel {
     this.setItemWidth();
     const newColumns = this.getColumnsNumber();
     if (newColumns !== this.columns) {
-      this.renderContent();
       this.columns = newColumns;
     }
   }
@@ -62,8 +64,12 @@ export class VviinnCarousel {
     const sum = contentWidths.reduce((acc, val) => acc + val, 0);
     return sum / contentWidths.length;
   }
+  getHostParent() {
+    const parent = this.el.parentNode;
+    return parent.host.parentElement;
+  }
   setWidth() {
-    const parent = this.el.offsetParent;
+    const parent = this.getHostParent();
     if (!parent)
       return;
     const parentStyles = getComputedStyle(parent);
@@ -73,48 +79,13 @@ export class VviinnCarousel {
         parseInt(parentStyles["padding-left"]));
     this.el.style.setProperty(CAROUSEL_WIDTH_CSS_VAR, `${width}px`);
   }
-  cloneSlottedContent() {
-    const slot = this.el.querySelector("#slot");
-    const content = Array.from(slot.children);
-    if (content.length > 0) {
-      this.content = content;
-      this.renderContent();
-      this.setWidth();
-      this.resizeObserver.observe(this.el.offsetParent);
-      this.mutationObserver.disconnect();
-    }
+  getParent() {
+    const parentNode = this.el.parentNode;
+    const host = parentNode.host;
+    return host.parentElement;
   }
-  renderContent() {
-    const c = this.mode === "classic"
-      ? chunksOf(this.getColumnsNumber())(this.content)
-      : this.content.reduce((fragment, element) => {
-        fragment.append(element);
-        return fragment;
-      }, new DocumentFragment());
-    this.mode === "classic" ? this.renderGroup(c) : this.renderLine(c);
-  }
-  renderGroup(content) {
-    const columnsNumber = this.getColumnsNumber();
-    const groups = content.map((el) => {
-      const container = document.createElement("div");
-      const groupClassNames = el.length < columnsNumber
-        ? [CONTENT_GROUP_CSS_CLASS, INCOMPLETE_GROUP_CSS_CLASS]
-        : [CONTENT_GROUP_CSS_CLASS];
-      container.classList.add(...groupClassNames);
-      return el.reduce((acc, el) => {
-        acc.append(el);
-        return acc;
-      }, container);
-    });
-    const combinedElements = groups.reduce((fragment, element) => {
-      fragment.append(element);
-      return fragment;
-    }, new DocumentFragment());
-    this.appendToContent(combinedElements);
-    this.contentGroups = this.getContentGroups();
-  }
-  renderLine(item) {
-    this.appendToContent(item);
+  cloneSlottedContent() {
+    this.setWidth();
   }
   getActiveGroupIndex() {
     var _a, _b;
@@ -143,11 +114,6 @@ export class VviinnCarousel {
   getContentGroups() {
     return Array.from(this.el.querySelectorAll(`.${CONTENT_GROUP_CSS_CLASS}`));
   }
-  appendToContent(content) {
-    const contentNode = this.getContentNode();
-    contentNode.innerHTML = "";
-    contentNode.append(content);
-  }
   showNext() {
     this.moveDirection = "right";
     const contentContainer = this.getContentNode();
@@ -188,10 +154,10 @@ export class VviinnCarousel {
     this.activeContentGroup = this.getActiveGroupIndex();
   }
   showBullets() {
-    return this.mode === "classic" && this.showScroll;
+    return this.mode === "grid" && this.showScroll;
   }
   showScrollbar() {
-    return this.mode === "modern" && this.showScroll;
+    return this.mode === "continuity" && this.showScroll;
   }
   getClassMap() {
     return {
@@ -199,22 +165,45 @@ export class VviinnCarousel {
       "show-scrollbar": this.showScrollbar(),
     };
   }
+  renderRecommendation(recommendation) {
+    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, 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.mode === "grid", dimmedBackground: this.mode === "continuity" }));
+  }
+  renderRecommendationGroup(elements) {
+    return h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
+  }
+  renderRecommendationGroups(elements) {
+    return elements.map((el) => this.renderRecommendationGroup(el));
+  }
+  renderRecommendations() {
+    return this.mode === "grid"
+      ? this.renderGrid()
+      : this.renderRecommendationsElements();
+  }
+  renderRecommendationsElements() {
+    return this.recommendations.map((r) => this.renderRecommendation(r));
+  }
+  renderGrid() {
+    const recommendations = this.renderRecommendationsElements();
+    const grouppedContent = chunksOf(this.getColumnsNumber())(recommendations);
+    return this.renderRecommendationGroups(grouppedContent);
+  }
+  renderBullets() {
+    const numberOfBullets = Math.ceil(this.recommendations.length / this.getColumnsNumber());
+    const bulletsArray = Array.from(Array(numberOfBullets).keys());
+    return bulletsArray.map((index) => (h("div", { class: {
+        bullet: true,
+        active: this.activeContentGroup === index,
+      }, onClick: () => this.scroll(index) })));
+  }
   render() {
     return (h(Host, { class: this.getClassMap() },
-      h("div", { class: "body" },
+      h("div", { class: Object.assign({ body: true }, this.getClassMap()) },
         h("button", { class: "prev", onClick: () => this.showPrev() },
           h(ChevronIcon, null)),
-        h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }),
+        h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()),
         h("button", { class: "next", onClick: () => this.showNext() },
           h(ChevronIcon, null))),
-      this.showBullets() ? (h("div", { class: "bullets" }, this.contentGroups
-        .map((_, i) => i)
-        .map((i) => (h("div", { class: {
-          bullet: true,
-          active: this.activeContentGroup === i,
-        }, onClick: () => this.scroll(i) }))))) : (""),
-      h("div", { id: "slot" },
-        h("slot", null))));
+      this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
   }
   static get is() { return "vviinn-carousel"; }
   static get originalStyleUrls() { return {
@@ -229,7 +218,7 @@ export class VviinnCarousel {
       "mutable": false,
       "complexType": {
         "original": "CarouselMode",
-        "resolved": "\"classic\" | \"modern\"",
+        "resolved": "\"continuity\" | \"grid\"",
         "references": {
           "CarouselMode": {
             "location": "local"
@@ -244,7 +233,7 @@ export class VviinnCarousel {
       },
       "attribute": "mode",
       "reflect": false,
-      "defaultValue": "\"modern\""
+      "defaultValue": "\"continuity\""
     },
     "imageWidth": {
       "type": "number",
@@ -281,6 +270,27 @@ export class VviinnCarousel {
       "attribute": "show-scroll",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "recommendations": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Recommendation[]",
+        "resolved": "{ groupId?: string; productId?: string; title?: string; deeplink?: string; brand?: string; productType?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }[]",
+        "references": {
+          "Recommendation": {
+            "location": "import",
+            "path": "../../recommendation/recommendation"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vviinn-icons/index.js

@@ -24,3 +24,7 @@ export const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns
   h("path", { fill: "#fff", d: "M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z" })));
 export const ChevronIcon = () => (h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
+export const VisualSearchIcon = () => (h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
+export const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" })));

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

@@ -26,7 +26,7 @@ export const Price = (props) => {
     h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
   ]) : (h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
 };
-export const Image = (props) => (h("picture", null,
-  h("img", { loading: "lazy", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title })));
-export const ResponsiveImage = (props) => (h("picture", null,
-  h("img", { loading: "lazy", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title })));
+export const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
+export const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));

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

@@ -41,9 +41,6 @@
   -o-object-fit: contain;
      object-fit: contain;
   text-align: center;
-  max-width: -webkit-min-content;
-  max-width: -moz-min-content;
-  max-width: min-content;
   box-sizing: border-box;
 }
 
@@ -69,17 +66,19 @@ img.responsive {
   line-height: 24px;
   margin-bottom: 8px;
   overflow: hidden;
-  max-width: -webkit-min-content;
-  max-width: -moz-min-content;
-  max-width: min-content;
 }
 
 .deeplink {
   text-decoration: none;
 }
 
+.image-link {
+  display: contents;
+}
+
 picture {
   position: relative;
+  width: 100%;
 }
 
 :host(.dimmed) picture::before {