vviinn-widgets 2.219.0 → 2.221.0

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

@@ -4,40 +4,93 @@ import { pipe } from "fp-ts/lib/function";
 import { makeUploadFileRequest, } from "../../store/search.store";
 import { setLocalStorageItems } from "../../localStorage";
 import { getAcceptableFileFormats, checkImageType } from "../../Image/error";
+import { parseDroppedFile } from "../../helpers/dragAndDrop/parseDroppedFile";
 /**
  * @part button -  button look and feel
  */
 export class VviinnImageSelector {
     constructor() {
         this.loading = false;
+        /** Accept image files dropped from the OS onto the selector */
+        this.useDragAndDrop = false;
+        this.isDragOver = false;
+        // Guards against a second drop / file-input change starting a concurrent
+        // upload while the first request is still in flight (racing two searches).
+        this.isProcessing = false;
     }
-    async handleInputChange(event) {
-        var _a;
-        const input = event.target;
-        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
+    async processFile(file) {
+        if (this.isProcessing)
             return;
         const validationResult = checkImageType(file);
         if (E.isLeft(validationResult)) {
             this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: validationResult.left.kind, errorMessage: validationResult.left.inner, errorCode: validationResult.left.code }));
-            input.value = "";
             return;
         }
         this.vviinnImageUploadStarted.emit(Object.assign(Object.assign({}, this.basicEventData), { isTriggeredByVpsWidget: this.storeName === "widget" }));
-        const processingResult = await makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file);
-        pipe(processingResult, E.match(({ kind, code }) => {
-            this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind, errorCode: code }));
-        }, (response) => {
-            var _a;
-            if (!this.showInWidget)
-                setLocalStorageItems((_a = this.state.image) === null || _a === void 0 ? void 0 : _a.src, this.state.detectedObjects);
-            this.vviinnImageUploadFinished.emit({
-                searchId: response.requestId,
-                isTriggeredByVpsWidget: this.storeName === "widget",
-            });
-        }));
+        this.isProcessing = true;
+        try {
+            const processingResult = await makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file);
+            pipe(processingResult, E.match(({ kind, code }) => {
+                this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind, errorCode: code }));
+            }, (response) => {
+                var _a;
+                if (!this.showInWidget)
+                    setLocalStorageItems((_a = this.state.image) === null || _a === void 0 ? void 0 : _a.src, this.state.detectedObjects);
+                this.vviinnImageUploadFinished.emit({
+                    searchId: response.requestId,
+                    isTriggeredByVpsWidget: this.storeName === "widget",
+                });
+            }));
+        }
+        finally {
+            this.isProcessing = false;
+        }
+    }
+    async handleInputChange(event) {
+        var _a;
+        const input = event.target;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        await this.processFile(file);
         input.value = "";
     }
