vviinn-widgets 2.7.2 → 2.8.0

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

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

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

@@ -0,0 +1,224 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { e as CameraIcon } from './index2.js';
+import { S as SlotSkeleton } from './customized-slots.js';
+import { d as defineCustomElement$s } from './cropper-handler2.js';
+import { d as defineCustomElement$r } from './highlight-box2.js';
+import { d as defineCustomElement$q } from './image-cropper2.js';
+import { d as defineCustomElement$p } from './search-filters2.js';
+import { d as defineCustomElement$o } from './vviinn-detected-object2.js';
+import { d as defineCustomElement$n } from './vviinn-empty-results2.js';
+import { d as defineCustomElement$m } from './vviinn-error2.js';
+import { d as defineCustomElement$l } from './vviinn-example-image2.js';
+import { d as defineCustomElement$k } from './vviinn-example-images2.js';
+import { d as defineCustomElement$j } from './vviinn-image-selector2.js';
+import { d as defineCustomElement$i } from './vviinn-image-view2.js';
+import { d as defineCustomElement$h } from './vviinn-modal2.js';
+import { d as defineCustomElement$g } from './vviinn-onboarding2.js';
+import { d as defineCustomElement$f } from './vviinn-onboarding-card-12.js';
+import { d as defineCustomElement$e } from './vviinn-onboarding-card-22.js';
+import { d as defineCustomElement$d } from './vviinn-onboarding-card-32.js';
+import { d as defineCustomElement$c } from './vviinn-overlay2.js';
+import { d as defineCustomElement$b } from './vviinn-overlayed-modal2.js';
+import { d as defineCustomElement$a } from './vviinn-preloader2.js';
+import { d as defineCustomElement$9 } from './vviinn-privacy-badge2.js';
+import { d as defineCustomElement$8 } from './vviinn-product-card2.js';
+import { d as defineCustomElement$7 } from './vviinn-server-error2.js';
+import { d as defineCustomElement$6 } from './vviinn-slide2.js';
+import { d as defineCustomElement$5 } from './vviinn-slider2.js';
+import { d as defineCustomElement$4 } from './vviinn-teaser2.js';
+import { d as defineCustomElement$3 } from './vviinn-vps-widget2.js';
+import { d as defineCustomElement$2 } from './vviinn-wrong-format2.js';
+
+const vviinnVpsButtonCss = ":host{cursor:pointer}";
+
+let VviinnVpsButton$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.globalSlotsChanged = createEvent(this, "globalSlotsChanged", 7);
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.pressed = false;
+  }
+  handleModalClosed() {
+    this.pressed = false;
+  }
+  componentDidLoad() {
+    const slots = this.el.querySelectorAll("[slot]");
+    this.globalSlotsChanged.emit(Array.from(slots));
+  }
+  handleKeyDown(ev) {
+    if (ev.code !== "Enter" && ev.code !== "Space")
+      return;
+    this.pressed = true;
+  }
+  handleClick() {
+    this.pressed = true;
+  }
+  render() {
+    return (h(Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", null, h(CameraIcon, null)), h(SlotSkeleton, null), h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images", campaignId: this.campaignId })));
+  }
+  get el() { return this; }
+  static get style() { return vviinnVpsButtonCss; }
+};
+VviinnVpsButton$1 = /*@__PURE__*/ proxyCustomElement(VviinnVpsButton$1, [1, "vviinn-vps-button", {
+    "token": [1],
+    "currencySign": [1, "currency-sign"],
+    "locale": [1],
+    "campaignId": [1, "campaign-id"],
+    "apiPath": [1, "api-path"],
+    "pressed": [32]
+  }, [[0, "modalClosed", "handleModalClosed"]]]);
+function defineCustomElement$1() {
+  const components = ["vviinn-vps-button", "cropper-handler", "highlight-box", "image-cropper", "search-filters", "vviinn-detected-object", "vviinn-empty-results", "vviinn-error", "vviinn-example-image", "vviinn-example-images", "vviinn-image-selector", "vviinn-image-view", "vviinn-modal", "vviinn-onboarding", "vviinn-onboarding-card-1", "vviinn-onboarding-card-2", "vviinn-onboarding-card-3", "vviinn-overlay", "vviinn-overlayed-modal", "vviinn-preloader", "vviinn-privacy-badge", "vviinn-product-card", "vviinn-server-error", "vviinn-slide", "vviinn-slider", "vviinn-teaser", "vviinn-vps-widget", "vviinn-wrong-format"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-vps-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnVpsButton$1);
+      }
+      break;
+    case "cropper-handler":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$s();
+      }
+      break;
+    case "highlight-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
+      }
+      break;
+    case "image-cropper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "search-filters":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "vviinn-detected-object":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "vviinn-empty-results":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "vviinn-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "vviinn-example-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "vviinn-example-images":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "vviinn-image-selector":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "vviinn-image-view":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "vviinn-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "vviinn-onboarding":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "vviinn-onboarding-card-1":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "vviinn-onboarding-card-2":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "vviinn-onboarding-card-3":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "vviinn-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "vviinn-overlayed-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "vviinn-privacy-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "vviinn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "vviinn-server-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "vviinn-slide":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "vviinn-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "vviinn-teaser":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vviinn-vps-widget":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vviinn-wrong-format":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const VviinnVpsButton = VviinnVpsButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnVpsButton, defineCustomElement };

