vviinn-widgets 2.42.1 → 2.43.0

package/dist/cjs/{index-294899ca.js → index-27650790.js}

@@ -28,12 +28,18 @@ const RoundCameraIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/s
 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" })));
+const PlusIcon = () => (index.h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M14.6667 17.3333H8.00001C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H14.6667V8.00001C14.6667 7.62223 14.7944 7.30556 15.05 7.05001C15.3056 6.79445 15.6222 6.66667 16 6.66667C16.3778 6.66667 16.6944 6.79445 16.95 7.05001C17.2056 7.30556 17.3333 7.62223 17.3333 8.00001V14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H17.3333V24C17.3333 24.3778 17.2056 24.6944 16.95 24.95C16.6944 25.2056 16.3778 25.3333 16 25.3333C15.6222 25.3333 15.3056 25.2056 15.05 24.95C14.7944 24.6944 14.6667 24.3778 14.6667 24V17.3333Z", fill: "white" })));
+const MinusIcon = () => (index.h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M8.00001 17.3333C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H8.00001Z", fill: "white" })));
 
 exports.ArrowIcon = ArrowIcon;
 exports.CameraActionIcon = CameraActionIcon;
 exports.CameraIcon = CameraIcon;
 exports.ChevronIcon = ChevronIcon;
 exports.CrossIcon = CrossIcon;
+exports.MinusIcon = MinusIcon;
+exports.PlusIcon = PlusIcon;
 exports.RoundCameraIcon = RoundCameraIcon;
 exports.SecondaryActionIcon = SecondaryActionIcon;
 exports.UpdateIcon = UpdateIcon;

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],"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);
+  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],"zoomCapabilities":[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-b46bb368.js → package-240b83d1.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.42.1";
+const version = "2.43.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-294899ca.js');
+const index$1 = require('./index-27650790.js');
 const customizedSlots = require('./customized-slots-49c03dc1.js');
 
 // -------------------------------------------------------------------------------------
@@ -198,7 +198,7 @@ const VviinnEmptyResults = class {
   }
 };
 
-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;-webkit-tap-highlight-color:transparent;line-height:0}.hidden{display:none}.visible{display:flex}";
+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;-webkit-tap-highlight-color:transparent;line-height:0}.zoom-buttons{bottom:168px;justify-content:center;gap:12px}.zoom-buttons button{display:flex;width:48px;height:48px;padding:8px;justify-content:center;align-items:center;border-radius:var(--radius-radius-md, 8px);background:rgba(0, 0, 0, 0.25);border:none;cursor:pointer}.hidden{display:none}.visible{display:flex}";
 
 const VviinnExampleImage = class {
   constructor(hostRef) {
@@ -207,6 +207,31 @@ const VviinnExampleImage = class {
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
     this.vviinnImageUploadFinished = index.createEvent(this, "vviinnImageUploadFinished", 7);
     this.vviinnCameraEnabled = index.createEvent(this, "vviinnCameraEnabled", 7);
+    this.videoTrack = null;
+    this.initializeZoom = async () => {
+      if (!this.videoTrack)
+        return;
+      const capabilities = this.videoTrack.getCapabilities();
+      if ("zoom" in capabilities) {
+        this.zoomCapabilities = capabilities.zoom;
+        await this.videoTrack.applyConstraints({
+          advanced: [{ zoom: this.zoomCapabilities.min }],
+        });
+      }
+    };
+    this.onZoom = async (action) => {
+      var _a;
+      if (!this.videoTrack || !this.zoomCapabilities)
+        return;
+      const currentSettings = this.videoTrack.getSettings();
+      const currentZoom = (_a = currentSettings.zoom) !== null && _a !== void 0 ? _a : 1;
+      const step = (this.zoomCapabilities.max - this.zoomCapabilities.min) / 3;
+      let newZoom;
+      newZoom = action === "in" ? currentZoom + step : currentZoom - step;
+      await this.videoTrack.applyConstraints({
+        advanced: [{ zoom: newZoom }],
+      });
+    };
     this.exampleImageSource = undefined;
     this.width = 0;
     this.height = 0;
@@ -215,6 +240,7 @@ const VviinnExampleImage = class {
     this.cameraButtonClicked = false;
     this.selected = false;
     this.videoInitialized = false;
+    this.zoomCapabilities = null;
   }
   componentDidLoad() {
     this.videoElement = this.el.shadowRoot.getElementById("camera-preview");
@@ -253,6 +279,8 @@ const VviinnExampleImage = class {
       return;
     }
     this.videoElement.srcObject = this.srcObject;
+    this.videoTrack = this.srcObject.getVideoTracks()[0];
+    this.initializeZoom();
     this.videoElement.onloadedmetadata = () => {
       this.vviinnCameraEnabled.emit(true);
       this.videoInitialized = true;
@@ -261,7 +289,7 @@ const VviinnExampleImage = class {
   render() {
     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)))));
+      }, autoplay: true, playsinline: true, muted: true }), index.h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized } }), this.zoomCapabilities && this.videoInitialized && !this.selected && (index.h("div", { class: "buttons-group zoom-buttons" }, index.h("button", { onClick: () => this.onZoom("out") }, index.h(index$1.MinusIcon, null)), index.h("button", { onClick: () => this.onZoom("in") }, index.h(index$1.PlusIcon, null)))), 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 {
@@ -3685,7 +3713,7 @@ 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:16px}.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:#ffffff}.body{overflow-y:auto}:host(.first-screen) .body{transform:translateY(-64px)}:host(:not(.first-screen)) .body{padding-bottom:64px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;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;color:#6f6f6f;padding:0}button:hover{color:#000}: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 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:16px}.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{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:64px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;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;color:#6f6f6f;padding:0}button:hover{color:#000}: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) {
@@ -3820,7 +3848,7 @@ const getStyleMap = (data) => {
 const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (index.h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
   index.h(index$1.ArrowIcon, null)));
 
