vviinn-widgets 2.0.0 → 2.2.1

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

@@ -1,222 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7adce49f.js');
-const _Array = require('./Array-cce2fde8.js');
-const index$1 = require('./index-8a276115.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%}.bullet.active{background:#161616}:host(:not(.show-scrollbar)) .content{-ms-overflow-style:none;scrollbar-width:none;overflow:hidden}@media (max-width: 480px){:host(.modern) button{display:none}}.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}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.modern) button{border-radius:2px}:host(.classic) 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.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;min-width:100%;grid-template-columns:repeat(auto-fit, minmax(var(--vviinn-carousel-image-width, --vviinn-carousel-image-width-system), 1fr));align-items:center;justify-items:center;grid-gap:16px}.items-group.incomplete{grid-template-columns:repeat(auto-fit, minmax(var(--vviinn-carousel-image-width, --vviinn-carousel-image-width-system), 1fr))}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}";
-
-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";
-const INCOMPLETE_GROUP_CSS_CLASS = "incomplete";
-let VviinnCarousel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.moveDirection = "right";
-    this.contentGroups = [];
-    this.activeContentGroup = 0;
-    this.mode = "modern";
-    this.imageWidth = 140;
-    this.showScroll = true;
-    this.content = [];
-    this.columns = 0;
-    this.resizeObserver = new ResizeObserver(() => this.handleResize());
-    this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
-  }
-  connectedCallback() {
-    this.setItemWidth();
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-  }
-  componentDidRender() {
-    this.setWidth();
-    this.processScrollbarWidth();
-    this.columns = this.getColumnsNumber();
-    const slot = this.el.querySelector("#slot");
-    this.mutationObserver.observe(slot, { subtree: true, childList: true });
-  }
-  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,
-    };
-  }
-  handleResize() {
-    this.setWidth();
-    this.processScrollbarWidth();
-    this.setItemWidth();
-    const newColumns = this.getColumnsNumber();
-    if (newColumns !== this.columns) {
-      this.renderContent();
-      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;
-  }
-  setWidth() {
-    const parent = this.el.offsetParent;
-    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`);
-  }
-  cloneSlottedContent() {
-    const slot = this.el.querySelector("#slot");
-    const content = Array.from(slot.children);
-    if (content.length > 0) {
-      this.content = content;
-      this.renderContent();
-      this.setWidth();
-      this.resizeObserver.observe(this.el.offsetParent);
-      this.mutationObserver.disconnect();
-    }
-  }
-  renderContent() {
-    const c = this.mode === "classic"
-      ? _Array._Array.chunksOf(this.getColumnsNumber())(this.content)
-      : this.content.reduce((fragment, element) => {
-        fragment.append(element);
-        return fragment;
-      }, new DocumentFragment());
-    this.mode === "classic" ? this.renderGroup(c) : this.renderLine(c);
-  }
-  renderGroup(content) {
-    const columnsNumber = this.getColumnsNumber();
-    const groups = content.map((el) => {
-      const container = document.createElement("div");
-      const groupClassNames = el.length < columnsNumber
-        ? [CONTENT_GROUP_CSS_CLASS, INCOMPLETE_GROUP_CSS_CLASS]
-        : [CONTENT_GROUP_CSS_CLASS];
-      container.classList.add(...groupClassNames);
-      return el.reduce((acc, el) => {
-        acc.append(el);
-        return acc;
-      }, container);
-    });
-    const combinedElements = groups.reduce((fragment, element) => {
-      fragment.append(element);
-      return fragment;
-    }, new DocumentFragment());
-    this.appendToContent(combinedElements);
-    this.contentGroups = this.getContentGroups();
-  }
-  renderLine(item) {
-    this.appendToContent(item);
-  }
-  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}`));
-  }
-  appendToContent(content) {
-    const contentNode = this.getContentNode();
-    contentNode.innerHTML = "";
-    contentNode.append(content);
-  }
-  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 === "classic" && this.showScroll;
-  }
-  showScrollbar() {
-    return this.mode === "modern" && this.showScroll;
-  }
-  getClassMap() {
-    return {
-      [this.mode]: true,
-      "show-scrollbar": this.showScrollbar(),
-    };
-  }
-  render() {
-    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: "body" }, index.h("button", { class: "prev", onClick: () => this.showPrev() }, index.h(index$1.ChevronIcon, null)), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }), index.h("button", { class: "next", onClick: () => this.showNext() }, index.h(index$1.ChevronIcon, null))), this.showBullets() ? (index.h("div", { class: "bullets" }, this.contentGroups
-      .map((_, i) => i)
-      .map((i) => (index.h("div", { class: {
-        bullet: true,
-        active: this.activeContentGroup === i,
-      }, onClick: () => this.scroll(i) }))))) : (""), index.h("div", { id: "slot" }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-};
-VviinnCarousel.style = vviinnCarouselCss;
-
-exports.vviinn_carousel = VviinnCarousel;

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

