vviinn-widgets 2.17.9 → 2.18.3

package/dist/cjs/cropper-handler_27.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0bda22ec.js');
 const index$1 = require('./index-8e47383c.js');
 const index$2 = require('./index-5ce4918b.js');
-const customizedSlots = require('./customized-slots-6b38279f.js');
+const customizedSlots = require('./customized-slots-8a1a9aed.js');
 
 const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";
 
@@ -420,7 +420,7 @@ let VviinnImageSelector = class {
 };
 VviinnImageSelector.style = vviinnImageSelectorCss;
 
-const vviinnImageViewCss = ":host{display:grid;position:relative;justify-self:center}img{box-sizing:border-box;filter:brightness(60%);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:-1}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:18px;padding:4px 6px;pointer-events:none;position:absolute;right:18px;z-index:4}vviinn-preloader{--preloader-size:12px}";
+const vviinnImageViewCss = ":host{display:grid;position:relative;justify-self:center;direction:ltr}img{box-sizing:border-box;filter:brightness(60%);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:-1}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:18px;padding:4px 6px;pointer-events:none;position:absolute;right:18px;z-index:4}vviinn-preloader{--preloader-size:12px}";
 
 const getImageSizes = (i) => {
   const dimensions = index$1.dimensionsFromImage(i);
@@ -477,6 +477,9 @@ let VviinnModal = class {
     this.active = false;
     this.slider = false;
   }
+  componentWillLoad() {
+    customizedSlots.slotChangeListener(this, this.el);
+  }
   close() {
     this.active = false;
     setTimeout(() => {
@@ -489,8 +492,9 @@ let VviinnModal = class {
     this.slider = true;
   }
   render() {
-    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, index.h("button", { part: "secondary-action", onClick: () => this.secondaryActionClicked.emit() }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { class: "title", part: "title" }, "Bildsuche"), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, 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: "#333333" })))), index.h("div", { class: "body" }, index.h("slot", null))));
+    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, index.h("button", { part: "secondary-action", onClick: () => this.secondaryActionClicked.emit() }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { class: "title", part: "title" }, index.h("slot", { name: "vviinn-image-search-modal-title" }, "Bildsuche")), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, 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: "#333333" })))), index.h("div", { class: "body" }, index.h("slot", null))));
   }
+  get el() { return index.getElement(this); }
 };
 VviinnModal.style = vviinnModalCss;
 
@@ -845,15 +849,19 @@ let VviinnSlider = class {
     this.elementsCount = 0;
     this.internalPosition = 0;
     this.swipeStartPosition = index$1.Option.none;
+    this.isRTL = false;
     this.showBullets = true;
     this.position = 0;
     this.showArrows = false;
   }
   positionWatchHandler(newValue) {
     this.internalPosition = newValue;
-    this.el.style.setProperty("--position", `${newValue}`);
+    this.el.style.setProperty("--position", `${this.calculatePosition(newValue)}`);
     this.setActiveCssClassToSlide(newValue);
   }
+  componentWillLoad() {
+    this.isRTL = document.dir === "rtl";
+  }
   connectedCallback() {
     this.handleDomContentChanges();
   }
