vviinn-widgets 2.224.4 → 2.224.6

package/dist/cjs/{index-D8doLTd3.js → index-ClRBW1Hb.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BU8FMTXn.js');
-var search_store = require('./search.store-CbH-X7eB.js');
+var search_store = require('./search.store-vismGe4F.js');
 var store = require('./store-jPZ4ROqV.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", "aria-hidden": "true" },

package/dist/cjs/{search.store-CbH-X7eB.js → search.store-vismGe4F.js}

@@ -8630,7 +8630,7 @@ const startSearch = (store) => {
     return () => latestSearch.get(store) !== sequence;
 };
 
-const version = "2.224.4";
+const version = "2.224.6";
 
 const appStateGlobalDefaults = {
     excluded: null,
@@ -8689,6 +8689,7 @@ const resetResultEvents = (store) => {
     state.resultLoaded = false;
     state.resultViewed = false;
 };
+/** `excludedFields` names the fields the reset leaves alone. */
 const resetStore = (store, mode = "appStateAndReceivedData", excludedFields = []) => {
     const state = useStore(store);
     let resetPayload = {};
@@ -8705,11 +8706,6 @@ const resetStore = (store, mode = "appStateAndReceivedData", excludedFields = []
         case "all":
             resetPayload = Object.assign({}, storeDefaults);
             break;
-        case "manual":
-            for (const key of excludedFields) {
-                delete state[key];
-            }
-            return;
     }
     for (const key of excludedFields) {
         delete resetPayload[key];
@@ -8773,7 +8769,7 @@ const processVisualSearch = (store, body, token, apiPath, isHiResUpdate = false)
         return sessionResponse;
     }), Rectangle.mapLeft(handleSearchError(store, isStale)));
 };
-const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, campaignId, isHiResUpdate = false) => (file) => {
+const uploadImageFile = (store, token, { apiPath, campaignId, imageType = "image", searchId, isHiResUpdate = false, } = {}) => (file) => {
     const state = useStore(store);
     return Rectangle.pipe(Rectangle.fromEither(checkFileWithExtention(file)), Rectangle.chainTaskK(resizeFileTo(imageType)), Rectangle.chain$1((resizedFile) => updateImageState(store)(resizedFile)), Rectangle.chain$1((resizedFile) => Rectangle.pipe(Rectangle.tryCatch(async () => (Object.assign(Object.assign(Object.assign({ query: {
             [imageType]: (await fileToB64(resizedFile)).split(",")[1],
@@ -8784,7 +8780,7 @@ const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, c
         inner: error,
     })), Rectangle.chain$1((body) => processVisualSearch(store, body, token, apiPath, isHiResUpdate)))));
 };
-const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPath, campaignId) => {
+const makeVisualSearchByUrlRequest = async (store, imageUrl, token, { apiPath, campaignId } = {}) => {
     const state = useStore(store);
     const body = Object.assign(Object.assign({ query: {
             url: imageUrl,
@@ -8793,7 +8789,7 @@ const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPath, cam
         } }, addNestedIfNotEmpty("staticFilters", Object.assign({}, addIfNotEmpty("excluded", state.excluded)))), addIfNotEmpty("campaign", campaignId || state.campaignIdVisualSearch || state.campaignId));
     return processVisualSearch(store, body, token, apiPath)();
 };
-const makeUploadFileRequest = (store, token, apiPath, campaignId) => async (file) => {
+const makeUploadFileRequest = (store, token, options = {}) => async (file) => {
     var _a;
     const state = useStore(store);
     if (store !== "shopTheLook") {
@@ -8806,13 +8802,13 @@ const makeUploadFileRequest = (store, token, apiPath, campaignId) => async (file
             visualSearchStarted: true,
         });
     }
-    const session = await Rectangle.pipe(uploadImageFile(store, token, "image", undefined, apiPath, campaignId)(file))();
+    const session = await uploadImageFile(store, token, options)(file)();
     if (!((_a = state.visualSearchId) === null || _a === void 0 ? void 0 : _a.length))
         return session;
     const shouldProcessHiRes = await Rectangle.pipe(Rectangle.fromTask(imageFromFileTask(file)), Rectangle.map((img) => shouldResize(img, "highResolutionImage")), Rectangle.getOrElse(() => Rectangle.of(false)))();
     if (!shouldProcessHiRes)
         return session;
-    Rectangle.pipe(uploadImageFile(store, token, "highResolutionImage", state.visualSearchId, apiPath, campaignId, true)(file), Rectangle.getOrElseW((error) => {
+    Rectangle.pipe(uploadImageFile(store, token, Object.assign(Object.assign({}, options), { imageType: "highResolutionImage", searchId: state.visualSearchId, isHiResUpdate: true }))(file), Rectangle.getOrElseW((error) => {
         console.error("Failed to upload hi-res image:", error);
         return Rectangle.of(session);
     }))();

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-BU8FMTXn.js');
 var store = require('./store-jPZ4ROqV.js');
-var search_store = require('./search.store-CbH-X7eB.js');
+var search_store = require('./search.store-vismGe4F.js');
 var index$1 = require('./index-CP1QUrJT.js');
 var SecondaryActionIcon = require('./SecondaryActionIcon-CuNEBTWD.js');
 var index$2 = require('./index-BF9aENF8.js');

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-BU8FMTXn.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
-var search_store = require('./search.store-CbH-X7eB.js');
+var search_store = require('./search.store-vismGe4F.js');
 var index$2 = require('./index-CP1QUrJT.js');
-var index$1 = require('./index-D8doLTd3.js');
+var index$1 = require('./index-ClRBW1Hb.js');
 var store = require('./store-jPZ4ROqV.js');
 var cropperUtils = require('./cropperUtils-s4RL8x1I.js');
 var cssUrlHelper = require('./cssUrlHelper-B5A2BBm7.js');
@@ -177,7 +177,9 @@ const VviinnExampleImage = class {
         ctx.drawImage(video, dx, dy, cropDimension, cropDimension, 0, 0, canvas.width, canvas.height);
         const dataURI = canvas.toDataURL("image/jpeg");
         file = search_store.toFile(dataURI);
-        Rectangle._functionExports.pipe(await search_store.makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file), Rectangle.EitherExports.match(() => {
+        Rectangle._functionExports.pipe(await search_store.makeUploadFileRequest(this.storeName, this.token, {
+            apiPath: this.apiPath,
+        })(file), Rectangle.EitherExports.match(() => {
             this.vviinnNoResult.emit(this.basicEventData);
         }, (response) => {
             var _a;
@@ -211,9 +213,9 @@ const VviinnExampleImage = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '86700ba180e1ae7d957e5fa14e1a261a2602a5a2', onKeyUp: (ev) => this.handleKeyPress(ev), class: { "video-expanded": this.cameraButtonClicked } }, index.h("video", { key: 'f4de85ab700fe1ba81812de608627e9c57686311', id: "camera-preview", class: {
+        return (index.h(index.Host, { key: '6010f6cb4b3387b640c988d8d28426b5d265e7a5', onKeyUp: (ev) => this.handleKeyPress(ev), class: { "video-expanded": this.cameraButtonClicked } }, index.h("video", { key: '477a619c739162628c3d0a3fcbbb3b698892c62b', id: "camera-preview", class: {
                 hidden: !this.videoInitialized || this.selected,
-            }, autoplay: true, playsinline: true, muted: true }), index.h("img", { key: '22cc3ba84282941cb6a4d41364cb4a04f3b3b0f3', src: this.exampleImageSource, alt: store.instance.t("a11y.cameraExampleImage"), width: this.width, height: this.height, class: { hidden: this.videoInitialized || this.selected } }), index.h("img", { key: '799ecac4e9fe6006126fa0017b7bb51e2838fdf5', id: "captured-image-placeholder", alt: store.instance.t("a11y.capturedImage"), class: { hidden: !this.selected } }), index.h("div", { key: '2309b225a7b2c3d02e96f7477d395b1698b61877', class: { container: true, hidden: !this.videoInitialized } }, index.h("div", { key: 'e207a1517570cc676a4cb441a1acd60af2340a96', class: "photo-frame-container" }, index.h("div", { key: '7589da472a9e02456274de41640ae3c9b9de6fe8', id: "photo-frame" }, index.h(PhotoFrameCorner, { key: '140f0552a4d52c565c6fa690c404b9d4467ea8ee', className: "photo-frame-corner top-left" }), index.h(PhotoFrameCorner, { key: 'c3262b110cd7ecae4a7a45f750779e6857131d85', className: "photo-frame-corner top-right" }), index.h(PhotoFrameCorner, { key: '19ba8d3a4fcd78099d051fc3eb3ca35277388d4c', className: "photo-frame-corner bottom-left" }), index.h(PhotoFrameCorner, { key: '03988144b8abb8d65c976fde23f3d0b0e3ef8ea7', className: "photo-frame-corner bottom-right" })), index.h("div", { key: '68d87a529d40e7d654fd578059941f6caa0918ed', class: { "zoom-buttons": true, hidden: !this.zoomCapabilities } }, index.h("button", { key: '37edae86c3402a1f2913e5cf3f08f0e93c793e2e', "aria-label": store.instance.t("a11y.zoomOut"), onClick: () => this.onZoom("out") }, index.h(MinusIcon, { key: '3b10f8ff52ce4da97ba224357f18fc0c9af2f4d1' })), index.h("button", { key: '916a7d7e66e8899b3e20b52309a6356b53dfec90', "aria-label": store.instance.t("a11y.zoomIn"), onClick: () => this.onZoom("in") }, index.h(index$1.PlusIcon, { key: '2d7ca2ae82636298c14067d0b8f6cc9be5f0af39' })))), index.h("div", { key: '7fd64daa8eeceb60ec14f39847a3d01a22a9347c', class: "photo-button-container" }, index.h("button", { key: 'e05aedeb1c6c80781afc89a5f81bb77d768e8e32', class: "photo-button", "aria-label": store.instance.t("a11y.takePicture"), onClick: () => this.selectImage() }, index.h(RoundCameraIcon, { key: '68df03db0496f1cfdaf1b10dbecf69b1053057f5' }))))));
+            }, autoplay: true, playsinline: true, muted: true }), index.h("img", { key: 'e445fb47faba8f923164c3183b9c75d6c506cca0', src: this.exampleImageSource, alt: store.instance.t("a11y.cameraExampleImage"), width: this.width, height: this.height, class: { hidden: this.videoInitialized || this.selected } }), index.h("img", { key: '72303fbd8da8e846a0770410968e4e72e95fdb11', id: "captured-image-placeholder", alt: store.instance.t("a11y.capturedImage"), class: { hidden: !this.selected } }), index.h("div", { key: 'c2eb69a7d53be148d0163f9c08236bb713540752', class: { container: true, hidden: !this.videoInitialized } }, index.h("div", { key: '8aacaf120ee4b955a69d98faf705e8db85a94671', class: "photo-frame-container" }, index.h("div", { key: '9c231f5b4ab8c677991a309d1bb37352ae16f937', id: "photo-frame" }, index.h(PhotoFrameCorner, { key: '9dc75012a6c2f228ba37258b3b706a30e999cf9b', className: "photo-frame-corner top-left" }), index.h(PhotoFrameCorner, { key: '8c3e0fe5d07c51d6834fa3cc3d7e15e6fbde2734', className: "photo-frame-corner top-right" }), index.h(PhotoFrameCorner, { key: 'af3510e60b36392cf66a41d31704778011715a30', className: "photo-frame-corner bottom-left" }), index.h(PhotoFrameCorner, { key: 'd8a52a9dbe422a849f412e28b4e515936eb63522', className: "photo-frame-corner bottom-right" })), index.h("div", { key: 'e8d881d9fac1bcc4ee128c8155cd7bfdb73601ca', class: { "zoom-buttons": true, hidden: !this.zoomCapabilities } }, index.h("button", { key: 'd0bf4d2bafb181a0f129e81c5cb0b800d4cad82e', "aria-label": store.instance.t("a11y.zoomOut"), onClick: () => this.onZoom("out") }, index.h(MinusIcon, { key: 'df8e0a0c66e02a9f2e1f5dc3289e386867475417' })), index.h("button", { key: '3c3fa371b91b5db25dce2a90852fe5f3370dcb4d', "aria-label": store.instance.t("a11y.zoomIn"), onClick: () => this.onZoom("in") }, index.h(index$1.PlusIcon, { key: 'f0a95ba1f95d81831c75541c0dd4486815976071' })))), index.h("div", { key: 'b1e7d0fd0e7e18f6b4adb0a1e711e9277234dde1', class: "photo-button-container" }, index.h("button", { key: 'd6b86de54bde91c0cccfbebd67a2f4a2433ad6aa', class: "photo-button", "aria-label": store.instance.t("a11y.takePicture"), onClick: () => this.selectImage() }, index.h(RoundCameraIcon, { key: 'e565d8e5ca591736d9b851a3590c35d70ae94281' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -654,7 +656,7 @@ const VviinnImageSelector = class {
         this.vviinnImageUploadStarted.emit(Object.assign(Object.assign({}, this.basicEventData), { isTriggeredByVpsWidget: this.storeName === "widget" }));
         this.isProcessing = true;
         try {
-            const processingResult = await search_store.makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file);
+            const processingResult = await search_store.makeUploadFileRequest(this.storeName, this.token, { apiPath: this.apiPath })(file);
             Rectangle._functionExports.pipe(processingResult, Rectangle.match(({ kind, code }) => {
                 this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind, errorCode: code }));
             }, (response) => {
@@ -723,13 +725,13 @@ const VviinnImageSelector = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '616c751da82243f02d9d9cbc4f908702c49b3889', exportparts: this.useDragAndDrop ? "button:upload-photo_button" : "button", class: { "drag-over": this.isDragOver } }, this.useDragAndDrop && (index.h("div", { key: 'b02ad9a11981be6f13bd1347279fe4dad3046887', class: "drop-zone__hint", "aria-hidden": "true" }, index.h("span", { key: '9f5ed13a34f05cd9dd13aeddf3bfe166b84ee6f6', class: "drop-zone__icon" }, index.h("slot", { key: 'ccbadd5393155b7e2222d89afad490f43e93b0bc', name: "drop-zone-icon" })), index.h("span", { key: '0cd1cbaaadb326ef8d53bd8c895c9d72af8571a0', class: "drop-zone__text" }, index.h("slot", { key: '659b6e91869f7fbb1d73df37d6e25a54ebd200a1', name: "drop-zone-text" })))), index.h("label", { key: '3684c5e7afefa0403b8d760db89390530834d16d', htmlFor: "fileInput", part: "button", class: { loading: this.loading }, tabindex: this.loading ? -1 : 0, onKeyDown: (e) => {
+        return (index.h(index.Host, { key: '798b8ccc61af60c6a0794d52d5c86bd323aacf11', exportparts: this.useDragAndDrop ? "button:upload-photo_button" : "button", class: { "drag-over": this.isDragOver } }, this.useDragAndDrop && (index.h("div", { key: '0a0e5e4177265c0e7e4f691ccdbeb7769d8e060c', class: "drop-zone__hint", "aria-hidden": "true" }, index.h("span", { key: 'b1dbcbf92ce61c46587fe94857c59f9dea17c1b3', class: "drop-zone__icon" }, index.h("slot", { key: '156abf857a51a6843401b130043fa4c1fe5b5bfb', name: "drop-zone-icon" })), index.h("span", { key: '17a11fb8b274200b8436028b3295ea0f9b0b95ee', class: "drop-zone__text" }, index.h("slot", { key: 'f2226fbef3df72fd0f6f0d0974531a022fed1e31', name: "drop-zone-text" })))), index.h("label", { key: '235d62c02f871a85c90848ecc14dd8251feee7e9', htmlFor: "fileInput", part: "button", class: { loading: this.loading }, tabindex: this.loading ? -1 : 0, onKeyDown: (e) => {
                 var _a;
                 if (!this.loading && (e.key === "Enter" || e.key === " ")) {
                     e.preventDefault();
                     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
                 }
-            } }, this.loading ? (index.h("vviinn-preloader", null)) : (index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.h("input", { key: '7d9cfd89c2d64cdf3c262e89f652da500dcc80ba', id: "fileInput", class: "visually-hidden", type: "file", tabindex: "-1", accept: search_store.getAcceptableFileFormats(), onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
+            } }, this.loading ? (index.h("vviinn-preloader", null)) : (index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.h("input", { key: 'aeb6562fca0a11ea3da456813e61ddabb2cce708', id: "fileInput", class: "visually-hidden", type: "file", tabindex: "-1", accept: search_store.getAcceptableFileFormats(), onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
     }
     static get watchers() { return {
         "startUpload": ["startUploadWatcher"]
@@ -1236,10 +1238,6 @@ const VviinnSelectedFilters = class {
         this.requestFilters = [];
         this.textSearchCustomFilter = null;
         this.imageSrc = null;
-        // Rebuilt in componentWillRender and consumed by the render after it, so plain fields.
-        // The local requestFilters drive that rebuild — reads there register no subscription.
-        this.selectedFilterButtons = [];
-        this.intervalFilterButtons = [];
         this.handleSubFilterSelection = (filterValue, selectedFilter) => {
             this.requestFilters = index$1.triggerFilter({
                 filterValue,
@@ -1355,44 +1353,47 @@ const VviinnSelectedFilters = class {
         (_a = this.eventAbortController) === null || _a === void 0 ? void 0 : _a.abort();
         (_b = this.disposeStoreListener) === null || _b === void 0 ? void 0 : _b.call(this);
     }
-    componentWillRender() {
-        var _a;
-        this.selectedFilterButtons = [];
-        this.intervalFilterButtons = [];
-        const filters = ((_a = this.state) === null || _a === void 0 ? void 0 : _a.dynamicFilters) || [];
-        filters.forEach((filter) => {
+    /** Built here so the dynamicFilters read happens under render() and registers a subscription. */
+    buildChips() {
+        var _a, _b;
+        const intervalChips = [];
+        const selectedChips = [];
+        ((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.dynamicFilters) !== null && _b !== void 0 ? _b : []).forEach((filter) => {
             if (filter.type === "interval") {
-                this.collectIntervalButton(filter);
+                const chip = this.renderIntervalChip(filter);
+                if (chip)
+                    intervalChips.push(chip);
                 return;
             }
             if (!("values" in filter))
                 return;
             filter.values.forEach(({ value, label, active }) => {
-                if (index$1.isSubFilterActive(this.requestFilters, value, filter)) {
-                    this.selectedFilterButtons.push(index$1.RenderFilterButton({
-                        handleSubFilterSelection: this.handleSubFilterSelection,
-                        selectedFilter: filter,
-                        value,
-                        label,
-                        active,
-                        isSelected: true,
-                        showClose: true,
-                    }));
-                }
+                if (!index$1.isSubFilterActive(this.requestFilters, value, filter))
+                    return;
+                selectedChips.push(index$1.RenderFilterButton({
+                    handleSubFilterSelection: this.handleSubFilterSelection,
+                    selectedFilter: filter,
+                    value,
+                    label,
+                    active,
+                    isSelected: true,
+                    showClose: true,
+                }));
             });
         });
+        return { intervalChips, selectedChips };
     }
     /** A chip exists only while the column has an applied interval to show. */
-    collectIntervalButton(filter) {
+    renderIntervalChip(filter) {
         var _a;
         const applied = index$1.getSelectedInterval(this.requestFilters, filter.column);
         if (!applied)
-            return;
+            return null;
         const label = index$1.getIntervalLabel(filter, applied, (_a = this.currencySign) !== null && _a !== void 0 ? _a : store.defaultConfig.currencySign, true);
         if (!label)
-            return;
+            return null;
         const { column } = filter;
-        this.intervalFilterButtons.push(index.h("div", { key: column }, RenderCustomButton({
+        return (index.h("div", { key: column }, RenderCustomButton({
             label,
             buttonType: "range",
             onClick: () => this.handleIntervalButtonClick(column),
@@ -1400,10 +1401,11 @@ const VviinnSelectedFilters = class {
     }
     render() {
         var _a, _b;
+        const { intervalChips, selectedChips } = this.buildChips();
         if (this.showInWidget &&
-            !this.selectedFilterButtons.length &&
+            !selectedChips.length &&
             !this.state.croppedImageUrl &&
-            !this.intervalFilterButtons.length)
+            !intervalChips.length)
             return null;
         return (index.h(index.Host, { class: {
                 "show-in-widget": this.showInWidget,
@@ -1425,7 +1427,7 @@ const VviinnSelectedFilters = class {
             imageSrc: this.state.croppedImageUrl,
             onClick: this.handleCropButtonClick,
             hidden: !this.state.searchArea,
-        }), this.intervalFilterButtons, this.selectedFilterButtons))));
+        }), intervalChips, selectedChips))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-BU8FMTXn.js');
-var search_store = require('./search.store-CbH-X7eB.js');
+var search_store = require('./search.store-vismGe4F.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
 var store = require('./store-jPZ4ROqV.js');
-var index$1 = require('./index-D8doLTd3.js');
+var index$1 = require('./index-ClRBW1Hb.js');
 var constants = require('./constants-BlwqMvns.js');
 var index$2 = require('./index-CP1QUrJT.js');
 var index$3 = require('./index-BF9aENF8.js');

package/dist/cjs/vviinn-shop-the-look.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-BU8FMTXn.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
 var cropperUtils = require('./cropperUtils-s4RL8x1I.js');
 var swiperElement = require('./swiper-element-DjtzojCR.js');
-var search_store = require('./search.store-CbH-X7eB.js');
+var search_store = require('./search.store-vismGe4F.js');
 var SecondaryActionIcon = require('./SecondaryActionIcon-CuNEBTWD.js');
 var index$1 = require('./index-BF9aENF8.js');
 var store = require('./store-jPZ4ROqV.js');
@@ -220,7 +220,7 @@ const calculateModalPosition = (imageElement, detectedObject, containerElement,
 };
 const performVisualSearch = async (params) => {
     try {
-        const result = await search_store.makeVisualSearchByUrlRequest("shopTheLook", params.imageUrl, params.token, params.apiPath, params.campaignId);
+        const result = await search_store.makeVisualSearchByUrlRequest("shopTheLook", params.imageUrl, params.token, { apiPath: params.apiPath, campaignId: params.campaignId });
         return Rectangle.EitherExports.fold((error) => Rectangle.EitherExports.left(`Visual search failed: ${error.inner}`), (response) => {
             var _a, _b;
             const detectedObjects = ((_b = (_a = response.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];
@@ -278,7 +278,10 @@ const processFileUpload = async (params) => {
     try {
         const imageElement = await search_store.imageFromFileTask(file)();
         const imageUrl = imageElement.src;
-        const uploadResult = await search_store.makeUploadFileRequest("shopTheLook", token, apiPath, campaignId)(file);
+        const uploadResult = await search_store.makeUploadFileRequest("shopTheLook", token, {
+            apiPath,
+            campaignId,
+        })(file);
         return Rectangle.EitherExports.fold((error) => Rectangle.EitherExports.left(`Upload failed: ${error.inner}`), (response) => {
             var _a, _b;
             const detectedObjects = ((_b = (_a = response.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-BU8FMTXn.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
-var search_store = require('./search.store-CbH-X7eB.js');
+var search_store = require('./search.store-vismGe4F.js');
 var index$2 = require('./index-CP1QUrJT.js');
 var store = require('./store-jPZ4ROqV.js');
 var index$1 = require('./index-BF9aENF8.js');

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

@@ -101,7 +101,9 @@ export class VviinnExampleImage {
         ctx.drawImage(video, dx, dy, cropDimension, cropDimension, 0, 0, canvas.width, canvas.height);
         const dataURI = canvas.toDataURL("image/jpeg");
         file = toFile(dataURI);
-        pipe(await makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file), E.match(() => {
+        pipe(await makeUploadFileRequest(this.storeName, this.token, {
+            apiPath: this.apiPath,
+        })(file), E.match(() => {
             this.vviinnNoResult.emit(this.basicEventData);
         }, (response) => {
             var _a;
@@ -135,9 +137,9 @@ export class VviinnExampleImage {
         };
     }
     render() {
-        return (h(Host, { key: '86700ba180e1ae7d957e5fa14e1a261a2602a5a2', onKeyUp: (ev) => this.handleKeyPress(ev), class: { "video-expanded": this.cameraButtonClicked } }, h("video", { key: 'f4de85ab700fe1ba81812de608627e9c57686311', id: "camera-preview", class: {
+        return (h(Host, { key: '6010f6cb4b3387b640c988d8d28426b5d265e7a5', onKeyUp: (ev) => this.handleKeyPress(ev), class: { "video-expanded": this.cameraButtonClicked } }, h("video", { key: '477a619c739162628c3d0a3fcbbb3b698892c62b', id: "camera-preview", class: {
                 hidden: !this.videoInitialized || this.selected,
-            }, autoplay: true, playsinline: true, muted: true }), h("img", { key: '22cc3ba84282941cb6a4d41364cb4a04f3b3b0f3', src: this.exampleImageSource, alt: i18next.t("a11y.cameraExampleImage"), width: this.width, height: this.height, class: { hidden: this.videoInitialized || this.selected } }), h("img", { key: '799ecac4e9fe6006126fa0017b7bb51e2838fdf5', id: "captured-image-placeholder", alt: i18next.t("a11y.capturedImage"), class: { hidden: !this.selected } }), h("div", { key: '2309b225a7b2c3d02e96f7477d395b1698b61877', class: { container: true, hidden: !this.videoInitialized } }, h("div", { key: 'e207a1517570cc676a4cb441a1acd60af2340a96', class: "photo-frame-container" }, h("div", { key: '7589da472a9e02456274de41640ae3c9b9de6fe8', id: "photo-frame" }, h(PhotoFrameCorner, { key: '140f0552a4d52c565c6fa690c404b9d4467ea8ee', className: "photo-frame-corner top-left" }), h(PhotoFrameCorner, { key: 'c3262b110cd7ecae4a7a45f750779e6857131d85', className: "photo-frame-corner top-right" }), h(PhotoFrameCorner, { key: '19ba8d3a4fcd78099d051fc3eb3ca35277388d4c', className: "photo-frame-corner bottom-left" }), h(PhotoFrameCorner, { key: '03988144b8abb8d65c976fde23f3d0b0e3ef8ea7', className: "photo-frame-corner bottom-right" })), h("div", { key: '68d87a529d40e7d654fd578059941f6caa0918ed', class: { "zoom-buttons": true, hidden: !this.zoomCapabilities } }, h("button", { key: '37edae86c3402a1f2913e5cf3f08f0e93c793e2e', "aria-label": i18next.t("a11y.zoomOut"), onClick: () => this.onZoom("out") }, h(MinusIcon, { key: '3b10f8ff52ce4da97ba224357f18fc0c9af2f4d1' })), h("button", { key: '916a7d7e66e8899b3e20b52309a6356b53dfec90', "aria-label": i18next.t("a11y.zoomIn"), onClick: () => this.onZoom("in") }, h(PlusIcon, { key: '2d7ca2ae82636298c14067d0b8f6cc9be5f0af39' })))), h("div", { key: '7fd64daa8eeceb60ec14f39847a3d01a22a9347c', class: "photo-button-container" }, h("button", { key: 'e05aedeb1c6c80781afc89a5f81bb77d768e8e32', class: "photo-button", "aria-label": i18next.t("a11y.takePicture"), onClick: () => this.selectImage() }, h(RoundCameraIcon, { key: '68df03db0496f1cfdaf1b10dbecf69b1053057f5' }))))));
+            }, autoplay: true, playsinline: true, muted: true }), h("img", { key: 'e445fb47faba8f923164c3183b9c75d6c506cca0', src: this.exampleImageSource, alt: i18next.t("a11y.cameraExampleImage"), width: this.width, height: this.height, class: { hidden: this.videoInitialized || this.selected } }), h("img", { key: '72303fbd8da8e846a0770410968e4e72e95fdb11', id: "captured-image-placeholder", alt: i18next.t("a11y.capturedImage"), class: { hidden: !this.selected } }), h("div", { key: 'c2eb69a7d53be148d0163f9c08236bb713540752', class: { container: true, hidden: !this.videoInitialized } }, h("div", { key: '8aacaf120ee4b955a69d98faf705e8db85a94671', class: "photo-frame-container" }, h("div", { key: '9c231f5b4ab8c677991a309d1bb37352ae16f937', id: "photo-frame" }, h(PhotoFrameCorner, { key: '9dc75012a6c2f228ba37258b3b706a30e999cf9b', className: "photo-frame-corner top-left" }), h(PhotoFrameCorner, { key: '8c3e0fe5d07c51d6834fa3cc3d7e15e6fbde2734', className: "photo-frame-corner top-right" }), h(PhotoFrameCorner, { key: 'af3510e60b36392cf66a41d31704778011715a30', className: "photo-frame-corner bottom-left" }), h(PhotoFrameCorner, { key: 'd8a52a9dbe422a849f412e28b4e515936eb63522', className: "photo-frame-corner bottom-right" })), h("div", { key: 'e8d881d9fac1bcc4ee128c8155cd7bfdb73601ca', class: { "zoom-buttons": true, hidden: !this.zoomCapabilities } }, h("button", { key: 'd0bf4d2bafb181a0f129e81c5cb0b800d4cad82e', "aria-label": i18next.t("a11y.zoomOut"), onClick: () => this.onZoom("out") }, h(MinusIcon, { key: 'df8e0a0c66e02a9f2e1f5dc3289e386867475417' })), h("button", { key: '3c3fa371b91b5db25dce2a90852fe5f3370dcb4d', "aria-label": i18next.t("a11y.zoomIn"), onClick: () => this.onZoom("in") }, h(PlusIcon, { key: 'f0a95ba1f95d81831c75541c0dd4486815976071' })))), h("div", { key: 'b1e7d0fd0e7e18f6b4adb0a1e711e9277234dde1', class: "photo-button-container" }, h("button", { key: 'd6b86de54bde91c0cccfbebd67a2f4a2433ad6aa', class: "photo-button", "aria-label": i18next.t("a11y.takePicture"), onClick: () => this.selectImage() }, h(RoundCameraIcon, { key: 'e565d8e5ca591736d9b851a3590c35d70ae94281' }))))));
     }
     static get is() { return "vviinn-camera"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-filters/vviinn-selected-filters.js

@@ -26,10 +26,6 @@ export class VviinnSelectedFilters {
         this.requestFilters = [];
         this.textSearchCustomFilter = null;
         this.imageSrc = null;
-        // Rebuilt in componentWillRender and consumed by the render after it, so plain fields.
-        // The local requestFilters drive that rebuild — reads there register no subscription.
-        this.selectedFilterButtons = [];
-        this.intervalFilterButtons = [];
         this.handleSubFilterSelection = (filterValue, selectedFilter) => {
             this.requestFilters = triggerFilter({
                 filterValue,
@@ -145,44 +141,47 @@ export class VviinnSelectedFilters {
         (_a = this.eventAbortController) === null || _a === void 0 ? void 0 : _a.abort();
         (_b = this.disposeStoreListener) === null || _b === void 0 ? void 0 : _b.call(this);
     }
-    componentWillRender() {
-        var _a;
-        this.selectedFilterButtons = [];
-        this.intervalFilterButtons = [];
-        const filters = ((_a = this.state) === null || _a === void 0 ? void 0 : _a.dynamicFilters) || [];
-        filters.forEach((filter) => {
+    /** Built here so the dynamicFilters read happens under render() and registers a subscription. */
+    buildChips() {
+        var _a, _b;
+        const intervalChips = [];
+        const selectedChips = [];
+        ((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.dynamicFilters) !== null && _b !== void 0 ? _b : []).forEach((filter) => {
             if (filter.type === "interval") {
-                this.collectIntervalButton(filter);
+                const chip = this.renderIntervalChip(filter);
+                if (chip)
+                    intervalChips.push(chip);
                 return;
             }
             if (!("values" in filter))
                 return;
             filter.values.forEach(({ value, label, active }) => {
-                if (isSubFilterActive(this.requestFilters, value, filter)) {
-                    this.selectedFilterButtons.push(RenderFilterButton({
-                        handleSubFilterSelection: this.handleSubFilterSelection,
-                        selectedFilter: filter,
-                        value,
-                        label,
-                        active,
-                        isSelected: true,
-                        showClose: true,
-                    }));
-                }
+                if (!isSubFilterActive(this.requestFilters, value, filter))
+                    return;
+                selectedChips.push(RenderFilterButton({
+                    handleSubFilterSelection: this.handleSubFilterSelection,
+                    selectedFilter: filter,
+                    value,
+                    label,
+                    active,
+                    isSelected: true,
+                    showClose: true,
+                }));
             });
         });
+        return { intervalChips, selectedChips };
     }
     /** A chip exists only while the column has an applied interval to show. */
-    collectIntervalButton(filter) {
+    renderIntervalChip(filter) {
         var _a;
         const applied = getSelectedInterval(this.requestFilters, filter.column);
         if (!applied)
-            return;
+            return null;
         const label = getIntervalLabel(filter, applied, (_a = this.currencySign) !== null && _a !== void 0 ? _a : defaultConfig.currencySign, true);
         if (!label)
-            return;
+            return null;
         const { column } = filter;
-        this.intervalFilterButtons.push(h("div", { key: column }, RenderCustomButton({
+        return (h("div", { key: column }, RenderCustomButton({
             label,
             buttonType: "range",
             onClick: () => this.handleIntervalButtonClick(column),
@@ -190,10 +189,11 @@ export class VviinnSelectedFilters {
     }
     render() {
         var _a, _b;
+        const { intervalChips, selectedChips } = this.buildChips();
         if (this.showInWidget &&
-            !this.selectedFilterButtons.length &&
+            !selectedChips.length &&
             !this.state.croppedImageUrl &&
-            !this.intervalFilterButtons.length)
+            !intervalChips.length)
             return null;
         return (h(Host, { class: {
                 "show-in-widget": this.showInWidget,
@@ -215,7 +215,7 @@ export class VviinnSelectedFilters {
             imageSrc: this.state.croppedImageUrl,
             onClick: this.handleCropButtonClick,
             hidden: !this.state.searchArea,
-        }), this.intervalFilterButtons, this.selectedFilterButtons))));
+        }), intervalChips, selectedChips))));
     }
     static get is() { return "vviinn-selected-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class VviinnImageSelector {
         this.vviinnImageUploadStarted.emit(Object.assign(Object.assign({}, this.basicEventData), { isTriggeredByVpsWidget: this.storeName === "widget" }));
         this.isProcessing = true;
         try {
-            const processingResult = await makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file);
+            const processingResult = await makeUploadFileRequest(this.storeName, this.token, { apiPath: this.apiPath })(file);
             pipe(processingResult, E.match(({ kind, code }) => {
                 this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind, errorCode: code }));
             }, (response) => {
@@ -98,13 +98,13 @@ export class VviinnImageSelector {
         }
     }
     render() {
-        return (h(Host, { key: '616c751da82243f02d9d9cbc4f908702c49b3889', exportparts: this.useDragAndDrop ? "button:upload-photo_button" : "button", class: { "drag-over": this.isDragOver } }, this.useDragAndDrop && (h("div", { key: 'b02ad9a11981be6f13bd1347279fe4dad3046887', class: "drop-zone__hint", "aria-hidden": "true" }, h("span", { key: '9f5ed13a34f05cd9dd13aeddf3bfe166b84ee6f6', class: "drop-zone__icon" }, h("slot", { key: 'ccbadd5393155b7e2222d89afad490f43e93b0bc', name: "drop-zone-icon" })), h("span", { key: '0cd1cbaaadb326ef8d53bd8c895c9d72af8571a0', class: "drop-zone__text" }, h("slot", { key: '659b6e91869f7fbb1d73df37d6e25a54ebd200a1', name: "drop-zone-text" })))), h("label", { key: '3684c5e7afefa0403b8d760db89390530834d16d', htmlFor: "fileInput", part: "button", class: { loading: this.loading }, tabindex: this.loading ? -1 : 0, onKeyDown: (e) => {
+        return (h(Host, { key: '798b8ccc61af60c6a0794d52d5c86bd323aacf11', exportparts: this.useDragAndDrop ? "button:upload-photo_button" : "button", class: { "drag-over": this.isDragOver } }, this.useDragAndDrop && (h("div", { key: '0a0e5e4177265c0e7e4f691ccdbeb7769d8e060c', class: "drop-zone__hint", "aria-hidden": "true" }, h("span", { key: 'b1dbcbf92ce61c46587fe94857c59f9dea17c1b3', class: "drop-zone__icon" }, h("slot", { key: '156abf857a51a6843401b130043fa4c1fe5b5bfb', name: "drop-zone-icon" })), h("span", { key: '17a11fb8b274200b8436028b3295ea0f9b0b95ee', class: "drop-zone__text" }, h("slot", { key: 'f2226fbef3df72fd0f6f0d0974531a022fed1e31', name: "drop-zone-text" })))), h("label", { key: '235d62c02f871a85c90848ecc14dd8251feee7e9', htmlFor: "fileInput", part: "button", class: { loading: this.loading }, tabindex: this.loading ? -1 : 0, onKeyDown: (e) => {
                 var _a;
                 if (!this.loading && (e.key === "Enter" || e.key === " ")) {
                     e.preventDefault();
                     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
                 }
-            } }, this.loading ? (h("vviinn-preloader", null)) : (h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { key: '7d9cfd89c2d64cdf3c262e89f652da500dcc80ba', id: "fileInput", class: "visually-hidden", type: "file", tabindex: "-1", accept: getAcceptableFileFormats(), onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
+            } }, this.loading ? (h("vviinn-preloader", null)) : (h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { key: 'aeb6562fca0a11ea3da456813e61ddabb2cce708', id: "fileInput", class: "visually-hidden", type: "file", tabindex: "-1", accept: getAcceptableFileFormats(), onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
     }
     static get is() { return "vviinn-image-selector"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-shop-the-look/helpers.js

@@ -93,7 +93,7 @@ export const resetSearchState = () => ({
 });
 export const performVisualSearch = async (params) => {
     try {
-        const result = await makeVisualSearchByUrlRequest("shopTheLook", params.imageUrl, params.token, params.apiPath, params.campaignId);
+        const result = await makeVisualSearchByUrlRequest("shopTheLook", params.imageUrl, params.token, { apiPath: params.apiPath, campaignId: params.campaignId });
         return E.fold((error) => E.left(`Visual search failed: ${error.inner}`), (response) => {
             var _a, _b;
             const detectedObjects = ((_b = (_a = response.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];
@@ -158,7 +158,10 @@ export const processFileUpload = async (params) => {
     try {
         const imageElement = await imageFromFileTask(file)();
         const imageUrl = imageElement.src;
-        const uploadResult = await makeUploadFileRequest("shopTheLook", token, apiPath, campaignId)(file);
+        const uploadResult = await makeUploadFileRequest("shopTheLook", token, {
+            apiPath,
+            campaignId,
+        })(file);
         return E.fold((error) => E.left(`Upload failed: ${error.inner}`), (response) => {
             var _a, _b;
             const detectedObjects = ((_b = (_a = response.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];

package/dist/collection/favicon.svg

@@ -0,0 +1,4 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" fill="#E0EA0C"/>
+<path d="M111 24L64.0328 110L17 24H39.8932L63.9672 69.6567L88.238 24H111Z" fill="#141413"/>
+</svg>

package/dist/collection/filters/testFixtures.js

@@ -0,0 +1,24 @@
+/** Response- and request-shaped filters for specs, built against the generated types. */
+export const categoricalFilter = (column, values) => ({
+    type: "categorical",
+    column,
+    label: column,
+    isPrimary: false,
+    values: values.map(({ value, selected }) => ({
+        value,
+        label: value,
+        active: true,
+        selected,
+    })),
+});
+export const intervalFilter = (column, selectedValues, full = { start: 0, end: 100 }) => ({
+    type: "interval",
+    column,
+    label: column,
+    isPrimary: false,
+    full,
+    selectedValues,
+    suggestions: [],
+    histogram: [],
+});
+export const appliedFilter = (column, values) => ({ column, values });

package/dist/collection/store/search.store.js

@@ -74,6 +74,7 @@ export const resetResultEvents = (store) => {
     state.resultLoaded = false;
     state.resultViewed = false;
 };
+/** `excludedFields` names the fields the reset leaves alone. */
 export const resetStore = (store, mode = "appStateAndReceivedData", excludedFields = []) => {
     const state = useStore(store);
     let resetPayload = {};
@@ -90,11 +91,6 @@ export const resetStore = (store, mode = "appStateAndReceivedData", excludedFiel
         case "all":
             resetPayload = Object.assign({}, storeDefaults);
             break;
-        case "manual":
-            for (const key of excludedFields) {
-                delete state[key];
-            }
-            return;
     }
     for (const key of excludedFields) {
         delete resetPayload[key];
@@ -158,7 +154,7 @@ const processVisualSearch = (store, body, token, apiPath, isHiResUpdate = false)
         return sessionResponse;
     }), TE.mapLeft(handleSearchError(store, isStale)));
 };
-const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, campaignId, isHiResUpdate = false) => (file) => {
+const uploadImageFile = (store, token, { apiPath, campaignId, imageType = "image", searchId, isHiResUpdate = false, } = {}) => (file) => {
     const state = useStore(store);
     return pipe(TE.fromEither(checkFileWithExtention(file)), TE.chainTaskK(resizeFileTo(imageType)), TE.chain((resizedFile) => updateImageState(store)(resizedFile)), TE.chain((resizedFile) => pipe(TE.tryCatch(async () => (Object.assign(Object.assign(Object.assign({ query: {
             [imageType]: (await fileToB64(resizedFile)).split(",")[1],
@@ -169,7 +165,7 @@ const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, c
         inner: error,
     })), TE.chain((body) => processVisualSearch(store, body, token, apiPath, isHiResUpdate)))));
 };
-export const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPath, campaignId) => {
+export const makeVisualSearchByUrlRequest = async (store, imageUrl, token, { apiPath, campaignId } = {}) => {
     const state = useStore(store);
     const body = Object.assign(Object.assign({ query: {
             url: imageUrl,
@@ -178,7 +174,7 @@ export const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPa
         } }, addNestedIfNotEmpty("staticFilters", Object.assign({}, addIfNotEmpty("excluded", state.excluded)))), addIfNotEmpty("campaign", campaignId || state.campaignIdVisualSearch || state.campaignId));
     return processVisualSearch(store, body, token, apiPath)();
 };
-export const makeUploadFileRequest = (store, token, apiPath, campaignId) => async (file) => {
+export const makeUploadFileRequest = (store, token, options = {}) => async (file) => {
     var _a;
     const state = useStore(store);
     if (store !== "shopTheLook") {
@@ -191,13 +187,13 @@ export const makeUploadFileRequest = (store, token, apiPath, campaignId) => asyn
             visualSearchStarted: true,
         });
     }
-    const session = await pipe(uploadImageFile(store, token, "image", undefined, apiPath, campaignId)(file))();
+    const session = await uploadImageFile(store, token, options)(file)();
     if (!((_a = state.visualSearchId) === null || _a === void 0 ? void 0 : _a.length))
         return session;
     const shouldProcessHiRes = await pipe(TE.fromTask(imageFromFileTask(file)), TE.map((img) => shouldResize(img, "highResolutionImage")), TE.getOrElse(() => T.of(false)))();
     if (!shouldProcessHiRes)
         return session;
-    pipe(uploadImageFile(store, token, "highResolutionImage", state.visualSearchId, apiPath, campaignId, true)(file), TE.getOrElseW((error) => {
+    pipe(uploadImageFile(store, token, Object.assign(Object.assign({}, options), { imageType: "highResolutionImage", searchId: state.visualSearchId, isHiResUpdate: true }))(file), TE.getOrElseW((error) => {
         console.error("Failed to upload hi-res image:", error);
         return T.of(session);
     }))();

package/dist/esm/{index-fmWj9vF1.js → index-DCw3hZJZ.js}

@@ -1,5 +1,5 @@
 import { h } from './index-B89nCb_F.js';
-import { h as addIfNotEmpty, p as parseStringToExcluded, n as isValueMatch, o as isIntervalMatch, q as valueToString, r as extractFilterValue } from './search.store-DOwsr2Al.js';
+import { h as addIfNotEmpty, p as parseStringToExcluded, n as isValueMatch, o as isIntervalMatch, q as valueToString, r as extractFilterValue } from './search.store-X9fVl6Qr.js';
 import { i as instance } from './store-BJxQCbNV.js';
 
 const PlusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "plus-icon", "aria-hidden": "true" },