vviinn-widgets 2.145.13 → 2.146.1

package/dist/cjs/{constants-0a36f053.js → constants-21309688.js}

@@ -3,8 +3,13 @@
 const findSlotElements = (el) => Array.from(el.querySelectorAll("[slot]"));
 const getSlotNames = (slotElements) => slotElements.map((el) => el.getAttribute("slot"));
 
+const SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH = 320;
+const RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH = 500;
+
 const DEFAULT_EXAMPLE_IMAGE = "https://cdn.vviinn.com/assets/merchant/default/vviinn_img_start-hero.jpg";
 
 exports.DEFAULT_EXAMPLE_IMAGE = DEFAULT_EXAMPLE_IMAGE;
+exports.RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH = RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH;
+exports.SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH = SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
 exports.findSlotElements = findSlotElements;
 exports.getSlotNames = getSlotNames;

package/dist/cjs/{index-de717525.js → index-ab40eb55.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-711d38e6.js');
-const search_store = require('./search.store-5d72b491.js');
+const search_store = require('./search.store-f6717a99.js');
 
 const PlusIcon = () => (index.h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "plus-icon" },
   index.h("path", { d: "M14.6667 17.3333H8.00001C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H14.6667V8.00001C14.6667 7.62223 14.7944 7.30556 15.05 7.05001C15.3056 6.79445 15.6222 6.66667 16 6.66667C16.3778 6.66667 16.6944 6.79445 16.95 7.05001C17.2056 7.30556 17.3333 7.62223 17.3333 8.00001V14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H17.3333V24C17.3333 24.3778 17.2056 24.6944 16.95 24.95C16.6944 25.2056 16.3778 25.3333 16 25.3333C15.6222 25.3333 15.3056 25.2056 15.05 24.95C14.7944 24.6944 14.6667 24.3778 14.6667 24V17.3333Z", fill: "currentColor" })));

package/dist/cjs/{package-0598a72d.js → package-ebf6ab72.js}

@@ -14,7 +14,7 @@ function fromString(s) {
   return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
 }
 
-const version = "2.145.13";
+const version = "2.146.1";
 
 exports.campaignTypeNames = campaignTypeNames;
 exports.fold = fold;

package/dist/cjs/search-filters_13.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
-const search_store = require('./search.store-5d72b491.js');
+const search_store = require('./search.store-f6717a99.js');
 const customizedSlots = require('./customized-slots-93d9f5c9.js');
-const index$1 = require('./index-de717525.js');
+const index$1 = require('./index-ab40eb55.js');
 const Rectangle = require('./Rectangle-99c25901.js');
-const _package = require('./package-0598a72d.js');
+const _package = require('./package-ebf6ab72.js');
 const i18next = require('./i18next-74ff3413.js');
 const resources = require('./resources-f8c5d64c.js');
 const index$2 = require('./index-9ea9f6a5.js');
-const constants = require('./constants-0a36f053.js');
+const constants = require('./constants-21309688.js');
 const WarningIcon = require('./WarningIcon-65f4b692.js');
 
 const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
