vviinn-widgets 2.36.0 → 2.37.0

package/dist/cjs/{index-8eb9f2c2.js → index-722ca75d.js}

@@ -4,6 +4,8 @@ const index = require('./index-5619b5ec.js');
 
 const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
+const SecondaryActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  index.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" })));
 const CameraIcon = () => (index.h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
 const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
@@ -21,11 +23,10 @@ const GalleryActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000
   index.h("path", { d: "M5.5 21H8.175V16.325H3.5V19C3.5 19.55 3.69583 20.0208 4.0875 20.4125C4.47917 20.8042 4.95 21 5.5 21ZM10.175 21H14.825V16.325H10.175V21ZM16.825 21H19.5C20.05 21 20.5208 20.8042 20.9125 20.4125C21.3042 20.0208 21.5 19.55 21.5 19V16.325H16.825V21ZM3.5 14.325H8.175V9.675H3.5V14.325ZM10.175 14.325H14.825V9.675H10.175V14.325ZM16.825 14.325H21.5V9.675H16.825V14.325ZM3.5 7.675H8.175V3H5.5C4.95 3 4.47917 3.19583 4.0875 3.5875C3.69583 3.97917 3.5 4.45 3.5 5V7.675ZM10.175 7.675H14.825V3H10.175V7.675ZM16.825 7.675H21.5V5C21.5 4.45 21.3042 3.97917 20.9125 3.5875C20.5208 3.19583 20.05 3 19.5 3H16.825V7.675Z", fill: "currentColor" })));
 const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
   index.h("path", { d: "M12 17.5C13.25 17.5 14.3125 17.0625 15.1875 16.1875C16.0625 15.3125 16.5 14.25 16.5 13C16.5 11.75 16.0625 10.6875 15.1875 9.8125C14.3125 8.9375 13.25 8.5 12 8.5C10.75 8.5 9.6875 8.9375 8.8125 9.8125C7.9375 10.6875 7.5 11.75 7.5 13C7.5 14.25 7.9375 15.3125 8.8125 16.1875C9.6875 17.0625 10.75 17.5 12 17.5ZM12 15.5C11.3 15.5 10.7083 15.2583 10.225 14.775C9.74167 14.2917 9.5 13.7 9.5 13C9.5 12.3 9.74167 11.7083 10.225 11.225C10.7083 10.7417 11.3 10.5 12 10.5C12.7 10.5 13.2917 10.7417 13.775 11.225C14.2583 11.7083 14.5 12.3 14.5 13C14.5 13.7 14.2583 14.2917 13.775 14.775C13.2917 15.2583 12.7 15.5 12 15.5ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7C2 6.45 2.19583 5.97917 2.5875 5.5875C2.97917 5.19583 3.45 5 4 5H7.15L8.4 3.65C8.58333 3.45 8.80417 3.29167 9.0625 3.175C9.32083 3.05833 9.59167 3 9.875 3H14.125C14.4083 3 14.6792 3.05833 14.9375 3.175C15.1958 3.29167 15.4167 3.45 15.6 3.65L16.85 5H20C20.55 5 21.0208 5.19583 21.4125 5.5875C21.8042 5.97917 22 6.45 22 7V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4Z", fill: "currentColor" })));
