vviinn-widgets 2.7.2 → 2.8.0

package/dist/components/vviinn-slider2.js

@@ -0,0 +1,159 @@
+import { h, attachShadow, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { O as Option, N as NonEmptyArray, _ as _function, s as sequenceToOption } from './NonEmptyArray.js';
+import { A as ArrowIcon } from './index2.js';
+
+// -------------------------------------------------------------------------------------
+// -------------------------------------------------------------------------------------
+// instances
+// -------------------------------------------------------------------------------------
+/**
+ * @category instances
+ * @since 2.10.0
+ */
+var Eq = {
+    equals: function (first, second) { return first === second; }
+};
+/**
+ * @category instances
+ * @since 2.10.0
+ */
+var Ord = {
+    equals: Eq.equals,
+    compare: function (first, second) { return (first < second ? -1 : first > second ? 1 : 0); }
+};
+
+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;grid-gap:20px;display:grid;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 .33s ease-in-out}.controls{grid-gap:16px;display:grid;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;transition:background .1s ease-in-out;width:8px}.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:#fff;border:2px solid #fff;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 .25ms ease-in-out;width:calc(var(--spacer)*4)}.arrow-wrapper:active{opacity:.75}.arrow-wrapper:active,.arrow-wrapper:focus{border-color:var(--color-primary,var(--color-primary-system))}.arrow-wrapper:focus{opacity:.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotateY(180deg)}.arrow-wrapper>svg{fill:#a8a8a8;transition:fill .25ms ease-in-out}.arrow-wrapper:hover>svg{fill:#8d8d8d}";
+
+let VviinnSlider = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    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 this; }
+  static get watchers() { return {
+    "position": ["positionWatchHandler"]
+  }; }
+  static get style() { return vviinnSliderCss; }
+};
+VviinnSlider = /*@__PURE__*/ proxyCustomElement(VviinnSlider, [1, "vviinn-slider", {
+    "showBullets": [4, "show-bullets"],
+    "position": [514],
+    "showArrows": [4, "show-arrows"],
+    "elementsCount": [32],
+    "internalPosition": [32],
+    "swipeStartPosition": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-slider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-slider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnSlider);
+      }
+      break;
+  } });
+}
+
+export { VviinnSlider as V, defineCustomElement as d };

package/dist/components/vviinn-teaser.js

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

package/dist/components/vviinn-teaser2.js

@@ -0,0 +1,33 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { s as slotChangeListener } from './customized-slots.js';
+
+const vviinnTeaserCss = ":host{grid-gap:16px;align-items:center;display:grid;justify-items:center}.vviinn-teaser-text{size:28px;font-size:28px;font-weight:600;line-height:40px;text-align:center}";
+
+let VviinnTeaser = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  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 this; }
+  static get style() { return vviinnTeaserCss; }
+};
+VviinnTeaser = /*@__PURE__*/ proxyCustomElement(VviinnTeaser, [1, "vviinn-teaser"]);
+function defineCustomElement() {
+  const components = ["vviinn-teaser"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-teaser":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnTeaser);
+      }
+      break;
+  } });
+}
+
+export { VviinnTeaser as V, defineCustomElement as d };

package/dist/components/vviinn-vpr-button.js

@@ -0,0 +1,93 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { V as VisualSearchIcon } from './index2.js';
+import { d as defineCustomElement$5 } from './vviinn-carousel2.js';
+import { d as defineCustomElement$4 } from './vviinn-product-card2.js';
+import { d as defineCustomElement$3 } from './recommendations-sidebar.js';
+import { d as defineCustomElement$2 } from './vviinn-vpr-vidget.js';
+
+const vviinnVprButtonCss = ":host{display:block}.open-button{align-items:center;background:hsla(0,0%,100%,.8);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;transition:all .25s ease-in-out;width:40px}.open-button:hover{box-shadow:0 2px 6px rgba(0,0,0,.25)}.open-button:focus{border:2px solid rgba(15,98,254,.5);outline:none}.open-button:active{background:#f4f4f4;outline:none}";
+
+let VviinnVprButton$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.sidebarTitle = "Visually similar products";
+    this.modalScrollbar = false;
+    /** comma-separated list of campaign-ids */
+    this.campaigns = "";
+    this.sidebar = null;
+    this.sidebarCloseListener = () => {
+      document.body.removeChild(this.sidebar);
+    };
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, h("slot", null, h(VisualSearchIcon, null)))));
+  }
+  handleClick() {
+    const sidebar = document.createElement("vviinn-recommendations-sidebar");
+    sidebar.sidebarTitle = this.sidebarTitle;
+    sidebar.productId = this.productId;
+    sidebar.token = this.token;
+    sidebar.position = this.position;
+    sidebar.sourceImage = this.sourceImage;
+    sidebar.widgetScrollbar = this.modalScrollbar;
+    sidebar.campaigns = this.campaigns;
+    this.sidebar = sidebar;
+    sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
+    document.body.append(this.sidebar);
+  }
+  disconnectedCallback() {
+    if (!this.sidebar)
+      return;
+    this.sidebar.removeEventListener("modalCLosed", this.sidebarCloseListener);
+    document.body.removeChild(this.sidebar);
+  }
+  static get style() { return vviinnVprButtonCss; }
+};
+VviinnVprButton$1 = /*@__PURE__*/ proxyCustomElement(VviinnVprButton$1, [1, "vviinn-vpr-button", {
+    "token": [1],
+    "productId": [1, "product-id"],
+    "position": [1],
+    "sourceImage": [1, "source-image"],
+    "sidebarTitle": [1, "sidebar-title"],
+    "modalScrollbar": [4, "modal-scrollbar"],
+    "campaigns": [1]
+  }]);
+function defineCustomElement$1() {
+  const components = ["vviinn-vpr-button", "vviinn-carousel", "vviinn-product-card", "vviinn-recommendations-sidebar", "vviinn-vpr-widget"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-vpr-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnVprButton$1);
+      }
+      break;
+    case "vviinn-carousel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "vviinn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vviinn-recommendations-sidebar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vviinn-vpr-widget":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const VviinnVprButton = VviinnVprButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnVprButton, defineCustomElement };