@@ -3938,7 +3938,7 @@ const VviinnResults = class {
     this.token = undefined;
     this.searchId = undefined;
     this.uiSessionId = undefined;
-    this.imageResolutionWidth = 500;
+    this.imageResolutionWidth = constants.RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH;
     this.currencySign = "€";
     this.locale = "de-DE";
     this.productDetailsNewTab = false;
@@ -4456,7 +4456,7 @@ const VviinnVpsWidget = class {
     this.excluded = "";
     this.productDetailsNewTab = true;
     this.productDetailsRedirect = true;
-    this.imageResolutionWidth = 250;
+    this.imageResolutionWidth = constants.SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
     this.exampleImageSource = constants.DEFAULT_EXAMPLE_IMAGE;
     this.textSearchShow = false;
     this.addToBasketShow = false;
@@ -4702,7 +4702,7 @@ const VviinnVpsWidget = class {
       }), class: { invisible: this.haveErrors() } }))), index.h("vviinn-slide", { class: {
         "results-page": true,
         active: this.isResultSlide(),
-      } }, this.isResultSlide() && this.state.searchType === "image" && (index.h("div", { class: "source-wrapper image-wrapper" }, index.h("vviinn-cropper", { basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, showInWidget: true }), index.h("div", { class: {
+      } }, this.isResultSlide() && this.state.searchType === "image" && (index.h("div", { class: "source-wrapper image-wrapper" }, index.h("vviinn-cropper", { basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: true }), index.h("div", { class: {
         "filters-wrapper": true,
         hidden: this.showAspectRatioError,
       } }, index.h("div", { class: "filters" }, this.state.filters.map((filter) => (index.h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() }))))))), this.isResultSlide() && this.state.searchType === "text" && (index.h("div", { class: "source-wrapper text-search-wrapper" }, index.h("vviinn-text-search", { token: this.token, showInWidget: true, searchQuery: this.searchQuery, apiPath: this.apiPath, locale: this.locale }), index.h("div", { class: {

package/dist/cjs/{search.store-5d72b491.js → search.store-f6717a99.js}

@@ -17135,18 +17135,18 @@ const ordByKind = {
     return x.kind === y.kind ? 0 : x.kind === "width" ? -1 : 1;
   },
 };
-const sortDimentionsBySize = _Array.sort(ordBySize);
-const sortDimentionsByKind = _Array.sort(ordByKind);
-const getDimentionsRatio = (sortedDimensions) => {
+const sortDimensionsBySize = _Array.sort(ordBySize);
+const sortDimensionsByKind = _Array.sort(ordByKind);
+const getDimensionsRatio = (sortedDimensions) => {
   const [smallest, largest] = sortedDimensions;
   return smallest.size / largest.size;
 };
-const scaleByLargestSide = (toSize) => (dimensions) => {
-  const sortedDimensions = sortDimentionsBySize(dimensions);
-  const ratio = getDimentionsRatio(sortedDimensions);
-  const newSmallestSide = Object.assign(Object.assign({}, sortedDimensions[0]), { size: toSize * ratio });
-  const newLargestSide = Object.assign(Object.assign({}, sortedDimensions[1]), { size: toSize });
-  return sortDimentionsByKind([newLargestSide, newSmallestSide]);
+const scaleBySide = (toSize, comparedSide) => (dimensions) => {
+  const sortedDimensions = sortDimensionsBySize(dimensions);
+  const ratio = getDimensionsRatio(sortedDimensions);
+  const newSmallestSide = Object.assign(Object.assign({}, sortedDimensions[0]), { size: comparedSide === "smallest" ? toSize : toSize * ratio });
+  const newLargestSide = Object.assign(Object.assign({}, sortedDimensions[1]), { size: comparedSide === "largest" ? toSize : toSize / ratio });
+  return sortDimensionsByKind([newLargestSide, newSmallestSide]);
 };
 const dimensionsFromImage = (image) => {
   const { naturalWidth, naturalHeight } = image;
@@ -17154,7 +17154,7 @@ const dimensionsFromImage = (image) => {
 };
 const getImageSizes = (i, defaultImageSize) => {
   const dimensions = dimensionsFromImage(i);
-  const resize = scaleByLargestSide(defaultImageSize);
+  const resize = scaleBySide(defaultImageSize, "largest");
   const newDimensions = resize(dimensions);
   const sizes = newDimensions.map((d) => d.size);
   return [sizes[0], sizes[1]];
@@ -17173,8 +17173,8 @@ const imageDataFromImage = (image) => {
   context.drawImage(image, 0, 0);
   return context.getImageData(0, 0, naturalWidth, naturalHeight);
 };
-const resizeImage = (width, i) => {
-  const scale = scaleByLargestSide(width);
+const resizeImage = (side, i) => {
+  const scale = scaleBySide(side, "smallest");
   const [destinationCanvas, destinationContext] = createCanvasWithContext();
   const imageDimensions = dimensionsFromImage(i);
   const [destinationWidth, destinationHeight] = scale(imageDimensions).map((d) => d.size);
@@ -17184,7 +17184,7 @@ const resizeImage = (width, i) => {
   destinationCanvas.height = destinationHeight;
   dist.lanczos(originImageData, destinationImageData);
   destinationContext.putImageData(destinationImageData, 0, 0);
-  return destinationCanvas.toDataURL();
+  return destinationCanvas.toDataURL("image/jpeg", 0.7);
 };
 
 const toFile = async (b64data) => {
@@ -17195,15 +17195,17 @@ const toFile = async (b64data) => {
     lastModified: Date.now(),
   });
 };
-const convertB64toFileTask = (b64data) => () => new Promise(async (resolve, _) => {
-  const request = await fetch(b64data);
-  const blob = await request.blob();
-  const file = new File([blob], "image", {
-    type: blob.type,
-    lastModified: Date.now(),
+const convertB64toFileTask = (b64data) => () => {
+  return new Promise(async (resolve, _) => {
+    const request = await fetch(b64data);
+    const blob = await request.blob();
+    const file = new File([blob], "image", {
+      type: blob.type,
+      lastModified: Date.now(),
+    });
+    resolve(file);
   });
-  resolve(file);
-});
+};
 
 const imageToB64 = (i) => {
   const canvas = document.createElement("canvas");
@@ -17212,11 +17214,14 @@ const imageToB64 = (i) => {
   canvas.width = naturalWidth;
   canvas.height = naturalHeight;
   ctx.drawImage(i, 0, 0, naturalWidth, naturalHeight);
-  return canvas.toDataURL();
+  return canvas.toDataURL("image/jpeg");
 };
 
 const checkFileWithExtention = (file) => _function.pipe(file, Option.fromNullable, Either.fromOption(() => fileDoesntExistError), Either.chain(checkImageType));
-const optionalResize = (image, size) => image.naturalWidth > size ? resizeImage(size, image) : imageToB64(image);
+const optionalResize = (image, size) => {
+  const smallestSide = Math.min(image.naturalWidth, image.naturalHeight);
+  return smallestSide > size ? resizeImage(size, image) : imageToB64(image);
+};
 const resizeFileTo = (size) => (file) => _function.pipe(file, imageFromFileTask, Task.map((image) => optionalResize(image, size)), Task.chain(convertB64toFileTask));
 
 const encodeToBase64UTF8 = (str) => {
@@ -17225,8 +17230,8 @@ const encodeToBase64UTF8 = (str) => {
   return btoa(String.fromCharCode.apply(null, utf8Array));
 };
 
-const RESIZED_IMAGE_WIDTH = 500;
-const HI_RES_RESIZED_IMAGE_WIDTH = 1024;
+const IMAGE_SMALLEST_SIDE_TO_RESIZE = 800;
+const HI_RES_IMAGE_SMALLEST_SIDE_TO_RESIZE = 2000;
 const makeAuthorizedRequest = (token) => pipe(token, processBearerToken, map$4((headers) => {
   return {
     headers,
@@ -17244,7 +17249,6 @@ const storeDefaults = {
   objectDetectionInProgress: false,
   resultLoaded: false,
   resultViewed: false,
-  imageWidth: RESIZED_IMAGE_WIDTH,
   image: Option.none,
   serverError: false,
   loading: false,
@@ -17254,7 +17258,7 @@ const { state: componentsState } = createStore(storeDefaults);
 const useStore = (store) => store === "widget" ? searchState : componentsState;
 const resetStore = (store) => {
   const state = useStore(store);
-  Object.assign(state, storeDefaults);
+  Object.assign(state, Object.assign(Object.assign({}, storeDefaults), { campaignId: state.campaignId, excluded: state.excluded }));
 };
 const updateState = (store) => async (response) => {
   var _a;
@@ -17379,11 +17383,11 @@ const processSelectedFile = (store) => async (file) => {
   state.image = Option.none;
   state.detectedObjects = [];
   const originFile = checkFileWithExtention(file);
-  const fileResizer = resizeFileTo(RESIZED_IMAGE_WIDTH);
+  const fileResizer = resizeFileTo(IMAGE_SMALLEST_SIDE_TO_RESIZE);
   const resizeFileTask = pipe(originFile, fromEither, chainTaskK(fileResizer));
   await pipe(resizeFileTask, chainTaskK(imageFromFileTask), map(setSelectedImage(store)))();
   const session = await pipe(resizeFileTask, chain(uploadFile(store)))();
-  const hiResFileResizer = resizeFileTo(HI_RES_RESIZED_IMAGE_WIDTH);
+  const hiResFileResizer = resizeFileTo(HI_RES_IMAGE_SMALLEST_SIDE_TO_RESIZE);
   const resizeHiResFileTask = pipe(originFile, fromEither, chainTaskK(hiResFileResizer));
   const resizedHiResFile = await resizeHiResFileTask();
   pipe(sequenceToEither(session, resizedHiResFile), map$4(([sessionObject, file]) => uploadHiResFile(store)(sessionObject, file)));

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
-const search_store = require('./search.store-5d72b491.js');
-const _package = require('./package-0598a72d.js');
-const index$1 = require('./index-de717525.js');
+const search_store = require('./search.store-f6717a99.js');
+const _package = require('./package-ebf6ab72.js');
+const index$1 = require('./index-ab40eb55.js');
 const i18next = require('./i18next-74ff3413.js');
 const customizedSlots = require('./customized-slots-93d9f5c9.js');
 const index$2 = require('./index-9ea9f6a5.js');

package/dist/cjs/vviinn-detected-object_7.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
-const search_store = require('./search.store-5d72b491.js');
+const search_store = require('./search.store-f6717a99.js');
 const Rectangle = require('./Rectangle-99c25901.js');
 const i18next = require('./i18next-74ff3413.js');
 const WarningIcon = require('./WarningIcon-65f4b692.js');
 const customizedSlots = require('./customized-slots-93d9f5c9.js');
-const _package = require('./package-0598a72d.js');
+const _package = require('./package-ebf6ab72.js');
 const index$1 = require('./index-9ea9f6a5.js');
 
 const SecondaryActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },

package/dist/cjs/vviinn-selected-filters.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
 const triggerFilter = require('./triggerFilter-ec550117.js');
-const search_store = require('./search.store-5d72b491.js');
+const search_store = require('./search.store-f6717a99.js');
 require('./Rectangle-99c25901.js');
 
 const vviinnFiltersCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list,.selected-filters-wrapper{list-style:none;margin:0;padding:0}.main-filters-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));cursor:pointer;border:none}.filters-sub-button,.filters-main-button{font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);display:flex;justify-content:center;align-items:center;border-radius:6px}.filters-main-button{padding:var(--spacing-100);color:var(--color-text-helper);background:none;transition:background 0.15s,\n    color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.filters-sub-button>span,.filters-sub-button-selected>span{display:inline-flex;justify-content:center;align-items:center;gap:var(--spacing-25);white-space:nowrap}.filters-sub-button>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.filters-sub-button:disabled{cursor:not-allowed;background:var(--surface-bg-color-disabled);color:var(--color-text-disabled)}.filters-more-button{display:flex;padding:var(--spacing-100);gap:var(--spacing-50);border-radius:var(--border-radius-100);align-items:flex-start;background-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n    var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 0;color:var(--color-text-primary);text-align:center;font-size:var(--font-size-headline);font-weight:var(--font-weight-500);line-height:var(--line-height-headline);letter-spacing:var(--letter-spacing-headline);border-bottom:1px solid var(--color-border-01);display:flex;justify-content:center;gap:5px}.filters-modal-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 0;color:var(--color-text-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-sub-list{display:none}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display:none}.filters-more-modal-button{background:none;border:none;cursor:pointer;display:flex;padding:var(--spacing-100);align-items:center;gap:var(--spacing-25);border-radius:var(--border-radius-100);background-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.filters-more-modal-button.active{background:var(--surface-bg-color-inverse);color:var(--color-text-inverse)}.filters-more-modal-button>span{display:flex;align-items:center;justify-content:center;gap:var(--spacing-25)}.filters-more-modal-button>span>span{white-space:nowrap;padding:var(--spacing-25)}.filters-more-modal-button:disabled{cursor:not-allowed;opacity:0.5}.filters-modal-actions{border-top:1px solid var(--color-border-01);padding:var(--spacing-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;display:flex;padding:var(--spacing-150);justify-content:center;align-items:center;gap:var(--spacing-50);align-self:stretch;color:var(--color-text-inverse);text-align:center;border-radius:var(--border-radius-150);background:var(--button-bg-color-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-apply:disabled{background:var(--button-bg-color-disabled);color:var(--color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;padding:var(--spacing-125) 0;color:var(--color-text-secondary);text-align:center;font-size:var(--font-size-label);font-weight:var(--font-weight-500);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.filters-sub-button-selected{display:flex;align-items:center;gap:var(--spacing-25);background:var(--surface-bg-color-inverse);border-radius:var(--border-radius-100);color:var(--color-text-inverse);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .filters-sub-button-selected.filters-sub-button-color{width:24px;height:24px;border:none}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.filters-modal-main-button-added-options{color:var(--color-text-secondary);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.filters-modal-main-button-added-options>span::after{content:\", \"}.filters-modal-main-button-added-options>span:last-child::after{content:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";

package/dist/cjs/vviinn-text-search.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
-const search_store = require('./search.store-5d72b491.js');
+const search_store = require('./search.store-f6717a99.js');
 const customizedSlots = require('./customized-slots-93d9f5c9.js');
 const i18next = require('./i18next-74ff3413.js');
 const resources = require('./resources-f8c5d64c.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-711d38e6.js');
 const customizedSlots = require('./customized-slots-93d9f5c9.js');
-const constants = require('./constants-0a36f053.js');
+const constants = require('./constants-21309688.js');
 
 const SearchModalCameraIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
   index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18 4H20C22.21 4 24 5.79 24 8V16H22V8C22 6.9 21.1 6 20 6H16.93L16.34 5.11L14.93 3H9.07L7.66 5.11L7.07 6H4C2.9 6 2 6.9 2 8V18C2 19.1 2.9 20 4 20H9V22H4C1.79 22 0 20.21 0 18V8C0 5.79 1.79 4 4 4H6L8 1H16L18 4ZM12 8C14.76 8 17 10.24 17 13L16.99 13.01C16.99 14.02 16.68 14.97 16.16 15.76L20.7 20.3L19.29 21.71L14.75 17.17C13.96 17.69 13.02 18 12 18C9.24 18 7 15.76 7 13C7 10.24 9.24 8 12 8ZM9 13C9 14.65 10.35 16 12 16C13.65 16 15 14.65 15 13C15 11.35 13.65 10 12 10C10.35 10 9 11.35 9 13Z", fill: "#161616" })));
@@ -51,7 +51,7 @@ const VviinnVpsButton = class {
     this.excluded = "";
     this.productDetailsNewTab = true;
     this.productDetailsRedirect = true;
-    this.imageResolutionWidth = 250;
+    this.imageResolutionWidth = constants.SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
     this.exampleImageSource = constants.DEFAULT_EXAMPLE_IMAGE;
     this.textSearchShow = false;
     this.addToBasketShow = false;

package/dist/collection/Image/imageToB64.js

@@ -5,5 +5,5 @@ export const imageToB64 = (i) => {
   canvas.width = naturalWidth;
   canvas.height = naturalHeight;
   ctx.drawImage(i, 0, 0, naturalWidth, naturalHeight);
-  return canvas.toDataURL();
+  return canvas.toDataURL("image/jpeg");
 };

package/dist/collection/Image/resizeImage.js

@@ -1,5 +1,5 @@
 import { lanczos } from "@rgba-image/lanczos";
-import { dimensionsFromImage, scaleByLargestSide, } from "./sizing";
+import { dimensionsFromImage, scaleBySide } from "./sizing";
 const createCanvasWithContext = () => {
   const canvas = document.createElement("canvas");
   const contenx = canvas.getContext("2d");
@@ -13,8 +13,8 @@ const imageDataFromImage = (image) => {
   context.drawImage(image, 0, 0);
   return context.getImageData(0, 0, naturalWidth, naturalHeight);
 };
-export const resizeImage = (width, i) => {
-  const scale = scaleByLargestSide(width);
+export const resizeImage = (side, i) => {
+  const scale = scaleBySide(side, "smallest");
   const [destinationCanvas, destinationContext] = createCanvasWithContext();
   const imageDimensions = dimensionsFromImage(i);
   const [destinationWidth, destinationHeight] = scale(imageDimensions).map((d) => d.size);
@@ -24,5 +24,5 @@ export const resizeImage = (width, i) => {
   destinationCanvas.height = destinationHeight;
   lanczos(originImageData, destinationImageData);
   destinationContext.putImageData(destinationImageData, 0, 0);
-  return destinationCanvas.toDataURL();
+  return destinationCanvas.toDataURL("image/jpeg", 0.7);
 };

package/dist/collection/Image/sizing.js

@@ -20,18 +20,18 @@ const ordByKind = {
     return x.kind === y.kind ? 0 : x.kind === "width" ? -1 : 1;
   },
 };
-const sortDimentionsBySize = sort(ordBySize);
-const sortDimentionsByKind = sort(ordByKind);
-const getDimentionsRatio = (sortedDimensions) => {
+const sortDimensionsBySize = sort(ordBySize);
+const sortDimensionsByKind = sort(ordByKind);
+const getDimensionsRatio = (sortedDimensions) => {
   const [smallest, largest] = sortedDimensions;
   return smallest.size / largest.size;
 };
-export const scaleByLargestSide = (toSize) => (dimensions) => {
-  const sortedDimensions = sortDimentionsBySize(dimensions);
-  const ratio = getDimentionsRatio(sortedDimensions);
-  const newSmallestSide = Object.assign(Object.assign({}, sortedDimensions[0]), { size: toSize * ratio });
-  const newLargestSide = Object.assign(Object.assign({}, sortedDimensions[1]), { size: toSize });
-  return sortDimentionsByKind([newLargestSide, newSmallestSide]);
+export const scaleBySide = (toSize, comparedSide) => (dimensions) => {
+  const sortedDimensions = sortDimensionsBySize(dimensions);
+  const ratio = getDimensionsRatio(sortedDimensions);
+  const newSmallestSide = Object.assign(Object.assign({}, sortedDimensions[0]), { size: comparedSide === "smallest" ? toSize : toSize * ratio });
+  const newLargestSide = Object.assign(Object.assign({}, sortedDimensions[1]), { size: comparedSide === "largest" ? toSize : toSize / ratio });
+  return sortDimensionsByKind([newLargestSide, newSmallestSide]);
 };
 export const dimensionsFromImage = (image) => {
   const { naturalWidth, naturalHeight } = image;
@@ -39,7 +39,7 @@ export const dimensionsFromImage = (image) => {
 };
 export const getImageSizes = (i, defaultImageSize) => {
   const dimensions = dimensionsFromImage(i);
-  const resize = scaleByLargestSide(defaultImageSize);
+  const resize = scaleBySide(defaultImageSize, "largest");
   const newDimensions = resize(dimensions);
   const sizes = newDimensions.map((d) => d.size);
   return [sizes[0], sizes[1]];

package/dist/collection/Image/sizing.spec.js

@@ -1,5 +1,5 @@
-import { scaleByLargestSide } from "./sizing";
-describe("Image sizing utils", () => {
+import { scaleBySide } from "./sizing";
+describe("Image sizing utils, smallest side resizing", () => {
   it("should resize correctly if width > height", () => {
     const w = {
       kind: "width",
@@ -11,13 +11,13 @@ describe("Image sizing utils", () => {
     };
     const expectedWidth = {
       kind: "width",
-      size: 500,
+      size: 300,
     };
     const expectedHeight = {
       kind: "height",
-      size: 250,
+      size: 150,
     };
-    const scaleDimensions = scaleByLargestSide(500);
+    const scaleDimensions = scaleBySide(150, "smallest");
     const result = scaleDimensions([w, h]);
     expect(result).toStrictEqual([expectedWidth, expectedHeight]);
   });
@@ -32,13 +32,13 @@ describe("Image sizing utils", () => {
     };
     const expectedWidth = {
       kind: "width",
-      size: 250,
+      size: 200,
     };
     const expectedHeight = {
       kind: "height",
-      size: 500,
+      size: 400,
     };
-    const scaleDimensions = scaleByLargestSide(500);
+    const scaleDimensions = scaleBySide(200, "smallest");
     const result = scaleDimensions([w, h]);
     expect(result).toStrictEqual([expectedWidth, expectedHeight]);
   });
@@ -59,7 +59,72 @@ describe("Image sizing utils", () => {
       kind: "height",
       size: 500,
     };
-    const scaleDimensions = scaleByLargestSide(500);
+    const scaleDimensions = scaleBySide(500, "smallest");
+    const result = scaleDimensions([w, h]);
+    expect(result).toStrictEqual([expectedWidth, expectedHeight]);
+  });
+});
+describe("Image sizing utils, largest side resizing", () => {
+  it("should resize correctly if width > height", () => {
+    const w = {
+      kind: "width",
+      size: 600,
+    };
+    const h = {
+      kind: "height",
+      size: 300,
+    };
+    const expectedWidth = {
+      kind: "width",
+      size: 400,
+    };
+    const expectedHeight = {
+      kind: "height",
+      size: 200,
+    };
+    const scaleDimensions = scaleBySide(400, "largest");
+    const result = scaleDimensions([w, h]);
+    expect(result).toStrictEqual([expectedWidth, expectedHeight]);
+  });
+  it("should resize correctly if width < height", () => {
+    const w = {
+      kind: "width",
+      size: 300,
+    };
+    const h = {
+      kind: "height",
+      size: 600,
+    };
+    const expectedWidth = {
+      kind: "width",
+      size: 200,
+    };
+    const expectedHeight = {
+      kind: "height",
+      size: 400,
+    };
+    const scaleDimensions = scaleBySide(400, "largest");
+    const result = scaleDimensions([w, h]);
+    expect(result).toStrictEqual([expectedWidth, expectedHeight]);
+  });
+  it("should resize correctly if width == height", () => {
+    const w = {
+      kind: "width",
+      size: 600,
+    };
+    const h = {
+      kind: "height",
+      size: 600,
+    };
+    const expectedWidth = {
+      kind: "width",
+      size: 400,
+    };
+    const expectedHeight = {
+      kind: "height",
+      size: 400,
+    };
+    const scaleDimensions = scaleBySide(400, "largest");
     const result = scaleDimensions([w, h]);
     expect(result).toStrictEqual([expectedWidth, expectedHeight]);
   });

package/dist/collection/Image/toFile.js

@@ -6,12 +6,14 @@ export const toFile = async (b64data) => {
     lastModified: Date.now(),
   });
 };
-export const convertB64toFileTask = (b64data) => () => new Promise(async (resolve, _) => {
-  const request = await fetch(b64data);
-  const blob = await request.blob();
-  const file = new File([blob], "image", {
-    type: blob.type,
-    lastModified: Date.now(),
+export const convertB64toFileTask = (b64data) => () => {
+  return new Promise(async (resolve, _) => {
+    const request = await fetch(b64data);
+    const blob = await request.blob();
+    const file = new File([blob], "image", {
+      type: blob.type,
+      lastModified: Date.now(),
+    });
+    resolve(file);
   });
-  resolve(file);
-});
+};

package/dist/collection/components/vviinn-results/vviinn-results.js

@@ -26,6 +26,7 @@ import { productCardSlotNames, slotChangeListener, vprIconSlotName, } from "../c
 import { getCustomLabels } from "../../recommendation";
 import { productCardParts } from "../../cssParts";
 import { findSlotElements, getSlotNames } from "../../dom";
+import { RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH } from "../../widget/constants";
 export class VviinnResults {
   constructor() {
     var _a;
@@ -125,7 +126,7 @@ export class VviinnResults {
     this.token = undefined;
     this.searchId = undefined;
     this.uiSessionId = undefined;
-    this.imageResolutionWidth = 500;
+    this.imageResolutionWidth = RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH;
     this.currencySign = "€";
     this.locale = "de-DE";
     this.productDetailsNewTab = false;
@@ -459,7 +460,7 @@ export class VviinnResults {
         },
         "attribute": "image-resolution-width",
         "reflect": false,
-        "defaultValue": "500"
+        "defaultValue": "RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH"
       },
       "currencySign": {
         "type": "string",

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

@@ -3,6 +3,7 @@ import { SearchModalCameraIcon, SearchModalFullSearchIcon, SearchModalImageSearc
 import { SlotSkeleton } from "../customized-slots";
 import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
 import { findSlotElements } from "../../dom";
+import { SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from "../../widget/constants";
 /**
  * @slot vviinn-teaser-text - Text on the widget's main screen.
  * @slot vviinn-image-upload-button-text - Title of Upload Button.
@@ -70,7 +71,7 @@ export class VviinnVpsButton {
     this.excluded = "";
     this.productDetailsNewTab = true;
     this.productDetailsRedirect = true;
-    this.imageResolutionWidth = 250;
+    this.imageResolutionWidth = SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
     this.exampleImageSource = DEFAULT_EXAMPLE_IMAGE;
     this.textSearchShow = false;
     this.addToBasketShow = false;
@@ -320,7 +321,7 @@ export class VviinnVpsButton {
         },
         "attribute": "image-resolution-width",
         "reflect": false,
-        "defaultValue": "250"
+        "defaultValue": "SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH"
       },
       "exampleImageSource": {
         "type": "string",

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

@@ -29,6 +29,7 @@ import { videoStreamSettings } from "../../video/settings";
 import { checkDeviceType } from "../../helpers";
 import { extendedFiltersParts, filtersParts, modalParts, productCardParts, searchBarParts, searchWidgetButtonParts, searchWidgetFilterParts, } from "../../cssParts";
 import { findSlotElements } from "../../dom";
+import { SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from "../../widget/constants";
 const CAMERA_START_DELAY = 500;
 /**
  * @slot vviinn-teaser-text - Text on the widget's main screen.
@@ -218,7 +219,7 @@ export class VviinnVpsWidget {
     this.excluded = "";
     this.productDetailsNewTab = true;
     this.productDetailsRedirect = true;
-    this.imageResolutionWidth = 250;
+    this.imageResolutionWidth = SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
     this.exampleImageSource = DEFAULT_EXAMPLE_IMAGE;
     this.textSearchShow = false;
     this.addToBasketShow = false;
@@ -464,7 +465,7 @@ export class VviinnVpsWidget {
       }), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { class: {
         "results-page": true,
         active: this.isResultSlide(),
-      } }, this.isResultSlide() && this.state.searchType === "image" && (h("div", { class: "source-wrapper image-wrapper" }, h("vviinn-cropper", { basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, showInWidget: true }), h("div", { class: {
+      } }, this.isResultSlide() && this.state.searchType === "image" && (h("div", { class: "source-wrapper image-wrapper" }, h("vviinn-cropper", { basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: true }), h("div", { class: {
         "filters-wrapper": true,
         hidden: this.showAspectRatioError,
       } }, h("div", { class: "filters" }, this.state.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() }))))))), this.isResultSlide() && this.state.searchType === "text" && (h("div", { class: "source-wrapper text-search-wrapper" }, h("vviinn-text-search", { token: this.token, showInWidget: true, searchQuery: this.searchQuery, apiPath: this.apiPath, locale: this.locale }), h("div", { class: {
@@ -650,7 +651,7 @@ export class VviinnVpsWidget {
         },
         "attribute": "image-resolution-width",
         "reflect": false,
-        "defaultValue": "250"
+        "defaultValue": "SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH"
       },
       "exampleImageSource": {
         "type": "string",

package/dist/collection/store/file-processing.js

@@ -9,5 +9,8 @@ import { resizeImage } from "../Image/resizeImage";
 import { convertB64toFileTask } from "../Image/toFile";
 import { imageToB64 } from "../Image/imageToB64";
 export const checkFileWithExtention = (file) => pipe(file, O.fromNullable, E.fromOption(() => fileDoesntExistError), E.chain(checkImageType));
-const optionalResize = (image, size) => image.naturalWidth > size ? resizeImage(size, image) : imageToB64(image);
+const optionalResize = (image, size) => {
+  const smallestSide = Math.min(image.naturalWidth, image.naturalHeight);
+  return smallestSide > size ? resizeImage(size, image) : imageToB64(image);
+};
 export const resizeFileTo = (size) => (file) => pipe(file, imageFromFileTask, T.map((image) => optionalResize(image, size)), T.chain(convertB64toFileTask));