-const vviinnSliderCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}@media (max-width: 768px){:host{transform:translateY(8px)}}";
+const vviinnSliderCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}";
 
 const VviinnSlider = 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-294899ca.js');
+const index$1 = require('./index-27650790.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-294899ca.js');
+const index$1 = require('./index-27650790.js');
 const i18next = require('./i18next-74ff3413.js');
 const customizedSlots = require('./customized-slots-49c03dc1.js');
-const _package = require('./package-b46bb368.js');
+const _package = require('./package-240b83d1.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-294899ca.js');
+const index$1 = require('./index-27650790.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-b46bb368.js');
-const index$1 = require('./index-294899ca.js');
+const _package = require('./package-240b83d1.js');
+const index$1 = require('./index-27650790.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-b46bb368.js');
-const index$1 = require('./index-294899ca.js');
+const _package = require('./package-240b83d1.js');
+const index$1 = require('./index-27650790.js');
 const customizedSlots = require('./customized-slots-49c03dc1.js');
 const constants = require('./constants-7684cbfc.js');
 

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-b46bb368.js');
+const _package = require('./package-240b83d1.js');
 const customizedSlots = require('./customized-slots-49c03dc1.js');
 const index$1 = require('./index-7ff2ab5f.js');
-const index$2 = require('./index-294899ca.js');
+const index$2 = require('./index-27650790.js');
 const constants = require('./constants-7684cbfc.js');
 
 const resources = {
@@ -62,6 +62,13 @@ const resources = {
   },
 };
 
