vviinn-widgets 2.5.2 → 2.6.0

package/www/build/vviinn-vps-button.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { C as CameraIcon } from './index-533f9255.js';
+import { S as SlotSkeleton } from './customized-slots-fb9b3e5f.js';
+
+const vviinnVpsButtonCss = ":host{cursor:pointer}";
+
+let VviinnVpsButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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" })));
+  }
+  get el() { return getElement(this); }
+};
+VviinnVpsButton.style = vviinnVpsButtonCss;
+
+export { VviinnVpsButton as vviinn_vps_button };

package/{dist/cjs/vviinn-vps-widget.cjs.entry.js → www/build/vviinn-vps-widget.entry.js}

@@ -1,18 +1,17 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0f5516a6.js');
-const imageSearch_store = require('./imageSearch.store-865c23f4.js');
-const customizedSlots = require('./customized-slots-0c0d0665.js');
-const index$1 = require('./index-0eb3036a.js');
-require('./Handler-176539c8.js');
+import { r as registerInstance, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { i as imageSearchState, s as state } from './imageSearch.store-15bda6de.js';
+import { O as Option } from './number-171db649.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.js';
+import { c as createProductViewVpsEvent, a as createProductClickVpsEvent, b as createSearchEvent, d as createFilterEvent, v as v4, e as createTrackingApi, f as createWidgetVpsEvent } from './index-6c6de682.js';
+import './Handler-edcb46f4.js';
+import './NonEmptyArray-947ab7b3.js';
+import './Array-bdfc75db.js';
 
 const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){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{border-right:unset;box-sizing:border-box;grid-gap:24px;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:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.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:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #F4F4F4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#F4F4F4;border-radius:4px;border:1px solid #F4F4F4;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{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:-webkit-min-content;grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@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;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.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;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
 
 let VviinnVpsWidget = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     /** @internal */
     this.apiPath = "https://api.vviinn.com";
     /** When true modal window with widget will be shown */
@@ -37,20 +36,20 @@ let VviinnVpsWidget = class {
     }
   }
   trackRecommendationView({ detail }) {
-    const recommendationViewEvent = index$1.createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
   trackRecommendationClick({ detail }) {
-    const recommendationClickEvent = index$1.createProductClickVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    const recommendationClickEvent = createProductClickVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationClickEvent).finally(() => {
-      const product = imageSearch_store.imageSearchState.results.find((r) => r.productId === detail.product);
+      const product = imageSearchState.results.find((r) => r.productId === detail.product);
       if (!product || !product.deeplink)
         return;
       window.location.href = product.deeplink;
     });
   }
   trachSearchAreaChanges() {
-    const searchEvent = index$1.createSearchEvent({
+    const searchEvent = createSearchEvent({
       session_id: this.uiSessionId,
       source: this.imageSource,
       search_area: "manual-selection",
@@ -58,7 +57,7 @@ let VviinnVpsWidget = class {
     this.trackingApi.trackEvent(searchEvent);
   }
   trackDetectedObject() {
-    const searchEvent = index$1.createSearchEvent({
+    const searchEvent = createSearchEvent({
       session_id: this.uiSessionId,
       source: this.imageSource,
       search_area: "attention-point",
@@ -66,7 +65,7 @@ let VviinnVpsWidget = class {
     this.trackingApi.trackEvent(searchEvent);
   }
   trackFilter({ detail }) {
-    const searchEvent = index$1.createFilterEvent({
+    const searchEvent = createFilterEvent({
       session_id: this.uiSessionId,
       source: this.imageSource,
       kind: "category",
@@ -75,18 +74,18 @@ let VviinnVpsWidget = class {
     this.trackingApi.trackEvent(searchEvent);
   }
   componentWillLoad() {
-    customizedSlots.slotChangeListener(this, this.el);
+    slotChangeListener(this, this.el);
   }
   connectedCallback() {
-    imageSearch_store.state.apiPath = this.apiPath;
-    imageSearch_store.state.currencySign = this.currencySign;
-    imageSearch_store.state.locale = this.locale;
-    imageSearch_store.imageSearchState.token = this.token;
-    this.uiSessionId = index$1.v4();
+    state.apiPath = this.apiPath;
+    state.currencySign = this.currencySign;
+    state.locale = this.locale;
+    imageSearchState.token = this.token;
+    this.uiSessionId = v4();
   }
   trackOpenEvent() {
-    this.trackingApi = index$1.createTrackingApi(this.apiPath, this.token);
-    const widgetOpenEvent = index$1.createWidgetVpsEvent({
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = createWidgetVpsEvent({
       action: "open",
       session_id: this.uiSessionId,
     });
@@ -103,7 +102,7 @@ let VviinnVpsWidget = class {
     this.trackInitialSearch();
   }
   trackInitialSearch() {
-    const searchEvent = index$1.createSearchEvent({
+    const searchEvent = createSearchEvent({
       session_id: this.uiSessionId,
       source: this.imageSource,
       search_area: "full",
@@ -113,19 +112,19 @@ let VviinnVpsWidget = class {
   resetState() {
     this.resetScroll("onboarding-block");
     this.slidePosition = 0;
-    imageSearch_store.imageSearchState.image = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.imageUrl = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.imageBounds = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.results = [];
-    imageSearch_store.imageSearchState.filters = [];
-    imageSearch_store.imageSearchState.detectedObjects = [];
-    imageSearch_store.imageSearchState.activeIonLink = undefined;
-    imageSearch_store.imageSearchState.rectangleSearchForm = undefined;
+    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;
     this.resetScroll("results-block");
   }
   haveErrors() {
-    return this.wrongImageFormat || imageSearch_store.imageSearchState.serverError;
+    return this.wrongImageFormat || imageSearchState.serverError;
   }
   resetScroll(elementId, behavior = "auto") {
     const element = this.el.shadowRoot.getElementById(elementId);
@@ -136,32 +135,32 @@ let VviinnVpsWidget = class {
     this.resetState();
     const elementsToReset = ["onboarding-block", "results-block"];
     elementsToReset.forEach((name) => this.resetScroll(name));
-    const widgetOpenEvent = index$1.createWidgetVpsEvent({
+    const widgetOpenEvent = createWidgetVpsEvent({
       action: "close",
       session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetOpenEvent);
   }
   render() {
-    return (index.h(index.Host, null, index.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" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
+    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,
-      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, onActionClick: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { part: "example-images", onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", null), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
+      } }, 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: imageSearch_store.imageSearchState.results.length > 0,
-      } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
-        hidden: imageSearch_store.imageSearchState.results.length <= 0,
+        hidden: imageSearchState.results.length > 0,
+      } }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
+        hidden: imageSearchState.results.length <= 0,
         products: true,
-      } }, imageSearch_store.imageSearchState.results.map((p, i) => {
+      } }, imageSearchState.results.map((p, i) => {
       var _a;
-      return (index.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 }));
+      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 index.getElement(this); }
+  get el() { return getElement(this); }
   static get watchers() { return {
     "active": ["activeWatcher"]
   }; }
 };
 VviinnVpsWidget.style = vviinnVpsWidgetCss;
 
-exports.vviinn_vps_widget = VviinnVpsWidget;
+export { VviinnVpsWidget as vviinn_vps_widget };

package/www/build/vviinn-widgets.css

@@ -1 +1,6 @@
-:host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}
+:host {
+  --color-primary-system: #0F62FE;
+  --color-primary-hover-system: #014CDA;
+  --color-icons-system: #2F8EDF;
+  --spacer: 8px;
+}

package/www/build/vviinn-widgets.esm.js

@@ -1 +1,125 @@
-import{p as e,b as i}from"./p-bad1809f.js";import{g as r}from"./p-c36546fa.js";(()=>{const i=import.meta.url,r={};return""!==i&&(r.resourcesUrl=new URL(".",i).href),e(r)})().then((e=>(r(),i([["p-8f955b15",[[1,"cropper-handler",{handler:[16],disabled:[4]}]]],["p-8d56e795",[[1,"vviinn-error"]]],["p-9654fe35",[[1,"vviinn-preloader"]]],["p-da9c933b",[[1,"vviinn-vpr-widget",{blockTitle:[1,"block-title"],imageRatio:[2,"image-ratio"],imageWidth:[2,"image-width"],productId:[1,"product-id"],token:[1],currencySign:[1,"currency-sign"],pricePrefix:[1,"price-prefix"],mode:[1],campaignType:[1,"campaign-type"],locale:[1],apiPath:[1,"api-path"],useCarousel:[4,"use-carousel"],showScroll:[4,"show-scroll"],cssUrl:[1,"css-url"],recommendations:[32],loaded:[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{mode:[1],imageWidth:[2,"image-width"],showScroll:[4,"show-scroll"],recommendations:[16],moveDirection:[32],contentGroups:[32],activeContentGroup:[32]}],[1,"vviinn-product-card",{brand:[1],currency:[1],deeplink:[1],image:[1],imageRatio:[2,"image-ratio"],imageWidth:[2,"image-width"],locale:[1],price:[2],pricePrefix:[1,"price-prefix"],productId:[1,"product-id"],productTitle:[1,"product-title"],productType:[1,"product-type"],salePrice:[2,"sale-price"],responsive:[4],dimmedBackground:[4,"dimmed-background"],index:[2],imageLoaded:[32]}]]],["p-39fdc5c9",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{active:[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{filter:[16],selectedCategoryId:[32],hideFilters:[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{disabled:[4],handleMove:[32]}],[1,"vviinn-example-image",{src:[1],width:[2],height:[2],selected:[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{detectedObject:[16],position:[32]}],[1,"vviinn-modal",{active:[1540],slider:[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{showBullets:[4,"show-bullets"],position:[514],showArrows:[4,"show-arrows"],elementsCount:[32],internalPosition:[32],swipeStartPosition:[32]}]]],["p-d991330b",[[1,"vviinn-vps-widget",{token:[1],apiPath:[1,"api-path"],active:[1028],currencySign:[1,"currency-sign"],locale:[1],slidePosition:[32],width:[32],wrongImageFormat:[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]]]],["p-762dc067",[[1,"vviinn-vps-button",{token:[1],currencySign:[1,"currency-sign"],locale:[1],apiPath:[1,"api-path"],pressed:[32]},[[0,"modalClosed","handleModalClosed"]]]]],["p-f41e25f0",[[1,"vviinn-recommendations-sidebar",{sidebarTitle:[1,"sidebar-title"],token:[1],productId:[1,"product-id"],position:[1],sourceImage:[1,"source-image"],widgetScrollbar:[4,"widget-scrollbar"],state:[32]},[[16,"click","bodyClickListener"]]]]],["p-b3731705",[[1,"vviinn-vpr-button",{token:[1],productId:[1,"product-id"],position:[1],sourceImage:[1,"source-image"],sidebarTitle:[1,"sidebar-title"],modalScrollbar:[4,"modal-scrollbar"]}]]]],e))));
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-89051fa8.js';
+import { g as globalScripts } from './app-globals-26a61baa.js';
+
+/*
+ Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
+ */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (BUILD.isDev && !BUILD.isTesting) {
+        consoleDevInfo('Running in development mode.');
+    }
+    if (BUILD.cssVarShim) {
+        // shim css vars
+        plt.$cssShim$ = win.__cssshim;
+    }
+    if (BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(H.prototype);
+    }
+    if (BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim
+        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
+            s.getAttribute('data-stencil-namespace') === NAMESPACE)
+        : null;
+    const importMeta = import.meta.url;
+    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!BUILD.safari10 && importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    else if (BUILD.dynamicImportShim || BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
+        if (BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (BUILD.dynamicImportShim && !win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return import(/* webpackChunkName: "polyfills-dom" */ './dom-db0073f0.js').then(() => opts);
+        }
+    }
+    return promiseResolve(opts);
+};
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
+                    type: 'application/javascript',
+                }));
+                mod = new Promise((resolve) => {
+                    script.onload = () => {
+                        resolve(win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+
+patchBrowser().then(options => {
+  globalScripts();
+  return bootstrapLazy([["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"campaigns":[1],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[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]}]]],["vviinn-image-view",[[1,"vviinn-image-view"]]],["vviinn-onboarding",[[1,"vviinn-onboarding"]]],["vviinn-example-images",[[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]]]],["vviinn-overlayed-modal",[[1,"vviinn-overlayed-modal",{"active":[4]}]]],["vviinn-vpr-widget",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]]]],["vviinn-empty-results",[[1,"vviinn-empty-results"]]],["vviinn-image-selector",[[1,"vviinn-image-selector"]]],["vviinn-server-error",[[1,"vviinn-server-error"]]],["vviinn-wrong-format",[[1,"vviinn-wrong-format"]]],["search-filters",[[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}]]],["vviinn-privacy-badge",[[1,"vviinn-privacy-badge"]]],["vviinn-teaser",[[1,"vviinn-teaser"]]],["image-cropper",[[1,"image-cropper",{"disabled":[4],"handleMove":[32]}]]],["vviinn-carousel",[[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-example-image",[[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}]]],["highlight-box",[[1,"highlight-box"]]],["vviinn-detected-object",[[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}]]],["vviinn-modal",[[1,"vviinn-modal",{"active":[1540],"slider":[32]}]]],["vviinn-onboarding-card-1",[[1,"vviinn-onboarding-card-1"]]],["vviinn-onboarding-card-2",[[1,"vviinn-onboarding-card-2"]]],["vviinn-onboarding-card-3",[[1,"vviinn-onboarding-card-3"]]],["vviinn-overlay",[[1,"vviinn-overlay"]]],["vviinn-slide",[[1,"vviinn-slide"]]],["vviinn-slider",[[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-product-card",[[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"index":[2],"imageLoaded":[32]}]]]], options);
+});

package/www/build/vviinn-wrong-format.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.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 };

package/www/index.html

@@ -1 +1,10 @@
-<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="preconnect" href="https://cdn.vviinn.com"> <link rel="preconnect" href="https://d1rgjmn2wmqeif.cloudfront.net"> <link rel="modulepreload" href="/build/p-cfd998c1.js"><script type="module" src="/build/p-cfd998c1.js" data-stencil data-resources-url="/build/" data-stencil-namespace="vviinn-widgets"></script> <script nomodule="" src="/build/vviinn-widgets.js" data-stencil></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&amp;display=swap" rel="stylesheet"> </head> <body> <vviinn-vpr-widget token="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjEwNSwianRpIjoiMWJkY2I3ZWQtZTI4OS00ODBjLWI5NDItMjhhNGMwNzRmODgxIiwic2NvcGVzIjpbInZwciIsInZwcyIsInZwYyJdfQ.yZhH8r594NydsXsQjS5e1d_OfvnCoGHUj94OVq6kL61ywGsjsY97bOXlTYP9Q9uRCQX_3LRxnS6J7PULV99ndKfwnayNp0PnKnZ02KPMQ8Mb-8reqZBsvsrgrqb-9xvT3itJluFOnXI9FAlQ5s3XNzdt3OQ85eisOXTDNf60Bjc" product-id="FEX1005" block-title="" aria-hidden="false" mode="grid" show-scroll="false" css-url="https://storage.googleapis.com/aiaas-merchant-assets/production/105/css/1169b48d-6f9f-4304-b452-c223a9bacaac.css"></vviinn-vpr-widget> </body></html>
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="preconnect" href="https://cdn.vviinn.com"> <link rel="preconnect" href="https://d1rgjmn2wmqeif.cloudfront.net"> <script type="module" src="/build/vviinn-widgets.esm.js" data-stencil></script> <script nomodule="" src="/build/vviinn-widgets.js" data-stencil></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&amp;display=swap" rel="stylesheet"> </head> <body> <vviinn-vpr-widget token="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjEwNSwianRpIjoiMWJkY2I3ZWQtZTI4OS00ODBjLWI5NDItMjhhNGMwNzRmODgxIiwic2NvcGVzIjpbInZwciIsInZwcyIsInZwYyJdfQ.yZhH8r594NydsXsQjS5e1d_OfvnCoGHUj94OVq6kL61ywGsjsY97bOXlTYP9Q9uRCQX_3LRxnS6J7PULV99ndKfwnayNp0PnKnZ02KPMQ8Mb-8reqZBsvsrgrqb-9xvT3itJluFOnXI9FAlQ5s3XNzdt3OQ85eisOXTDNf60Bjc" product-id="FEX1005" block-title="" aria-hidden="false" mode="grid" show-scroll="false" css-url="https://storage.googleapis.com/aiaas-merchant-assets/production/105/css/1169b48d-6f9f-4304-b452-c223a9bacaac.css" campaigns="1,2,3"></vviinn-vpr-widget> <script>
+if ('serviceWorker' in navigator && location.protocol !== 'file:') {
+  // auto-unregister service worker during dev mode
+  navigator.serviceWorker.getRegistration().then(function(registration) {
+  if (registration) {
+    registration.unregister().then(function() { location.reload(true) });
+  }
+  });
+}
+</script></body></html>