vviinn-widgets 2.1.0 → 2.2.2

package/dist/vviinn-widgets/vviinn-slider.entry.js

@@ -1,120 +0,0 @@
-import { h, r as registerInstance, e as Host, g as getElement } from './index-b6d739a9.js';
-import { N as NonEmptyArray, _ as _function } from './NonEmptyArray-6ef0d207.js';
-import { O as Option, s as sequenceToOption, a as Ord } from './number-98d54dd6.js';
-import { A as ArrowIcon } from './index-c9483145.js';
-
-const getStyleMap = (data) => {
-  return {
-    "arrow-wrapper": true,
-    [data.kind]: true,
-    disabled: data.disabled,
-  };
-};
-const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
-  h(ArrowIcon, null)));
-
-const vviinnSliderCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), -webkit-min-content);grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#E0E0E0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#C6C6C6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#A8A8A8}.arrow-wrapper:hover>svg{fill:#8D8D8D}";
-
-let VviinnSlider = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.elementsCount = 0;
-    this.internalPosition = 0;
-    this.swipeStartPosition = Option.none;
-    this.showBullets = true;
-    this.position = 0;
-    this.showArrows = false;
-  }
-  positionWatchHandler(newValue) {
-    this.internalPosition = newValue;
-    this.el.style.setProperty("--position", `${newValue}`);
-    this.setActiveCssClassToSlide(newValue);
-  }
-  connectedCallback() {
-    this.handleDomContentChanges();
-  }
-  handleDomContentChanges() {
-    const items = this.el.querySelectorAll("vviinn-slide");
-    this.elementsCount = items.length;
-    this.el.style.setProperty("--num-items", `${this.elementsCount}`);
-    this.setActiveCssClassToSlide(0);
-  }
-  setActiveCssClassToSlide(index) {
-    const items = this.el.querySelectorAll("vviinn-slide");
-    items.forEach((i) => i.classList.remove("active"));
-    items[index].classList.add("active");
-  }
-  goToSlide(index) {
-    this.internalPosition = index;
-    this.el.style.setProperty("--position", `${index}`);
-    this.setActiveCssClassToSlide(index);
-  }
-  renderBullets() {
-    return this.showBullets ? (h("div", { class: "controls" }, NonEmptyArray.range(0, this.elementsCount - 1).map((i) => (h("div", { class: {
-        bullet: true,
-        active: i == this.internalPosition % this.elementsCount,
-      }, onClick: () => this.goToSlide(i) }))))) : null;
-  }
-  nextSlide() {
-    this.internalPosition++;
-    this.renderSlidePosition();
-  }
-  prevSlide() {
-    const nextPostion = this.internalPosition - 1;
-    this.internalPosition =
-      nextPostion > -1 ? nextPostion : this.elementsCount - 1;
-    this.renderSlidePosition();
-  }
-  renderSlidePosition() {
-    requestAnimationFrame(() => {
-      this.el.style.setProperty("--position", `${this.internalPosition % this.elementsCount}`);
-    });
-  }
-  handleKeyDown(event) {
-    if (event.key !== "Space" && event.key !== "Enter")
-      return;
-    const target = event.target;
-    const direction = target.className.includes("prev") ? "prev" : "next";
-    switch (direction) {
-      case "prev":
-        this.prevSlide();
-        break;
-      case "next":
-        this.nextSlide();
-        break;
-    }
-  }
-  handleTouchStart(event) {
-    if (!this.showBullets)
-      return;
-    this.swipeStartPosition = _function.pipe(event.touches[0], Option.fromNullable, Option.map((t) => t.clientX));
-  }
-  handleTouchEnd(event) {
-    if (!this.showBullets)
-      return;
-    const swipeEndPosition = _function.pipe(event.changedTouches[0], Option.fromNullable, Option.map((t) => t.clientX));
-    _function.pipe(sequenceToOption(this.swipeStartPosition, swipeEndPosition), Option.map(([start, end]) => Ord.compare(start, end)), Option.map((swipeDirection) => {
-      switch (swipeDirection) {
-        case 1:
-          return this.nextSlide();
-        case -1:
-          return this.prevSlide();
-      }
-    }));
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "items-wrapper" }, h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) }, h("slot", null))), this.showArrows
-      ? [
-        h(Arrow, { kind: "prev", onClick: () => this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
-        h(Arrow, { kind: "next", onClick: () => this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
-      ]
-      : null, this.renderBullets()));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "position": ["positionWatchHandler"]
-  }; }
-};
-VviinnSlider.style = vviinnSliderCss;
-
-export { VviinnSlider as vviinn_slider };

package/dist/vviinn-widgets/vviinn-teaser.entry.js

@@ -1,20 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-b6d739a9.js';
-import { s as slotChangeListener } from './customized-slots-f3449695.js';
-
-const vviinnTeaserCss = ":host{align-items:center;display:grid;justify-items:center;grid-gap:16px}.vviinn-teaser-text{font-size:28px;font-weight:600;line-height:40px;size:28px;text-align:center}";
-
-let VviinnTeaser = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentWillLoad() {
-    slotChangeListener(this, this.el);
-  }
-  render() {
-    return (h(Host, null, h("slot", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, h("defs", null), h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), h("span", { class: "vviinn-teaser-text" }, h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", h("br", null), " einem Foto")))));
-  }
-  get el() { return getElement(this); }
-};
-VviinnTeaser.style = vviinnTeaserCss;
-
-export { VviinnTeaser as vviinn_teaser };

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

@@ -1,128 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-b6d739a9.js';
-import { _ as _function } from './NonEmptyArray-6ef0d207.js';
-import { s as sequenceT, A as Apply, g as getApiPath, c as createInitGetRequest, f as fromEither, a as chainW, m as makeRequest, b as createInitPostRequest, d as state, T as TaskEither, E as Either, i as imageSearchState } from './imageSearch.store-407f49f0.js';
-import { p as pipe } from './Handler-47db9890.js';
-import './number-98d54dd6.js';
-import './Array-4b9f84cf.js';
-
-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";
-const isVCS = (c) => c._tag === "VCS";
-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 apiPost = (path, data = {}) => pipe(sequenceToEither(getApiPath(), createInitPostRequest), 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));
-
-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%}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);
-    /** 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";
-    this.showScroll = true;
-    this.cssUrl = null;
-    this.recommendations = [];
-    this.loaded = false;
-  }
-  handleProductIdChange() {
-    this.getRecommendations();
-  }
-  handleCampaignTypeChange() {
-    this.getRecommendations();
-  }
-  handleApiPathChange(newPath) {
-    state.apiPath = newPath;
-    this.getRecommendations();
-  }
-  connectedCallback() {
-    state.apiPath = this.apiPath;
-    state.currencySign = this.currencySign;
-    state.locale = this.locale;
-  }
-  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;
-  }
-  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), 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 { VviinnVprWidget as vviinn_vpr_widget };

package/dist/vviinn-widgets/vviinn-wrong-format.entry.js

@@ -1,16 +0,0 @@
-import { r as registerInstance, j as createEvent, h, e as Host } from './index-b6d739a9.js';
-
-const vviinnWrongFormatCss = ":host{display:block}";
-
-let VviinnWrongFormat = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.actionClick = createEvent(this, "actionClick", 7);
-  }
-  render() {
-    return (h(Host, null, h("vviinn-error", null, h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"), h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."), h("button", { slot: "action", onClick: () => this.actionClick.emit() }, "Neues Bild hochladen"))));
-  }
-};
-VviinnWrongFormat.style = vviinnWrongFormatCss;
-
-export { VviinnWrongFormat as vviinn_wrong_format };