vviinn-widgets 2.220.0 → 2.221.0

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/vviinn-text-search.js

@@ -47,6 +47,8 @@ export class VviinnTextSearch {
         this.placeholder = "";
         /** Show auto-suggest dropdown with search completions */
         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;
@@ -270,7 +272,7 @@ export class VviinnTextSearch {
         }
     }
     render() {
-        return (h(Host, { key: '0ac6e28c6631ea47c8e7c47b63fa2eb3af500087', exportparts: `${searchBarParts}, ${searchModalFirstScreenParts}` }, h("div", { key: '4b1d8edd675e91f4abd1a5933a1449b721a571c1', class: "text-search-container", part: "text-search-container" }, h("input", Object.assign({ key: '13e356c598ada0b70e9b5c99531563dae6c334b5', 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 &&
@@ -281,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: 'c3d89667ac1eaa2682a4e3c68481b06f9479e0d6', 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: 'c900b67d3dcffb64f3ca513c0475f64eb72ef495', name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
-            this.recognition && (h("button", { key: '99f75f77a43f618a45bd06124f283a5b97e422c3', 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: 'ab0676502accecbb25377737a595550ae96b19cc' }), this.isShowRecording() && (h("span", { key: 'ece24c838cabc64e9b045c5eb97bc47d7bd932ba', class: "recording-indicator" })))), h("button", { key: 'e986f20a8e3d02f38e58c6a6e6946795d6d29875', 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: '470a0c67f9f310f775566a4e581be3dbb7a7cb95', 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"; }
@@ -550,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");

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

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { SearchModalCameraIcon, SearchModalFullSearchIcon, SearchModalImageSearchIcon, } from "../vviinn-icons";
 import { SlotSkeleton } from "../customized-slots";
 import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
-import { findSlotElements } from "../../dom";
+import { findSlotElements, hasDefaultSlotContent } from "../../dom";
 import { SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from "../../widget/constants";
 import { searchModalFirstScreenParts } from "../../cssParts";
 import { renderExternalCSS } from "../../utils/cssUrl/cssUrlHelper";
@@ -12,6 +12,8 @@ import { initializeLocale } from "../../locale";
  * @slot vviinn-teaser-text - Text on the widget's main screen.
  * @slot vviinn-image-upload-button-text - Title of Upload Button.
  * @slot vviinn-image-upload-icon - Icon of Upload Button.
+ * @slot vviinn-drag-drop-icon - Icon of the drag & drop zone.
+ * @slot vviinn-drag-drop-text - Hint text of the drag & drop zone.
  * @slot vviinn-camera-button-text-start - Title of Start Camera button.
  * @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
  * @slot vviinn-camera-icon - Icon of Camera Button.
@@ -39,6 +41,7 @@ import { initializeLocale } from "../../locale";
  * @part secondary-action - Back Button in the modal's header.
  * @part results-title - Title on the results page.
  * @part upload-photo_button - Upload Photo Button.
+ * @part drop-zone - Drag & drop container (when useDragAndDrop is enabled).
  * @part start-camera_button - Start Camera Button.
  * @part products - Products container.
  * @part product-card - Product Card itself.
@@ -113,6 +116,8 @@ export class VviinnVpsButton {
         this.imageResolutionWidth = SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
         /** Show multiple images: swiper on mobile, hover on desktop in product cards */
         this.showMultipleImages = false;
+        /** Accept image files dropped from the OS onto the upload button (desktop only) */
+        this.useDragAndDrop = false;
         /** Example image source */
         this.exampleImageSource = DEFAULT_EXAMPLE_IMAGE;
         /** Show the text search */
@@ -139,6 +144,12 @@ export class VviinnVpsButton {
         this.parentSlots = [];
         this.buttonPressed = false;
         this.slots = [];
+        // True when the consumer projects real content into the default slot (custom
+        // trigger). Whitespace-only text and named-slot children don't count, so
+        // formatting newlines around named slots can't suppress the fallback icon.
+        // @State + the default slot's slotchange keep this reactive to light-DOM that
+        // is projected/removed after load (e.g. deferred hydration, async injection).
+        this.hasCustomTrigger = false;
         this.allSlots = () => [...this.parentSlots, ...this.slots];
         this.handleActivation = () => {
             this.buttonPressed = true;
@@ -166,6 +177,7 @@ export class VviinnVpsButton {
     async componentWillLoad() {
         await initializeLocale(this.locale);
         this.slots = findSlotElements(this.el);
+        this.hasCustomTrigger = hasDefaultSlotContent(this.el);
     }
     componentDidLoad() {
         this.replaceSlotsContent();
@@ -205,8 +217,8 @@ export class VviinnVpsButton {
     }
     render() {
         const { ariaLabel, buttonIcon } = this.getButtonConfig();
-        return (h(Host, { key: '2d9e0e9860039f521305b3f25da2a6aa5fee5e37', role: this.buttonPressed ? undefined : "button", "aria-label": this.buttonPressed ? undefined : ariaLabel, exportparts: `vviinn-button, ${searchModalFirstScreenParts}` }, renderExternalCSS(this.cssUrl), h("vviinn-button", { key: '33bf0113ab55a6bf91cf25181fe8d863af84d264', addStyle: this.addStyle, part: "vviinn-button", tabindex: this.buttonPressed ? undefined : "0", onClick: this.buttonPressed ? undefined : this.handleActivation, onKeyDown: this.buttonPressed ? undefined : this.handleKeyDown }, h("slot", { key: '922d706ce5bf9418c3747fc69bf7920d2ad53c8b' }, buttonIcon)), SlotSkeleton("search"), h("vviinn-vps-widget", { key: 'd6735e7ff8e3ca9dca10f5546d7c4f9f97a8ffa7', mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, numberLocale: this.numberLocale, apiPath: this.apiPath, pricePrefix: this.pricePrefix, campaignId: this.campaignId, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton, buttonElementId: this.el.id, active: this.buttonPressed &&
-                (this.mode === "modal" || this.mode === "camera"), excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow, autoSuggestShow: this.autoSuggestShow, addToBasketShow: this.addToBasketShow, addPriceContainer: this.addPriceContainer, showIntervalInputs: this.showIntervalInputs, replaceSlotsContentInButton: this.replaceSlotsContent.bind(this), oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, favoriteShow: this.favoriteShow, showResultsInModal: this.showResultsInModal, resultsPageUrl: this.resultsPageUrl, resultsPageParams: this.resultsPageParams, parentSlots: [...this.parentSlots, ...this.slots], cssUrl: this.cssUrl })));
+        return (h(Host, { key: '47a83c95c23f2450b3f298343577072c91d871e9', role: this.buttonPressed ? undefined : "button", "aria-label": this.buttonPressed ? undefined : ariaLabel, exportparts: `vviinn-button, ${searchModalFirstScreenParts}` }, renderExternalCSS(this.cssUrl), h("vviinn-button", { key: '42131f699f2808187d108e0089a3f1c423bffdeb', addStyle: this.addStyle, part: "vviinn-button", tabindex: this.buttonPressed ? undefined : "0", onClick: this.buttonPressed ? undefined : this.handleActivation, onKeyDown: this.buttonPressed ? undefined : this.handleKeyDown }, h("span", { key: '901c041c6a574f74276e8d345f228d7095b2be92', style: { display: this.hasCustomTrigger ? "contents" : "none" } }, h("slot", { key: '01dbb14f71554ccb92a7bd041be220d9fb4d6e1b', onSlotchange: () => (this.hasCustomTrigger = hasDefaultSlotContent(this.el)) })), !this.hasCustomTrigger && buttonIcon), SlotSkeleton("search"), h("vviinn-vps-widget", { key: '7ab197dbf91b01d64fbdf1aac1c5d6a88134c7bb', mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, numberLocale: this.numberLocale, apiPath: this.apiPath, pricePrefix: this.pricePrefix, campaignId: this.campaignId, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton, buttonElementId: this.el.id, active: this.buttonPressed &&
+                (this.mode === "modal" || this.mode === "camera"), excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, useDragAndDrop: this.useDragAndDrop, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow, autoSuggestShow: this.autoSuggestShow, addToBasketShow: this.addToBasketShow, addPriceContainer: this.addPriceContainer, showIntervalInputs: this.showIntervalInputs, replaceSlotsContentInButton: this.replaceSlotsContent.bind(this), oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, favoriteShow: this.favoriteShow, showResultsInModal: this.showResultsInModal, resultsPageUrl: this.resultsPageUrl, resultsPageParams: this.resultsPageParams, parentSlots: [...this.parentSlots, ...this.slots], cssUrl: this.cssUrl })));
     }
     static get is() { return "vviinn-vps-button"; }
     static get encapsulation() { return "shadow"; }
@@ -529,6 +541,26 @@ export class VviinnVpsButton {
                 "reflect": false,
                 "defaultValue": "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"
+            },
             "exampleImageSource": {
                 "type": "string",
                 "attribute": "example-image-source",
@@ -843,7 +875,8 @@ export class VviinnVpsButton {
     }
     static get states() {
         return {
-            "buttonPressed": {}
+            "buttonPressed": {},
+            "hasCustomTrigger": {}
         };
     }
     static get events() {

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

@@ -318,7 +318,7 @@ vviinn-overlayed-modal.first-screen::part(secondary-action) {
   height: 48px;
   justify-items: center;
   font-family: var(--font-family, var(--font-family-base));
-  transition: background 0.1s ease-in-out;
+  transition: background 0.15s ease-in-out;
   color: var(--color-text-primary);
   background-color: #f4f4f4;
 }
@@ -359,6 +359,40 @@ vviinn-overlayed-modal.first-screen::part(secondary-action) {
   display: none;
 }
 
+.upload-drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-150);
+  padding: var(--spacing-200);
+  box-sizing: border-box;
+  cursor: pointer;
+  background: var(--button-bg-color-secondary);
+  border: 1px dashed var(--color-border-02);
+  border-radius: var(--border-radius-50);
+  font-family: var(--font-family, var(--font-family-base));
+  transition:
+    border-color 0.1s ease-in-out,
+    background 0.1s ease-in-out;
+}
+
+.upload-drop-zone.drag-over {
+  border-color: var(--color-primary, var(--button-bg-color-primary));
+  background: color-mix(
+    in srgb,
+    var(--color-primary, var(--button-bg-color-primary)) 8%,
+    transparent
+  );
+}
+
+/* Slotted icon lives in this tree, so it must be sized here (not in the child). */
+.upload-drop-zone [slot="drop-zone-icon"] svg {
+  display: block;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-secondary);
+}
+
 .results-page {
   padding-top: 64px;
   display: grid;

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

@@ -21,7 +21,7 @@ import { createWidgetEvent, createFilterEvent, createImageSearchEvent, } from ".
 import { campaignTypeNames } from "../../campaign/Campaign";
 import { addIfNotEmpty, parseStringToExcluded, } from "../../utils/collections/collectionsUtils";
 import { initializeLocale } from "../../locale";
-import { CameraActionIcon, UploadActionIcon } from "../vviinn-icons";
+import { CameraActionIcon, UploadActionIcon, DragDropImageIcon, } from "../vviinn-icons";
 import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
 import { videoStreamSettings } from "../../video/settings";
 import { checkDeviceType } from "../../helpers/device/checkDeviceType";
@@ -123,6 +123,8 @@ export class VviinnVpsWidget {
         this.imageResolutionWidth = SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
         /** Show multiple images: swiper on mobile, hover on desktop in product cards */
         this.showMultipleImages = false;
+        /** Accept image files dropped from the OS onto the upload button (desktop only) */
+        this.useDragAndDrop = false;
         /** Example image source */
         this.exampleImageSource = DEFAULT_EXAMPLE_IMAGE;
         /** Show the text search */
@@ -477,9 +479,10 @@ export class VviinnVpsWidget {
             this.state.searchType === "image" &&
             this.uploadSource === "startCamera") ||
             this.isCameraInitializing;
+        const isDropZone = this.useDragAndDrop && this.isDesktop;
         const buttons = [
             this.cameraAvailable && (h("button", { class: "action-button", part: "start-camera_button", onClick: this.handleStartCameraClick, onKeyDown: (e) => this.handleButtonKeyDown(e, this.handleStartCameraClick) }, isLoading && h("vviinn-preloader", null), h("span", { class: { "action-button-content": true, hidden: isLoading } }, h("slot", { name: "vviinn-camera-icon" }, h(CameraActionIcon, null)), h("span", { class: { hidden: !this.isCameraEnabled } }, h("slot", { name: "vviinn-camera-button-text-stop" }, i18next.t("cameraButtonTextStop"))), h("span", { class: { hidden: this.isCameraEnabled } }, h("slot", { name: "vviinn-camera-button-text-start" }, i18next.t("cameraButtonTextStart")))))),
-            h("vviinn-image-selector", { class: "action-button", onClick: () => {
+            h("vviinn-image-selector", { class: isDropZone ? "upload-drop-zone" : "action-button", onClick: () => {
                     if (this.mode !== "upload")
                         this.uploadSource = "uploadPhoto";
                 }, onKeyDown: (e) => this.handleButtonKeyDown(e, () => {
@@ -488,11 +491,11 @@ export class VviinnVpsWidget {
                 }), onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
                     this.uploadDialogOpened = true;
                     this.handleVviinnImageUpload("uploadPhoto");
-                }, token: this.token, apiPath: this.apiPath, storeName: this.storeName, state: this.state, onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "upload-photo_button", startUpload: this.buttonPressed &&
+                }, token: this.token, apiPath: this.apiPath, useDragAndDrop: isDropZone, storeName: this.storeName, state: this.state, onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: isDropZone ? "drop-zone" : "upload-photo_button", startUpload: this.buttonPressed &&
                     this.mode === "upload" &&
                     !this.uploadDialogOpened, showInWidget: this.showInWidget, loading: this.state.searchStatus === "loading" &&
                     this.state.searchType === "image" &&
-                    this.uploadSource === "uploadPhoto" }, h("span", { slot: "upload-button-text", class: "action-button-content" }, h("slot", { name: "vviinn-image-upload-icon" }, h(UploadActionIcon, null)), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, i18next.t("imageUploadButtonText"))))),
+                    this.uploadSource === "uploadPhoto" }, h("span", { slot: "drop-zone-icon" }, h("slot", { name: "vviinn-drag-drop-icon" }, h(DragDropImageIcon, null))), h("span", { slot: "drop-zone-text" }, h("slot", { name: "vviinn-drag-drop-text" }, i18next.t("dragDropHintText"))), h("span", { slot: "upload-button-text", class: "action-button-content" }, !isDropZone && (h("slot", { name: "vviinn-image-upload-icon" }, h(UploadActionIcon, null))), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, i18next.t("imageUploadButtonText"))))),
         ];
         return this.isDesktop ? buttons.reverse() : buttons;
     }
@@ -518,31 +521,31 @@ export class VviinnVpsWidget {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '0ffc3a002f79fd6481c59a582561d00f5643c33a', exportparts: `${modalParts}, ${productCardParts}, ${searchBarParts}, ${searchWidgetFilterParts}, ${searchWidgetButtonParts}, ${productCardsGridPart}, ${suggestionsParts}` }, renderExternalCSS(this.cssUrl), !this.showingInButton && SlotSkeleton("search"), h("vviinn-overlayed-modal", { key: 'af3589b5adc791a3d04c7fce56e6b9177af508da', class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState, onVviinnWidgetClose: ({ detail }) => {
+        return (h(Host, { key: '3d819edc5b1a3ce7fc05d343f80775a425077d26', exportparts: `${modalParts}, ${productCardParts}, ${searchBarParts}, ${searchWidgetFilterParts}, ${searchWidgetButtonParts}, ${productCardsGridPart}, ${suggestionsParts}` }, renderExternalCSS(this.cssUrl), !this.showingInButton && SlotSkeleton("search"), h("vviinn-overlayed-modal", { key: '48a8934f201007aacb83a1436ceee773bc4e64c1', class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState, onVviinnWidgetClose: ({ detail }) => {
                 if (detail.campaignTypeId !== "VPR")
                     this.handleModalClose();
             }, buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: this.mode === "upload" ||
-                (!this.isCameraEnabled && this.isOnboardingSlide()) }, h("vviinn-slider", { key: '1b98b36bde65dedc539bd49468db86a7317a74d4', position: this.slidePosition }, h("vviinn-slide", { key: 'd1b48094f57f9f34a808ee79f78875793cbde05f', class: {
+                (!this.isCameraEnabled && this.isOnboardingSlide()) }, h("vviinn-slider", { key: '2e010cd695fe00d065766973467d1eb59771a803', position: this.slidePosition }, h("vviinn-slide", { key: '71b5c21bbc37d62500ae28f5070d4ab98ab08663', class: {
                 "start-page": true,
                 "camera-enabled": this.isCameraEnabled,
-            } }, h("vviinn-camera", { key: 'a8b4695f255d22f80a0980fa6f7e6ef62b9f6e33', token: this.token, onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
+            } }, h("vviinn-camera", { key: 'f26d9576c072b36cfbe7594deae56388dec592bb', token: this.token, onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
                 this.handleVviinnImageUpload("startCamera");
-            }, apiPath: this.apiPath, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.isCameraButtonClicked, exampleImageSource: this.exampleImageSource, showInWidget: this.showInWidget, storeName: this.storeName, state: this.state }), h("div", { key: 'b38d1c05099d04c7a8c22587e7c02bd93fce532d', class: {
+            }, apiPath: this.apiPath, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.isCameraButtonClicked, exampleImageSource: this.exampleImageSource, showInWidget: this.showInWidget, storeName: this.storeName, state: this.state }), h("div", { key: '475765308993fd599a6064fde186793059eb9069', class: {
                 error: this.haveErrors(),
-            }, id: "start-page_block" }, h("div", { key: 'c989f1cb41cced69828e4f24ea925922b92218ec', class: "start-page_main-content" }, (this.wrongImageFormat ||
-            this.state.searchStatus === "error") && (h("div", { key: 'ed3feb471a4bbd2989800c9ab698ee8c9c3f8845', class: "start-page_errors-block" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'f859d178f1804136273faef22e5188fd51d07d4c', errorType: this.getCurrentErrorType(), handler: this.resetState, hasBackground: true, searchType: this.state.searchType })))), !this.haveErrors() && (h(Fragment, { key: 'b137960307e69c1884da1258a4ccb7456da4be43' }, h("vviinn-teaser", { key: '9f13392722c88be790b4a2ceed67197a25c7ccdc' }), h("div", { key: '94640ebeec975c56bac6bf90197cd95f1cb99f95', class: "buttons-group" }, this.renderButtons()), this.textSearchShow && !this.isResultSlide() && (h("vviinn-text-search", { key: '3c556fa2769f9ae91d7647e834aae3033c1131e9', token: this.token, apiPath: this.apiPath, locale: this.locale, showInWidget: this.showInWidget, showOnFirstScreen: true, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" }))))), h("vviinn-privacy-badge", { key: 'a4021fb73a348f19e2401852d36e16b50f93506a', privacyBadgeText: i18next.t("privacyBadgeText", {
+            }, id: "start-page_block" }, h("div", { key: '1c3e3a20caa40a360e7133a300f36a138e09cb4e', class: "start-page_main-content" }, (this.wrongImageFormat ||
+            this.state.searchStatus === "error") && (h("div", { key: 'aed26307e98322b8355dc58f19f51079eb8f5939', class: "start-page_errors-block" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'af8b068c7ab554f66565e445a2562e5de1b1e70b', errorType: this.getCurrentErrorType(), handler: this.resetState, hasBackground: true, searchType: this.state.searchType })))), !this.haveErrors() && (h(Fragment, { key: 'ff464606d3447e0feab7690c4aaffa1389adea38' }, h("vviinn-teaser", { key: '91043f95623cae0f7f39902612ea8e4056361c44' }), h("div", { key: '83bf07377aabb98372a5688b51b8fd92328c9ba2', class: "buttons-group" }, this.renderButtons()), this.textSearchShow && !this.isResultSlide() && (h("vviinn-text-search", { key: 'e0a766d21276ecca7d075ff9fef2aa7ba0ebfc93', token: this.token, apiPath: this.apiPath, locale: this.locale, showInWidget: this.showInWidget, showOnFirstScreen: true, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" }))))), h("vviinn-privacy-badge", { key: 'be525a2dc35924de5c73275939b61fc474fe0ce0', privacyBadgeText: i18next.t("privacyBadgeText", {
                 interpolation: { escapeValue: false },
-            }), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { key: 'e9fabc9d45efd4f621454b076f9508c3b79ce690', class: {
+            }), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { key: '73565ad9d70d0fa39bc7031a3cc0af988e70eb64', class: {
                 "results-page": true,
                 active: this.isResultSlide(),
-            } }, this.isResultSlide() && (h("div", { key: '5240101a650b79c94b9c1e7a835f7061a328b41c', class: "source-wrapper" }, this.isTextSearch() && (h("vviinn-text-search", { key: '91c201e63dc2f01a4d00fe6f5a08e6627cfb7873', token: this.token, showInWidget: this.showInWidget, apiPath: this.apiPath, locale: this.locale, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" })), !this.isTextSearch() && (h("vviinn-cropper", { key: 'ba7917b428a626458ab0956c028ac6d7fc3310f0', token: this.token, basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: this.showInWidget, "save-image-mode": "never" })), h("vviinn-suggestions", { key: '7954cbf976caf22a47d1b59cd242aad2546e4da5', showInWidget: this.showInWidget, token: this.token, apiPath: this.apiPath, locale: this.locale }), h("vviinn-selected-filters", { key: 'ac42d53feaeb3af7bc3e916e5a4cee9a9ba4b395', locale: this.locale, currencySign: this.currencySign, showInWidget: this.showInWidget, exportparts: filtersParts }), ((_b = this.state.dynamicFilters) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("div", { key: 'f8869d18215c0d35196217efdad6501234cbbf97', class: {
+            } }, this.isResultSlide() && (h("div", { key: '439495970eb510e757737be0b95b8e6431ec705a', class: "source-wrapper" }, this.isTextSearch() && (h("vviinn-text-search", { key: '8bc91e68349913cb9eda6e6166825f32d7afeb5f', token: this.token, showInWidget: this.showInWidget, apiPath: this.apiPath, locale: this.locale, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" })), !this.isTextSearch() && (h("vviinn-cropper", { key: 'bdf8e645e389c39947ece8c0576adea23e40d80d', token: this.token, basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: this.showInWidget, "save-image-mode": "never" })), h("vviinn-suggestions", { key: '5088ac4c87e0351f39743484b717b2233d1cd6cc', showInWidget: this.showInWidget, token: this.token, apiPath: this.apiPath, locale: this.locale }), h("vviinn-selected-filters", { key: '64b97e027404482d52003d6fff076779d585f90e', locale: this.locale, currencySign: this.currencySign, showInWidget: this.showInWidget, exportparts: filtersParts }), ((_b = this.state.dynamicFilters) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("div", { key: '08dc0f036a9e27a62e688389118664ec6d38f5fe', class: {
                 "filters-wrapper": true,
                 hidden: this.showAspectRatioError,
-            } }, h("vviinn-filters", { key: '87c6a34f3600b5c27bc0a9dc4e68239a5179593d', showInWidget: this.showInWidget, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters", { key: '2185ccdc5005da02c03562b290693390a6ecf2ff', mode: "preview", showHeader: false, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters-button", { key: '3b65d1435f512939444dcef95a4902c0f70a25f1', class: {
+            } }, h("vviinn-filters", { key: '0e0634bc3963b7f87e19fa5ef9814d1206368e5f', showInWidget: this.showInWidget, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters", { key: 'a12da4af4e2922904bc3acbaae517c5268385b61', mode: "preview", showHeader: false, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters-button", { key: '63ed9c068918f1915a84ab90af1a0d2e6eccd596', class: {
                 "extended-filters-button": true,
                 "has-primary-filters": this.state.dynamicFilters.filter((f) => f.isPrimary)
                     .length > 0,
-            }, showInWidget: this.showInWidget }))))), this.isResultSlide() && (h(Fragment, { key: '20234d1d8db73b4a0e7e3160ece10ec961623970' }, h("vviinn-results", { key: 'b66732f0a86a9e296e4fd6dbb1c75e4e4debe657', token: this.token, locale: this.locale, numberLocale: this.numberLocale, pricePrefix: this.pricePrefix, "currency-sign": this.currencySign, apiPath: this.apiPath, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, uiSessionId: this.uiSessionId, widgetElementId: (_c = this.buttonElementId) !== null && _c !== void 0 ? _c : this.widgetElementId, showInWidget: this.showInWidget, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, showAspectRatioError: this.showAspectRatioError, resetWidgetState: this.resetState, replaceSlotsContentInWidget: this.replaceSlotsContent.bind(this), replaceSlotsContentInButton: this.replaceSlotsContentInButton, addPriceContainer: this.addPriceContainer, oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, parentSlots: [...this.parentSlots, ...this.slots], scrollableModalBody: this.modalBody }))))), h("vviinn-extended-filters", { key: 'b08b5f73b3462169236f63aa2499940aa0898115', class: "modal-extended-filters", mode: "modal", exportparts: extendedFiltersParts, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }))));
+            }, showInWidget: this.showInWidget }))))), this.isResultSlide() && (h(Fragment, { key: 'f82ea6c8e9009241f94f70ec9512ede273db9052' }, h("vviinn-results", { key: '422e0d0c3b7f93bab6f6581a7c352107774f6c87', token: this.token, locale: this.locale, numberLocale: this.numberLocale, pricePrefix: this.pricePrefix, "currency-sign": this.currencySign, apiPath: this.apiPath, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, uiSessionId: this.uiSessionId, widgetElementId: (_c = this.buttonElementId) !== null && _c !== void 0 ? _c : this.widgetElementId, showInWidget: this.showInWidget, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, showAspectRatioError: this.showAspectRatioError, resetWidgetState: this.resetState, replaceSlotsContentInWidget: this.replaceSlotsContent.bind(this), replaceSlotsContentInButton: this.replaceSlotsContentInButton, addPriceContainer: this.addPriceContainer, oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, parentSlots: [...this.parentSlots, ...this.slots], scrollableModalBody: this.modalBody }))))), h("vviinn-extended-filters", { key: '203270237562c97f144ccce3ba364893a1ecafd5', class: "modal-extended-filters", mode: "modal", exportparts: extendedFiltersParts, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }))));
     }
     static get is() { return "vviinn-vps-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -858,6 +861,26 @@ export class VviinnVpsWidget {
                 "reflect": false,
                 "defaultValue": "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"
+            },
             "exampleImageSource": {
                 "type": "string",
                 "attribute": "example-image-source",

package/dist/collection/cssParts/index.js

@@ -16,12 +16,14 @@ export const searchWidgetFilterParts = makeExportPartsString(extendedFiltersPart
 export const searchWidgetButtonParts = makeExportPartsString([
     "upload-photo_button",
     "start-camera_button",
+    "drop-zone",
 ]);
 export const searchModalFirstScreenParts = makeExportPartsString([
     "close-button",
     "secondary-action",
     "upload-photo_button",
     "start-camera_button",
+    "drop-zone",
 ]);
 export const searchBarParts = makeExportPartsString([
     "text-search-input",

package/dist/collection/dom/index.js

@@ -4,6 +4,13 @@ export const findTarget = (ev) => {
 };
 export const findSlotElements = (el) => Array.from(el.querySelectorAll("[slot]"));
 export const getSlotNames = (slotElements) => slotElements.map((el) => el.getAttribute("slot"));
+// True when the element has real default-slot content: an element child with no
+// `slot` attribute, or a non-whitespace text node. Whitespace and named-slot
+// children don't count, so formatting newlines can't suppress a slot fallback.
+export const hasDefaultSlotContent = (el) => Array.from(el.childNodes).some((node) => node.nodeType === Node.TEXT_NODE
+    ? node.textContent.trim() !== ""
+    : node.nodeType === Node.ELEMENT_NODE &&
+        !node.getAttribute("slot"));
 // Intersection Observer utilities
 export * from "./intersectionObserver";
 export function addEventListenersWithSignal(target, listeners, signal) {

package/dist/collection/helpers/dragAndDrop/parseDroppedFile.js

@@ -0,0 +1,2 @@
+/** Returns the first file from a drop's DataTransfer (no type validation). */
+export const parseDroppedFile = (dataTransfer) => { var _a, _b; return (_b = (_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null; };

package/dist/collection/locale/resources.js

@@ -17,9 +17,10 @@ export const resources = {
             },
             exampleImagesTitle: "Mit den Beispielbildern die Suche direkt ausprobieren",
             imageUploadButtonText: "Bild hochladen",
+            dragDropHintText: "Bild per Drag & Drop hierhin ziehen",
             cameraButtonTextStart: "Kamera starten",
             cameraButtonTextStop: "Kamera stoppen",
-            privacyBadgeText: `Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner ${VVIINN_LINK} ein. Das Bild wird nach einer Stunde Inaktivität gelöscht.`,
+            privacyBadgeText: `Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner ${VVIINN_LINK} ein.`,
             teaserText: "Finde Dein Produkt",
             imageSearchModalTitle: "KI-Suche",
             textSearchPlaceholder: "mit Text suchen",
@@ -148,9 +149,10 @@ export const resources = {
             },
             exampleImagesTitle: "Try out the search with the example images",
             imageUploadButtonText: "Upload Photo",
+            dragDropHintText: "Drag and drop your image here",
             cameraButtonTextStart: "Start Camera",
             cameraButtonTextStop: "Stop Camera",
-            privacyBadgeText: `By uploading a picture you agree to the processing by our partner ${VVIINN_LINK}. The image will be deleted after one hour of inactivity.`,
+            privacyBadgeText: `By uploading a picture you agree to the processing by our partner ${VVIINN_LINK}.`,
             teaserText: "Find Your Product",
             imageSearchModalTitle: "AI Search",
             textSearchPlaceholder: "Search by text",

package/dist/esm/{SecondaryActionIcon-FWFzrhba.js → SecondaryActionIcon-D4f3aMUD.js}

@@ -1,4 +1,4 @@
-import { h } from './index-RkvPN2Rk.js';
+import { h } from './index-B89nCb_F.js';
 
 const SecondaryActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
     h("path", { d: "M7.82499 13L12.725 17.9C12.925 18.1 13.0208 18.3333 13.0125 18.6C13.0042 18.8667 12.9 19.1 12.7 19.3C12.5 19.4833 12.2667 19.5792 12 19.5875C11.7333 19.5958 11.5 19.5 11.3 19.3L4.69999 12.7C4.59999 12.6 4.52915 12.4917 4.48749 12.375C4.44582 12.2583 4.42499 12.1333 4.42499 12C4.42499 11.8667 4.44582 11.7417 4.48749 11.625C4.52915 11.5083 4.59999 11.4 4.69999 11.3L11.3 4.69999C11.4833 4.51665 11.7125 4.42499 11.9875 4.42499C12.2625 4.42499 12.5 4.51665 12.7 4.69999C12.9 4.89999 13 5.13749 13 5.41249C13 5.68749 12.9 5.92499 12.7 6.12499L7.82499 11H19C19.2833 11 19.5208 11.0958 19.7125 11.2875C19.9042 11.4792 20 11.7167 20 12C20 12.2833 19.9042 12.5208 19.7125 12.7125C19.5208 12.9042 19.2833 13 19 13H7.82499Z", fill: "currentColor" })));

package/dist/esm/{cssUrlHelper-DsQD_dY6.js → cssUrlHelper-Byz4s-MD.js}

@@ -1,4 +1,4 @@
-import { h } from './index-RkvPN2Rk.js';
+import { h } from './index-B89nCb_F.js';
 
 const renderExternalCSS = (cssUrl) => (cssUrl === null || cssUrl === void 0 ? void 0 : cssUrl.length) ? h("link", { href: cssUrl, rel: "stylesheet" }) : null;
 

package/dist/esm/{index-RkvPN2Rk.js → index-B89nCb_F.js}

@@ -1562,6 +1562,9 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (doc, elm, flags) => {
+  if (flags & 4 /* TargetDocument */) {
+    return doc;
+  }
   if (flags & 8 /* TargetWindow */) {
     return win;
   }