vviinn-widgets 2.0.0 → 2.2.1

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-3e85e294.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) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("slot", { name: "action" })));
+  }
+};
+VviinnError.style = vviinnErrorCss;
+
+export { VviinnError as vviinn_error };

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

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from './index-3e85e294.js';
+import { i as imageSearchState } from './imageSearch.store-4ca31230.js';
+import './Handler-639a4cb3.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) {
+    registerInstance(this, hostRef);
+  }
+  isActive() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      } }));
+  }
+};
+VviinnPreloader.style = vviinnPreloaderCss;
+
+export { VviinnPreloader as vviinn_preloader };

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

@@ -0,0 +1,39 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3e85e294.js';
+import { b as CameraIcon } from './index-017f18de.js';
+import { S as SlotSkeleton } from './customized-slots-a952fb80.js';
+
+const vviinnVpsButtonCss = "";
+
+let VviinnVpsButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlotsChanged = 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 (h(Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", null, h(CameraIcon, null)), h(SlotSkeleton, null), 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 getElement(this); }
+};
+VviinnVpsButton.style = vviinnVpsButtonCss;
+
+export { VviinnVpsButton as vviinn_vps_button };

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

@@ -0,0 +1,93 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3e85e294.js';
+import { e as state, i as imageSearchState, O as Option } from './imageSearch.store-4ca31230.js';
+import { s as slotChangeListener } from './customized-slots-a952fb80.js';
+import './Handler-639a4cb3.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) {
+    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() {
+    slotChangeListener(this, this.el);
+  }
+  connectedCallback() {
+    state.apiPath = this.apiPath;
+    state.currencySign = this.currencySign;
+    state.locale = this.locale;
+    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;
+    imageSearchState.image = Option.none;
+    imageSearchState.imageUrl = Option.none;
+    imageSearchState.imageBounds = Option.none;
+    imageSearchState.searchArea = Option.none;
+    imageSearchState.results = [];
+    imageSearchState.filters = [];
+    imageSearchState.detectedObjects = [];
+    imageSearchState.activeIonLink = undefined;
+    imageSearchState.rectangleSearchForm = undefined;
+    this.resetScroll("results-block");
+  }
+  haveErrors() {
+    return this.wrongImageFormat || 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 (h(Host, null, 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" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
+        error: this.haveErrors(),
+        "start-page_block": true,
+      } }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, onActionClick: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), 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" }), 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" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", null), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: { "nothing-found": true, hidden: imageSearchState.results.length > 0 } }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
+        hidden: imageSearchState.results.length <= 0,
+        products: true,
+      } }, imageSearchState.results.map((p) => {
+      var _a;
+      return (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 getElement(this); }
+  static get watchers() { return {
+    "active": ["activeWatcher"]
+  }; }
+};
+VviinnVpsWidget.style = vviinnVpsWidgetCss;
+
+export { VviinnVpsWidget as vviinn_vps_widget };

package/dist/esm/vviinn-widgets.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0ccfcee5.js';
-import { g as globalScripts } from './app-globals-0a626970.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3e85e294.js';
+import { g as globalScripts } from './app-globals-b6113170.js';
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["vviinn-carousel",[[4,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["cropper-handler_28",[[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",[[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 bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_5",[[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",[[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",[[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",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
 });

package/dist/types/campaign/Campaign.d.ts

@@ -1,4 +1,4 @@
-export declare type CampaignName = "VPR" | "VSC";
+export declare type CampaignName = "VPR" | "VCS";
 export interface VPR {
   readonly _tag: "VPR";
 }

package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts

@@ -1,5 +1,6 @@
+import { Recommendation } from "../../recommendation/recommendation";
 declare type MoveDirection = "left" | "right";
-export declare type CarouselMode = "classic" | "modern";
+export declare type CarouselMode = "grid" | "continuity";
 export declare class VviinnCarousel {
   el: HTMLElement;
   moveDirection: MoveDirection;
@@ -8,29 +9,27 @@ export declare class VviinnCarousel {
   mode: CarouselMode;
   imageWidth: number;
   showScroll: boolean;
-  private content;
+  recommendations: Recommendation[];
   private columns;
   private resizeObserver;
   private mutationObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  componentDidRender(): void;
+  componentDidLoad(): void;
   private getItemWidthFromDocument;
   private setItemWidth;
   private getContentClassMap;
   private handleResize;
   private calculateMoveStep;
+  private getHostParent;
   private setWidth;
+  getParent(): HTMLElement;
   private cloneSlottedContent;
-  private renderContent;
-  private renderGroup;
-  private renderLine;
   private getActiveGroupIndex;
   private getContentNode;
   private getContent;
   private getColumnsNumber;
   private getContentGroups;
-  private appendToContent;
   private showNext;
   private showPrev;
   private scroll;
@@ -38,6 +37,13 @@ export declare class VviinnCarousel {
   private showBullets;
   private showScrollbar;
   private getClassMap;
+  private renderRecommendation;
+  private renderRecommendationGroup;
+  private renderRecommendationGroups;
+  private renderRecommendations;
+  private renderRecommendationsElements;
+  private renderGrid;
+  private renderBullets;
   render(): any;
 }
 export {};

package/dist/types/components/vviinn-icons/index.d.ts

@@ -6,3 +6,5 @@ export declare const OnboardingCard3Icon: () => any;
 export declare const CheckIcon: () => any;
 export declare const LoaderIcon: () => any;
 export declare const ChevronIcon: () => any;
+export declare const VisualSearchIcon: () => any;
+export declare const CrossIcon: () => any;

package/dist/types/components/vviinn-product-card/render-helpers.d.ts

@@ -18,7 +18,8 @@ export declare type ImageProps = {
   height: number;
   title: string;
   src: string;
+  lazy: boolean;
 };
-export declare const Image: (props: ImageProps) => any;
-export declare const ResponsiveImage: (props: ImageProps) => any;
+export declare const Image: (props: ImageProps, onLoadEnd?: () => any) => any;
+export declare const ResponsiveImage: (props: ImageProps, onLoadEnd?: () => any) => any;
 export {};

package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts

@@ -37,10 +37,12 @@ export declare class VviinnProductCard {
   recommendationView: EventEmitter<string>;
   /** Event fires ones when user click on deeplink */
   recommendationClick: EventEmitter<string>;
+  productImageLoaded: EventEmitter<string>;
   private intersectionObserver;
   private intersectionCallback;
   componentDidLoad(): void;
   private getProduct;
   private renderImage;
+  private kek;
   render(): any;
 }

package/dist/types/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+declare type SidebarState = "idle" | "open" | "closed";
+declare type ClickEvent = Event & {
+  clientX: number;
+  clientY: number;
+};
+export declare class RecommendationsSidebar {
+  el: HTMLElement;
+  sidebarTitle: string;
+  token: string;
+  productId: string;
+  position: "bottom" | "right";
+  sourceImage: string | null;
+  widgetScrollbar: boolean;
+  state: SidebarState;
+  modalClosed: EventEmitter<void>;
+  bodyClickListener(event: ClickEvent): void;
+  private getClassMap;
+  private getSidebarRectangle;
+  render(): any;
+  private renderSourceImage;
+  private isSourceImageValid;
+  private handleAnimationEnd;
+}
+export {};

package/dist/types/components/vviinn-vpr-button/stories/kek.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  title: string;
+  component: string;
+  decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * @part button - clickable button element
+ */
+export declare class VviinnVprButton {
+  token: string;
+  productId: string;
+  position: "bottom" | "right";
+  sourceImage: string | null;
+  sidebarTitle: string;
+  modalScrollbar: boolean;
+  render(): any;
+  handleClick(): void;
+}

package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-vidget.d.ts

@@ -1,12 +1,25 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
-import { Interfaces } from "../../interfaces/recommendation";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { CampaignName } from "../../campaign/Campaign";
+import { CarouselMode } from "../vviinn-carousel/vviinn-carousel";
+import { Recommendation } from "../../recommendation/recommendation";
+/**
+ * @part product-card - product card itself
+ * @part title - title inside product card
+ * @part brand - brand inside product card
+ * @part currency - brand inside product card
+ * @part image - product card image
+ * @part image-link - anchor element around product image
+ * @part price-amount - span element around every prices
+ * @part price-container - block of prices
+ * @part price-outdated - block for outdated price. rendered when product contains sale price
+ * @part price-prefix - block rendered before each price element (for ex. "from")
+ * @part price-regular - block for price if no sale price presented
+ * @part price-sale -  block for sale price. rendered only if sale price presented
+ */
 export declare class VviinnVprWidget implements ComponentInterface {
   el: HTMLElement;
   /** Title for recommendations widget */
   blockTitle: string;
-  /** Number of columns for recommendations */
-  columns: number;
   /** Ratio of each recommended product image */
   imageRatio: number;
   /** Width of each recommended product image */
@@ -20,21 +33,36 @@ export declare class VviinnVprWidget implements ComponentInterface {
   /** prefix will shown before price */
   pricePrefix: string;
   /** Use slider or grid view */
-  mode: "classic" | "modern";
+  mode: CarouselMode;
   /** Campaign type */
   campaignType: CampaignName;
   /** Locale for currency formatting */
   locale: string;
   /** @internal */
   apiPath: string | undefined;
+  /** @internal */
+  useCarousel: boolean;
   showScroll: boolean;
-  recommendations: Interfaces["VisualProductSearch"][];
+  cssUrl: string | null;
+  recommendations: Recommendation[];
   loaded: boolean;
+  recommendationsLoaded: EventEmitter;
+  private productIds;
+  private productImageLoadedSubject;
   handleProductIdChange(): void;
+  handleCampaignTypeChange(): void;
+  handleApiPathChange(newPath: string): void;
+  lol({ detail }: CustomEvent<string>): void;
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
   private getRecommendations;
-  handleError(error: unknown): any;
-  handleRecommendationsSucces(data: any): void;
+  private handleError;
+  private handleRecommendationsSucces;
+  private isExternalCSS;
+  private renderExternalCSS;
   render(): any;
+  private renderRecommendation;
+  private useDimmedBackgroundInCard;
+  private renderResults;
+  private renderCarousel;
 }

package/dist/types/components.d.ts

@@ -8,7 +8,9 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Handler } from "./cropper/Handler";
 import { DetectedObject, SearchSessionFilter } from "./searchSession/searchSession";
 import { CarouselMode } from "./components/vviinn-carousel/vviinn-carousel";
+import { Recommendation } from "./recommendation/recommendation";
 import { ValueObject } from "./network/ion/ValueObject";
+import { CarouselMode as CarouselMode1 } from "./components/vviinn-carousel/vviinn-carousel";
 import { CampaignName } from "./campaign/Campaign";
 export namespace Components {
     interface CropperHandler {
@@ -26,6 +28,7 @@ export namespace Components {
     interface VviinnCarousel {
         "imageWidth": number;
         "mode": CarouselMode;
+        "recommendations": Recommendation[];
         "showScroll": boolean;
     }
     interface VviinnDetectedObject {
@@ -83,6 +86,14 @@ export namespace Components {
         "responsive": boolean;
         "salePrice": number | undefined;
     }
+    interface VviinnRecommendationsSidebar {
+        "position": "bottom" | "right";
+        "productId": string;
+        "sidebarTitle": string;
+        "sourceImage": string | null;
+        "token": string;
+        "widgetScrollbar": boolean;
+    }
     interface VviinnServerError {
     }
     interface VviinnSlide {
@@ -94,6 +105,14 @@ export namespace Components {
     }
     interface VviinnTeaser {
     }
+    interface VviinnVprButton {
+        "modalScrollbar": boolean;
+        "position": "bottom" | "right";
+        "productId": string;
+        "sidebarTitle": string;
+        "sourceImage": string | null;
+        "token": string;
+    }
     interface VviinnVprWidget {
         "apiPath": string | undefined;
         /**
@@ -104,10 +123,7 @@ export namespace Components {
           * Campaign type
          */
         "campaignType": CampaignName;
-        /**
-          * Number of columns for recommendations
-         */
-        "columns": number;
+        "cssUrl": string | null;
         /**
           * Currency sign will shown after price
          */
@@ -127,7 +143,7 @@ export namespace Components {
         /**
           * Use slider or grid view
          */
-        "mode": "classic" | "modern";
+        "mode": CarouselMode;
         /**
           * prefix will shown before price
          */
@@ -141,6 +157,7 @@ export namespace Components {
           * vviinn customer token
          */
         "token": string;
+        "useCarousel": boolean;
     }
     interface VviinnVpsButton {
         "apiPath": string | undefined;
@@ -312,6 +329,12 @@ declare global {
         prototype: HTMLVviinnProductCardElement;
         new (): HTMLVviinnProductCardElement;
     };
+    interface HTMLVviinnRecommendationsSidebarElement extends Components.VviinnRecommendationsSidebar, HTMLStencilElement {
+    }
+    var HTMLVviinnRecommendationsSidebarElement: {
+        prototype: HTMLVviinnRecommendationsSidebarElement;
+        new (): HTMLVviinnRecommendationsSidebarElement;
+    };
     interface HTMLVviinnServerErrorElement extends Components.VviinnServerError, HTMLStencilElement {
     }
     var HTMLVviinnServerErrorElement: {
@@ -336,6 +359,12 @@ declare global {
         prototype: HTMLVviinnTeaserElement;
         new (): HTMLVviinnTeaserElement;
     };
+    interface HTMLVviinnVprButtonElement extends Components.VviinnVprButton, HTMLStencilElement {
+    }
+    var HTMLVviinnVprButtonElement: {
+        prototype: HTMLVviinnVprButtonElement;
+        new (): HTMLVviinnVprButtonElement;
+    };
     interface HTMLVviinnVprWidgetElement extends Components.VviinnVprWidget, HTMLStencilElement {
     }
     var HTMLVviinnVprWidgetElement: {
@@ -383,10 +412,12 @@ declare global {
         "vviinn-preloader": HTMLVviinnPreloaderElement;
         "vviinn-privacy-badge": HTMLVviinnPrivacyBadgeElement;
         "vviinn-product-card": HTMLVviinnProductCardElement;
+        "vviinn-recommendations-sidebar": HTMLVviinnRecommendationsSidebarElement;
         "vviinn-server-error": HTMLVviinnServerErrorElement;
         "vviinn-slide": HTMLVviinnSlideElement;
         "vviinn-slider": HTMLVviinnSliderElement;
         "vviinn-teaser": HTMLVviinnTeaserElement;
+        "vviinn-vpr-button": HTMLVviinnVprButtonElement;
         "vviinn-vpr-widget": HTMLVviinnVprWidgetElement;
         "vviinn-vps-button": HTMLVviinnVpsButtonElement;
         "vviinn-vps-widget": HTMLVviinnVpsWidgetElement;
@@ -409,6 +440,7 @@ declare namespace LocalJSX {
     interface VviinnCarousel {
         "imageWidth"?: number;
         "mode"?: CarouselMode;
+        "recommendations"?: Recommendation[];
         "showScroll"?: boolean;
     }
     interface VviinnDetectedObject {
@@ -481,6 +513,7 @@ declare namespace LocalJSX {
         "imageRatio"?: number;
         "imageWidth"?: number;
         "locale"?: string | undefined;
+        "onProductImageLoaded"?: (event: CustomEvent<string>) => void;
         /**
           * Event fires ones when user click on deeplink
          */
@@ -501,6 +534,15 @@ declare namespace LocalJSX {
         "responsive"?: boolean;
         "salePrice"?: number | undefined;
     }
+    interface VviinnRecommendationsSidebar {
+        "onModalClosed"?: (event: CustomEvent<void>) => void;
+        "position"?: "bottom" | "right";
+        "productId"?: string;
+        "sidebarTitle"?: string;
+        "sourceImage"?: string | null;
+        "token"?: string;
+        "widgetScrollbar"?: boolean;
+    }
     interface VviinnServerError {
         "onActionClick"?: (event: CustomEvent<void>) => void;
     }
@@ -513,6 +555,14 @@ declare namespace LocalJSX {
     }
     interface VviinnTeaser {
     }
+    interface VviinnVprButton {
+        "modalScrollbar"?: boolean;
+        "position"?: "bottom" | "right";
+        "productId"?: string;
+        "sidebarTitle"?: string;
+        "sourceImage"?: string | null;
+        "token"?: string;
+    }
     interface VviinnVprWidget {
         /**
           * Title for recommendations widget
@@ -522,10 +572,7 @@ declare namespace LocalJSX {
           * Campaign type
          */
         "campaignType"?: CampaignName;
-        /**
-          * Number of columns for recommendations
-         */
-        "columns"?: number;
+        "cssUrl"?: string | null;
         /**
           * Currency sign will shown after price
          */
@@ -545,7 +592,8 @@ declare namespace LocalJSX {
         /**
           * Use slider or grid view
          */
-        "mode"?: "classic" | "modern";
+        "mode"?: CarouselMode;
+        "onRecommendationsLoaded"?: (event: CustomEvent<any>) => void;
         /**
           * prefix will shown before price
          */
@@ -618,10 +666,12 @@ declare namespace LocalJSX {
         "vviinn-preloader": VviinnPreloader;
         "vviinn-privacy-badge": VviinnPrivacyBadge;
         "vviinn-product-card": VviinnProductCard;
+        "vviinn-recommendations-sidebar": VviinnRecommendationsSidebar;
         "vviinn-server-error": VviinnServerError;
         "vviinn-slide": VviinnSlide;
         "vviinn-slider": VviinnSlider;
         "vviinn-teaser": VviinnTeaser;
+        "vviinn-vpr-button": VviinnVprButton;
         "vviinn-vpr-widget": VviinnVprWidget;
         "vviinn-vps-button": VviinnVpsButton;
         "vviinn-vps-widget": VviinnVpsWidget;
@@ -654,10 +704,12 @@ declare module "@stencil/core" {
             "vviinn-preloader": LocalJSX.VviinnPreloader & JSXBase.HTMLAttributes<HTMLVviinnPreloaderElement>;
             "vviinn-privacy-badge": LocalJSX.VviinnPrivacyBadge & JSXBase.HTMLAttributes<HTMLVviinnPrivacyBadgeElement>;
             "vviinn-product-card": LocalJSX.VviinnProductCard & JSXBase.HTMLAttributes<HTMLVviinnProductCardElement>;
+            "vviinn-recommendations-sidebar": LocalJSX.VviinnRecommendationsSidebar & JSXBase.HTMLAttributes<HTMLVviinnRecommendationsSidebarElement>;
             "vviinn-server-error": LocalJSX.VviinnServerError & JSXBase.HTMLAttributes<HTMLVviinnServerErrorElement>;
             "vviinn-slide": LocalJSX.VviinnSlide & JSXBase.HTMLAttributes<HTMLVviinnSlideElement>;
             "vviinn-slider": LocalJSX.VviinnSlider & JSXBase.HTMLAttributes<HTMLVviinnSliderElement>;
             "vviinn-teaser": LocalJSX.VviinnTeaser & JSXBase.HTMLAttributes<HTMLVviinnTeaserElement>;
+            "vviinn-vpr-button": LocalJSX.VviinnVprButton & JSXBase.HTMLAttributes<HTMLVviinnVprButtonElement>;
             "vviinn-vpr-widget": LocalJSX.VviinnVprWidget & JSXBase.HTMLAttributes<HTMLVviinnVprWidgetElement>;
             "vviinn-vps-button": LocalJSX.VviinnVpsButton & JSXBase.HTMLAttributes<HTMLVviinnVpsButtonElement>;
             "vviinn-vps-widget": LocalJSX.VviinnVpsWidget & JSXBase.HTMLAttributes<HTMLVviinnVpsWidgetElement>;

package/dist/vviinn-widgets/p-0ed1ef7e.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t,H as n}from"./p-db0be4cd.js";let r=class{constructor(t){e(this,t)}render(){return t(n,null,t("slot",{name:"icon"}),t("slot",{name:"title"}),t("slot",{name:"text"}),t("slot",{name:"action"}))}};r.style=":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}";export{r as vviinn_error}