package/dist/components/vviinn-vps-widget.js

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

package/dist/components/vviinn-vps-widget2.js

@@ -0,0 +1,350 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { x as createWorkerProxy, i as imageSearchState, s as state, j as imageSearcStateListener, y as isEmpty } from './imageSearch.store.js';
+import { _ as _function, O as Option } from './NonEmptyArray.js';
+import { s as slotChangeListener } from './customized-slots.js';
+import { d as createProductViewVpsEvent, e as createProductClickVpsEvent, f as createSearchEvent, g as createFilterEvent, v as v4, h as createWidgetVpsEvent } from './index3.js';
+import { d as defineCustomElement$q } from './cropper-handler2.js';
+import { d as defineCustomElement$p } from './highlight-box2.js';
+import { d as defineCustomElement$o } from './image-cropper2.js';
+import { d as defineCustomElement$n } from './search-filters2.js';
+import { d as defineCustomElement$m } from './vviinn-detected-object2.js';
+import { d as defineCustomElement$l } from './vviinn-empty-results2.js';
+import { d as defineCustomElement$k } from './vviinn-error2.js';
+import { d as defineCustomElement$j } from './vviinn-example-image2.js';
+import { d as defineCustomElement$i } from './vviinn-example-images2.js';
+import { d as defineCustomElement$h } from './vviinn-image-selector2.js';
+import { d as defineCustomElement$g } from './vviinn-image-view2.js';
+import { d as defineCustomElement$f } from './vviinn-modal2.js';
+import { d as defineCustomElement$e } from './vviinn-onboarding2.js';
+import { d as defineCustomElement$d } from './vviinn-onboarding-card-12.js';
+import { d as defineCustomElement$c } from './vviinn-onboarding-card-22.js';
+import { d as defineCustomElement$b } from './vviinn-onboarding-card-32.js';
+import { d as defineCustomElement$a } from './vviinn-overlay2.js';
+import { d as defineCustomElement$9 } from './vviinn-overlayed-modal2.js';
+import { d as defineCustomElement$8 } from './vviinn-preloader2.js';
+import { d as defineCustomElement$7 } from './vviinn-privacy-badge2.js';
+import { d as defineCustomElement$6 } from './vviinn-product-card2.js';
+import { d as defineCustomElement$5 } from './vviinn-server-error2.js';
+import { d as defineCustomElement$4 } from './vviinn-slide2.js';
+import { d as defineCustomElement$3 } from './vviinn-slider2.js';
+import { d as defineCustomElement$2 } from './vviinn-teaser2.js';
+import { d as defineCustomElement$1 } from './vviinn-wrong-format2.js';
+
+const workerPromise = import('./tracking.worker.js').then(m => m.worker);
+const trackEvent = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.tracking.worker', 'trackEvent');
+
+const vviinnVpsWidgetCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--spacer:8px}:host{display:block}.hidden{height:1px;visibility:hidden}vviinn-overlayed-modal.first-screen::part(secondary-action),vviinn-overlayed-modal.first-screen::part(title){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2,1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #f4f4f4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{grid-gap:24px;border-right:unset;box-sizing:border-box;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary,var(--color-primary-system));border-color:var(--color-primary,var(--color-primary-system));border-radius:2px;color:#fff;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background .1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover,var(--color-primary-hover-system));border-color:var(--color-primary-hover,var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:#000}.upload-button-content{grid-gap:16px;align-items:center;display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;justify-content:center;justify-items:start}.results-page{box-sizing:border-box;display:grid;grid-template-columns:336px auto}.results-page>*{box-sizing:border-box;padding:24px}.products{grid-gap:32px 16px;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));justify-items:center;padding:24px 0 24px 24px;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{align-self:center;justify-self:center;width:280px}.products-wrapper{display:grid;overflow-x:hidden;overflow-y:auto;padding:unset;position:relative;width:100%}.image-wrapper{grid-gap:24px;border-right:1px solid #f4f4f4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;min-width:100%}.onboarding-wrapper{grid-gap:64px;box-sizing:border-box;display:grid;padding:48px 48px 24px;position:absolute;width:100%}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(deeplink),vviinn-product-card::part(price-container),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter):hover{background:#eaeaea}search-filters::part(filter):focus{border:1px solid var(--color-primary,var(--color-primary-system));outline:none}search-filters::part(filter active){background:rgba(15,98,254,.15);color:var(--color-primary,var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{grid-gap:64px;display:grid;justify-self:center;padding-bottom:16px;padding-top:64px;position:absolute;width:60%}@media (max-width:768px){.onboarding-wrapper,.start-page_block{padding:24px}}@media (max-width:640px){.start-page{grid-gap:48px;grid-template-columns:unset;grid-template-rows:-webkit-min-content;grid-template-rows:min-content;padding:24px 0 48px}}@media (max-width:640px) and (min-width:415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width:415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;box-sizing:border-box;overflow-y:unset;position:static;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{box-sizing:border-box;padding:unset;position:static;width:unset}.results-page{grid-template-columns:unset;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;overflow-y:unset;padding-top:0;position:static;width:100%}.products{grid-gap:32px 16px;justify-content:center;padding:0}.nothing-found,.products{position:static;width:unset}.nothing-found{grid-gap:64px;align-content:start;padding:unset}}@media (max-width:320px){.products{grid-template-columns:unset}}vviinn-server-error,vviinn-wrong-format{align-self:center;justify-self:center;width:280px}";
+
+const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
+const notEmptyString = (s) => !isEmpty(s);
+const notNan = (n) => !isNaN(n);
+let VviinnVpsWidget = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
+    /** When true modal window with widget will be shown */
+    this.active = false;
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.slidePosition = 0;
+    this.width = 0;
+    this.wrongImageFormat = false;
+    this.imageSource = null;
+  }
+  activeWatcher(value) {
+    if (value) {
+      this.overflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      this.trackOpenEvent();
+    }
+    else {
+      document.body.style.overflow = this.overflow;
+    }
+  }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    trackEvent(this.apiPath, this.token, recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductClickVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    trackEvent(this.apiPath, this.token, recommendationClickEvent).finally(() => {
+      const product = imageSearchState.results.find((r) => r.productId === detail.product);
+      if (!product || !product.deeplink)
+        return;
+      window.location.href = product.deeplink;
+    });
+  }
+  trachSearchAreaChanges() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "manual-selection",
+    });
+    trackEvent(this.apiPath, this.token, searchEvent);
+  }
+  trackDetectedObject() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "attention-point",
+    });
+    trackEvent(this.apiPath, this.token, searchEvent);
+  }
+  trackFilter({ detail }) {
+    const searchEvent = createFilterEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      kind: "category",
+      action: detail,
+    });
+    trackEvent(this.apiPath, this.token, searchEvent);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  connectedCallback() {
+    state.apiPath = this.apiPath;
+    state.currencySign = this.currencySign;
+    state.locale = this.locale;
+    imageSearchState.token = this.token;
+    imageSearchState.campaignId = _function.pipe(this.campaignId, Option.fromNullable, Option.chain(Option.fromPredicate(notEmptyString)), Option.map(filterInt), Option.chain(Option.fromPredicate(notNan)), Option.map((s) => `${s}`));
+    this.uiSessionId = v4();
+    imageSearcStateListener("status", (status) => {
+      this.slidePosition = status === "fullfield" ? 1 : 0;
+    });
+  }
+  trackOpenEvent() {
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "open",
+      session_id: this.uiSessionId,
+    });
+    trackEvent(this.apiPath, this.token, widgetOpenEvent);
+  }
+  handleImageSelection(source) {
+    this.imageSource = source;
+    const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
+    const overlay = root.shadowRoot.querySelector("vviinn-overlay");
+    const modal = overlay.querySelector("vviinn-modal");
+    const modalBody = modal.shadowRoot.querySelector(".body");
+    modalBody.scrollTop = 0;
+    this.trackInitialSearch();
+  }
+  trackInitialSearch() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "full",
+    });
+    trackEvent(this.apiPath, this.token, searchEvent);
+  }
+  resetState() {
+    this.resetScroll("onboarding-block");
+    imageSearchState.image = Option.none;
+    imageSearchState.imageUrl = Option.none;
+    imageSearchState.imageBounds = Option.none;
+    imageSearchState.searchArea = Option.none;
+    imageSearchState.results = [];
+    imageSearchState.filters = [];
+    imageSearchState.detectedObjects = [];
+    imageSearchState.activeIonLink = undefined;
+    imageSearchState.rectangleSearchForm = undefined;
+    imageSearchState.status = "idle";
+    this.resetScroll("results-block");
+  }
+  haveErrors() {
+    return this.wrongImageFormat || imageSearchState.serverError;
+  }
+  resetScroll(elementId, behavior = "auto") {
+    const element = this.el.shadowRoot.getElementById(elementId);
+    element.scroll({ top: 0, left: 0, behavior });
+  }
+  handleModalClose() {
+    this.active = false;
+    this.resetState();
+    const elementsToReset = ["onboarding-block", "results-block"];
+    elementsToReset.forEach((name) => this.resetScroll(name));
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    trackEvent(this.apiPath, this.token, widgetOpenEvent);
+  }
+  render() {
+    return (h(Host, null, h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, onSecondaryActionClicked: () => this.resetState(), onModalClosed: () => this.handleModalClose(), exportparts: "secondary-action, title, close-button, example-images" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
+        error: this.haveErrors(),
+        "start-page_block": true,
+      } }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, onActionClick: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { part: "example-images", onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", null), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
+        "nothing-found": true,
+        hidden: imageSearchState.results.length > 0,
+      } }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
+        hidden: imageSearchState.results.length <= 0,
+        products: true,
+      } }, imageSearchState.results.map((p, i) => {
+      var _a;
+      return (h("vviinn-product-card", { hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", index: i }));
+    }))))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "active": ["activeWatcher"]
+  }; }
+  static get style() { return vviinnVpsWidgetCss; }
+};
+VviinnVpsWidget = /*@__PURE__*/ proxyCustomElement(VviinnVpsWidget, [1, "vviinn-vps-widget", {
+    "token": [1],
+    "apiPath": [1, "api-path"],
+    "active": [1028],
+    "currencySign": [1, "currency-sign"],
+    "locale": [1],
+    "campaignId": [1, "campaign-id"],
+    "slidePosition": [32],
+    "width": [32],
+    "wrongImageFormat": [32]
+  }, [[0, "recommendationView", "trackRecommendationView"], [0, "recommendationClick", "trackRecommendationClick"], [0, "cropperChanged", "trachSearchAreaChanges"], [0, "detectedObjectClicked", "trackDetectedObject"], [0, "filterSelected", "trackFilter"]]]);
+function defineCustomElement() {
+  const components = ["vviinn-vps-widget", "cropper-handler", "highlight-box", "image-cropper", "search-filters", "vviinn-detected-object", "vviinn-empty-results", "vviinn-error", "vviinn-example-image", "vviinn-example-images", "vviinn-image-selector", "vviinn-image-view", "vviinn-modal", "vviinn-onboarding", "vviinn-onboarding-card-1", "vviinn-onboarding-card-2", "vviinn-onboarding-card-3", "vviinn-overlay", "vviinn-overlayed-modal", "vviinn-preloader", "vviinn-privacy-badge", "vviinn-product-card", "vviinn-server-error", "vviinn-slide", "vviinn-slider", "vviinn-teaser", "vviinn-wrong-format"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-vps-widget":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnVpsWidget);
+      }
+      break;
+    case "cropper-handler":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "highlight-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "image-cropper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "search-filters":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "vviinn-detected-object":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "vviinn-empty-results":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "vviinn-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "vviinn-example-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "vviinn-example-images":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "vviinn-image-selector":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "vviinn-image-view":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "vviinn-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "vviinn-onboarding":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "vviinn-onboarding-card-1":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "vviinn-onboarding-card-2":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "vviinn-onboarding-card-3":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "vviinn-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "vviinn-overlayed-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "vviinn-privacy-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "vviinn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "vviinn-server-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "vviinn-slide":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vviinn-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vviinn-teaser":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vviinn-wrong-format":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnVpsWidget as V, defineCustomElement as d };

