vviinn-widgets 2.5.0 → 2.5.2

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

@@ -0,0 +1,1168 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-59f44eaa.js';
+import { _ as _Array, O as Option, S as Semigroup, a as _function, E as Either, i as imageSearchState, s as state, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitGetRequest, d as sequenceT, A as Apply, T as TaskEither } from './imageSearch.store-0ae87235.js';
+import { C as ChevronIcon } from './index-ac05c460.js';
+import { p as pipe } from './Handler-f9b8735c.js';
+import { c as createProductViewVprEvent, a as createProductClickVprEvent, v as v4, b as createTrackingApi, d as createWidgetVprEvent } from './index-2e296af4.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)}}";
+
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+VviinnCarousel.style = vviinnCarouselCss;
+
+class GtagAnalytics {
+  sendImpression(product) {
+    var _a, _b, _c;
+    gtag('event', 'view_item_list', {
+      items: [
+        {
+          id: product.productId,
+          name: product.title,
+          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+          list_name: 'VI VPR View',
+          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+        }
+      ]
+    });
+    return undefined;
+  }
+  sendClick(product) {
+    var _a, _b, _c;
+    gtag('event', 'select_content', {
+      content_type: 'product',
+      items: [
+        {
+          id: product.productId,
+          name: product.title,
+          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+          list_name: 'VI VPR View',
+          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+        }
+      ]
+    });
+    return undefined;
+  }
+}
+
+class GAnalytics {
+  constructor() {
+    ga('require', 'ec');
+  }
+  convertProduct(product) {
+    var _a, _b, _c;
+    return {
+      id: product.productId,
+      name: product.title,
+      brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+      category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+      list: 'VI VPR View',
+      price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+    };
+  }
+  sendImpression(product) {
+    ga('ec:addImpression', this.convertProduct(product));
+    return undefined;
+  }
+  sendClick(product) {
+    var _a, _b, _c;
+    ga('ec:addProduct', {
+      id: product.productId,
+      name: product.title,
+      brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+      category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+      price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+    });
+    ga('ec:setAction', 'click', { list: 'VI VPR View' });
+    return undefined;
+  }
+}
+
+const getGtagAnalytics = () => _function.pipe(Option.fromNullable(window.gtag), Option.map(() => new GtagAnalytics()));
+const getCommonAnalytics = () => _function.pipe(Option.fromNullable(window.ga), Option.map(() => new GAnalytics()));
+const analyticsMonoid = Option.getMonoid(Semigroup.first());
+const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
+
+const FIT_EXPR = /fit\/\d+\//;
+const containsFit = (url) => {
+  return _function.pipe(url.match(FIT_EXPR), Either.fromNullable(url), Either.map(() => url));
+};
+const processWidth = (url, size) => {
+  return _function.pipe(containsFit(url), Either.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), Either.getOrElse(() => url));
+};
+const Linked = (props, child) => props.deeplink ? (h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
+const FormattedPrice = (props) => {
+  var _a;
+  const locale = props.locale;
+  const formattedPrice = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+  }).format(props.price);
+  const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
+  return (h("span", { class: "price-amount", part: "price-amount" }, fullPrice));
+};
+const Price = (props) => {
+  const priceEl = (h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale }));
+  return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
+    h("span", { class: "price-sale", part: "price-sale" },
+      h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale })),
+    h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
+  ]) : (h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
+};
+const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
+const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
+
+const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;margin-bottom:8px;overflow:hidden}.deeplink{text-decoration:none}.image-link{display:contents}picture{position:relative;width:100%}:host(.dimmed) picture::before{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}";
+
+let VviinnProductCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.recommendationLoad = createEvent(this, "recommendationLoad", 7);
+    this.recommendationView = createEvent(this, "recommendationView", 7);
+    this.recommendationClick = createEvent(this, "recommendationClick", 7);
+    this.productImageLoaded = createEvent(this, "productImageLoaded", 7);
+    this.currency = undefined;
+    this.imageRatio = 1;
+    this.imageWidth = 200;
+    this.locale = undefined;
+    this.pricePrefix = undefined;
+    this.responsive = false;
+    this.dimmedBackground = false;
+    /** @internal */
+    this.index = 0;
+    this.imageLoaded = false;
+    this.productData = null;
+    this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
+  }
+  connectedCallback() {
+    this.productData = {
+      product: this.productId,
+      rank: this.index,
+    };
+  }
+  intersectionCallback(data) {
+    if (data.some((entry) => entry.isIntersecting)) {
+      _function.pipe(getAnalyticsModule, Option.map((analytics) => analytics.sendImpression(this.getProduct())));
+      this.recommendationView.emit(this.productData);
+      this.intersectionObserver.disconnect();
+    }
+  }
+  componentDidLoad() {
+    this.recommendationLoad.emit(this.productData);
+    this.intersectionObserver.observe(this.el);
+    const links = this.el.shadowRoot.querySelectorAll("a");
+    links.forEach((link) => link.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.recommendationClick.emit(this.productData);
+      _function.pipe(getAnalyticsModule, Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+    }));
+  }
+  getProduct() {
+    return imageSearchState.results.find((r) => r.productId === this.productId);
+  }
+  renderImage() {
+    const props = {
+      width: this.imageWidth,
+      height: this.imageWidth * this.imageRatio,
+      src: this.image,
+      title: this.productTitle,
+      lazy: false,
+    };
+    return this.responsive
+      ? ResponsiveImage(props, () => this.kek())
+      : Image(props, () => this.kek());
+  }
+  kek() {
+    this.productImageLoaded.emit(this.productId);
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), h("span", { class: "brand", part: "brand" }, this.brand), h("span", { class: "type", part: "type" }, this.productType), h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state.locale })));
+  }
+  get el() { return getElement(this); }
+};
+VviinnProductCard.style = vviinnProductCardCss;
+
+const createBearerString = (x) => `Bearer ${x}`;
+const createAuthedHeader = (x) => new Headers({
+  Authorization: x,
+});
+const createFetchAuthOptions = (x) => {
+  return {
+    headers: x,
+  };
+};
+const createBearAuthedHeader = _function.flow(createBearerString, createAuthedHeader, createFetchAuthOptions);
+
+const isVPR = (c) => c._tag === "VPR";
+function fold(onVPR, onVCS) {
+  return (c) => (isVPR(c) ? onVPR() : onVCS());
+}
+function fromString(s) {
+  return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
+}
+
+const sequenceToEither = sequenceT(Apply);
+const apiGet = (path, data = {}) => pipe(sequenceToEither(getApiPath(), createInitGetRequest), fromEither, chainW(makeRequest(path, data)));
+
+const getVPRRecommendations = (productId) => (options) => {
+  const url = `product/${productId}/similar-products`;
+  return apiGet(url, options);
+};
+
+const getVCSRecommendations = (productId) => (options) => {
+  const url = `product/${productId}/cross-selling-products`;
+  return apiGet(url, options);
+};
+
+const getRecommendationsService = (campaignType) => _function.pipe(fromString(campaignType), fold(() => getVPRRecommendations, () => getVCSRecommendations));
+
+function isFunction(value) {
+    return typeof value === 'function';
+}
+
+function createErrorClass(createImpl) {
+    const _super = (instance) => {
+        Error.call(instance);
+        instance.stack = new Error().stack;
+    };
+    const ctorFunc = createImpl(_super);
+    ctorFunc.prototype = Object.create(Error.prototype);
+    ctorFunc.prototype.constructor = ctorFunc;
+    return ctorFunc;
+}
+
+const UnsubscriptionError = createErrorClass((_super) => function UnsubscriptionErrorImpl(errors) {
+    _super(this);
+    this.message = errors
+        ? `${errors.length} errors occurred during unsubscription:
+${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\n  ')}`
+        : '';
+    this.name = 'UnsubscriptionError';
+    this.errors = errors;
+});
+
+function arrRemove(arr, item) {
+    if (arr) {
+        const index = arr.indexOf(item);
+        0 <= index && arr.splice(index, 1);
+    }
+}
+
+class Subscription {
+    constructor(initialTeardown) {
+        this.initialTeardown = initialTeardown;
+        this.closed = false;
+        this._parentage = null;
+        this._finalizers = null;
+    }
+    unsubscribe() {
+        let errors;
+        if (!this.closed) {
+            this.closed = true;
+            const { _parentage } = this;
+            if (_parentage) {
+                this._parentage = null;
+                if (Array.isArray(_parentage)) {
+                    for (const parent of _parentage) {
+                        parent.remove(this);
+                    }
+                }
+                else {
+                    _parentage.remove(this);
+                }
+            }
+            const { initialTeardown: initialFinalizer } = this;
+            if (isFunction(initialFinalizer)) {
+                try {
+                    initialFinalizer();
+                }
+                catch (e) {
+                    errors = e instanceof UnsubscriptionError ? e.errors : [e];
+                }
+            }
+            const { _finalizers } = this;
+            if (_finalizers) {
+                this._finalizers = null;
+                for (const finalizer of _finalizers) {
+                    try {
+                        execFinalizer(finalizer);
+                    }
+                    catch (err) {
+                        errors = errors !== null && errors !== void 0 ? errors : [];
+                        if (err instanceof UnsubscriptionError) {
+                            errors = [...errors, ...err.errors];
+                        }
+                        else {
+                            errors.push(err);
+                        }
+                    }
+                }
+            }
+            if (errors) {
+                throw new UnsubscriptionError(errors);
+            }
+        }
+    }
+    add(teardown) {
+        var _a;
+        if (teardown && teardown !== this) {
+            if (this.closed) {
+                execFinalizer(teardown);
+            }
+            else {
+                if (teardown instanceof Subscription) {
+                    if (teardown.closed || teardown._hasParent(this)) {
+                        return;
+                    }
+                    teardown._addParent(this);
+                }
+                (this._finalizers = (_a = this._finalizers) !== null && _a !== void 0 ? _a : []).push(teardown);
+            }
+        }
+    }
+    _hasParent(parent) {
+        const { _parentage } = this;
+        return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));
+    }
+    _addParent(parent) {
+        const { _parentage } = this;
+        this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;
+    }
+    _removeParent(parent) {
+        const { _parentage } = this;
+        if (_parentage === parent) {
+            this._parentage = null;
+        }
+        else if (Array.isArray(_parentage)) {
+            arrRemove(_parentage, parent);
+        }
+    }
+    remove(teardown) {
+        const { _finalizers } = this;
+        _finalizers && arrRemove(_finalizers, teardown);
+        if (teardown instanceof Subscription) {
+            teardown._removeParent(this);
+        }
+    }
+}
+Subscription.EMPTY = (() => {
+    const empty = new Subscription();
+    empty.closed = true;
+    return empty;
+})();
+const EMPTY_SUBSCRIPTION = Subscription.EMPTY;
+function isSubscription(value) {
+    return (value instanceof Subscription ||
+        (value && 'closed' in value && isFunction(value.remove) && isFunction(value.add) && isFunction(value.unsubscribe)));
+}
+function execFinalizer(finalizer) {
+    if (isFunction(finalizer)) {
+        finalizer();
+    }
+    else {
+        finalizer.unsubscribe();
+    }
+}
+
+const config = {
+    onUnhandledError: null,
+    onStoppedNotification: null,
+    Promise: undefined,
+    useDeprecatedSynchronousErrorHandling: false,
+    useDeprecatedNextContext: false,
+};
+
+const timeoutProvider = {
+    setTimeout(handler, timeout, ...args) {
+        const { delegate } = timeoutProvider;
+        if (delegate === null || delegate === void 0 ? void 0 : delegate.setTimeout) {
+            return delegate.setTimeout(handler, timeout, ...args);
+        }
+        return setTimeout(handler, timeout, ...args);
+    },
+    clearTimeout(handle) {
+        const { delegate } = timeoutProvider;
+        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearTimeout) || clearTimeout)(handle);
+    },
+    delegate: undefined,
+};
+
+function reportUnhandledError(err) {
+    timeoutProvider.setTimeout(() => {
+        const { onUnhandledError } = config;
+        if (onUnhandledError) {
+            onUnhandledError(err);
+        }
+        else {
+            throw err;
+        }
+    });
+}
+
+function noop() { }
+
+const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined))();
+function errorNotification(error) {
+    return createNotification('E', undefined, error);
+}
+function nextNotification(value) {
+    return createNotification('N', value, undefined);
+}
+function createNotification(kind, value, error) {
+    return {
+        kind,
+        value,
+        error,
+    };
+}
+
+function errorContext(cb) {
+    {
+        cb();
+    }
+}
+
+class Subscriber extends Subscription {
+    constructor(destination) {
+        super();
+        this.isStopped = false;
+        if (destination) {
+            this.destination = destination;
+            if (isSubscription(destination)) {
+                destination.add(this);
+            }
+        }
+        else {
+            this.destination = EMPTY_OBSERVER;
+        }
+    }
+    static create(next, error, complete) {
+        return new SafeSubscriber(next, error, complete);
+    }
+    next(value) {
+        if (this.isStopped) {
+            handleStoppedNotification(nextNotification(value), this);
+        }
+        else {
+            this._next(value);
+        }
+    }
+    error(err) {
+        if (this.isStopped) {
+            handleStoppedNotification(errorNotification(err), this);
+        }
+        else {
+            this.isStopped = true;
+            this._error(err);
+        }
+    }
+    complete() {
+        if (this.isStopped) {
+            handleStoppedNotification(COMPLETE_NOTIFICATION, this);
+        }
+        else {
+            this.isStopped = true;
+            this._complete();
+        }
+    }
+    unsubscribe() {
+        if (!this.closed) {
+            this.isStopped = true;
+            super.unsubscribe();
+            this.destination = null;
+        }
+    }
+    _next(value) {
+        this.destination.next(value);
+    }
+    _error(err) {
+        try {
+            this.destination.error(err);
+        }
+        finally {
+            this.unsubscribe();
+        }
+    }
+    _complete() {
+        try {
+            this.destination.complete();
+        }
+        finally {
+            this.unsubscribe();
+        }
+    }
+}
+const _bind = Function.prototype.bind;
+function bind(fn, thisArg) {
+    return _bind.call(fn, thisArg);
+}
+class ConsumerObserver {
+    constructor(partialObserver) {
+        this.partialObserver = partialObserver;
+    }
+    next(value) {
+        const { partialObserver } = this;
+        if (partialObserver.next) {
+            try {
+                partialObserver.next(value);
+            }
+            catch (error) {
+                handleUnhandledError(error);
+            }
+        }
+    }
+    error(err) {
+        const { partialObserver } = this;
+        if (partialObserver.error) {
+            try {
+                partialObserver.error(err);
+            }
+            catch (error) {
+                handleUnhandledError(error);
+            }
+        }
+        else {
+            handleUnhandledError(err);
+        }
+    }
+    complete() {
+        const { partialObserver } = this;
+        if (partialObserver.complete) {
+            try {
+                partialObserver.complete();
+            }
+            catch (error) {
+                handleUnhandledError(error);
+            }
+        }
+    }
+}
+class SafeSubscriber extends Subscriber {
+    constructor(observerOrNext, error, complete) {
+        super();
+        let partialObserver;
+        if (isFunction(observerOrNext) || !observerOrNext) {
+            partialObserver = {
+                next: observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined,
+                error: error !== null && error !== void 0 ? error : undefined,
+                complete: complete !== null && complete !== void 0 ? complete : undefined,
+            };
+        }
+        else {
+            let context;
+            if (this && config.useDeprecatedNextContext) {
+                context = Object.create(observerOrNext);
+                context.unsubscribe = () => this.unsubscribe();
+                partialObserver = {
+                    next: observerOrNext.next && bind(observerOrNext.next, context),
+                    error: observerOrNext.error && bind(observerOrNext.error, context),
+                    complete: observerOrNext.complete && bind(observerOrNext.complete, context),
+                };
+            }
+            else {
+                partialObserver = observerOrNext;
+            }
+        }
+        this.destination = new ConsumerObserver(partialObserver);
+    }
+}
+function handleUnhandledError(error) {
+    {
+        reportUnhandledError(error);
+    }
+}
+function defaultErrorHandler(err) {
+    throw err;
+}
+function handleStoppedNotification(notification, subscriber) {
+    const { onStoppedNotification } = config;
+    onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));
+}
+const EMPTY_OBSERVER = {
+    closed: true,
+    next: noop,
+    error: defaultErrorHandler,
+    complete: noop,
+};
+
+const observable = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();
+
+function identity(x) {
+    return x;
+}
+
+function pipeFromArray(fns) {
+    if (fns.length === 0) {
+        return identity;
+    }
+    if (fns.length === 1) {
+        return fns[0];
+    }
+    return function piped(input) {
+        return fns.reduce((prev, fn) => fn(prev), input);
+    };
+}
+
+class Observable {
+    constructor(subscribe) {
+        if (subscribe) {
+            this._subscribe = subscribe;
+        }
+    }
+    lift(operator) {
+        const observable = new Observable();
+        observable.source = this;
+        observable.operator = operator;
+        return observable;
+    }
+    subscribe(observerOrNext, error, complete) {
+        const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
+        errorContext(() => {
+            const { operator, source } = this;
+            subscriber.add(operator
+                ?
+                    operator.call(subscriber, source)
+                : source
+                    ?
+                        this._subscribe(subscriber)
+                    :
+                        this._trySubscribe(subscriber));
+        });
+        return subscriber;
+    }
+    _trySubscribe(sink) {
+        try {
+            return this._subscribe(sink);
+        }
+        catch (err) {
+            sink.error(err);
+        }
+    }
+    forEach(next, promiseCtor) {
+        promiseCtor = getPromiseCtor(promiseCtor);
+        return new promiseCtor((resolve, reject) => {
+            const subscriber = new SafeSubscriber({
+                next: (value) => {
+                    try {
+                        next(value);
+                    }
+                    catch (err) {
+                        reject(err);
+                        subscriber.unsubscribe();
+                    }
+                },
+                error: reject,
+                complete: resolve,
+            });
+            this.subscribe(subscriber);
+        });
+    }
+    _subscribe(subscriber) {
+        var _a;
+        return (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber);
+    }
+    [observable]() {
+        return this;
+    }
+    pipe(...operations) {
+        return pipeFromArray(operations)(this);
+    }
+    toPromise(promiseCtor) {
+        promiseCtor = getPromiseCtor(promiseCtor);
+        return new promiseCtor((resolve, reject) => {
+            let value;
+            this.subscribe((x) => (value = x), (err) => reject(err), () => resolve(value));
+        });
+    }
+}
+Observable.create = (subscribe) => {
+    return new Observable(subscribe);
+};
+function getPromiseCtor(promiseCtor) {
+    var _a;
+    return (_a = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a !== void 0 ? _a : Promise;
+}
+function isObserver(value) {
+    return value && isFunction(value.next) && isFunction(value.error) && isFunction(value.complete);
+}
+function isSubscriber(value) {
+    return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));
+}
+
+const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
+    _super(this);
+    this.name = 'ObjectUnsubscribedError';
+    this.message = 'object unsubscribed';
+});
+
+class Subject extends Observable {
+    constructor() {
+        super();
+        this.closed = false;
+        this.currentObservers = null;
+        this.observers = [];
+        this.isStopped = false;
+        this.hasError = false;
+        this.thrownError = null;
+    }
+    lift(operator) {
+        const subject = new AnonymousSubject(this, this);
+        subject.operator = operator;
+        return subject;
+    }
+    _throwIfClosed() {
+        if (this.closed) {
+            throw new ObjectUnsubscribedError();
+        }
+    }
+    next(value) {
+        errorContext(() => {
+            this._throwIfClosed();
+            if (!this.isStopped) {
+                if (!this.currentObservers) {
+                    this.currentObservers = Array.from(this.observers);
+                }
+                for (const observer of this.currentObservers) {
+                    observer.next(value);
+                }
+            }
+        });
+    }
+    error(err) {
+        errorContext(() => {
+            this._throwIfClosed();
+            if (!this.isStopped) {
+                this.hasError = this.isStopped = true;
+                this.thrownError = err;
+                const { observers } = this;
+                while (observers.length) {
+                    observers.shift().error(err);
+                }
+            }
+        });
+    }
+    complete() {
+        errorContext(() => {
+            this._throwIfClosed();
+            if (!this.isStopped) {
+                this.isStopped = true;
+                const { observers } = this;
+                while (observers.length) {
+                    observers.shift().complete();
+                }
+            }
+        });
+    }
+    unsubscribe() {
+        this.isStopped = this.closed = true;
+        this.observers = this.currentObservers = null;
+    }
+    get observed() {
+        var _a;
+        return ((_a = this.observers) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }
+    _trySubscribe(subscriber) {
+        this._throwIfClosed();
+        return super._trySubscribe(subscriber);
+    }
+    _subscribe(subscriber) {
+        this._throwIfClosed();
+        this._checkFinalizedStatuses(subscriber);
+        return this._innerSubscribe(subscriber);
+    }
+    _innerSubscribe(subscriber) {
+        const { hasError, isStopped, observers } = this;
+        if (hasError || isStopped) {
+            return EMPTY_SUBSCRIPTION;
+        }
+        this.currentObservers = null;
+        observers.push(subscriber);
+        return new Subscription(() => {
+            this.currentObservers = null;
+            arrRemove(observers, subscriber);
+        });
+    }
+    _checkFinalizedStatuses(subscriber) {
+        const { hasError, thrownError, isStopped } = this;
+        if (hasError) {
+            subscriber.error(thrownError);
+        }
+        else if (isStopped) {
+            subscriber.complete();
+        }
+    }
+    asObservable() {
+        const observable = new Observable();
+        observable.source = this;
+        return observable;
+    }
+}
+Subject.create = (destination, source) => {
+    return new AnonymousSubject(destination, source);
+};
+class AnonymousSubject extends Subject {
+    constructor(destination, source) {
+        super();
+        this.destination = destination;
+        this.source = source;
+    }
+    next(value) {
+        var _a, _b;
+        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.next) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    }
+    error(err) {
+        var _a, _b;
+        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, err);
+    }
+    complete() {
+        var _a, _b;
+        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.complete) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    _subscribe(subscriber) {
+        var _a, _b;
+        return (_b = (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
+    }
+}
+
+const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #DDDDDD;width:100%}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
+
+let VviinnVprWidget = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.recommendationsLoaded = createEvent(this, "recommendationsLoaded", 7);
+    /** Title for recommendations widget */
+    this.blockTitle = "Recommended products";
+    /** Ratio of each recommended product image */
+    this.imageRatio = 1;
+    /** Width of each recommended product image */
+    this.imageWidth = 300;
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Use slider or grid view */
+    this.mode = "continuity";
+    /** Campaign type */
+    this.campaignType = "VPR";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
+    /** @internal */
+    this.useCarousel = true;
+    this.showScroll = true;
+    this.cssUrl = null;
+    this.recommendations = [];
+    this.loaded = false;
+    this.productImageLoadedSubject = new Subject();
+  }
+  handleProductIdChange() {
+    this.getRecommendations();
+  }
+  handleCampaignTypeChange() {
+    this.getRecommendations();
+  }
+  handleApiPathChange(newPath) {
+    state.apiPath = newPath;
+    this.getRecommendations();
+  }
+  handleImageLoading({ detail }) {
+    this.productImageLoadedSubject.next(detail);
+  }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent).finally(() => {
+      const product = this.recommendations.find((r) => r.productId === detail.product);
+      if (!product || !product.deeplink)
+        return;
+      window.location.href = product.deeplink;
+    });
+  }
+  connectedCallback() {
+    state.apiPath = this.apiPath;
+    state.currencySign = this.currencySign;
+    state.locale = this.locale;
+    this.uiSessionId = v4();
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = createWidgetVprEvent({
+      action: "open",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetCloseEvent = createWidgetVprEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetCloseEvent);
+  }
+  async componentWillLoad() {
+    state.pricePrefix = this.pricePrefix;
+    state.currencySign = this.currencySign;
+    this.getRecommendations();
+  }
+  async getRecommendations() {
+    if (this.productId === undefined || this.token === undefined)
+      return;
+    const campaignType = this.campaignType.length > 0 ? this.campaignType : "VPR";
+    const headers = createBearAuthedHeader(this.token);
+    const request = _function.pipe(TaskEither.of(getRecommendationsService(campaignType)), TaskEither.ap(TaskEither.of(this.productId)), TaskEither.ap(TaskEither.of(headers)), TaskEither.flatten);
+    const runRequest = await request();
+    _function.pipe(runRequest, Either.fold((error) => this.handleError(error), (data) => this.handleRecommendationsSucces(data)));
+  }
+  handleError(error) {
+    console.log("ERROR:", error);
+  }
+  handleRecommendationsSucces(data) {
+    var _a;
+    this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
+    imageSearchState.results = this.recommendations;
+    this.loaded = true;
+    this.productIds = this.recommendations.map((r) => r.productId);
+    this.productImageLoadedSubject.subscribe((id) => {
+      this.productIds = this.productIds.filter((x) => x !== id);
+      if (this.productIds.length === 0) {
+        this.recommendationsLoaded.emit();
+      }
+    });
+  }
+  isExternalCSS() {
+    return this.cssUrl && this.cssUrl.length > 0;
+  }
+  renderExternalCSS() {
+    return this.isExternalCSS() ? (h("link", { href: this.cssUrl, rel: "stylesheet" })) : ("");
+  }
+  render() {
+    return (h(Host, { class: {
+        loaded: this.loaded,
+        empty: this.recommendations.length == 0,
+        [this.mode]: true,
+      }, "aria-hidden": this.loaded ? "false" : "true" }, this.renderExternalCSS(), h("style", null, state.fallbackStyles), h("h2", { part: "recommendations-title" }, this.blockTitle), this.useCarousel ? this.renderCarousel() : this.renderResults()));
+  }
+  renderRecommendation(recommendation, index) {
+    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.useDimmedBackgroundInCard(), index: index }));
+  }
+  useDimmedBackgroundInCard() {
+    return this.mode === "continuity" || !this.useCarousel;
+  }
+  renderResults() {
+    return (h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
+  }
+  renderCarousel() {
+    return (h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "productId": ["handleProductIdChange"],
+    "campaignType": ["handleCampaignTypeChange"],
+    "apiPath": ["handleApiPathChange"]
+  }; }
+};
+VviinnVprWidget.style = vviinnVprWidgetCss;
+
+export { VviinnCarousel as vviinn_carousel, VviinnProductCard as vviinn_product_card, VviinnVprWidget as vviinn_vpr_widget };