+const videoStreamSettings = {
+  facingMode: "environment",
+  width: { ideal: 1920 },
+  height: { ideal: 1080 },
+  frameRate: { ideal: 30 },
+};
+
 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;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:0 24px 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) {
@@ -111,6 +118,7 @@ const VviinnVpsWidget = class {
     this.resultViewed = false;
     this.cameraAvailable = false;
     this.isDesktop = false;
+    this.videoTrack = null;
     this.handleVviinnImageUpload = (uploadSource) => {
       this.trackInitialSearch();
       this.uploadSource = uploadSource;
@@ -126,6 +134,41 @@ const VviinnVpsWidget = class {
         this.wrongImageFormat = true;
       }
     };
+    this.adjustCameraSettings = async () => {
+      if (!this.videoTrack)
+        return;
+      const capabilities = this.videoTrack.getCapabilities();
+      if ("focusMode" in capabilities) {
+        try {
+          await this.videoTrack.applyConstraints({
+            advanced: [{ focusMode: "continuous" }],
+          });
+        }
+        catch (error) {
+          console.error("Failed to apply focus mode constraints", error);
+        }
+      }
+      if ("focusMode" in capabilities) {
+        try {
+          await this.videoTrack.applyConstraints({
+            advanced: [{ exposureMode: "continuous" }],
+          });
+        }
+        catch (error) {
+          console.error("Failed to apply exposure mode constraints", error);
+        }
+      }
+      if ("whiteBalanceMode" in capabilities) {
+        try {
+          await this.videoTrack.applyConstraints({
+            advanced: [{ whiteBalanceMode: "continuous" }],
+          });
+        }
+        catch (error) {
+          console.error("Failed to apply white balance mode constraints", error);
+        }
+      }
+    };
     this.handleStartCameraClick = async () => {
       if (this.stream) {
         this.resetState();
@@ -134,8 +177,10 @@ const VviinnVpsWidget = class {
       this.cameraButtonClicked = true;
       try {
         const videoStream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: "environment" },
+          video: videoStreamSettings,
         });
+        this.videoTrack = videoStream.getVideoTracks()[0];
+        this.adjustCameraSettings();
         this.stream = videoStream;
       }
       catch (error) {

package/dist/cjs/vviinn-widgets.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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);
+  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],"zoomCapabilities":[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/vviinn-example-image/vviinn-example-image.css

@@ -56,6 +56,25 @@ video {
   line-height: 0;
 }
 
+.zoom-buttons {
+  bottom: 168px;
+  justify-content: center;
+  gap: 12px;
+}
+
+.zoom-buttons button {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-radius-md, 8px);
+  background: rgba(0, 0, 0, 0.25);
+  border: none;
+  cursor: pointer;
+}
+
 .hidden {
   display: none;
 }

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

@@ -3,9 +3,34 @@ import { pipe } from "fp-ts/lib/function";
 import { toFile } from "../../Image/toFile";
 import { processSelectedFile } from "../../store/imageSearch.store";
 import * as E from "fp-ts/lib/Either";
-import { RoundCameraIcon } from "../vviinn-icons";
+import { MinusIcon, PlusIcon, RoundCameraIcon } from "../vviinn-icons";
 export class VviinnExampleImage {
   constructor() {
+    this.videoTrack = null;
+    this.initializeZoom = async () => {
+      if (!this.videoTrack)
+        return;
+      const capabilities = this.videoTrack.getCapabilities();
+      if ("zoom" in capabilities) {
+        this.zoomCapabilities = capabilities.zoom;
+        await this.videoTrack.applyConstraints({
+          advanced: [{ zoom: this.zoomCapabilities.min }],
+        });
+      }
+    };
+    this.onZoom = async (action) => {
+      var _a;
+      if (!this.videoTrack || !this.zoomCapabilities)
+        return;
+      const currentSettings = this.videoTrack.getSettings();
+      const currentZoom = (_a = currentSettings.zoom) !== null && _a !== void 0 ? _a : 1;
+      const step = (this.zoomCapabilities.max - this.zoomCapabilities.min) / 3;
+      let newZoom;
+      newZoom = action === "in" ? currentZoom + step : currentZoom - step;
+      await this.videoTrack.applyConstraints({
+        advanced: [{ zoom: newZoom }],
+      });
+    };
     this.exampleImageSource = undefined;
     this.width = 0;
     this.height = 0;
@@ -14,6 +39,7 @@ export class VviinnExampleImage {
     this.cameraButtonClicked = false;
     this.selected = false;
     this.videoInitialized = false;
+    this.zoomCapabilities = null;
   }
   componentDidLoad() {
     this.videoElement = this.el.shadowRoot.getElementById("camera-preview");
@@ -52,6 +78,8 @@ export class VviinnExampleImage {
       return;
     }
     this.videoElement.srcObject = this.srcObject;
+    this.videoTrack = this.srcObject.getVideoTracks()[0];
+    this.initializeZoom();
     this.videoElement.onloadedmetadata = () => {
       this.vviinnCameraEnabled.emit(true);
       this.videoInitialized = true;
@@ -60,7 +88,7 @@ export class VviinnExampleImage {
   render() {
     return (h(Host, { onKeyUp: (ev) => this.handleKeyPress(ev), class: { "video-expanded": this.cameraButtonClicked } }, h("video", { id: "camera-preview", class: {
         hidden: !this.videoInitialized,
-      }, autoplay: true, playsinline: true, muted: true }), h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized } }), h("div", { class: "buttons-group" }, h("button", { class: { "photo-button": true, visible: this.videoInitialized }, onClick: () => this.selectImage() }, h(RoundCameraIcon, null)))));
+      }, autoplay: true, playsinline: true, muted: true }), h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized } }), this.zoomCapabilities && this.videoInitialized && !this.selected && (h("div", { class: "buttons-group zoom-buttons" }, h("button", { onClick: () => this.onZoom("out") }, h(MinusIcon, null)), h("button", { onClick: () => this.onZoom("in") }, h(PlusIcon, null)))), h("div", { class: "buttons-group" }, h("button", { class: { "photo-button": true, visible: this.videoInitialized }, onClick: () => this.selectImage() }, h(RoundCameraIcon, null)))));
   }
   static get is() { return "vviinn-example-image"; }
   static get encapsulation() { return "shadow"; }