-const RoundCameraIcon = () => (index.h("svg", { width: "72", height: "72", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM51.8333 25.4167C51.1667 24.75 50.1667 24.25 49.1667 24.25H44.1667L42 20.1667C41.8333 19.8333 41.3333 19.5 41 19.3333C40.5 19.1667 40 19 39.5 19H32.5C32 19 31.5 19.1667 31 19.3333C30.6667 19.5 30.1667 19.8333 29.8333 20.1667L27.6667 24.25H22.6667C21.6667 24.25 20.8333 24.5833 20.1667 25.4167C19.5 26.25 19 27.0833 19 28.0833V46C19 47 19.3333 48 20.1667 48.6667C21 49.3333 21.8333 49.8333 22.8333 49.8333H46.8333L39.6667 42.6667C38.5 43.3333 37.3333 43.6667 36 43.6667C33.8333 43.6667 32.1667 43 30.6667 41.5C29.1667 40 28.5 38.1667 28.5 36.1667C28.5 34.1667 29.1667 32.3333 30.6667 30.8333C32.1667 29.3333 34 28.6667 36 28.6667C38 28.6667 39.8333 29.3333 41.3333 30.8333C42.8333 32.3333 43.5 34.1667 43.5 36.1667C43.5 37.5 43.1667 38.6667 42.5 39.8333L51.5 48.8333L51.6667 48.6667C52.3333 48 52.8333 47 52.8333 46V28.0833C52.8333 26.8333 52.6667 26.0833 51.8333 25.4167ZM38.8333 33.1667C38 32.3333 37.1667 32 36 32C34.8333 32 34 32.3333 33.1667 33.1667C32.3333 34 32 34.8333 32 36C32 37.1667 32.3333 38 33.1667 38.8333C34 39.6667 34.8333 40 36 40C37.1667 40 38 39.6667 38.8333 38.8333C39.6667 38 40 37.1667 40 36C40 34.8333 39.6667 34 38.8333 33.1667Z", fill: "white" }),
-  index.h("g", { filter: "url(#filter0_b_5_4702)" },
-    index.h("path", { d: "M49.1667 24.25C50.1667 24.25 51.1667 24.75 51.8333 25.4167C52.6667 26.0833 52.8333 26.8333 52.8333 28.0833V46C52.8333 47 52.3333 48 51.6667 48.6667L51.5 48.8333L42.5 39.8333C43.1667 38.6667 43.5 37.5 43.5 36.1667C43.5 34.1667 42.8333 32.3333 41.3333 30.8333C39.8333 29.3333 38 28.6667 36 28.6667C34 28.6667 32.1667 29.3333 30.6667 30.8333C29.1667 32.3333 28.5 34.1667 28.5 36.1667C28.5 38.1667 29.1667 40 30.6667 41.5C32.1667 43 33.8333 43.6667 36 43.6667C37.3333 43.6667 38.5 43.3333 39.6667 42.6667L46.8333 49.8333H22.8333C21.8333 49.8333 21 49.3333 20.1667 48.6667C19.3333 48 19 47 19 46V28.0833C19 27.0833 19.5 26.25 20.1667 25.4167C20.8333 24.5833 21.6667 24.25 22.6667 24.25H27.6667L29.8333 20.1667C30.1667 19.8333 30.6667 19.5 31 19.3333C31.5 19.1667 32 19 32.5 19H39.5C40 19 40.5 19.1667 41 19.3333C41.3333 19.5 41.8333 19.8333 42 20.1667L44.1667 24.25H49.1667Z", fill: "black", "fill-opacity": "0.25" }),
-    index.h("path", { d: "M36 32C37.1667 32 38 32.3333 38.8333 33.1667C39.6667 34 40 34.8333 40 36C40 37.1667 39.6667 38 38.8333 38.8333C38 39.6667 37.1667 40 36 40C34.8333 40 34 39.6667 33.1667 38.8333C32.3333 38 32 37.1667 32 36C32 34.8333 32.3333 34 33.1667 33.1667C34 32.3333 34.8333 32 36 32Z", fill: "black", "fill-opacity": "0.25" }))));
+const RoundCameraIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "80", height: "80", viewBox: "0 0 80 80", fill: "none" },
+  index.h("circle", { cx: "40", cy: "40", r: "36", fill: "white" }),
+  index.h("circle", { cx: "40", cy: "40", r: "39", stroke: "white", "stroke-width": "2" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M50 26.6666H53.3333C57.0167 26.6666 60 29.65 60 33.3333V46.6666H56.6667V33.3333C56.6667 31.5 55.1667 30 53.3333 30H48.2167L47.2333 28.5166L44.8833 25H35.1167L32.7667 28.5166L31.7833 30H26.6667C24.8333 30 23.3333 31.5 23.3333 33.3333V50C23.3333 51.8333 24.8333 53.3333 26.6667 53.3333H35V56.6666H26.6667C22.9833 56.6666 20 53.6833 20 50V33.3333C20 29.65 22.9833 26.6666 26.6667 26.6666H30L33.3333 21.6666H46.6667L50 26.6666ZM40 33.3333C44.6 33.3333 48.3333 37.0666 48.3333 41.6666L48.3167 41.6833C48.3167 43.3666 47.8 44.95 46.9333 46.2666L54.5 53.8333L52.15 56.1833L44.5833 48.6166C43.2667 49.4833 41.7 50 40 50C35.4 50 31.6667 46.2666 31.6667 41.6666C31.6667 37.0666 35.4 33.3333 40 33.3333ZM35 41.6666C35 44.4166 37.25 46.6666 40 46.6666C42.75 46.6666 45 44.4166 45 41.6666C45 38.9166 42.75 36.6666 40 36.6666C37.25 36.6666 35 38.9166 35 41.6666Z", fill: "#6F6F6F" })));
 const WarningIcon = () => (index.h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }),
   index.h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })));
