vviinn-widgets 2.4.1 → 2.4.2

package/dist/cjs/{app-globals-324e9cd0.js → app-globals-d999d944.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a821350a.js');
+const index = require('./index-e8cf5dc5.js');
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a821350a.js');
-const index$1 = require('./index-a00145c0.js');
-const index$2 = require('./index-6078b9e5.js');
-const customizedSlots = require('./customized-slots-703cd28d.js');
+const index = require('./index-e8cf5dc5.js');
+const index$1 = require('./index-c0d08aca.js');
+const index$2 = require('./index-53400160.js');
+const customizedSlots = require('./customized-slots-90e8e849.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}";
 
@@ -375,7 +375,7 @@ let VviinnExampleImages = class {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), index.h("div", { class: "images" }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), index.h("div", { class: "images" }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/{customized-slots-703cd28d.js → customized-slots-90e8e849.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a821350a.js');
+const index = require('./index-e8cf5dc5.js');
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/cjs/{index-6078b9e5.js → index-53400160.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a821350a.js');
+const index = require('./index-e8cf5dc5.js');
 
 const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));

package/dist/cjs/{index-a00145c0.js → index-c0d08aca.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a821350a.js');
+const index = require('./index-e8cf5dc5.js');
 
 // -------------------------------------------------------------------------------------
 /**

package/dist/cjs/{index-a821350a.js → index-e8cf5dc5.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.4.0","packageName":"vviinn-widgets","environment":"local"};
+const Env = /* vviinn-widgets */ {"packageVersion":"2.4.1","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;

package/dist/cjs/loader.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a821350a.js');
-const appGlobals = require('./app-globals-324e9cd0.js');
+const index = require('./index-e8cf5dc5.js');
+const appGlobals = require('./app-globals-d999d944.js');
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a821350a.js');
-const index$1 = require('./index-a00145c0.js');
-const index$2 = require('./index-6078b9e5.js');
+const index = require('./index-e8cf5dc5.js');
+const index$1 = require('./index-c0d08aca.js');
+const index$2 = require('./index-53400160.js');
 
 const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
 
@@ -173,8 +173,8 @@ let VviinnCarousel = class {
       "show-scrollbar": this.showScrollbar(),
     };
   }
-  renderRecommendation(recommendation) {
-    return (index.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" }));
+  renderRecommendation(recommendation, rank) {
+    return (index.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", index: rank }));
   }
   renderRecommendationGroup(elements) {
     return index.h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
@@ -188,7 +188,7 @@ let VviinnCarousel = class {
       : this.renderRecommendationsElements();
   }
   renderRecommendationsElements() {
-    return this.recommendations.map((r) => this.renderRecommendation(r));
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();

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

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

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a821350a.js');
-const index$1 = require('./index-6078b9e5.js');
+const index = require('./index-e8cf5dc5.js');
+const index$1 = require('./index-53400160.js');
 
 const vviinnVprButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#F4F4F4;outline:none}";
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a821350a.js');
-const index$1 = require('./index-6078b9e5.js');
-const customizedSlots = require('./customized-slots-703cd28d.js');
+const index = require('./index-e8cf5dc5.js');
+const index$1 = require('./index-53400160.js');
+const customizedSlots = require('./customized-slots-90e8e849.js');
 
 const vviinnVpsButtonCss = ":host{cursor:pointer}";
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-a821350a.js');
-const appGlobals = require('./app-globals-324e9cd0.js');
+const index = require('./index-e8cf5dc5.js');
+const appGlobals = require('./app-globals-d999d944.js');
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com

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

@@ -168,8 +168,8 @@ 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" }));
+  renderRecommendation(recommendation, rank) {
+    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", index: rank }));
   }
   renderRecommendationGroup(elements) {
     return h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
@@ -183,7 +183,7 @@ export class VviinnCarousel {
       : this.renderRecommendationsElements();
   }
   renderRecommendationsElements() {
-    return this.recommendations.map((r) => this.renderRecommendation(r));
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js

@@ -16,13 +16,13 @@ export class VviinnExampleImages {
         h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
       h("div", { class: "images" },
         h("slot", { name: "vviinn-example-images-1" },
-          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
         h("slot", { name: "vviinn-example-images-2" },
-          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
         h("slot", { name: "vviinn-example-images-3" },
-          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
         h("slot", { name: "vviinn-example-images-4" },
-          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
   }
   static get is() { return "vviinn-example-images"; }
   static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-02b550a1.js → app-globals-f91c6f94.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-b908268d.js';
+import { E as Env } from './index-d7147986.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b908268d.js';
-import { g as getCursorValue, p as pipe, O as Option, s as sequenceToOption, i as imageSearchState, a as pointDiffSemigroup, _ as _function, t as transform, m as move, f as fromMouseEvent, b as makeRectangularSearchRequest, c as fromAlt, d as foldValueObject, e as scaleWithSized, h as center, j as detectedObjectEq, k as toFile, l as processSelectedFile, E as Either, n as match, o as fromImage, q as dimensionsFromImage, r as scaleByLargestSide, S as Semigroup, u as state, N as NonEmptyArray, v as createProductViewVpsEvent, w as createSearchEvent, x as createFilterEvent, y as v4, z as createTrackingApi, A as createWidgetVpsEvent } from './index-26769494.js';
-import { C as CheckIcon, O as OnboardingCard1Icon, a as OnboardingCard2Icon, b as OnboardingCard3Icon, A as ArrowIcon } from './index-711602a5.js';
-import { s as slotChangeListener } from './customized-slots-472f6e69.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-d7147986.js';
+import { g as getCursorValue, p as pipe, O as Option, s as sequenceToOption, i as imageSearchState, a as pointDiffSemigroup, _ as _function, t as transform, m as move, f as fromMouseEvent, b as makeRectangularSearchRequest, c as fromAlt, d as foldValueObject, e as scaleWithSized, h as center, j as detectedObjectEq, k as toFile, l as processSelectedFile, E as Either, n as match, o as fromImage, q as dimensionsFromImage, r as scaleByLargestSide, S as Semigroup, u as state, N as NonEmptyArray, v as createProductViewVpsEvent, w as createSearchEvent, x as createFilterEvent, y as v4, z as createTrackingApi, A as createWidgetVpsEvent } from './index-840ec915.js';
+import { C as CheckIcon, O as OnboardingCard1Icon, a as OnboardingCard2Icon, b as OnboardingCard3Icon, A as ArrowIcon } from './index-00c7b7c2.js';
+import { s as slotChangeListener } from './customized-slots-7be7f3b8.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}";
 
@@ -371,7 +371,7 @@ let VviinnExampleImages = class {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/{customized-slots-472f6e69.js → customized-slots-7be7f3b8.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b908268d.js';
+import { h } from './index-d7147986.js';
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/esm/{index-711602a5.js → index-00c7b7c2.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b908268d.js';
+import { h } from './index-d7147986.js';
 
 const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));

package/dist/esm/{index-26769494.js → index-840ec915.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-b908268d.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-d7147986.js';
 
 // -------------------------------------------------------------------------------------
 /**

package/dist/esm/{index-b908268d.js → index-d7147986.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.4.0","packageName":"vviinn-widgets","environment":"local"};
+const Env = /* vviinn-widgets */ {"packageVersion":"2.4.1","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-b908268d.js';
-import { g as globalScripts } from './app-globals-02b550a1.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d7147986.js';
+import { g as globalScripts } from './app-globals-f91c6f94.js';
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b908268d.js';
-import { B as _Array, _ as _function, p as pipe, C as chainW, D as makeRequest, F as fromEither, G as getApiPath, H as createInitGetRequest, I as sequenceT, J as Apply, u as state, K as createProductViewVprEvent, y as v4, z as createTrackingApi, L as createWidgetVprEvent, T as TaskEither, E as Either, i as imageSearchState } from './index-26769494.js';
-import { e as ChevronIcon } from './index-711602a5.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d7147986.js';
+import { B as _Array, _ as _function, p as pipe, C as chainW, D as makeRequest, F as fromEither, G as getApiPath, H as createInitGetRequest, I as sequenceT, J as Apply, u as state, K as createProductViewVprEvent, y as v4, z as createTrackingApi, L as createWidgetVprEvent, T as TaskEither, E as Either, i as imageSearchState } from './index-840ec915.js';
+import { e as ChevronIcon } from './index-00c7b7c2.js';
 
 const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
 
@@ -169,8 +169,8 @@ let VviinnCarousel = class {
       "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" }));
+  renderRecommendation(recommendation, rank) {
+    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", index: rank }));
   }
   renderRecommendationGroup(elements) {
     return h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
@@ -184,7 +184,7 @@ let VviinnCarousel = class {
       : this.renderRecommendationsElements();
   }
   renderRecommendationsElements() {
-    return this.recommendations.map((r) => this.renderRecommendation(r));
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b908268d.js';
-import { d as CrossIcon } from './index-711602a5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d7147986.js';
+import { d as CrossIcon } from './index-00c7b7c2.js';
 
 const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:0;box-sizing:border-box;display:block;display:flex;height:100vh;left:0;position:fixed;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}header{position:relative;text-align:center;padding:32px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);padding:8px}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{-webkit-animation-name:slideOutFromBottom;animation-name:slideOutFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{-webkit-animation-name:slideInFromBottom;animation-name:slideInFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{-webkit-animation-name:slideOutFromRight;animation-name:slideOutFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.open) .sidebar{-webkit-animation-name:slideInFromRight;animation-name:slideInFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}vviinn-vpr-widget::part(title),vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(type){text-align:left}vviinn-vpr-widget::part(price-container){align-self:start}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@-webkit-keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-b908268d.js';
-import { V as VisualSearchIcon } from './index-711602a5.js';
+import { r as registerInstance, h, H as Host } from './index-d7147986.js';
+import { V as VisualSearchIcon } from './index-00c7b7c2.js';
 
 const vviinnVprButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#F4F4F4;outline:none}";
 

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b908268d.js';
-import { c as CameraIcon } from './index-711602a5.js';
-import { S as SlotSkeleton } from './customized-slots-472f6e69.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d7147986.js';
+import { c as CameraIcon } from './index-00c7b7c2.js';
+import { S as SlotSkeleton } from './customized-slots-7be7f3b8.js';
 
 const vviinnVpsButtonCss = ":host{cursor:pointer}";
 

package/dist/esm/vviinn-widgets.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-b908268d.js';
-import { g as globalScripts } from './app-globals-02b550a1.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d7147986.js';
+import { g as globalScripts } from './app-globals-f91c6f94.js';
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com

package/dist/vviinn-widgets/{p-4a7d9763.entry.js → p-07d8ba79.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,h as i,H as s,g as r}from"./p-ee679114.js";import{c as n}from"./p-13842a39.js";import{S as o}from"./p-e031c06c.js";let a=class{constructor(i){t(this,i),this.globalSlotsChanged=e(this,"globalSlotsChanged",7),this.currencySign="€",this.locale="de-DE",this.pressed=!1}handleModalClosed(){this.pressed=!1}componentDidLoad(){const t=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(t))}handleKeyDown(t){"Enter"!==t.code&&"Space"!==t.code||(this.pressed=!0)}handleClick(){this.pressed=!0}render(){return i(s,{tabindex:"0",role:"button",pressed:this.pressed,onClick:()=>this.handleClick(),onKeyDown:t=>this.handleKeyDown(t)},i("slot",null,i(n,null)),i(o,null),i("vviinn-vps-widget",{active:this.pressed,"currency-sign":"€",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 r(this)}};a.style=":host{cursor:pointer}";export{a as vviinn_vps_button}
+import{r as t,c as i,h as e,H as s,g as r}from"./p-dc2da207.js";import{c as n}from"./p-a66512b2.js";import{S as o}from"./p-7d5af04d.js";let a=class{constructor(e){t(this,e),this.globalSlotsChanged=i(this,"globalSlotsChanged",7),this.currencySign="€",this.locale="de-DE",this.pressed=!1}handleModalClosed(){this.pressed=!1}componentDidLoad(){const t=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(t))}handleKeyDown(t){"Enter"!==t.code&&"Space"!==t.code||(this.pressed=!0)}handleClick(){this.pressed=!0}render(){return e(s,{tabindex:"0",role:"button",pressed:this.pressed,onClick:()=>this.handleClick(),onKeyDown:t=>this.handleKeyDown(t)},e("slot",null,e(n,null)),e(o,null),e("vviinn-vps-widget",{active:this.pressed,"currency-sign":"€",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 r(this)}};a.style=":host{cursor:pointer}";export{a as vviinn_vps_button}