vviinn-widgets 2.7.2 → 2.8.0

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/{esm/index-443468c7.js → components/index2.js}

@@ -1,4 +1,4 @@
-import { h } from './index-51f71d18.js';
+import { h } from '@stencil/core/internal/client';
 
 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" })));
@@ -26,4 +26,4 @@ const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "non
 const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
 
-export { ArrowIcon as A, CheckIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, OnboardingCard2Icon as a, OnboardingCard3Icon as b, CameraIcon as c, CrossIcon as d, ChevronIcon as e };
+export { ArrowIcon as A, CheckIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, ChevronIcon as a, OnboardingCard2Icon as b, OnboardingCard3Icon as c, CrossIcon as d, CameraIcon as e };

package/dist/components/index3.js

@@ -0,0 +1,130 @@
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify(rnds);
+}
+
+const createTrackingEvent = (widget) => (eventData) => {
+  return Object.assign(Object.assign({}, eventData), widget);
+};
+
+const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
+const PRODUCT_VIEW_EVENT_TYPE = "product_view_event";
+const FILTER_EVENT_EVENT_TYPE = "filter_event";
+const SEARCH_EVENT_EVENT_TYPE = "search_event";
+const WIDGET_EVENT_EVENT_TYPE = "widget_event";
+
+const filterEvent = {
+  widget: "VPS",
+  typ: FILTER_EVENT_EVENT_TYPE,
+};
+
+const vprProductView = {
+  widget: "VPR",
+  typ: PRODUCT_VIEW_EVENT_TYPE,
+};
+const vpsProductView = {
+  widget: "VPS",
+  typ: PRODUCT_VIEW_EVENT_TYPE,
+};
+const vprProductClick = {
+  widget: "VPR",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+const vpsProductClick = {
+  widget: "VPS",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+
+const searchEvent = {
+  widget: "VPS",
+  typ: SEARCH_EVENT_EVENT_TYPE,
+};
+
+const vprWidget = {
+  widget: "VPR",
+  typ: WIDGET_EVENT_EVENT_TYPE,
+};
+const vpsWidget = {
+  widget: "VPS",
+  typ: WIDGET_EVENT_EVENT_TYPE,
+};
+
+const createProductViewVprEvent = createTrackingEvent(vprProductView);
+const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
+const createProductClickVprEvent = createTrackingEvent(vprProductClick);
+const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
+const createWidgetVprEvent = createTrackingEvent(vprWidget);
+const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
+const createSearchEvent = createTrackingEvent(searchEvent);
+const createFilterEvent = createTrackingEvent(filterEvent);
+
+export { createProductClickVprEvent as a, createWidgetVprEvent as b, createProductViewVprEvent as c, createProductViewVpsEvent as d, createProductClickVpsEvent as e, createSearchEvent as f, createFilterEvent as g, createWidgetVpsEvent as h, v4 as v };

package/dist/components/recommendations-sidebar.js

@@ -0,0 +1,101 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as CrossIcon } from './index2.js';
+import { d as defineCustomElement$3 } from './vviinn-carousel2.js';
+import { d as defineCustomElement$2 } from './vviinn-product-card2.js';
+import { d as defineCustomElement$1 } from './vviinn-vpr-vidget.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 .1s ease-in-out;width:100vw}:host(.open){background:rgba(0,0,0,.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}header{padding:32px;position:relative;text-align:center}header.contains-source-img{grid-gap:12px;display:grid;justify-items:center}img.source-image{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.15);height:64px;padding:8px;width:64px}:host(.right) header{box-shadow:0 2px 6px rgba(0,0,0,.1)}main{padding:0 24px}:host(.right) main{overflow:auto}.sidebar{background:#fff;box-sizing:border-box;display:flex;flex-direction:column}:host(.bottom.closed) .sidebar,:host(.bottom.idle) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:f;animation-name:f}:host(.bottom.open) .sidebar{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:e;animation-name:e}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:h;animation-name:h}:host(.right.open) .sidebar{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:g;animation-name:g}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){grid-gap:24px;display:grid;grid-template-columns:repeat(2,1fr)}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{color:#000;font-size:28px;font-style:normal;font-weight:500;line-height:40px;text-align:center}vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(title),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 e{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes e{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes f{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes f{0%{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes g{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes g{0%{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes h{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes h{0%{transform:translateX(0)}to{transform:translateX(100%)}}";
+
+let RecommendationsSidebar = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.widgetScrollbar = false;
+    /** comma-separated list of campaign-ids */
+    this.campaigns = "";
+    this.state = "idle";
+  }
+  bodyClickListener(event) {
+    const { clientX, clientY } = event;
+    const sidebarRect = this.getSidebarRectangle();
+    if (!sidebarRect)
+      return;
+    const inLeftBound = clientX >= sidebarRect.left;
+    const inRightBound = clientX <= sidebarRect.right;
+    const inTopBound = clientY >= sidebarRect.top;
+    const inBottomBound = clientY <= sidebarRect.bottom;
+    const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
+    if (!inBound) {
+      this.state = "closed";
+    }
+  }
+  getClassMap() {
+    return {
+      [this.position]: true,
+      [this.state]: true,
+    };
+  }
+  getSidebarRectangle() {
+    var _a;
+    return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+  }
+  render() {
+    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, h("span", { class: "title", part: "title" }, this.sidebarTitle), 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-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns })))));
+  }
+  renderSourceImage() {
+    return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
+  }
+  isSourceImageValid() {
+    var _a;
+    return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleAnimationEnd({ animationName }) {
+    const isClosingAnimation = animationName.includes("slideOut");
+    if (!isClosingAnimation)
+      return;
+    this.modalClosed.emit();
+  }
+  get el() { return this; }
+  static get style() { return recommendationsSidebarCss; }
+};
+RecommendationsSidebar = /*@__PURE__*/ proxyCustomElement(RecommendationsSidebar, [1, "vviinn-recommendations-sidebar", {
+    "sidebarTitle": [1, "sidebar-title"],
+    "token": [1],
+    "productId": [1, "product-id"],
+    "position": [1],
+    "sourceImage": [1, "source-image"],
+    "widgetScrollbar": [4, "widget-scrollbar"],
+    "campaigns": [1],
+    "state": [32]
+  }, [[16, "click", "bodyClickListener"]]]);
+function defineCustomElement() {
+  const components = ["vviinn-recommendations-sidebar", "vviinn-carousel", "vviinn-product-card", "vviinn-vpr-widget"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-recommendations-sidebar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RecommendationsSidebar);
+      }
+      break;
+    case "vviinn-carousel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vviinn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vviinn-vpr-widget":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { RecommendationsSidebar as R, defineCustomElement as d };