@@ -37,6 +38,7 @@ exports.ChevronIcon = ChevronIcon;
 exports.CrossIcon = CrossIcon;
 exports.GalleryActionIcon = GalleryActionIcon;
 exports.RoundCameraIcon = RoundCameraIcon;
+exports.SecondaryActionIcon = SecondaryActionIcon;
 exports.UpdateIcon = UpdateIcon;
 exports.UploadActionIcon = UploadActionIcon;
 exports.VisualSearchIcon = VisualSearchIcon;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"imageLoaded":[32],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_15.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"loading":[4],"accept":[1],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"selected":[32],"videoInitialized":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraEnabled":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
+  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"imageLoaded":[32],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_15.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"loading":[4],"accept":[1],"resetVpsButton":[16],"capture":[1]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"cameraButtonClicked":[4,"camera-button-clicked"],"selected":[32],"videoInitialized":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraEnabled":[32],"cameraButtonClicked":[32],"uploadSource":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
   });
 };
 

package/dist/cjs/{package-5713ea1d.js → package-49f18e6a.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.36.0";
+const version = "2.37.0";
 
 exports.version = version;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5619b5ec.js');
 const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
 const i18next = require('./i18next-74ff3413.js');
-const index$1 = require('./index-8eb9f2c2.js');
+const index$1 = require('./index-722ca75d.js');
 const customizedSlots = require('./customized-slots-e6b1235d.js');
 
 // -------------------------------------------------------------------------------------
@@ -198,7 +198,7 @@ const VviinnEmptyResults = class {
   }
 };
 