@@ -191,7 +219,8 @@ export class VviinnExampleImage {
   static get states() {
     return {
       "selected": {},
-      "videoInitialized": {}
+      "videoInitialized": {},
+      "zoomCapabilities": {}
     };
   }
   static get events() {

package/dist/collection/components/vviinn-icons/index.js

@@ -14,3 +14,5 @@ export const GalleryActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/200
 export const CameraActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, 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" })));
 export const RoundCameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "80", height: "80", viewBox: "0 0 80 80", fill: "none" }, h("circle", { cx: "40", cy: "40", r: "36", fill: "white" }), h("circle", { cx: "40", cy: "40", r: "39", stroke: "white", "stroke-width": "2" }), 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" })));
 export const WarningIcon = () => (h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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" }), 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" })));
+export const PlusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.6667 17.3333H8.00001C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H14.6667V8.00001C14.6667 7.62223 14.7944 7.30556 15.05 7.05001C15.3056 6.79445 15.6222 6.66667 16 6.66667C16.3778 6.66667 16.6944 6.79445 16.95 7.05001C17.2056 7.30556 17.3333 7.62223 17.3333 8.00001V14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H17.3333V24C17.3333 24.3778 17.2056 24.6944 16.95 24.95C16.6944 25.2056 16.3778 25.3333 16 25.3333C15.6222 25.3333 15.3056 25.2056 15.05 24.95C14.7944 24.6944 14.6667 24.3778 14.6667 24V17.3333Z", fill: "white" })));
+export const MinusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.00001 17.3333C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H8.00001Z", fill: "white" })));

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

@@ -69,11 +69,11 @@ button:hover {
   }
 
   .head {
-    position: sticky;
     z-index: 1;
   }
 
   :host(:not(.first-screen)) .head {
+    position: sticky;
     background: #ffffff;
   }
 
@@ -81,10 +81,6 @@ button:hover {
     overflow-y: auto;
   }
 
-  :host(.first-screen) .body {
-    transform: translateY(-64px);
-  }
-
   :host(:not(.first-screen)) .body {
     padding-bottom: 64px;
   }

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

@@ -107,9 +107,3 @@
 .arrow-wrapper:hover > svg {
   fill: #8d8d8d;
 }
-
-@media (max-width: 768px) {
-  :host {
-    transform: translateY(8px);
-  }
-}