@@ -876,7 +884,7 @@ let VviinnSlider = class {
   renderBullets() {
     return this.showBullets ? (index.h("div", { class: "controls" }, index$1.NonEmptyArray.range(0, this.elementsCount - 1).map((i) => (index.h("div", { class: {
         bullet: true,
-        active: i == this.internalPosition % this.elementsCount,
+        active: i == Math.abs(this.internalPosition) % this.elementsCount,
       }, onClick: () => this.goToSlide(i) }))))) : null;
   }
   nextSlide() {
@@ -890,10 +898,14 @@ let VviinnSlider = class {
     this.renderSlidePosition();
   }
   renderSlidePosition() {
+    const position = this.internalPosition % this.elementsCount;
     requestAnimationFrame(() => {
-      this.el.style.setProperty("--position", `${this.internalPosition % this.elementsCount}`);
+      this.el.style.setProperty("--position", `${this.calculatePosition(position)}`);
     });
   }
+  calculatePosition(position) {
+    return this.isRTL ? position * -1 : position;
+  }
   handleKeyDown(event) {
     if (event.key !== "Space" && event.key !== "Enter")
       return;
@@ -929,8 +941,8 @@ let VviinnSlider = class {
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "items-wrapper" }, index.h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) }, index.h("slot", null))), this.showArrows
       ? [
-        index.h(Arrow, { kind: "prev", onClick: () => this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
-        index.h(Arrow, { kind: "next", onClick: () => this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
+        index.h(Arrow, { kind: "prev", onClick: () => this.isRTL ? this.nextSlide() : this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
+        index.h(Arrow, { kind: "next", onClick: () => this.isRTL ? this.prevSlide() : this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
       ]
       : null, this.renderBullets()));
   }
@@ -965,6 +977,7 @@ const notNan = (n) => !isNaN(n);
 let VviinnVpsWidget = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
     /** @internal */
     this.apiPath = "https://api.vviinn.com";
     /** When true modal window with widget will be shown */
@@ -973,6 +986,8 @@ let VviinnVpsWidget = class {
     this.currencySign = "€";
     /** Locale for currency formatting */
     this.locale = "de-DE";
+    /** set true when showing the widget in button */
+    this.showingInButton = false;
     this.slidePosition = 0;
     this.width = 0;
     this.wrongImageFormat = false;
@@ -984,6 +999,10 @@ let VviinnVpsWidget = class {
       }
     };
   }
+  componentDidLoad() {
+    const slots = this.el.querySelectorAll("[slot]");
+    this.globalSlotsChanged.emit(Array.from(slots));
+  }
   activeWatcher(value) {
     if (value) {
       this.overflow = document.body.style.overflow;
@@ -1126,7 +1145,7 @@ let VviinnVpsWidget = class {
       .then(this.setTrackingDeactivated);
   }
   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, example-images" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
+    return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, 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, example-images" }, 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: !index$1.imageSearchState.serverError }, onActionClick: () => (index$1.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), 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", { part: "example-images", onImageSelected: () => this.handleImageSelection("example"), 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" }, index$1.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {

package/dist/cjs/{customized-slots-6b38279f.js → customized-slots-8a1a9aed.js}

@@ -4,12 +4,12 @@ const index = require('./index-0bda22ec.js');
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",
-  "vviinn-onboarding-card-1-icon",
-  "vviinn-onboarding-card-1-text",
-  "vviinn-onboarding-card-2-icon",
-  "vviinn-onboarding-card-2-text",
-  "vviinn-onboarding-card-3-icon",
-  "vviinn-onboarding-card-3-text",
+  "onboarding-card-1-icon",
+  "onboarding-card-1-text",
+  "onboarding-card-2-icon",
+  "onboarding-card-2-text",
+  "onboarding-card-3-icon",
+  "onboarding-card-3-text",
   "vviinn-example-images-title",
   "vviinn-example-images-1",
   "vviinn-example-images-2",
@@ -17,7 +17,8 @@ const defaultSlotsNames = [
   "vviinn-example-images-4",
   "vviinn-teaser-text",
   "vviinn-image-upload-button-text",
-  "vviinn-privacy-badge-text"
+  "vviinn-privacy-badge-text",
+  "vviinn-image-search-modal-title",
 ];
 const renderNamedSlot = (name) => index.h("slot", { name: name });
 const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["cropper-handler_27.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]],[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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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"],"index":[2],"imageLoaded":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-carousel_2.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32],"trackingDeactivated":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"color":[1],"imageWidth":[2,"image-width"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"]}]]]], options);
+  return index.bootstrapLazy([["cropper-handler_27.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]],[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],"isRTL":[32]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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"],"index":[2],"imageLoaded":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-carousel_2.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32],"trackingDeactivated":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"apiPath":[1,"api-path"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"apiPath":[1,"api-path"]}]]]], options);
   });
 };
 

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