-const vviinnExampleImageCss = ":host{display:block;width:100%;height:100%;position:relative;overflow:hidden;flex-grow:1;transition:height 0.6s ease-in-out}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}video{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.example-button{cursor:pointer;padding:4px;border-radius:50%;border:2px solid white;position:absolute;bottom:26px;left:calc(50% - 36px);background-color:transparent;line-height:0;opacity:0.6}.hidden{display:none}";
+const vviinnExampleImageCss = ":host{display:block;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;flex-grow:1;transition:min-height 1s}:host(.video-expanded){min-height:100%;transition:min-height 0.8s}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}video{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.buttons-group{position:absolute;width:100%;height:64px;left:0;bottom:64px;display:flex;align-items:center}.photo-button{display:none;cursor:pointer;border:none;position:absolute;padding:0;left:calc(50% - 36px);color:#6f6f6f;background-color:transparent;line-height:0}.hidden{display:none}.visible{display:flex}";
 
 const VviinnExampleImage = class {
   constructor(hostRef) {
@@ -212,6 +212,7 @@ const VviinnExampleImage = class {
     this.height = 0;
     this.basicEventData = undefined;
     this.srcObject = undefined;
+    this.cameraButtonClicked = false;
     this.selected = false;
     this.videoInitialized = false;
   }
@@ -247,8 +248,10 @@ const VviinnExampleImage = class {
     this.selectImage();
   }
   handleSrcObjectChange() {
-    if (!this.srcObject)
+    if (!this.srcObject) {
+      this.videoInitialized = false;
       return;
+    }
     this.videoElement.srcObject = this.srcObject;
     this.videoElement.onloadedmetadata = () => {
       this.vviinnCameraEnabled.emit(true);
@@ -256,7 +259,9 @@ const VviinnExampleImage = class {
     };
   }
   render() {
-    return (index.h(index.Host, { onKeyUp: (ev) => this.handleKeyPress(ev) }, index.h("video", { id: "camera-preview", class: { hidden: !this.videoInitialized }, autoplay: true, playsinline: true, muted: true }), index.h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized } }), index.h("button", { class: { "example-button": true, hidden: !this.videoInitialized }, onClick: () => this.selectImage() }, index.h(index$1.RoundCameraIcon, null))));
+    return (index.h(index.Host, { onKeyUp: (ev) => this.handleKeyPress(ev), class: { "video-expanded": this.cameraButtonClicked } }, index.h("video", { id: "camera-preview", class: {
+        hidden: !this.videoInitialized,
+      }, autoplay: true, playsinline: true, muted: true }), index.h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized } }), index.h("div", { class: "buttons-group" }, index.h("button", { class: { "photo-button": true, visible: this.videoInitialized }, onClick: () => this.selectImage() }, index.h(index$1.RoundCameraIcon, null)))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -278,6 +283,7 @@ const VviinnImageSelector = class {
     this.loading = false;
     this.accept = "image";
     this.resetVpsButton = undefined;
+    this.capture = undefined;
   }
   async handleInputChange(event) {
     this.vviinnImageUpload.emit(this.basicEventData);
@@ -293,7 +299,7 @@ const VviinnImageSelector = class {
     }
   }
   render() {
-    return (index.h(index.Host, { exportparts: "button" }, this.loading ? (index.h("vviinn-preloader", null)) : (index.h("label", { htmlFor: "fileInput", part: "button" }, index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: this.accept === "image" ? "image/*" : "application/octet-stream", onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
+    return (index.h(index.Host, { exportparts: "button" }, this.loading ? (index.h("vviinn-preloader", null)) : (index.h("label", { htmlFor: "fileInput", part: "button" }, index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.h("input", { id: "fileInput", class: "visually-hidden", type: "file", capture: this.capture, accept: this.accept === "image" ? "image/*" : "application/octet-stream", onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
   }
   static get watchers() { return {
     "startUpload": ["startUploadWatcher"]
@@ -3679,13 +3685,12 @@ const VviinnImageView = class {
 };
 VviinnImageView.style = vviinnImageViewCss;
 
-const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:14px}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{position:sticky;z-index:1}:host(:not(.first-screen)) .head{background-color:white}.body{overflow-y:auto}:host(.first-screen) .body{transform:translateY(-64px)}:host(:not(.first-screen)) .body{padding-bottom:64px}}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#525252}button:hover{color:#000}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
+const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:14px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{position:sticky;z-index:1}:host(:not(.first-screen)) .head{background-color:white}.body{overflow-y:auto}:host(.first-screen) .body{transform:translateY(-64px)}:host(:not(.first-screen)) .body{padding-bottom:64px}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
 
 const VviinnModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
-    this.secondaryActionClicked = index.createEvent(this, "secondaryActionClicked", 7);
     this.active = false;
     this.resetState = undefined;
     this.buttonElementId = undefined;
@@ -3694,6 +3699,7 @@ const VviinnModal = class {
     this.isFirstScreen = undefined;
     this.slider = false;
   }
+  /** @internal */
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
@@ -3728,8 +3734,7 @@ const VviinnModal = class {
     return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => {
         this.resetState();
         this.resetTopScroll();
-        this.secondaryActionClicked.emit();
-      } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { class: "title", part: "title" }, this.renderImage(), index.h("slot", { name: "vviinn-image-search-modal-title" }, i18next.instance.t("imageSearchModalTitle"))), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "currentColor" })))), index.h("div", { class: "body" }, index.h("slot", null))));
+      } }, index.h(index$1.SecondaryActionIcon, null))), index.h("div", { class: "title", part: "title" }, this.renderImage(), index.h("slot", { name: "vviinn-image-search-modal-title" }, i18next.instance.t("imageSearchModalTitle"))), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { 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" })))), index.h("div", { class: "body" }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
 };