+    onDragOver(event) {
+        if (!this.useDragAndDrop)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = "copy";
+        clearTimeout(this.dragLeaveTimer);
+        this.isDragOver = true;
+    }
+    onDragLeave() {
+        if (!this.useDragAndDrop)
+            return;
+        clearTimeout(this.dragLeaveTimer);
+        this.dragLeaveTimer = setTimeout(() => (this.isDragOver = false), 50);
+    }
+    async onDrop(event) {
+        if (!this.useDragAndDrop)
+            return;
+        event.preventDefault();
+        clearTimeout(this.dragLeaveTimer);
+        this.isDragOver = false;
+        const file = parseDroppedFile(event.dataTransfer);
+        if (file)
+            await this.processFile(file);
+    }
+    // Safety net for a drag that ends without a dragleave reaching this host
+    // (dropped outside the element, or cancelled): clears a stuck highlight.
+    onGlobalDragEnd() {
+        if (!this.useDragAndDrop || !this.isDragOver)
+            return;
+        clearTimeout(this.dragLeaveTimer);
+        this.isDragOver = false;
+    }
+    disconnectedCallback() {
+        clearTimeout(this.dragLeaveTimer);
+    }
     startUploadWatcher(upload) {
         if (upload) {
             this.fileInput.click();
@@ -45,13 +98,13 @@ export class VviinnImageSelector {
         }
     }
     render() {
-        return (h(Host, { key: '8b5391a9be30260571a08494f069bab7eeceb183', exportparts: "button" }, this.loading ? (h("vviinn-preloader", null)) : (h("label", { htmlFor: "fileInput", part: "button", tabindex: "0", onKeyDown: (e) => {
+        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) => {
                 var _a;
-                if (e.key === "Enter" || e.key === " ") {
+                if (!this.loading && (e.key === "Enter" || e.key === " ")) {
                     e.preventDefault();
                     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
                 }
-            } }, h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { key: '7e21fce692bf7a41c274eec5a9cd198cbed023eb', 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: '7d9cfd89c2d64cdf3c262e89f652da500dcc80ba', 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"; }
@@ -272,9 +325,34 @@ export class VviinnImageSelector {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "useDragAndDrop": {
+                "type": "boolean",
+                "attribute": "use-drag-and-drop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accept image files dropped from the OS onto the selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "isDragOver": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "vviinnImageUploadStarted",
@@ -347,4 +425,37 @@ export class VviinnImageSelector {
                 "methodName": "startUploadWatcher"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "dragover",
+                "method": "onDragOver",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dragleave",
+                "method": "onDragLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "drop",
+                "method": "onDrop",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "drop",
+                "method": "onGlobalDragEnd",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragend",
+                "method": "onGlobalDragEnd",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

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

@@ -57,10 +57,10 @@ export class VviinnModal {
         }, this.slider ? SIDEBAR_ANIMATION_DURATION : 0);
     }
     render() {
-        return (h(Host, { key: '2a16919fe88ccbb72795311fb6b8af471f043700', exportparts: modalParts, class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: this.handleAnimationEnd, role: "dialog", "aria-modal": this.active ? "true" : "false", "aria-label": i18next.t("imageSearchModalTitle"), inert: !this.active ? true : undefined }, h("div", { key: 'c4fcf804eda5eb693d99af7feb00e3225ec7487e', class: "head" }, !this.hideBackButton && (h("button", { key: '4e9fd4c897201550c12718dda82b230381023b69', part: "secondary-action", onClick: () => {
+        return (h(Host, { key: 'a9ddbc40121ee0f9e747460ba826f910376960f1', exportparts: modalParts, class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: this.handleAnimationEnd, role: "dialog", "aria-modal": this.active ? "true" : "false", "aria-label": i18next.t("imageSearchModalTitle"), inert: !this.active ? true : undefined }, h("div", { key: '27a1c2d17b975d1bff0c04392b03f850cb1f8cf0', class: "head" }, !this.hideBackButton && (h("button", { key: '02d89560819b3b1f19c75569531d670efedf8e54', part: "secondary-action", onClick: () => {
                 this.resetState();
                 this.resetTopScroll();
-            }, "aria-label": i18next.t("a11y.backButton") }, h(SecondaryActionIcon, { key: '9c2669a30956cf13c3907c08cffc4f96b4ac9ab6' }))), h("div", { key: '6a035cd0270f40739e17290b6c71559e2edc88ee', class: "title", part: "results-title" }, renderTitleImage(searchState.image), h("slot", { key: 'f346c0bd895c16a4a6f1655977bfe59383968c74', name: "vviinn-image-search-modal-title" }, i18next.t("imageSearchModalTitle"))), h("button", { key: 'eee9e1c6721a87ca543d9d4167a41a2ce4b895b3', onClick: () => this.close(), onKeyDown: this.handleCloseButtonKeyDown, class: "close-button", part: "close-button", "aria-label": i18next.t("a11y.closeButton") }, h("svg", { key: '62b14679a4830b11c616a4a1ef3be8cb102a476e', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '239b466c878e112d8b47f23982f856718fe1150c', d: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), h("div", { key: 'd9d9be37267bf710b9b02ba54a8970cc7a3dae44', class: "body" }, h("slot", { key: '21d2d31cdc4350c170898f9572cf64b1de06d795' }))));
+            }, "aria-label": i18next.t("a11y.backButton") }, h(SecondaryActionIcon, { key: 'd61a2d35f90c4f64209839c7c738b8afc78131b0' }))), h("div", { key: '59530e27b5283104f0296122551752de0456c999', class: "title", part: "results-title" }, renderTitleImage(searchState.image), h("slot", { key: '81b817f993da5fb1ebb383b19a6c49f5fcb652b3', name: "vviinn-image-search-modal-title" }, i18next.t("imageSearchModalTitle"))), h("button", { key: '7b8b0b319a4d173bd1f6cc3bb9642091e1d25920', onClick: () => this.close(), onKeyDown: this.handleCloseButtonKeyDown, class: "close-button", part: "close-button", "aria-label": i18next.t("a11y.closeButton") }, h("svg", { key: 'd2399b4c6cb68169b5fa2c3785fbf4d5417e3d1f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'cfb7d199d0bb7f6d366a246a63e43c22ff1fe19b', d: "M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z", fill: "currentColor" })))), h("div", { key: 'e4649662e7054a5b77ba9e1d72e619ef71cb259d', class: "body" }, h("slot", { key: '6b177965d3c98596dfe8e29efc0d6be158eb5d09' }))));
     }
     static get is() { return "vviinn-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class VviinnOverlay {
         }
     }
     render() {
-        return (h("dialog", { key: '1e0947052fc6b1df54cc1cc00207cdce30c1d5f0', ref: (el) => (this.dialogRef = el), onAnimationEnd: this.handleAnimationEnd }, h("slot", { key: '5cdb99e46c89612c113559aedb7b73328f0b6810' })));
+        return (h("dialog", { key: 'a35c2023604b1de5f6c38869832a1bc82ada47d3', ref: (el) => (this.dialogRef = el), onAnimationEnd: this.handleAnimationEnd }, h("slot", { key: 'f48f9137827b0cbdac4022f1be0a33330f278552' })));
     }
     static get is() { return "vviinn-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-overlayed-modal/vviinn-overlayed-modal.js

@@ -6,7 +6,7 @@ export class VviinnOverlayedModal {
         this.hideBackButton = false;
     }
     render() {
-        return (h(Host, { key: '7f7b0ee43cb77127b47a0ba3be067662aa6a9e9b' }, h("vviinn-overlay", { key: '3a0da726703e5930b97b111b4039492156db8aff', active: this.active }, h("vviinn-modal", { key: 'c88334ba9d6c975a3fb93a002878284a102f2fcf', resetState: this.resetState, active: this.active, buttonElementId: this.buttonElementId, hideBackButton: this.hideBackButton, widgetVersion: this.widgetVersion, isFirstScreen: this.isFirstScreen }, h("slot", { key: '76a94f8c3591bf1a3e9a5f537196657c1c00b8e7' }, "CONTENT")))));
+        return (h(Host, { key: '32e8d4e925e77941445edaf5b403e1ae020e33fb' }, h("vviinn-overlay", { key: '584afbe6de3cc7d6670e0242fe5bdc1853efa787', active: this.active }, h("vviinn-modal", { key: '03993aaa1c481819cf6909ea1c83dd501a34b164', resetState: this.resetState, active: this.active, buttonElementId: this.buttonElementId, hideBackButton: this.hideBackButton, widgetVersion: this.widgetVersion, isFirstScreen: this.isFirstScreen }, h("slot", { key: '59ff72bd0569dd3a0cb1ecefcd94f7f22ded92bb' }, "CONTENT")))));
     }
     static get is() { return "vviinn-overlayed-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class VviinnPreloader {
     render() {
-        return h(Host, { key: 'd8904f0c7dd8aebb13da4d44e2c5422d8d31667d' });
+        return h(Host, { key: '9915424347748222693eb70e98216b2d2fe6969b' });
     }
     static get is() { return "vviinn-preloader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.js

@@ -19,7 +19,7 @@ export class VviinnPrivacyBadge {
         }
     }
     render() {
-        return (h(Host, { key: '3be7fae8e35376e72e1e780b89cc6b63a19a403f' }, h("slot", { key: '00ad4c7ce9fe26d3b7eafcde87953e1add9dd4a6', name: "vviinn-privacy-badge-text" }, h("div", { key: 'cc4eab27483574b5922eea7a24336aeeba229cf5', innerHTML: this.privacyBadgeText }))));
+        return (h(Host, { key: 'c1bd1ffac9b817b4bb8ca9b0b9f66b406abf6b69' }, h("slot", { key: 'a55744d30b8957f7eb1f2114361ac26cd670974f', name: "vviinn-privacy-badge-text" }, h("div", { key: '66ed59809f59942c3bbf00b1a26dddf17cfb31ce', innerHTML: this.privacyBadgeText }))));
     }
     static get is() { return "vviinn-privacy-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,9 +36,9 @@ export class VviinnEnergyLabel {
         return i18next.t("energyLabel.iconAlt");
     }
     render() {
-        return (h(Host, { key: 'f311f7c89f27a7dd90a8198284b179fe6e04cb3f', class: {
+        return (h(Host, { key: '9a53d56bb0772e1118fc4f5cda718e9b29adaf24', class: {
                 hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
-            }, exportparts: energyLabelParts }, h("div", { key: 'd20b22eaca0f7121a09f20e9a1a8e16ae8c77a16', class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("img", { key: '4551fc562d643b825ff489ebd4fcf51812479862', class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection], alt: this.getEnergyIconAltText() })), (this.productType || this.classDataSheetUrl) && (h("div", { key: '3260e0e590ed46c72daf3b06075a153c23ed0c51', class: "info-container" }, this.productType && (h("span", { key: 'be310b1e00cc1b279d58ce2d56cee9803622f01b', class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { key: '2e4f3d3985d11d7b2bba729b6c1816af866cafdc', class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { key: 'ca584e501471e5d6bc9c76f7d3767910ed645016', name: "vviinn-energy-label-data-sheet-text" }, i18next.t("energyLabel.dataSheetText")))))))));
+            }, exportparts: energyLabelParts }, h("div", { key: '73fa2bd6c113c6fc3f1834b630403271fb168da4', class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("img", { key: '3737b12a4aab1f06205186d9ffd7642a1ed527c0', class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection], alt: this.getEnergyIconAltText() })), (this.productType || this.classDataSheetUrl) && (h("div", { key: '45c195a6b7bcd3fbf69d330ae22e6666519b54e6', class: "info-container" }, this.productType && (h("span", { key: '52725161ec90599fadb046ab396194b1d83b3bb1', class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { key: '31efc6ee893e9721cf58a6387b4568832c81ddee', class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { key: 'ece6066ee47b41db4b7dfd43a50ad24210e0d037', name: "vviinn-energy-label-data-sheet-text" }, i18next.t("energyLabel.dataSheetText")))))))));
     }
     static get is() { return "vviinn-energy-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -432,13 +432,13 @@ export class VviinnResults {
     render() {
         var _a;
         const resultsLength = this.getResults().length;
-        return (h(Host, { key: '2ba9c019be5e6d2a70f299ebd4827baefa671cad', id: "results-block", class: {
+        return (h(Host, { key: '0767d0c21dee72b9a0f09a80dfe2ca7c375e4d50', id: "results-block", class: {
                 "show-in-widget": this.showInWidget,
                 "matching-discovery": this.oneClickDiscoveryMode === "append-slider",
-            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: '8521abb79a86723af8f18cd66558f8cd56d0d725', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: '030f376feaa161d598dc60e2deae0bcde368759a', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: '82a242f74f6a5481b40ec26a977d11465a5c58da', class: {
+            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: 'bfd01f2bf39be84501ce0cf42f5672acda3e500b', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'ce077ad92253c7727a509567571d821ebda6dbd4', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: 'dc63984664328f04abe6011aa0db856cb862f37c', class: {
                 hidden: this.showAspectRatioError || resultsLength === 0,
                 products: true,
-            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: 'ed28c78ddfa0826f8ad8a70639e83386d9297c7c', id: "one-click-discovery-append", style: {
+            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '2e39c5d65c5c7981c0b9a93dfe97ad62165a25b4', id: "one-click-discovery-append", style: {
                 order: ((_a = this.oneClickDiscoveryAppendIndex) !== null && _a !== void 0 ? _a : resultsLength).toString(),
             } }))));
     }

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

@@ -849,7 +849,7 @@ export class VviinnShopTheLook {
         }, TIMING.SEARCH_DEBOUNCE_DELAY);
     }
     render() {
-        return (h(Host, { key: '4734dcdc0c1a7d206970c8baf08e257077e952f9', exportparts: shopTheLookParts }, renderExternalCSS(this.cssUrl), h("div", { key: '129438fdcf114bd903ad6888287e060e5fdc3948', class: `shop-the-look-container ${this.showModal ? "modal-open" : ""} ${this.showCropper ? "with-cropper" : ""} widget-style-${this.widgetStyle}` }, h("div", { key: '04e037ad029930bd366920ca79e0ae7becebaf2c', class: "main-content" }, this.renderSwiperWrapper(), this.showLoadingSpinner && (h("div", { key: '18ca739ed4cf0b1167fd8976fdab0c5e6e0ee410', class: "search-loader" }, h("vviinn-preloader", { key: 'efd47991fa32bf315c4985f98f0c14ccbf6f5a72' })))), this.renderModalWrapper(), h("div", { key: '332adbe2912fb61f82f9cf0488a13f7c9a0a405c', class: "actions-container", part: "shop-the-look-actions-container" }, this.uploadMode && (h("div", { key: '55c748ffeded24b97801683454f9a1b8675f6ed6', class: "upload-button-container" }, h("button", { key: '7cfa399b98e254bd12bff706cf6c4bea42dce684', class: "upload-button", part: "shop-the-look-upload-button", onClick: () => { var _a; return (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.showLoadingSpinner }, h("span", { key: '48b59d82816a50b6f98bbf68c8a6849679437852', class: "upload-button-icon", part: "shop-the-look-upload-button-icon" }, h("slot", { key: '14f12cf7f44a39ba4f1d9cbecb6fa3558ae5fd5d', name: "vviinn-image-upload-icon" }, h(UploadActionIconVariant, { key: '1937cea6010c0a21182e88f365f188a65b0f3a70' }))), h("span", { key: 'd62a5ee1ac2c17a663dda26cb0debd83821510c0', class: "upload-button-text", part: "shop-the-look-upload-button-text" }, h("slot", { key: '42a4910a590a2b258dccb2a3ace5da8f60099791', name: "upload-button-text" }))), h("input", { key: '242e2ed2e319428ebde6dff7df8c37b60d33a8f1', type: "file", class: "visually-hidden", accept: getAcceptableFileFormats(), onChange: this.handleFileUpload, ref: (el) => (this.fileInput = el) }))), this.showNavigation() &&
+        return (h(Host, { key: '810afce8775ce69f39d3ddb19dbfafc081f90b95', exportparts: shopTheLookParts }, renderExternalCSS(this.cssUrl), h("div", { key: 'ab678e97ff5878b7d68fb63fa6ad0344f55e56eb', class: `shop-the-look-container ${this.showModal ? "modal-open" : ""} ${this.showCropper ? "with-cropper" : ""} widget-style-${this.widgetStyle}` }, h("div", { key: '78fe26aa58f8c8da8a49a0a1f20d27025de4270e', class: "main-content" }, this.renderSwiperWrapper(), this.showLoadingSpinner && (h("div", { key: '02ee522ea4f2f60a5becae75834123f7f2059d31', class: "search-loader" }, h("vviinn-preloader", { key: '209d5b1caf48f57ef4ab0f143e77c83e9547403d' })))), this.renderModalWrapper(), h("div", { key: '8a92411b196592578c1811e88b20b5c79d955751', class: "actions-container", part: "shop-the-look-actions-container" }, this.uploadMode && (h("div", { key: '283494b6ed7e2279ebc12ba00bff48679bd84515', class: "upload-button-container" }, h("button", { key: '6843b123419ab70e75c38d2ef1fc6f95724198f6', class: "upload-button", part: "shop-the-look-upload-button", onClick: () => { var _a; return (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.showLoadingSpinner }, h("span", { key: '921d7b5487c68d1e5f3095415d7d195a76de5a53', class: "upload-button-icon", part: "shop-the-look-upload-button-icon" }, h("slot", { key: 'c5a149403be172d546d34e4271a04b6bf7184cf2', name: "vviinn-image-upload-icon" }, h(UploadActionIconVariant, { key: '363804dec9e24cf917d8da7244285f14dd874e61' }))), h("span", { key: 'fde616b05fc029c9cc45e063483f0401efdf2ba5', class: "upload-button-text", part: "shop-the-look-upload-button-text" }, h("slot", { key: '756831c7b944e0f651b7907bf522375a35acb247', name: "upload-button-text" }))), h("input", { key: '6489e9ccae6426f4a96d57c2bec5b9c41b77916b', type: "file", class: "visually-hidden", accept: getAcceptableFileFormats(), onChange: this.handleFileUpload, ref: (el) => (this.fileInput = el) }))), this.showNavigation() &&
             renderNavigation(this.swiperActiveIndex, this.totalImages, this.handleNavigatePrev, this.handleNavigateNext)))));
     }
     static get is() { return "vviinn-shop-the-look"; }

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

@@ -4,7 +4,7 @@ export class VviinnSkeleton {
         this.halfWidth = false;
     }
     render() {
-        return (h(Host, { key: '149fe2396c333fff4ff01e607a8f1b238ac12bdb' }, h("div", { key: '6a9e376f9955458af0c30c9df01ea7c2b8849196', class: {
+        return (h(Host, { key: '762b28b1619a152ca13d7f71c23ede1b8182bf8a' }, h("div", { key: '4509aa114dddccfaa65a5bb593f1dfecddb054ba', class: {
                 "vviinn-skeleton": true,
             }, style: {
                 height: this.height ? `${this.height.toString()}px` : "100%",

package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class VviinnSlide {
     render() {
-        return (h(Host, { key: '133a498cc9bacc4be222f7bc10aab41581e81f1a' }, h("slot", { key: '4c6793ca181403a57e378b9212d341cdfe2c529c' })));
+        return (h(Host, { key: '8740746256bbf7c374da17ff2bca8730108586c8' }, h("slot", { key: '2de442bb958c11b063b2d9d3a416e5a8df33d3cb' })));
     }
     static get is() { return "vviinn-slide"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class VviinnSlider {
         return this.isRTL ? position * -1 : position;
     }
     render() {
-        return (h(Host, { key: 'cae995bbfc00ab993963b12e219ca9e7d1b88a10' }, h("div", { key: 'ef4812aaa71a522c8bd038596d5f3d4b8e068057', class: "items-wrapper" }, h("div", { key: '56796be36f776337632f02b6b0e3cf034e36c0a7', class: "items" }, h("slot", { key: '6f9d9f5a6d6a8abb27689e7d5c724bb0a696659d' })))));
+        return (h(Host, { key: '6ee307d2510c452af6a730498f67fa26324f2990' }, h("div", { key: '1e721a9e0da711a893d318a3536668362da3c2b7', class: "items-wrapper" }, h("div", { key: 'd48b29eb243c35ac655e0b784b7303e239b416b0', class: "items" }, h("slot", { key: 'dc63e964c8def5b7202377c0c9f75681e7220ad9' })))));
     }
     static get is() { return "vviinn-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class VviinnTeaser {
         slotChangeListener(this, this.el);
     }
     render() {
-        return (h(Host, { key: '8a000f0c33266514f8665f595f5de4e3be66a92a' }, h("slot", { key: '5d6f646a3efc56a7a8f69b299e550685763f3d58' }, h("span", { key: 'b044024aab57627bd5a7236c6cb8f170b6a18d9c', class: "vviinn-teaser-text" }, h("slot", { key: '41dbdef5be7ce19a88c34521b94332de7a2c0b21', name: "vviinn-teaser-text" }, i18next.t("teaserText"))))));
+        return (h(Host, { key: 'fe777d0460b338bc11c372b2ae6d1c75120484cd' }, h("slot", { key: '85b8c8777d91d0fe48e955a601bf5742e50a3f12' }, h("span", { key: '2f4033a65dac4820a1236e52a470cc0523a31745', class: "vviinn-teaser-text" }, h("slot", { key: '75f5fbc11611d5b12d996dbf9267cc47c59f0269', name: "vviinn-teaser-text" }, i18next.t("teaserText"))))));
     }
     static get is() { return "vviinn-teaser"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-text-search/helpers/autoSuggestDebounce.js

@@ -1,16 +1,16 @@
-import { clearAutoSuggestCompletions, makeAutoSuggestRequest, setTextSearchQuery, } from "../../../store/search.store";
+import { makeAutoSuggestRequest, setTextSearchQuery, } from "../../../store/search.store";
 const AUTO_SUGGEST_DEBOUNCE_MS = 300;
-export const createAutoSuggestHandler = (storeName, token, apiPath) => {
+export const createAutoSuggestHandler = (storeName, token, apiPath, onCompletions) => {
     let debounceTimer;
     const handleInputChange = (value) => {
         setTextSearchQuery(storeName, value);
         clearTimeout(debounceTimer);
         if (!value) {
-            clearAutoSuggestCompletions(storeName);
+            onCompletions([]);
             return;
         }
         debounceTimer = setTimeout(() => {
-            makeAutoSuggestRequest(storeName, value, token, apiPath);
+            makeAutoSuggestRequest(storeName, value, token, apiPath, onCompletions);
         }, AUTO_SUGGEST_DEBOUNCE_MS);
     };
     const cancelPending = () => clearTimeout(debounceTimer);

package/dist/collection/components/vviinn-text-search/vviinn-text-search.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import * as E from "fp-ts/Either";
 import { pipe } from "fp-ts/lib/function";
 import { version } from "../../../package.json";
-import { clearAutoSuggestCompletions, makeAutoSuggestRequest, makeTextSearchRequest, setTextSearchQuery, useSearchStore, } from "../../store/search.store";
+import { makeAutoSuggestRequest, makeTextSearchRequest, setTextSearchQuery, useSearchStore, } from "../../store/search.store";
 import { TextSearchIcon } from "../vviinn-icons";
 import { slotChangeListener } from "../customized-slots";
 import i18next from "i18next";
@@ -46,7 +46,9 @@ export class VviinnTextSearch {
         /** Custom placeholder for the text search input */
         this.placeholder = "";
         /** Show auto-suggest dropdown with search completions */
-        this.autoSuggestShow = false;
+        this.autoSuggestShow = true;
+        /** Accept image files dropped from the OS onto the upload button (desktop only) */
+        this.useDragAndDrop = false;
         /** True, when used inside the widget */
         /** @internal */
         this.showInWidget = false;
@@ -59,6 +61,7 @@ export class VviinnTextSearch {
         this.activeSuggestionIndex = -1;
         this.originalQuery = "";
         this.searchSubmitted = false;
+        this.isDisconnected = false;
         this.slots = [];
         this.isShowPreloader = () => this.state.searchStatus === "loading" && this.state.searchType === "text";
         this.isShowRecording = () => this.isRecording;
@@ -74,6 +77,14 @@ export class VviinnTextSearch {
                 ? this.placeholder
                 : i18next.t("textSearchPlaceholder");
         this.recognition = null;
+        this.setAutoSuggestCompletions = (completions) => {
+            if (this.isDisconnected)
+                return;
+            if (this.searchSubmitted && completions.length > 0)
+                return;
+            this.autoSuggestCompletions = completions;
+            this.activeSuggestionIndex = -1;
+        };
         this.trackTextSearch = () => this.vviinnFilterTriggered.emit({
             kind: this.state.textSearchQuery,
             action: "select",
@@ -108,7 +119,8 @@ export class VviinnTextSearch {
             }
         };
         this.hideSuggestions = () => {
-            clearAutoSuggestCompletions(this.storeName);
+            this.autoSuggestCompletions = [];
+            this.activeSuggestionIndex = -1;
         };
         this.selectSuggestion = (completion) => {
             setTextSearchQuery(this.storeName, completion.suggestion);
@@ -166,7 +178,7 @@ export class VviinnTextSearch {
             }
         };
         this.checkAutoSuggest = async (query) => {
-            pipe(await makeAutoSuggestRequest(this.storeName, query, this.token, this.apiPath), E.fold(
+            pipe(await makeAutoSuggestRequest(this.storeName, query, this.token, this.apiPath, this.setAutoSuggestCompletions), E.fold(
             // Intentionally ignore errors for auto-suggest
             () => { }, () => { }));
         };
@@ -197,24 +209,17 @@ export class VviinnTextSearch {
         };
     }
     connectedCallback() {
-        const { state, storeName, onChange } = useSearchStore(this.showInWidget);
+        const { state, storeName } = useSearchStore(this.showInWidget);
         this.state = state;
         this.storeName = storeName;
-        if (this.autoSuggestShow) {
-            this.disposeOnChange = onChange("autoSuggestCompletions", (completions) => {
-                if (this.searchSubmitted && completions.length > 0)
-                    return;
-                this.autoSuggestCompletions = completions;
-                this.activeSuggestionIndex = -1;
-            });
-        }
+        this.isDisconnected = false;
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a;
+        this.isDisconnected = true;
         clearTimeout(this.triggerTooltipStart);
         clearTimeout(this.triggerTooltipEnd);
         (_a = this.autoSuggestHandler) === null || _a === void 0 ? void 0 : _a.cleanup();
-        (_b = this.disposeOnChange) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -222,7 +227,7 @@ export class VviinnTextSearch {
         slotChangeListener(this, this.el);
         this.slots = findSlotElements(this.el);
         if (this.autoSuggestShow) {
-            this.autoSuggestHandler = createAutoSuggestHandler(this.storeName, this.token, this.apiPath);
+            this.autoSuggestHandler = createAutoSuggestHandler(this.storeName, this.token, this.apiPath, this.setAutoSuggestCompletions);
         }
         this.recognition = initializeRecognition((_a = this.locale) !== null && _a !== void 0 ? _a : defaultConfig.locale, () => {
             this.showRecording();
@@ -267,7 +272,7 @@ export class VviinnTextSearch {
         }
     }
     render() {
-        return (h(Host, { key: 'a97f9685f46a30ca9ab12396ee1aa01482731370', exportparts: `${searchBarParts}, ${searchModalFirstScreenParts}` }, h("div", { key: '384e2cc006c0c66b2e50d56631beb538cbaa4f07', class: "text-search-container", part: "text-search-container" }, h("input", Object.assign({ key: '5e571ee58eab698531946a19c5e92fb970340d33', class: "text-search-input", part: "text-search-input", type: "text", placeholder: this.getPlaceholderText(), value: this.state.textSearchQuery || "", onInput: (event) => this.handleInputChange(event), onKeyDown: this.handleKeyDown, onBlur: this.autoSuggestShow ? this.hideSuggestions : undefined }, (this.autoSuggestShow && {
+        return (h(Host, { key: '1a6f096832c3cf72d92192e45633a4232ddcd16d', exportparts: `${searchBarParts}, ${searchModalFirstScreenParts}` }, h("div", { key: '7aa3981060a964959c714bf63bcc15d0e0c63250', class: "text-search-container", part: "text-search-container" }, h("input", Object.assign({ key: '21f53521ba84845aaaacc3a6ee80c42ebe1886e1', class: "text-search-input", part: "text-search-input", type: "text", placeholder: this.getPlaceholderText(), value: this.state.textSearchQuery || "", onInput: (event) => this.handleInputChange(event), onKeyDown: this.handleKeyDown, onBlur: this.autoSuggestShow ? this.hideSuggestions : undefined }, (this.autoSuggestShow && {
             role: "combobox",
             "aria-autocomplete": "list",
             "aria-expanded": this.autoSuggestCompletions.length > 0 &&
@@ -278,11 +283,11 @@ export class VviinnTextSearch {
             "aria-activedescendant": this.activeSuggestionIndex >= 0
                 ? `suggestion-${this.activeSuggestionIndex}`
                 : undefined,
-        }))), this.mode === "extended" && (h("vviinn-vps-button", Object.assign({ key: 'a92908b647b3f07546bfa3e3a15f7306374cd59d', token: this.token, locale: this.locale, apiPath: this.apiPath, addStyle: false, showResultsInModal: false, resultsPageUrl: this.resultsPageUrl, resultsPageParams: this.resultsPageParams }, (this.exampleImageSource && {
+        }))), this.mode === "extended" && (h("vviinn-vps-button", Object.assign({ key: '5c30334834e202f2961c8b31b722755254e65509', token: this.token, locale: this.locale, apiPath: this.apiPath, addStyle: false, showResultsInModal: false, resultsPageUrl: this.resultsPageUrl, resultsPageParams: this.resultsPageParams }, (this.exampleImageSource && {
             exampleImageSource: this.exampleImageSource,
-        }), (this.cssUrl != null && { cssUrl: this.cssUrl }), (this.visualSearchMode && { mode: this.visualSearchMode }), { parentSlots: this.slots }))), this.mode === "basic" && (h("slot", { key: '06e20a8744dea22ee8bd51d5a1e37b5e29b0b7f4', name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
-            this.recognition && (h("button", { key: '1ab2f0acb7137c36231a542234a717e34430474f', class: "speech-button", part: "speech-button", "aria-label": i18next.t("a11y.speechButton"), onClick: this.handleSpeech, onKeyDown: (event) => this.handleButtonKeyDown(event, this.handleSpeech) }, h(MicIcon, { key: 'eb97b29086e9e5ad18b1ff6ac9637b760ae2c83a' }), this.isShowRecording() && (h("span", { key: 'dc8cecbb91eaa4a5195727b50919022898630a23', class: "recording-indicator" })))), h("button", { key: 'ebd39b8d86ab47cd4fadda6a5ad30c8001bd8c5a', class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), onKeyDown: (event) => this.handleButtonKeyDown(event, this.handleTextSearch), disabled: this.state.searchStatus === "loading", "aria-label": i18next.t("a11y.textSearchButton") }, this.isShowPreloader() ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null))))), this.autoSuggestShow &&
-            renderSuggestions(this.autoSuggestCompletions, this.state.textSearchQuery, this.activeSuggestionIndex, this.selectSuggestion), this.showTooltip && (h("p", { key: 'd59b3a49c6bda6b2992e3b0aa7bffb4ef674d3b6', class: "text-search-tooltip", part: "text-search-tooltip" }, i18next.t(this.tooltipText)))));
+        }), (this.cssUrl != null && { cssUrl: this.cssUrl }), (this.visualSearchMode && { mode: this.visualSearchMode }), { useDragAndDrop: this.useDragAndDrop, parentSlots: this.slots }))), this.mode === "basic" && (h("slot", { key: 'a5ab212b55f258c70fa0fbee172753614ef9c363', name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
+            this.recognition && (h("button", { key: '251ac94cac8ae50af09ea450f66348faad27f347', class: "speech-button", part: "speech-button", "aria-label": i18next.t("a11y.speechButton"), onClick: this.handleSpeech, onKeyDown: (event) => this.handleButtonKeyDown(event, this.handleSpeech) }, h(MicIcon, { key: '3ee272b4696a78dbe8c8c4ecc915c3704fecb7a3' }), this.isShowRecording() && (h("span", { key: 'a0b2bcaeff31df8d27a2645da02dc00a78940735', class: "recording-indicator" })))), h("button", { key: '1639827b452ff09835eeee31736cd86d80036681', class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), onKeyDown: (event) => this.handleButtonKeyDown(event, this.handleTextSearch), disabled: this.state.searchStatus === "loading", "aria-label": i18next.t("a11y.textSearchButton") }, this.isShowPreloader() ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null))))), this.autoSuggestShow &&
+            renderSuggestions(this.autoSuggestCompletions, this.state.textSearchQuery, this.activeSuggestionIndex, this.selectSuggestion), this.showTooltip && (h("p", { key: '5cdc28a630f1d1e92444382e5c13da889b617e15', class: "text-search-tooltip", part: "text-search-tooltip" }, i18next.t(this.tooltipText)))));
     }
     static get is() { return "vviinn-text-search"; }
     static get encapsulation() { return "shadow"; }
@@ -482,7 +487,7 @@ export class VviinnTextSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "exampleImageSource": {
                 "type": "string",
@@ -547,6 +552,26 @@ export class VviinnTextSearch {
                 "setter": false,
                 "reflect": false
             },
+            "useDragAndDrop": {
+                "type": "boolean",
+                "attribute": "use-drag-and-drop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accept image files dropped from the OS onto the upload button (desktop only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "showInWidget": {
                 "type": "boolean",
                 "attribute": "show-in-widget",

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js

@@ -124,17 +124,17 @@ export class RecommendationsSidebar {
     }
     render() {
         var _a;
-        return (h(Host, { key: '1da9acded2d47540c3a92ef4bfe6c1dfad7ba39b', class: this.getClassMap(), style: { display: this.hidden ? "none" : undefined }, exportparts: `body, close-sidebar, ${carouselParts}, ${productCardParts}, ${recommendationsParts}` }, h("div", { key: 'df6276e5001060d9a5b6507b351997eb8f3aab22', class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e), role: this.showInModal ? "dialog" : "region", "aria-modal": this.showInModal ? "true" : undefined, "aria-label": i18next.t("a11y.recommendations") }, h("div", { key: '81f8cb97127186a5ae51d69e6c9d815791f7c7c3', class: {
+        return (h(Host, { key: '1d8e4cd403128aab03e0944fc2e4a5b0233872d0', class: this.getClassMap(), style: { display: this.hidden ? "none" : undefined }, exportparts: `body, close-sidebar, ${carouselParts}, ${productCardParts}, ${recommendationsParts}` }, h("div", { key: 'b930c6fd2eb2af705b15fc6a06e87f674a7b4f8b', class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e), role: this.showInModal ? "dialog" : "region", "aria-modal": this.showInModal ? "true" : undefined, "aria-label": i18next.t("a11y.recommendations") }, h("div", { key: 'dd428f49ceb3a3b3ef6fa81419de0575df1323ec', class: {
                 "sidebar-header": true,
                 "contains-source-img": this.isSourceImageValid(),
-            }, part: "sidebar-header" }, this.mode !== "set" && (h(Fragment, { key: '65f2c04676e8e75895030d117483a55cfe8431cd' }, this.renderSourceImage(), ((_a = this.sidebarTitle) === null || _a === void 0 ? void 0 : _a.length) !== 0 && (h("span", { key: '1a5949d7ef73e7d8fd54da8852b9f6ac3fb24b67', class: "title", part: "recommendations-title" }, this.sidebarTitle || i18next.t("discoveryWidgetTitle"))), !!this.sidebarSubtitle && (h("span", { key: 'b373c3999803fc4b53a40f0f31fb17488dfa7e31', class: "subtitle", part: "recommendations-subtitle" }, this.sidebarSubtitle)))), h("button", { key: 'a11032fd9b99cfecb9be506967714620e100cfd7', class: "close-sidebar", onClick: () => {
+            }, part: "sidebar-header" }, this.mode !== "set" && (h(Fragment, { key: '21fafcf398cf1f3edb25cbeffdc80ecc3edc4926' }, this.renderSourceImage(), ((_a = this.sidebarTitle) === null || _a === void 0 ? void 0 : _a.length) !== 0 && (h("span", { key: '1a35ffde2d9360bc50399919bb210f38df6bd906', class: "title", part: "recommendations-title" }, this.sidebarTitle || i18next.t("discoveryWidgetTitle"))), !!this.sidebarSubtitle && (h("span", { key: 'a97989a713840aabcf5e54ca2b7867a21bc3ddb4', class: "subtitle", part: "recommendations-subtitle" }, this.sidebarSubtitle)))), h("button", { key: 'c41bd72d0344559e9536c62981ffd3e9a123253c', class: "close-sidebar", onClick: () => {
                 this.sidebarState = "closed";
             }, onKeyDown: (event) => {
                 if (event.key === "Enter" || event.key === " ") {
                     event.preventDefault();
                     this.sidebarState = "closed";
                 }
-            }, part: "close-sidebar", "aria-label": i18next.t("a11y.closeButton") }, h(CrossIcon, { key: '94a609c658ca36192380ee232d956cfc9e77da15' }))), h("div", { key: '4f62b4e918a084cb7b02141df2bba3d612c382cd', class: "sidebar-content", part: "sidebar-content" }, h("vviinn-vpr-widget", { key: '2ca2caa3da08a59eb7e8d724369f2a8343fe1119', token: this.token, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, numberLocale: this.numberLocale, productId: this.productId, exportparts: `${carouselParts}, ${productCardParts}, ${recommendationsParts}`, imageWidth: this.imageWidth, showMultipleImages: this.showMultipleImages, setItemsAmount: this.setItemsAmount, blockTitle: this.mode !== "set" ? "" : this.sidebarTitle, blockSubtitle: this.mode === "set" ? this.sidebarSubtitle : undefined, mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.useCarousel, onVviinnRecommendationsLoaded: () => {
+            }, part: "close-sidebar", "aria-label": i18next.t("a11y.closeButton") }, h(CrossIcon, { key: 'aaaee4b427d589ba8daacd323b3d3f249f1ac31c' }))), h("div", { key: '0b8861dffd567eb124e5bce8fc813f74227cdcb9', class: "sidebar-content", part: "sidebar-content" }, h("vviinn-vpr-widget", { key: 'bec924b0073e25b2f57ab3d05c532facd542b0a5', token: this.token, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, numberLocale: this.numberLocale, productId: this.productId, exportparts: `${carouselParts}, ${productCardParts}, ${recommendationsParts}`, imageWidth: this.imageWidth, showMultipleImages: this.showMultipleImages, setItemsAmount: this.setItemsAmount, blockTitle: this.mode !== "set" ? "" : this.sidebarTitle, blockSubtitle: this.mode === "set" ? this.sidebarSubtitle : undefined, mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.useCarousel, onVviinnRecommendationsLoaded: () => {
                 this.hidden = false;
                 this.sidebarState = "open";
             }, showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.sidebarState === "closed", opened: this.sidebarState === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer, favoriteShow: this.favoriteShow, isAppended: this.isAppended, showInWidget: this.showInWidget, recommendationsLoading: this.recommendationsLoading, setRecommendationsLoading: this.setRecommendationsLoading, imageResolutionWidth: this.imageResolutionWidth, uiSessionId: this.uiSessionId })))));

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

@@ -214,7 +214,7 @@ export class VviinnVprButton {
         }
     }
     render() {
-        return (h(Host, { key: '2d6cd8ecdeadf7205ad1b9b7170dc5ad28d43c3b', role: "button", tabindex: "0", "aria-label": this.getAriaLabel(), onClick: this.handleButtonClick, onKeyDown: this.handleKeyDown }, renderExternalCSS(this.cssUrl), h("vviinn-button", { key: 'f6852f2eb943f40d692bf5e0609a5ac1628f598f', addStyle: this.addStyle, part: "vviinn-button" }, h("slot", { key: '5f934ba1ef44cb5133dcf2a843429c5f92858514' }, this.campaignType === "VCS" ? (h(CrossSellingIcon, { width: this.iconSideSize, height: this.iconSideSize })) : (h(SimilarProductsIcon, { width: this.iconSideSize, height: this.iconSideSize }))))));
+        return (h(Host, { key: '6edbdcb0f7dc456060d8a87cab4d347fca170165', role: "button", tabindex: "0", "aria-label": this.getAriaLabel(), onClick: this.handleButtonClick, onKeyDown: this.handleKeyDown }, renderExternalCSS(this.cssUrl), h("vviinn-button", { key: '3dbb30111e60d51feb77a2ac9cbeb669f11dd620', addStyle: this.addStyle, part: "vviinn-button" }, h("slot", { key: '3dee5fa42088fb238db95b62b7a97aa6cff56b93' }, this.campaignType === "VCS" ? (h(CrossSellingIcon, { width: this.iconSideSize, height: this.iconSideSize })) : (h(SimilarProductsIcon, { width: this.iconSideSize, height: this.iconSideSize }))))));
     }
     handleClick() {
         const sidebar = document.createElement("vviinn-recommendations-sidebar");