@@ -18,6 +18,7 @@ let VviinnCarousel = class {
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
+    this.isRTL = false;
     this.mode = "continuity";
     this.imageWidth = 140;
     this.showScroll = true;
@@ -26,6 +27,9 @@ let VviinnCarousel = class {
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
   }
+  componentWillLoad() {
+    this.isRTL = document.dir === "rtl";
+  }
   connectedCallback() {
     this.setItemWidth();
   }
@@ -105,7 +109,11 @@ let VviinnCarousel = class {
     const indexedPositions = groupsPositions
       .map((value, index) => [value, index])
       .filter((x) => x[0] >= 0);
-    return indexedPositions.length > 0 ? indexedPositions[0][1] : 0;
+    return indexedPositions.length > 0
+      ? this.isRTL
+        ? indexedPositions[indexedPositions.length - 1][1]
+        : indexedPositions[0][1]
+      : 0;
   }
   getContentNode() {
     return this.el.querySelector(".content");

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

@@ -18,6 +18,9 @@ let RecommendationsSidebar = class {
     /** comma-separated list of campaign-ids */
     this.campaigns = "";
     this.imageWidth = 300;
+    this.currencySign = "€";
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
     this.state = "idle";
   }
   bodyClickListener(event) {
@@ -45,7 +48,7 @@ let RecommendationsSidebar = class {
     return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
   }
   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, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color })))));
+    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, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, apiPath: this.apiPath })))));
   }
   renderSourceImage() {
     return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));

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

@@ -19,6 +19,9 @@ let VviinnVprButton = class {
     this.addStyle = true;
     this.mode = "continuity";
     this.imageWidth = 300;
+    this.currencySign = "€";
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
     this.sidebar = null;
     this.sidebarCloseListener = () => {
       document.body.removeChild(this.sidebar);
@@ -39,6 +42,8 @@ let VviinnVprButton = class {
     sidebar.color = this.color;
     sidebar.mode = this.position === "right" ? "grid" : this.mode;
     sidebar.imageWidth = this.imageWidth;
+    sidebar.currencySign = this.currencySign;
+    sidebar.apiPath = this.apiPath;
     this.sidebar = sidebar;
     sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
     document.body.append(this.sidebar);

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0bda22ec.js');
 const index$1 = require('./index-5ce4918b.js');
-const customizedSlots = require('./customized-slots-6b38279f.js');
+const customizedSlots = require('./customized-slots-8a1a9aed.js');
 
 const vviinnVpsButtonCss = ":host{display:block}";
 
@@ -36,7 +36,7 @@ let VviinnVpsButton = class {
     this.pressed = true;
   }
   render() {
-    return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) }, 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", { active: this.pressed, "currency-sign": "\u20AC", 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, example-images", campaignId: this.campaignId })));
+    return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) }, 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", { active: this.pressed, "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, example-images", campaignId: this.campaignId, showingInButton: true })));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["cropper-handler_27.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]],[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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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"],"index":[2],"imageLoaded":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-carousel_2.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32],"trackingDeactivated":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"color":[1],"imageWidth":[2,"image-width"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"]}]]]], options);
+  return index.bootstrapLazy([["cropper-handler_27.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]],[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],"isRTL":[32]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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"],"index":[2],"imageLoaded":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-carousel_2.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32],"trackingDeactivated":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"apiPath":[1,"api-path"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"apiPath":[1,"api-path"]}]]]], options);
 });

package/dist/collection/components/customized-slots.js

@@ -1,12 +1,12 @@
 import { h } from "@stencil/core";
 const defaultSlotsNames = [
   "vviinn-onboarding-title",
-  "vviinn-onboarding-card-1-icon",
-  "vviinn-onboarding-card-1-text",
-  "vviinn-onboarding-card-2-icon",
-  "vviinn-onboarding-card-2-text",
-  "vviinn-onboarding-card-3-icon",
-  "vviinn-onboarding-card-3-text",
+  "onboarding-card-1-icon",
+  "onboarding-card-1-text",
+  "onboarding-card-2-icon",
+  "onboarding-card-2-text",
+  "onboarding-card-3-icon",
+  "onboarding-card-3-text",
   "vviinn-example-images-title",
   "vviinn-example-images-1",
   "vviinn-example-images-2",
@@ -14,7 +14,8 @@ const defaultSlotsNames = [
   "vviinn-example-images-4",
   "vviinn-teaser-text",
   "vviinn-image-upload-button-text",
-  "vviinn-privacy-badge-text"
+  "vviinn-privacy-badge-text",
+  "vviinn-image-search-modal-title",
 ];
 const renderNamedSlot = (name) => h("slot", { name: name });
 export const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);

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