@@ -3766,7 +3771,7 @@ const VviinnOverlayedModal = class {
 };
 VviinnOverlayedModal.style = vviinnOverlayedModalCss;
 
-const vviinnPrivacyBadgeCss = ":host{color:#525252;font-size:12px;line-height:16px}:host(.visible){color:transparent}@media (max-width: 768px){:host(.visible){display:none}}";
+const vviinnPrivacyBadgeCss = ":host{color:#525252;font-size:12px;line-height:16px;text-align:center}:host(.invisible){color:transparent}@media (max-width: 768px){:host(.invisible){display:none}}";
 
 const VviinnPrivacyBadge = class {
   constructor(hostRef) {

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

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

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
 const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
-const index$1 = require('./index-8eb9f2c2.js');
+const index$1 = require('./index-722ca75d.js');
 const i18next = require('./i18next-74ff3413.js');
 const customizedSlots = require('./customized-slots-e6b1235d.js');
-const _package = require('./package-5713ea1d.js');
+const _package = require('./package-49f18e6a.js');
 const index$2 = require('./index-7ff2ab5f.js');
 
 const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";

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

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

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-5713ea1d.js');
-const index$1 = require('./index-8eb9f2c2.js');
+const _package = require('./package-49f18e6a.js');
+const index$1 = require('./index-722ca75d.js');
 
 const vviinnVprButtonCss = ":host{display:block}";
 

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-5713ea1d.js');
-const index$1 = require('./index-8eb9f2c2.js');
+const _package = require('./package-49f18e6a.js');
+const index$1 = require('./index-722ca75d.js');
 const customizedSlots = require('./customized-slots-e6b1235d.js');
 const constants = require('./constants-7684cbfc.js');
 
@@ -65,7 +65,7 @@ const VviinnVpsButton = class {
   render() {
     return (index.h(index.Host, { tabindex: "0", role: "button" }, index.h("vviinn-button", { onClick: () => {
         this.handleClick();
-      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource })));
+      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource })));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5619b5ec.js');
 const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
 const i18next = require('./i18next-74ff3413.js');
-const _package = require('./package-5713ea1d.js');
+const _package = require('./package-49f18e6a.js');
 const customizedSlots = require('./customized-slots-e6b1235d.js');
 const index$1 = require('./index-7ff2ab5f.js');
-const index$2 = require('./index-8eb9f2c2.js');
+const index$2 = require('./index-722ca75d.js');
 const constants = require('./constants-7684cbfc.js');
 
 const resources = {
@@ -16,7 +16,8 @@ const resources = {
     translation: {
       exampleImagesTitle: "Mit den Beispielbildern die Suche direkt ausprobieren",
       imageUploadButtonText: "Bild Hochladen",
-      cameraButtonText: "Kamera Starten",
+      cameraButtonTextStart: "Kamera Starten",
+      cameraButtonTextStop: "Kamera Stop",
       showFilesButtonText: "Dateien anzeigen",
       galleryButtonText: "Galerie Anzeigen",
       privacyBadgeText: "Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner Vviinn ein. Das Bild wird nach einer Stunde Inaktivität gelöscht.",
@@ -41,7 +42,8 @@ const resources = {
     translation: {
       exampleImagesTitle: "Try out the search with the example images",
       imageUploadButtonText: "Upload Photo",
-      cameraButtonText: "Start Camera",
+      cameraButtonTextStart: "Start Camera",
+      cameraButtonTextStop: "Stop Camera",
       showFilesButtonText: "Show Files",
       galleryButtonText: "Show Gallery",
       privacyBadgeText: "By uploading a picture you agree to the processing by our partner Vviinn. The image will be deleted after one hour of inactivity.",
@@ -64,7 +66,7 @@ const resources = {
   },
 };
 
-const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin:24px 0}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;color:white;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.results-page{margin-top:60px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{display:grid;grid-template-rows:min-content 1fr;grid-gap:24px;min-width:100%}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.filters-wrapper{overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (min-width: 769px){.mobile-show{display:none}}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}.start-page.active{height:calc(100vh - 67px);height:calc(100svh - 67px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:24px}.filters-wrapper{min-width:calc(100% + 40px)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:14px 24px 20px}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 480px){.start-page{padding-top:0}#start-page_block{padding:20px}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.results-page>*{padding:12px}.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin:24px 0}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;color:white;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.results-page{margin-top:60px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{display:grid;grid-template-rows:min-content 1fr;grid-gap:24px;min-width:100%}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.filters-wrapper{overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:24px}.filters-wrapper{min-width:calc(100% + 40px)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.results-page>*{padding:12px}.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -81,6 +83,16 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
 const notEmptyString = (s) => !imageSearch_store.isEmpty(s);
 const notNan = (n) => !isNaN(n);
+const checkDeviceType = () => {
+  const ua = navigator.userAgent;
+  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
+    return "tablet";
+  }
+  else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
+    return "mobile";
+  }
+  return "desktop";
+};
 const VviinnVpsWidget = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -102,9 +114,28 @@ const VviinnVpsWidget = class {
     this.resultLoaded = false;
     this.resultViewed = false;
     this.cameraAvailable = false;
-    this.handleCameraClick = async () => {
-      if (this.stream)
+    this.isTabletOrMobile = false;
+    this.handleVviinnImageUpload = (uploadSource) => {
+      this.trackInitialSearch();
+      this.uploadSource = uploadSource;
+    };
+    this.handleVviinnImageUploadFinished = () => {
+      this.handleImageSelection();
+      if (this.mode === "upload" && this.showingInButton) {
+        this.active = true;
+      }
+    };
+    this.handleVviinnNoResult = (detail) => {
+      if (detail.reason === "client") {
+        this.wrongImageFormat = true;
+      }
+    };
+    this.handleStartCameraClick = async () => {
+      if (this.stream) {
+        this.resetState();
         return;
+      }
+      this.cameraButtonClicked = true;
       try {
         const videoStream = await navigator.mediaDevices.getUserMedia({
           video: { facingMode: "environment" },
@@ -113,7 +144,8 @@ const VviinnVpsWidget = class {
       }
       catch (error) {
         // TODO: Show error in the UI
-        console.error("Error accessing camera:", error.message);
+        console.log("Error accessing camera: ", error.message);
+        this.resetState();
       }
     };
     this.setTrackingDeactivated = (result) => {
@@ -131,7 +163,6 @@ const VviinnVpsWidget = class {
         widgetVersion: _package.version,
       };
     };
-    this.uploadSource = "uploadFiles";
     this.token = undefined;
     this.active = true;
     this.currencySign = "€";
@@ -153,6 +184,8 @@ const VviinnVpsWidget = class {
     this.trackingDeactivated = false;
     this.stream = null;
     this.cameraEnabled = false;
+    this.cameraButtonClicked = false;
+    this.uploadSource = undefined;
   }
   initResultEvents() {
     this.resultLoaded = false;
@@ -281,11 +314,8 @@ const VviinnVpsWidget = class {
     const searchEvent = index$1.createFilterEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, kind: detail.kind, action: detail.action }, rest));
     this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
   }
-  trackSecondaryAction() {
-    this.initResultEvents();
-    this.stream = null;
-  }
   connectedCallback() {
+    this.isTabletOrMobile = checkDeviceType() !== "desktop";
     imageSearch_store.state.apiPath = this.apiPath;
     imageSearch_store.state.currencySign = this.currencySign;
     imageSearch_store.state.locale = this.locale;
@@ -334,15 +364,15 @@ const VviinnVpsWidget = class {
     let resultEvent = index$1.createResultVpsEventByType(type)(Object.assign({ session_id: this.uiSessionId }, rest));
     this.trackingApi.trackEvent(resultEvent).then(this.setTrackingDeactivated);
   }
-  trackInitialSearch(source) {
+  trackInitialSearch() {
     if (this.trackingDeactivated)
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId", "widgetType"]);
-    const searchEvent = index$1.createSearchEvent(Object.assign({ session_id: this.uiSessionId, search_area: "full", source }, rest));
+    const searchEvent = index$1.createSearchEvent(Object.assign({ session_id: this.uiSessionId, search_area: "full", source: "upload" }, rest));
     this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
   }
-  handleImageSelection(source) {
-    this.imageSource = source;
+  handleImageSelection() {
+    this.imageSource = "upload";
     this.slidePosition = 1;
     const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
     const overlay = root.shadowRoot.querySelector("vviinn-overlay");
@@ -382,7 +412,10 @@ const VviinnVpsWidget = class {
     this.wrongImageFormat = false;
     this.resetScroll("results-block");
     this.stopStreamTracks();
+    this.initResultEvents();
     this.stream = null;
+    this.cameraEnabled = false;
+    this.cameraButtonClicked = false;
   }
   haveErrors() {
     return this.wrongImageFormat || imageSearch_store.imageSearchState.serverError;
@@ -400,44 +433,38 @@ const VviinnVpsWidget = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, widgetVersion: _package.version, hideBackButton: this.mode === "upload" && this.showingInButton, exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
+    return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
+        (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,
-      } }, index.h("vviinn-example-image", { onVviinnImageUploadFinished: () => this.handleImageSelection("example"), onVviinnImageUpload: () => {
-        this.trackInitialSearch("example");
-      }, onVviinnNoResult: () => this.resetScroll("start-page_block", "smooth"), basicEventData: this.getBasicEventData(), srcObject: this.stream, exampleImageSource: this.exampleImageSource }), index.h("div", { class: {
+      } }, index.h("vviinn-example-image", { onVviinnImageUploadFinished: this.handleVviinnImageUploadFinished, onVviinnImageUpload: () => {
+        this.handleVviinnImageUpload("startCamera");
+      }, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.cameraButtonClicked, exampleImageSource: this.exampleImageSource }), index.h("div", { class: {
         error: this.haveErrors(),
-      }, id: "start-page_block" }, index.h("div", { class: "start-page_main-content" }, index.h("div", { class: "start-page_errors-block" }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => this.resetState() }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, handler: () => this.resetState() })), !this.haveErrors() && index.h("vviinn-teaser", null), !this.haveErrors() && (index.h("div", { class: "buttons-group" }, this.cameraAvailable && (index.h("button", { class: "action-button", onClick: this.handleCameraClick }, index.h("span", { class: "action-button-content" }, index.h(index$2.CameraActionIcon, null), index.h("slot", { name: "vviinn-camera-button-text" }, index.h("span", null, i18next.instance.t("cameraButtonText")))))), index.h("vviinn-image-selector", { class: "action-button mobile-show", accept: "application-octet-stream", onVviinnImageUploadFinished: () => {
-        this.handleImageSelection("upload");
-        if (this.mode === "upload" && this.showingInButton) {
-          this.active = true;
-        }
-      }, onVviinnImageUpload: () => {
-        this.uploadSource = "showFiles";
-        this.trackInitialSearch("upload");
-      }, onVviinnNoResult: ({ detail }) => {
-        if (detail.reason === "client") {
-          this.wrongImageFormat = true;
-        }
-      }, resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "show-files_button", startUpload: this.buttonPressed &&
+      }, id: "start-page_block" }, index.h("div", { class: "start-page_main-content" }, index.h("div", { class: {
+        "start-page_errors-block": true,
+        hidden: !this.wrongImageFormat && !imageSearch_store.imageSearchState.serverError,
+      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => this.resetState() }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, handler: () => this.resetState() })), !this.haveErrors() && index.h("vviinn-teaser", null), !this.haveErrors() && (index.h("div", { class: "buttons-group" }, this.cameraAvailable &&
+      (this.isTabletOrMobile ? (index.h("vviinn-image-selector", { class: "action-button", part: "start-camera_button", accept: "image", capture: "environment", onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), onVviinnImageUpload: () => {
+          this.handleVviinnImageUpload("startCamera");
+        }, onVviinnImageUploadFinished: this.handleVviinnImageUploadFinished, resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), startUpload: this.buttonPressed &&
+          this.showingInButton &&
+          this.mode === "upload", loading: imageSearch_store.imageSearchState.loading &&
+          this.uploadSource === "startCamera" }, index.h("span", { slot: "upload-button-text", class: "action-button-content" }, index.h(index$2.CameraActionIcon, null), index.h("slot", { name: "vviinn-camera-button-text-start" }, index.h("span", null, i18next.instance.t("cameraButtonTextStart")))))) : (index.h("button", { class: "action-button", part: "start-camera_button", onClick: () => {
+          this.handleStartCameraClick();
+          this.uploadSource = "startCamera";
+        } }, imageSearch_store.imageSearchState.loading &&
+        this.uploadSource === "startCamera" ? (index.h("vviinn-preloader", null)) : (index.h("span", { class: "action-button-content" }, index.h(index$2.CameraActionIcon, null), this.cameraEnabled ? (index.h("slot", { name: "vviinn-camera-button-text-stop" }, index.h("span", null, i18next.instance.t("cameraButtonTextStop")))) : (index.h("slot", { name: "vviinn-camera-button-text-start" }, index.h("span", null, i18next.instance.t("cameraButtonTextStart"))))))))), this.isTabletOrMobile && (index.h("vviinn-image-selector", { class: "action-button", accept: "application-octet-stream", onClick: () => (this.uploadSource = "showFiles"), onVviinnImageUpload: () => {
+        this.handleVviinnImageUpload("showFiles");
+      }, onVviinnImageUploadFinished: this.handleVviinnImageUploadFinished, onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "show-files_button", startUpload: this.buttonPressed &&
         this.showingInButton &&
         this.mode === "upload", loading: imageSearch_store.imageSearchState.loading &&
-        this.uploadSource === "showFiles" }, index.h("span", { slot: "upload-button-text", class: "action-button-content" }, index.h(index$2.GalleryActionIcon, null), index.h("slot", { name: "vviinn-show-files-button-text" }, index.h("span", null, i18next.instance.t("showFilesButtonText"))))), index.h("vviinn-image-selector", { class: "action-button", onVviinnImageUploadFinished: () => {
-        this.handleImageSelection("upload");
-        if (this.mode === "upload" && this.showingInButton) {
-          this.active = true;
-        }
-      }, onVviinnImageUpload: () => {
-        this.uploadSource = "uploadFiles";
-        this.trackInitialSearch("upload");
-      }, onVviinnNoResult: ({ detail }) => {
-        if (detail.reason === "client") {
-          this.wrongImageFormat = true;
-        }
-      }, resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "select-image_button", startUpload: this.buttonPressed &&
+        this.uploadSource === "showFiles" }, index.h("span", { slot: "upload-button-text", class: "action-button-content" }, index.h(index$2.GalleryActionIcon, null), index.h("slot", { name: "vviinn-show-files-button-text" }, index.h("span", null, i18next.instance.t("showFilesButtonText")))))), index.h("vviinn-image-selector", { class: "action-button", onClick: () => (this.uploadSource = "uploadPhoto"), onVviinnImageUploadFinished: this.handleVviinnImageUploadFinished, onVviinnImageUpload: () => {
+        this.handleVviinnImageUpload("uploadPhoto");
+      }, onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "upload-photo_button", startUpload: this.buttonPressed &&
         this.showingInButton &&
         this.mode === "upload", loading: imageSearch_store.imageSearchState.loading &&
-        this.uploadSource === "uploadFiles" }, index.h("span", { slot: "upload-button-text", class: "action-button-content" }, index.h(index$2.UploadActionIcon, null), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, i18next.instance.t("imageUploadButtonText")))))))), index.h("vviinn-privacy-badge", { privacyBadgeText: i18next.instance.t("privacyBadgeText"), class: { visible: this.haveErrors() } }))), index.h("vviinn-slide", { class: {
+        this.uploadSource === "uploadPhoto" }, index.h("span", { slot: "upload-button-text", class: "action-button-content" }, index.h(index$2.UploadActionIcon, null), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, i18next.instance.t("imageUploadButtonText")))))))), index.h("vviinn-privacy-badge", { privacyBadgeText: i18next.instance.t("privacyBadgeText"), class: { invisible: this.haveErrors() } }))), index.h("vviinn-slide", { class: {
         "results-page": true,
         active: this.isResultSlide(),
       } }, index.h("div", { class: "image-wrapper" }, this.isResultSlide() && (index.h("vviinn-image-view", { basicEventData: this.getBasicEventData() })), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {