vviinn-widgets 2.8.1 → 2.9.0

package/dist/cjs/cropper-handler_27.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42b99955.js');
-const index$1 = require('./index-3e5bfdde.js');
-const index$2 = require('./index-eed9118c.js');
-const customizedSlots = require('./customized-slots-68eeae0f.js');
+const index = require('./index-1077e27c.js');
+const index$1 = require('./index-4ea3a37f.js');
+const index$2 = require('./index-b2b8f092.js');
+const customizedSlots = require('./customized-slots-84e1c444.js');
 
 const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";
 
@@ -95,7 +95,6 @@ let ImageCropper = class {
     this.mouseStartPoint = undefined;
     this.bounds = undefined;
     this.resizeObserver = new ResizeObserver(() => {
-      console.log("resized");
       this.bounds = this.el.getBoundingClientRect();
     });
   }
@@ -334,7 +333,7 @@ let VviinnError = class {
 };
 VviinnError.style = vviinnErrorCss;
 
-const vviinnExampleImageCss = ":host{display:block;margin-bottom:8px;position:relative}img{width:100%;height:auto;cursor:pointer}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:12px;display:none;padding:4px 6px;pointer-events:none;position:absolute;right:12px;z-index:4}vviinn-preloader{--preloader-size:12px}@media (max-width: 640px){.image-preloader{display:block}}";
+const vviinnExampleImageCss = ":host{display:block;margin-bottom:8px;position:relative}:host(:focus){border:2px solid var(--color-primary)}img{width:100%;height:auto;cursor:pointer}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:12px;display:none;padding:4px 6px;position:absolute;right:12px;z-index:4}vviinn-preloader{--preloader-size:12px}@media (max-width: 640px){.image-preloader{display:block}}";
 
 let VviinnExampleImage = class {
   constructor(hostRef) {
@@ -344,22 +343,28 @@ let VviinnExampleImage = class {
     this.src = "";
     this.width = 0;
     this.height = 0;
+    this.tabIndex = -1;
     this.selected = false;
   }
-  async selectImage(_event) {
+  async selectImage() {
     this.selected = true;
     const file = await index$1.toFile(this.src);
     const processResult = await index$1.processSelectedFile(file);
     index$1._function.pipe(processResult, index$1.Either.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
     this.selected = false;
   }
+  handleKeyPress({ key }) {
+    if (key !== "Enter" && key !== " ")
+      return;
+    this.selectImage();
+  }
   showPreloader() {
     return ((index$1.imageSearchState.objectDetectionInProgress ||
       index$1.imageSearchState.loading) &&
       this.selected);
   }
   render() {
-    return (index.h(index.Host, null, this.showPreloader() ? (index.h("div", { class: "image-preloader" }, index.h("vviinn-preloader", null))) : null, index.h("img", { onClick: (ev) => this.selectImage(ev), src: this.src, width: this.width, height: this.height })));
+    return (index.h(index.Host, { tabindex: `${this.tabIndex}`, onClick: () => this.selectImage(), onKeyUp: (ev) => this.handleKeyPress(ev) }, this.showPreloader() ? (index.h("div", { class: "image-preloader" }, index.h("vviinn-preloader", null))) : null, index.h("img", { src: this.src, width: this.width, height: this.height })));
   }
 };
 VviinnExampleImage.style = vviinnExampleImageCss;
@@ -381,8 +386,13 @@ let VviinnExampleImages = class {
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
+  delegateFocus() {
+    const firstSlot = this.imagesBlock.childNodes[0];
+    const firstExampleImage = firstSlot.childNodes[0];
+    firstExampleImage.focus();
+  }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), index.h("div", { class: "images" }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+    return (index.h(index.Host, { onFocus: () => this.delegateFocus() }, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), index.h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", tabIndex: 0 })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", tabIndex: 1 })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", tabIndex: 2 })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", tabIndex: 3 })))));
   }
   get el() { return index.getElement(this); }
 };