@@ -13,6 +13,7 @@ export class VviinnCarousel {
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
+    this.isRTL = false;
     this.mode = "continuity";
     this.imageWidth = 140;
     this.showScroll = true;
@@ -21,6 +22,9 @@ export class VviinnCarousel {
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
   }
+  componentWillLoad() {
+    this.isRTL = document.dir === "rtl";
+  }
   connectedCallback() {
     this.setItemWidth();
   }
@@ -100,7 +104,11 @@ export class VviinnCarousel {
     const indexedPositions = groupsPositions
       .map((value, index) => [value, index])
       .filter((x) => x[0] >= 0);
-    return indexedPositions.length > 0 ? indexedPositions[0][1] : 0;
+    return indexedPositions.length > 0
+      ? this.isRTL
+        ? indexedPositions[indexedPositions.length - 1][1]
+        : indexedPositions[0][1]
+      : 0;
   }
   getContentNode() {
     return this.el.querySelector(".content");
@@ -302,7 +310,8 @@ export class VviinnCarousel {
   static get states() { return {
     "moveDirection": {},
     "contentGroups": {},
-    "activeContentGroup": {}
+    "activeContentGroup": {},
+    "isRTL": {}
   }; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-image-view/vviinn-image-view.css

@@ -2,6 +2,7 @@
   display: grid;
   position: relative;
   justify-self: center;
+  direction: ltr;
 }
 
 img {
@@ -16,16 +17,16 @@ img {
 }
 
 .image-preloader {
-    background: rgba(0, 0, 0, 0.25);
-    border-radius: 4px;
-    bottom: 18px;
-    padding: 4px 6px;
-    pointer-events: none;
-    position: absolute;
-    right: 18px;
-    z-index: 4;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  bottom: 18px;
+  padding: 4px 6px;
+  pointer-events: none;
+  position: absolute;
+  right: 18px;
+  z-index: 4;
 }
 
 vviinn-preloader {
-    --preloader-size: 12px;
+  --preloader-size: 12px;
 }

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

@@ -1,9 +1,13 @@
-import { Component, Host, h, State, Event, Prop } from "@stencil/core";
+import { Component, Host, h, State, Event, Prop, Element, } from "@stencil/core";
+import { slotChangeListener } from "../customized-slots";
 export class VviinnModal {
   constructor() {
     this.active = false;
     this.slider = false;
   }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
   close() {
     this.active = false;
     setTimeout(() => {
@@ -22,7 +26,8 @@ export class VviinnModal {
           h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
             h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))),
-        h("div", { class: "title", part: "title" }, "Bildsuche"),
+        h("div", { class: "title", part: "title" },
+          h("slot", { name: "vviinn-image-search-modal-title" }, "Bildsuche")),
         h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" },
           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: "#333333" })))),
@@ -95,4 +100,5 @@ export class VviinnModal {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-1/vviinn-onboarding-card-1.js

@@ -1,6 +1,6 @@
-import { Component, Host, h, Element } from '@stencil/core';
-import { slotChangeListener } from '../../../customized-slots';
-import { OnboardingCard1Icon } from '../../../vviinn-icons';
+import { Component, Host, h, Element } from "@stencil/core";
+import { slotChangeListener } from "../../../customized-slots";
+import { OnboardingCard1Icon } from "../../../vviinn-icons";
 export class VviinnOnboardingCard1 {
   componentWillLoad() {
     slotChangeListener(this, this.el);

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-2/vviinn-onboarding-card-2.js

@@ -1,6 +1,6 @@
-import { Component, Host, h, Element } from '@stencil/core';
-import { OnboardingCard2Icon } from '../../../vviinn-icons';
-import { slotChangeListener } from '../../../customized-slots';
+import { Component, Host, h, Element } from "@stencil/core";
+import { OnboardingCard2Icon } from "../../../vviinn-icons";
+import { slotChangeListener } from "../../../customized-slots";
 export class VviinnOnboardingCard2 {
   componentWillLoad() {
     slotChangeListener(this, this.el);

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-3/vviinn-onboarding-card-3.js

@@ -1,6 +1,6 @@
-import { Component, Host, h, Element } from '@stencil/core';
-import { OnboardingCard3Icon } from '../../../vviinn-icons';
-import { slotChangeListener } from '../../../customized-slots';
+import { Component, Host, h, Element } from "@stencil/core";
+import { OnboardingCard3Icon } from "../../../vviinn-icons";
+import { slotChangeListener } from "../../../customized-slots";
 export class VviinnOnboardingCard3 {
   componentWillLoad() {
     slotChangeListener(this, this.el);

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

@@ -10,15 +10,19 @@ export class VviinnSlider {
     this.elementsCount = 0;
     this.internalPosition = 0;
     this.swipeStartPosition = O.none;
+    this.isRTL = false;
     this.showBullets = true;
     this.position = 0;
     this.showArrows = false;
   }
   positionWatchHandler(newValue) {
     this.internalPosition = newValue;
-    this.el.style.setProperty("--position", `${newValue}`);
+    this.el.style.setProperty("--position", `${this.calculatePosition(newValue)}`);
     this.setActiveCssClassToSlide(newValue);
   }
+  componentWillLoad() {
+    this.isRTL = document.dir === "rtl";
+  }
   connectedCallback() {
     this.handleDomContentChanges();
   }
@@ -41,7 +45,7 @@ export class VviinnSlider {
   renderBullets() {
     return this.showBullets ? (h("div", { class: "controls" }, range(0, this.elementsCount - 1).map((i) => (h("div", { class: {
         bullet: true,
-        active: i == this.internalPosition % this.elementsCount,
+        active: i == Math.abs(this.internalPosition) % this.elementsCount,
       }, onClick: () => this.goToSlide(i) }))))) : null;
   }
   nextSlide() {
@@ -55,10 +59,14 @@ export class VviinnSlider {
     this.renderSlidePosition();
   }
   renderSlidePosition() {
+    const position = this.internalPosition % this.elementsCount;
     requestAnimationFrame(() => {
-      this.el.style.setProperty("--position", `${this.internalPosition % this.elementsCount}`);
+      this.el.style.setProperty("--position", `${this.calculatePosition(position)}`);
     });
   }
+  calculatePosition(position) {
+    return this.isRTL ? position * -1 : position;
+  }
   handleKeyDown(event) {
     if (event.key !== "Space" && event.key !== "Enter")
       return;
@@ -98,8 +106,8 @@ export class VviinnSlider {
           h("slot", null))),
       this.showArrows
         ? [
-          h(Arrow, { kind: "prev", onClick: () => this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
-          h(Arrow, { kind: "next", onClick: () => this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
+          h(Arrow, { kind: "prev", onClick: () => this.isRTL ? this.nextSlide() : this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
+          h(Arrow, { kind: "next", onClick: () => this.isRTL ? this.prevSlide() : this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
         ]
         : null,
       this.renderBullets()));
@@ -171,7 +179,8 @@ export class VviinnSlider {
   static get states() { return {
     "elementsCount": {},
     "internalPosition": {},
-    "swipeStartPosition": {}
+    "swipeStartPosition": {},
+    "isRTL": {}
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{

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

@@ -9,6 +9,9 @@ export class RecommendationsSidebar {
     /** comma-separated list of campaign-ids */
     this.campaigns = "";
     this.imageWidth = 300;
+    this.currencySign = "€";
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
     this.state = "idle";
   }
   bodyClickListener(event) {
@@ -44,7 +47,7 @@ export class RecommendationsSidebar {
           h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") },
             h(CrossIcon, null))),
         h("main", { part: "sidebar-content" },
-          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, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color })))));
+          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, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, apiPath: this.apiPath })))));
   }
   renderSourceImage() {
     return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
@@ -248,6 +251,45 @@ export class RecommendationsSidebar {
       "attribute": "image-width",
       "reflect": false,
       "defaultValue": "300"
+    },
+    "currencySign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency-sign",
+      "reflect": false,
+      "defaultValue": "\"\u20AC\""
+    },
+    "apiPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "api-path",
+      "reflect": false,
+      "defaultValue": "\"https://api.vviinn.com\""
     }
   }; }
   static get states() { return {