package/dist/components/resizer.worker.js

@@ -0,0 +1,11 @@
+import { z as createWorker } from './imageSearch.store.js';
+
+const workerName = 'resizer.worker';
+const workerMsgId = 'stencil.resizer.worker';
+const workerPath = /*@__PURE__*/new URL('./assets/resizer.worker-510922c6.js', import.meta.url).href;
+const blob = new Blob(['importScripts("' + workerPath + '")'], { type: 'text/javascript' });
+const url = URL.createObjectURL(blob);
+const worker = /*@__PURE__*/createWorker(url, workerName, workerMsgId);
+URL.revokeObjectURL(url);
+
+export { worker, workerMsgId, workerName, workerPath };

package/dist/components/search-filters.js

@@ -0,0 +1,6 @@
+import { S as SearchFilters$1, d as defineCustomElement$1 } from './search-filters2.js';
+
+const SearchFilters = SearchFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchFilters, defineCustomElement };

package/dist/components/search-filters2.js

@@ -0,0 +1,89 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { i as imageSearchState } from './imageSearch.store.js';
+import { C as CheckIcon } from './index2.js';
+
+const searchFiltersCss = ":host{grid-gap:1rem;display:grid}.filters{flex-wrap:wrap;gap:.5rem}.filter,.filters{display:flex;flex-direction:row}.filter{grid-gap:8px;align-items:center;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:d;animation-name:d;border:1px solid #d3d3d3;cursor:pointer;height:-webkit-max-content;height:-moz-max-content;height:max-content;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:6px 16px;transform:scale(0);transition-duration:.25s;transition-property:background;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.filter.active{border:1px solid #000;padding:6px 8px}.filter:hover{border:1px solid gray}.show-more{display:flex}.show-more.hidden{display:none}.show-more:after{content:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 12.2-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;height:16px;margin-left:8px;margin-top:1px}.show-more.active:after{transform:rotateX(180deg)}@-webkit-keyframes d{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes d{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media (max-width:415px){.show-more:after{transform:rotate(-90deg)}.show-more.active:after{transform:rotate(90deg)}}@media (max-width:800px){.filters{grid-gap:unset;flex-wrap:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory}.filter{margin-right:.5rem;scroll-snap-align:end}}";
+
+const FILTERS_COUNT = 5;
+const ACTIVE_FILTER_CLASSNAME = ".filter.active";
+const getFilterId = (filter) => filter.href.split("/").reverse()[0];
+let SearchFilters = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.filterSelected = createEvent(this, "filterSelected", 7);
+    this.filter = null;
+    this.selectedCategoryId = null;
+    this.hideFilters = true;
+  }
+  handleFilterSelection(filter) {
+    return this.isFilterSelected(filter)
+      ? this.clearSelectedFilter()
+      : this.selectFilter(filter);
+  }
+  selectFilter(filter) {
+    this.selectedCategoryId = getFilterId(filter);
+    imageSearchState.activeIonLink = filter;
+    this.filterSelected.emit("select");
+  }
+  clearSelectedFilter() {
+    this.selectedCategoryId = null;
+    imageSearchState.activeIonLink = undefined;
+    this.findSelectedFilter().blur();
+    this.filterSelected.emit("deselect");
+  }
+  findSelectedFilter() {
+    return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
+  }
+  toggleFilters() {
+    this.hideFilters = !this.hideFilters;
+  }
+  handleEnter(ev, f) {
+    if (ev.key !== "Enter")
+      return;
+    this.handleFilterSelection(f);
+  }
+  isFilterSelected(filterLink) {
+    return this.selectedCategoryId === getFilterId(filterLink);
+  }
+  render() {
+    return (h(Host, { exportparts: "filter, show-more-filters" }, h("div", { class: "filters" }, this.filter.filters
+      .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
+      .map((f, n) => (h("div", { role: "button", tabindex: "0", part: this.isFilterSelected(f) ? "filter active" : "filter", class: {
+        filter: true,
+        active: this.selectedCategoryId === getFilterId(f),
+      }, style: { "animation-delay": `${n * 10}ms` }, onPointerUp: (ev) => {
+        ev.stopPropagation();
+        this.handleFilterSelection(f);
+      }, onKeyPress: (ev) => this.handleEnter(ev, f) }, this.isFilterSelected(f) ? h(CheckIcon, null) : null, f.name))), h("div", { class: {
+        filter: true,
+        "show-more": true,
+        hidden: this.filter.filters.length <= FILTERS_COUNT,
+        active: !this.hideFilters,
+      }, role: "button", tabindex: "0", "aria-role": "button", onClick: () => this.toggleFilters(), onKeyPress: (ev) => {
+        if (ev.key === "Enter") {
+          this.toggleFilters();
+        }
+      }, part: "show-more-filters" }, this.hideFilters ? "Zeige mehr" : "Zeige weniger"))));
+  }
+  get el() { return this; }
+  static get style() { return searchFiltersCss; }
+};
+SearchFilters = /*@__PURE__*/ proxyCustomElement(SearchFilters, [1, "search-filters", {
+    "filter": [16],
+    "selectedCategoryId": [32],
+    "hideFilters": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["search-filters"];
+  components.forEach(tagName => { switch (tagName) {
+    case "search-filters":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SearchFilters);
+      }
+      break;
+  } });
+}
+
+export { SearchFilters as S, defineCustomElement as d };