package/dist/components/vviinn-wrong-format.js

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

package/dist/components/vviinn-wrong-format2.js

@@ -0,0 +1,35 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './vviinn-error2.js';
+
+const vviinnWrongFormatCss = ":host{display:block}";
+
+let VviinnWrongFormat = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    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"))));
+  }
+  static get style() { return vviinnWrongFormatCss; }
+};
+VviinnWrongFormat = /*@__PURE__*/ proxyCustomElement(VviinnWrongFormat, [1, "vviinn-wrong-format"]);
+function defineCustomElement() {
+  const components = ["vviinn-wrong-format", "vviinn-error"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-wrong-format":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnWrongFormat);
+      }
+      break;
+    case "vviinn-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnWrongFormat as V, defineCustomElement as d };

package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts

@@ -44,6 +44,7 @@ export declare class VviinnProductCard {
   private productData;
   private intersectionObserver;
   connectedCallback(): void;
+  private getProductData;
   private intersectionCallback;
   componentDidLoad(): void;
   private getProduct;

package/dist/types/components/vviinn-vpr-button/stories/lol.d.ts

@@ -0,0 +1,2 @@
+export declare const lol = 42;
+//# sourceMappingURL=lol.d.ts.map

package/dist/types/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   title: string;
   component: string;
-  decorators: ((...args: any) => any)[];
+  decorators: ((story: () => any) => string)[];
   argTypes: {
     buttonSize: {
       name: string;