@@ -1,106 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7adce49f.js');
-const _Array = require('./Array-cce2fde8.js');
-const imageSearch_store = require('./imageSearch.store-39fce56c.js');
-
-const createBearerString = (x) => `Bearer ${x}`;
-const createAuthedHeader = (x) => new Headers({
-  Authorization: x,
-});
-const createFetchAuthOptions = (x) => {
-  return {
-    headers: x,
-  };
-};
-const createBearAuthedHeader = _Array._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 = imageSearch_store.sequenceT(imageSearch_store.Apply);
-const apiGet = (path, data = {}) => imageSearch_store.pipe(sequenceToEither(imageSearch_store.getApiPath(), imageSearch_store.createInitGetRequest), imageSearch_store.fromEither, imageSearch_store.chainW(imageSearch_store.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) => _Array._function.pipe(fromString(campaignType), fold(() => getVPRRecommendations, () => getVCSRecommendations));
-
-const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.classic) vviinn-product-card::part(image){border:1px solid #DDDDDD}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}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}:host(.classic) vviinn-product-card::part(price-container){align-self:center}:host(.modern) vviinn-product-card::part(title),:host(.modern) vviinn-product-card::part(brand),:host(.modern) vviinn-product-card::part(type){text-align:left;max-width:unset}";
-
-let VviinnVprWidget = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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 = "modern";
-    /** Campaign type */
-    this.campaignType = "VPR";
-    /** Locale for currency formatting */
-    this.locale = "de-DE";
-    this.showScroll = true;
-    this.recommendations = [];
-    this.loaded = false;
-  }
-  handleProductIdChange() {
-    this.getRecommendations();
-  }
-  connectedCallback() {
-    imageSearch_store.state$1.apiPath = this.apiPath;
-    imageSearch_store.state$1.currencySign = this.currencySign;
-    imageSearch_store.state$1.locale = this.locale;
-  }
-  async componentWillLoad() {
-    imageSearch_store.state$1.pricePrefix = this.pricePrefix;
-    imageSearch_store.state$1.currencySign = this.currencySign;
-    this.getRecommendations();
-  }
-  async getRecommendations() {
-    if (this.productId === undefined || this.token === undefined)
-      return;
-    const headers = createBearAuthedHeader(this.token);
-    const request = _Array._function.pipe(imageSearch_store.TaskEither.of(getRecommendationsService(this.campaignType)), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(this.productId)), imageSearch_store.TaskEither.ap(imageSearch_store.TaskEither.of(headers)), imageSearch_store.TaskEither.flatten);
-    const runRequest = await request();
-    _Array._function.pipe(runRequest, imageSearch_store.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;
-    imageSearch_store.imageSearchState.results = this.recommendations;
-    this.loaded = true;
-  }
-  render() {
-    return (index.h(index.Host, { class: { loaded: this.loaded, empty: this.recommendations.length == 0, [this.mode]: true }, "aria-hidden": this.loaded ? "false" : "true" }, index.h("style", null, imageSearch_store.state$1.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), index.h("vviinn-carousel", { exportparts: "brand, currency, deeplink, image, type, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, title: product-title", mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll }, this.recommendations.map((r) => (index.h("vviinn-product-card", { productId: r.productId, productTitle: r.title, image: r.image.thumbnail, brand: r.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: r.price.actual, salePrice: r.price.sale, responsive: this.mode === "classic", dimmedBackground: this.mode === "modern", exportparts: "title" }))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "productId": ["handleProductIdChange"]
-  }; }
-};
-VviinnVprWidget.style = vviinnVprWidgetCss;
-
-exports.vviinn_vpr_widget = VviinnVprWidget;