@@ -417,7 +427,7 @@ const getImageSizes = (i) => {
   const dimensions = index$1.dimensionsFromImage(i);
   const resize = index$1.scaleByLargestSide(288);
   const newDimensions = resize(dimensions);
-  const sizes = newDimensions.map(d => d.size);
+  const sizes = newDimensions.map((d) => d.size);
   return [sizes[0], sizes[1]];
 };
 let VviinnImageView = class {
@@ -755,12 +765,14 @@ let VviinnProductCard = class {
     this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
-    links.forEach((link) => link.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      this.recommendationClick.emit(this.getProductData());
-      index$1._function.pipe(getAnalyticsModule, index$1.Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
-    }));
+    links.forEach((link) => {
+      ['click', 'auxclick'].forEach((eventType) => link.addEventListener(eventType, (event) => {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.recommendationClick.emit(this.getProductData());
+        index$1._function.pipe(getAnalyticsModule, index$1.Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+      }));
+    });
   }
   getProduct() {
     return index$1.imageSearchState.results.find((r) => r.productId === this.productId);
@@ -1085,7 +1097,7 @@ let VviinnVpsWidget = class {
     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: {
         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: !index$1.imageSearchState.serverError }, onActionClick: () => (index$1.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" }, index$1.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
+      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !index$1.imageSearchState.serverError }, onActionClick: () => (index$1.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", { tabindex: 0, 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" }, index$1.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
         "nothing-found": true,
         hidden: index$1.imageSearchState.results.length > 0,
       } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {

package/dist/cjs/{customized-slots-68eeae0f.js → customized-slots-84e1c444.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-42b99955.js');
+const index = require('./index-1077e27c.js');
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/cjs/{index-42b99955.js → index-1077e27c.js}

@@ -21,7 +21,6 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.8.0","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;
@@ -334,6 +333,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -508,6 +513,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -637,6 +643,12 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1342,7 +1354,6 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-exports.Env = Env;
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;

package/dist/cjs/{index-3e5bfdde.js → index-4ea3a37f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-42b99955.js');
+const index = require('./index-1077e27c.js');
 
 // -------------------------------------------------------------------------------------
 /**

package/dist/cjs/{index-eed9118c.js → index-b2b8f092.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-42b99955.js');
+const index = require('./index-1077e27c.js');
 
 const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));

package/dist/cjs/loader.cjs.js

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42b99955.js');
-const appGlobals = require('./app-globals-c444baf0.js');
+const index = require('./index-1077e27c.js');
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -15,8 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  appGlobals.globalScripts();
-  return index.bootstrapLazy([["cropper-handler_27.cjs",[[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"]]],[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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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]}]]],["vviinn-vps-button.cjs",[[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"]]]]],["vviinn-carousel_2.cjs",[[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"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[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.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["cropper-handler_27.cjs",[[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"]]],[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],"tabIndex":[2,"tab-index"],"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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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]}]]],["vviinn-vps-button.cjs",[[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"]]]]],["vviinn-carousel_2.cjs",[[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"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[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.cjs",[[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]}]]]], options);
   });
 };
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42b99955.js');
-const index$1 = require('./index-3e5bfdde.js');
-const index$2 = require('./index-eed9118c.js');
+const index = require('./index-1077e27c.js');
+const index$1 = require('./index-4ea3a37f.js');
+const index$2 = require('./index-b2b8f092.js');
 
 const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
 

package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42b99955.js');
-const index$1 = require('./index-eed9118c.js');
+const index = require('./index-1077e27c.js');
+const index$1 = require('./index-b2b8f092.js');
 
 const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:0;box-sizing:border-box;display:block;display:flex;height:100vh;left:0;position:fixed;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}header{position:relative;text-align:center;padding:32px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);padding:8px}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{-webkit-animation-name:slideOutFromBottom;animation-name:slideOutFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{-webkit-animation-name:slideInFromBottom;animation-name:slideInFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{-webkit-animation-name:slideOutFromRight;animation-name:slideOutFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.open) .sidebar{-webkit-animation-name:slideInFromRight;animation-name:slideInFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}vviinn-vpr-widget::part(title),vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(type){text-align:left}vviinn-vpr-widget::part(price-container){align-self:start}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@-webkit-keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}";
 

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42b99955.js');
-const index$1 = require('./index-eed9118c.js');
+const index = require('./index-1077e27c.js');
+const index$1 = require('./index-b2b8f092.js');
 
 const vviinnVprButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#F4F4F4;outline:none}";
 

package/dist/cjs/vviinn-vps-button.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42b99955.js');
-const index$1 = require('./index-eed9118c.js');
-const customizedSlots = require('./customized-slots-68eeae0f.js');
+const index = require('./index-1077e27c.js');
+const index$1 = require('./index-b2b8f092.js');
+const customizedSlots = require('./customized-slots-84e1c444.js');
 
 const vviinnVpsButtonCss = ":host{cursor:pointer}";
 

package/dist/cjs/vviinn-widgets.cjs.js

@@ -1,7 +1,6 @@
 'use strict';
 
-const index = require('./index-42b99955.js');
-const appGlobals = require('./app-globals-c444baf0.js');
+const index = require('./index-1077e27c.js');
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -16,6 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  appGlobals.globalScripts();
-  return index.bootstrapLazy([["cropper-handler_27.cjs",[[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"]]],[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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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]}]]],["vviinn-vps-button.cjs",[[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"]]]]],["vviinn-carousel_2.cjs",[[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"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[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.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["cropper-handler_27.cjs",[[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"]]],[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],"tabIndex":[2,"tab-index"],"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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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]}]]],["vviinn-vps-button.cjs",[[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"]]]]],["vviinn-carousel_2.cjs",[[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"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}]]],["vviinn-recommendations-sidebar.cjs",[[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.cjs",[[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]}]]]], options);
 });

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.js

@@ -1,5 +1,6 @@
 import { Component, Host, h, Prop } from "@stencil/core";
 import { getCursorValue } from "../../../../../cropper/Handler";
+import styles from "./cropper-handler.css";
 export class CropperHandler {
   constructor() {
     this.disabled = false;
@@ -15,12 +16,7 @@ export class CropperHandler {
   }
   static get is() { return "cropper-handler"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cropper-handler.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cropper-handler.css"]
-  }; }
+  static get styles() { return styles; }
   static get properties() { return {
     "handler": {
       "type": "unknown",

package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.js

@@ -5,6 +5,7 @@ import { imageSearchState, makeRectangularSearchRequest, } from "../../../../sto
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { findTarget } from "../../../../dom";
+import styles from "./image-cropper.css";
 const MIN_SEARCHAREA_SIZE = 40;
 export class ImageCropper {
   constructor() {
@@ -13,7 +14,6 @@ export class ImageCropper {
     this.mouseStartPoint = undefined;
     this.bounds = undefined;
     this.resizeObserver = new ResizeObserver(() => {
-      console.log("resized");
       this.bounds = this.el.getBoundingClientRect();
     });
   }
@@ -113,12 +113,7 @@ export class ImageCropper {
   }
   static get is() { return "image-cropper"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["image-cropper.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["image-cropper.css"]
-  }; }
+  static get styles() { return styles; }
   static get properties() { return {
     "disabled": {
       "type": "boolean",

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.css

@@ -4,6 +4,10 @@
   position: relative;
 }
 
+:host(:focus) {
+  border: 2px solid var(--color-primary);
+}
+
 img {
   width: 100%;
   height: auto;
@@ -16,7 +20,6 @@ img {
   bottom: 12px;
   display: none;
   padding: 4px 6px;
-  pointer-events: none;
   position: absolute;
   right: 12px;
   z-index: 4;

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js

@@ -8,25 +8,31 @@ export class VviinnExampleImage {
     this.src = "";
     this.width = 0;
     this.height = 0;
+    this.tabIndex = -1;
     this.selected = false;
   }
-  async selectImage(_event) {
+  async selectImage() {
     this.selected = true;
     const file = await toFile(this.src);
     const processResult = await processSelectedFile(file);
     pipe(processResult, E.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
     this.selected = false;
   }
+  handleKeyPress({ key }) {
+    if (key !== "Enter" && key !== " ")
+      return;
+    this.selectImage();
+  }
   showPreloader() {
     return ((imageSearchState.objectDetectionInProgress ||
       imageSearchState.loading) &&
       this.selected);
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { tabindex: `${this.tabIndex}`, onClick: () => this.selectImage(), onKeyUp: (ev) => this.handleKeyPress(ev) },
       this.showPreloader() ? (h("div", { class: "image-preloader" },
         h("vviinn-preloader", null))) : null,
-      h("img", { onClick: (ev) => this.selectImage(ev), src: this.src, width: this.width, height: this.height })));
+      h("img", { src: this.src, width: this.width, height: this.height })));
   }
   static get is() { return "vviinn-example-image"; }
   static get encapsulation() { return "shadow"; }
@@ -90,6 +96,24 @@ export class VviinnExampleImage {
       "attribute": "height",
       "reflect": false,
       "defaultValue": "0"
+    },
+    "tabIndex": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tab-index",
+      "reflect": false,
+      "defaultValue": "-1"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Event, Listen, Element } from "@stencil/core";
+import { Component, Host, h, Event, Listen, Element, } from "@stencil/core";
 import { slotChangeListener } from "../customized-slots";
 export class VviinnExampleImages {
   handleImageSelection() {
@@ -10,19 +10,24 @@ export class VviinnExampleImages {
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
+  delegateFocus() {
+    const firstSlot = this.imagesBlock.childNodes[0];
+    const firstExampleImage = firstSlot.childNodes[0];
+    firstExampleImage.focus();
+  }
   render() {
-    return (h(Host, null,
+    return (h(Host, { onFocus: () => this.delegateFocus() },
       h("slot", { name: "vviinn-example-images-title" },
         h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
-      h("div", { class: "images" },
+      h("div", { class: "images", ref: (el) => (this.imagesBlock = el) },
         h("slot", { name: "vviinn-example-images-1" },
-          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", tabIndex: 0 })),
         h("slot", { name: "vviinn-example-images-2" },
-          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", tabIndex: 1 })),
         h("slot", { name: "vviinn-example-images-3" },
-          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", tabIndex: 2 })),
         h("slot", { name: "vviinn-example-images-4" },
-          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", tabIndex: 3 })))));
   }
   static get is() { return "vviinn-example-images"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-image-view/vviinn-image-view.js

@@ -5,11 +5,12 @@ import * as O from "fp-ts/lib/Option";
 import { sequenceToOption } from "../../utils/option/option";
 import { fromImage, move } from "../../geometry/Rectangle";
 import { dimensionsFromImage, scaleByLargestSide } from "../../Image/sizing";
+import styles from "./vviinn-image-view.css";
 const getImageSizes = (i) => {
   const dimensions = dimensionsFromImage(i);
   const resize = scaleByLargestSide(288);
   const newDimensions = resize(dimensions);
-  const sizes = newDimensions.map(d => d.size);
+  const sizes = newDimensions.map((d) => d.size);
   return [sizes[0], sizes[1]];
 };
 export class VviinnImageView {
@@ -52,10 +53,5 @@ export class VviinnImageView {
   }
   static get is() { return "vviinn-image-view"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-image-view.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-image-view.css"]
-  }; }
+  static get styles() { return styles; }
 }

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -5,6 +5,7 @@ import { state } from "../../store/store";
 import * as O from "fp-ts/lib/Option";
 import { imageSearchState } from "../../store/imageSearch.store";
 import { Linked, Price, ResponsiveImage, Image, } from "./render-helpers";
+import styles from "./vviinn-product-card.css";
 /**
  * @part brand - product brand.
  * @part currency - currency sign. Renders after price-amount.
@@ -54,12 +55,14 @@ export class VviinnProductCard {
     this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
-    links.forEach((link) => link.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      this.recommendationClick.emit(this.getProductData());
-      pipe(getAnalyticsModule, O.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
-    }));
+    links.forEach((link) => {
+      ['click', 'auxclick'].forEach((eventType) => link.addEventListener(eventType, (event) => {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.recommendationClick.emit(this.getProductData());
+        pipe(getAnalyticsModule, O.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+      }));
+    });
   }
   getProduct() {
     return imageSearchState.results.find((r) => r.productId === this.productId);
@@ -91,12 +94,7 @@ export class VviinnProductCard {
   }
   static get is() { return "vviinn-product-card"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-product-card.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-product-card.css"]
-  }; }
+  static get styles() { return styles; }
   static get properties() { return {
     "brand": {
       "type": "string",