package/dist/components/tracking.worker.js

@@ -0,0 +1,11 @@
+import { z as createWorker } from './imageSearch.store.js';
+
+const workerName = 'tracking.worker';
+const workerMsgId = 'stencil.tracking.worker';
+const workerPath = /*@__PURE__*/new URL('./assets/tracking.worker-06c76b5e.js', import.meta.url).href;
+const blob = new Blob(['importScripts("' + workerPath + '")'], { type: 'text/javascript' });
+const url = URL.createObjectURL(blob);
+const worker = /*@__PURE__*/createWorker(url, workerName, workerMsgId);
+URL.revokeObjectURL(url);
+
+export { worker, workerMsgId, workerName, workerPath };

package/dist/components/vviinn-carousel.js

@@ -0,0 +1,6 @@
+import { V as VviinnCarousel$1, d as defineCustomElement$1 } from './vviinn-carousel2.js';
+
+const VviinnCarousel = VviinnCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnCarousel, defineCustomElement };

package/dist/components/vviinn-carousel2.js

@@ -0,0 +1,235 @@
+import { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { _ as _Array } from './imageSearch.store.js';
+import { a as ChevronIcon } from './index2.js';
+import { d as defineCustomElement$1 } from './vviinn-product-card2.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;flex-direction:column;position:relative;width:var(--vviinn-carousel-content-width)}.content-wrapper *{box-sizing:border-box}.content-wrapper{flex-grow:1;overflow-x:auto;overflow-y:hidden}.bullets{grid-gap:24px;display:flex;flex-direction:row;justify-content:center;margin-top:16px}.bullet{background:#e0e0e0;border-radius:50%;cursor:pointer;height:10px;width:10px}.bullet.active{background:#161616}.content.grid,.content:not(.show-scrollbar){scrollbar-color:#fff0 #fff0}.content.grid::-webkit-scrollbar,.content:not(.show-scrollbar)::-webkit-scrollbar{opacity:0}.content{grid-gap:8px;display:flex;flex-direction:row;flex-grow:1;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;scroll-snap-type:x mandatory}.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{fill:#525252;align-items:center;background-color:#fff;border:none;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;display:grid;height:40px;justify-items:center;margin:0;padding:0;position:absolute;top:calc(50% - 20px);width:40px;z-index:1}button.prev svg{margin-left:-5px;transform:rotate(180deg)}.prev{left:0}.next{right:0}.items-group{grid-gap:16px;display:grid;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(brand),:host(.classic) vviinn-product-card::part(title),: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)}}";
+
+const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
+const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
+const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
+const CONTENT_GROUP_CSS_CLASS = "items-group";
+let VviinnCarousel = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.moveDirection = "right";
+    this.contentGroups = [];
+    this.activeContentGroup = 0;
+    this.mode = "continuity";
+    this.imageWidth = 140;
+    this.showScroll = true;
+    this.recommendations = [];
+    this.columns = 0;
+    this.resizeObserver = new ResizeObserver(() => this.handleResize());
+    this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
+  }
+  connectedCallback() {
+    this.setItemWidth();
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  componentDidLoad() {
+    this.setWidth();
+    this.processScrollbarWidth();
+    this.columns = this.getColumnsNumber();
+    const slot = this.el.querySelector(".content");
+    this.mutationObserver.observe(slot, { subtree: true, childList: true });
+    this.resizeObserver.observe(this.getHostParent());
+  }
+  getItemWidthFromDocument() {
+    return parseInt(getComputedStyle(document.body).getPropertyValue(CAROUSEL_IMAGE_WIDTH_CSS_VAR));
+  }
+  setItemWidth() {
+    const widthInDocument = this.getItemWidthFromDocument();
+    const itemWidth = isNaN(widthInDocument)
+      ? this.imageWidth
+      : widthInDocument;
+    this.el.style.setProperty(CAROUSEL_IMAGE_WIDTH_CSS_VAR, `${itemWidth}px`);
+  }
+  getContentClassMap() {
+    return {
+      content: true,
+      [this.moveDirection]: true,
+      [this.mode]: true,
+      "show-scrollbar": this.showScroll,
+    };
+  }
+  handleResize() {
+    this.setWidth();
+    this.processScrollbarWidth();
+    this.setItemWidth();
+    const newColumns = this.getColumnsNumber();
+    if (newColumns !== this.columns) {
+      this.columns = newColumns;
+    }
+  }
+  calculateMoveStep() {
+    const contentWidths = this.getContent().map((el) => el.getBoundingClientRect().width);
+    const sum = contentWidths.reduce((acc, val) => acc + val, 0);
+    return sum / contentWidths.length;
+  }
+  getHostParent() {
+    const parent = this.el.parentNode;
+    return parent.host.parentElement;
+  }
+  setWidth() {
+    const parent = this.getHostParent();
+    if (!parent)
+      return;
+    const parentStyles = getComputedStyle(parent);
+    const parentWidth = parent.getBoundingClientRect().width;
+    const width = parentWidth -
+      (parseInt(parentStyles["padding-right"]) +
+        parseInt(parentStyles["padding-left"]));
+    this.el.style.setProperty(CAROUSEL_WIDTH_CSS_VAR, `${width}px`);
+  }
+  getParent() {
+    const parentNode = this.el.parentNode;
+    const host = parentNode.host;
+    return host.parentElement;
+  }
+  cloneSlottedContent() {
+    this.setWidth();
+  }
+  getActiveGroupIndex() {
+    var _a, _b;
+    const contentNodeLeft = (_b = (_a = this.getContentNode()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    if (!contentNodeLeft)
+      return 0;
+    const groups = this.getContentGroups();
+    const groupsPositions = groups.map((g) => g.getBoundingClientRect().left);
+    const indexedPositions = groupsPositions
+      .map((value, index) => [value, index])
+      .filter((x) => x[0] >= 0);
+    return indexedPositions.length > 0 ? indexedPositions[0][1] : 0;
+  }
+  getContentNode() {
+    return this.el.querySelector(".content");
+  }
+  getContent() {
+    const children = this.getContentNode().children;
+    return Array.from(children).map((c) => c);
+  }
+  getColumnsNumber() {
+    const styleSheet = getComputedStyle(this.el);
+    const columnsInCss = styleSheet.getPropertyValue(COLUMNS_NUMBER_CSS_VAR);
+    return parseInt(columnsInCss);
+  }
+  getContentGroups() {
+    return Array.from(this.el.querySelectorAll(`.${CONTENT_GROUP_CSS_CLASS}`));
+  }
+  showNext() {
+    this.moveDirection = "right";
+    const contentContainer = this.getContentNode();
+    requestAnimationFrame(() => {
+      contentContainer.scrollTo({
+        top: 0,
+        left: contentContainer.scrollLeft + this.calculateMoveStep(),
+        behavior: "smooth",
+      });
+    });
+  }
+  showPrev() {
+    this.moveDirection = "left";
+    const contentContainer = this.getContentNode();
+    requestAnimationFrame(() => {
+      contentContainer.scrollTo({
+        top: 0,
+        left: contentContainer.scrollLeft - this.calculateMoveStep(),
+        behavior: "smooth",
+      });
+    });
+  }
+  scroll(index) {
+    const contentContainer = this.getContentNode();
+    requestAnimationFrame(() => {
+      contentContainer.scrollTo({
+        top: 0,
+        left: this.calculateMoveStep() * index,
+        behavior: "smooth",
+      });
+    });
+  }
+  processScrollbarWidth() {
+    const target = this.getContentNode();
+    const scrollRatio = (target.scrollLeft + target.clientWidth) / target.scrollWidth;
+    const scrolledWidth = target.clientWidth * scrollRatio;
+    this.el.style.setProperty("--vviinn-progressbar-width", `${scrolledWidth}px`);
+    this.activeContentGroup = this.getActiveGroupIndex();
+  }
+  showBullets() {
+    return this.mode === "grid" && this.showScroll;
+  }
+  showScrollbar() {
+    return this.mode === "continuity" && this.showScroll;
+  }
+  getClassMap() {
+    return {
+      [this.mode]: true,
+      "show-scrollbar": this.showScrollbar(),
+    };
+  }
+  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);
+  }
+  renderRecommendationGroups(elements) {
+    return elements.map((el) => this.renderRecommendationGroup(el));
+  }
+  renderRecommendations() {
+    return this.mode === "grid"
+      ? this.renderGrid()
+      : this.renderRecommendationsElements();
+  }
+  renderRecommendationsElements() {
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
+  }
+  renderGrid() {
+    const recommendations = this.renderRecommendationsElements();
+    const grouppedContent = _Array.chunksOf(this.getColumnsNumber())(recommendations);
+    return this.renderRecommendationGroups(grouppedContent);
+  }
+  renderBullets() {
+    const numberOfBullets = Math.ceil(this.recommendations.length / this.getColumnsNumber());
+    const bulletsArray = Array.from(Array(numberOfBullets).keys());
+    return bulletsArray.map((index) => (h("div", { class: {
+        bullet: true,
+        active: this.activeContentGroup === index,
+      }, onClick: () => this.scroll(index) })));
+  }
+  render() {
+    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, h(ChevronIcon, null))), this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
+  }
+  get el() { return this; }
+  static get style() { return vviinnCarouselCss; }
+};
+VviinnCarousel = /*@__PURE__*/ proxyCustomElement(VviinnCarousel, [0, "vviinn-carousel", {
+    "mode": [1],
+    "imageWidth": [2, "image-width"],
+    "showScroll": [4, "show-scroll"],
+    "recommendations": [16],
+    "moveDirection": [32],
+    "contentGroups": [32],
+    "activeContentGroup": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-carousel", "vviinn-product-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-carousel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnCarousel);
+      }
+      break;
+    case "vviinn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnCarousel as V, defineCustomElement as d };

package/dist/components/vviinn-detected-object.js

@@ -0,0 +1,6 @@
+import { V as VviinnDetectedObject$1, d as defineCustomElement$1 } from './vviinn-detected-object2.js';
+
+const VviinnDetectedObject = VviinnDetectedObject$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnDetectedObject, defineCustomElement };