vviinn-widgets 2.5.2 → 2.6.0

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

@@ -1,1168 +0,0 @@
-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 };