vviinn-widgets 2.43.0 → 2.44.0

package/dist/cjs/{index-27650790.js → index-28052f80.js}

@@ -23,8 +23,8 @@ const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/
   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", { 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" })));
+  index.h("circle", { cx: "40", cy: "40", r: "39", fill: "white", "fill-opacity": "0.16", stroke: "white", "stroke-width": "2" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M48 29.3333H50.6667C53.6133 29.3333 56 31.72 56 34.6667V45.3333H53.3333V34.6667C53.3333 33.2 52.1333 32 50.6667 32H46.5733L45.7867 30.8133L43.9067 28H36.0933L34.2133 30.8133L33.4267 32H29.3333C27.8667 32 26.6667 33.2 26.6667 34.6667V48C26.6667 49.4667 27.8667 50.6667 29.3333 50.6667H36V53.3333H29.3333C26.3867 53.3333 24 50.9467 24 48V34.6667C24 31.72 26.3867 29.3333 29.3333 29.3333H32L34.6667 25.3333H45.3333L48 29.3333ZM40 34.6667C43.68 34.6667 46.6667 37.6533 46.6667 41.3333L46.6533 41.3467C46.6533 42.6933 46.24 43.96 45.5467 45.0133L51.6 51.0667L49.72 52.9467L43.6667 46.8933C42.6133 47.5867 41.36 48 40 48C36.32 48 33.3333 45.0133 33.3333 41.3333C33.3333 37.6533 36.32 34.6667 40 34.6667ZM36 41.3333C36 43.5333 37.8 45.3333 40 45.3333C42.2 45.3333 44 43.5333 44 41.3333C44 39.1333 42.2 37.3333 40 37.3333C37.8 37.3333 36 39.1333 36 41.3333Z", fill: "#161616" })));
 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" })));

package/dist/cjs/{package-240b83d1.js → package-9e48dffa.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.43.0";
+const version = "2.44.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-27650790.js');
+const index$1 = require('./index-28052f80.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}.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 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}#camera-preview{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;position:relative}#captured-image-placeholder{height:auto}.container{position:absolute;width:100%;height:96%;left:0;top:0;display:flex;flex-direction:column;padding:56px 25px 0 25px;justify-content:space-around;align-content:center;box-sizing:border-box}@media (min-width: 768px){.container{padding:56px 40px 0 40px}}#photo-frame{position:relative;aspect-ratio:1/1;border:1px solid white;border-radius:10px;background-color:transparent;box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.32);width:100%;max-width:580px;margin:0 auto}.buttons-group{width:100%;left:0;display:flex;align-items:center}.photo-button{display:none;cursor:pointer;border:none;position:relative;z-index:1;padding:0;color:#6f6f6f;background-color:transparent;-webkit-tap-highlight-color:transparent;line-height:0;margin:0 auto}.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) {
@@ -224,7 +224,7 @@ const VviinnExampleImage = class {
       if (!this.videoTrack || !this.zoomCapabilities)
         return;
       const currentSettings = this.videoTrack.getSettings();
-      const currentZoom = (_a = currentSettings.zoom) !== null && _a !== void 0 ? _a : 1;
+      const currentZoom = (_a = currentSettings.zoom) !== null && _a !== void 0 ? _a : this.zoomCapabilities.min;
       const step = (this.zoomCapabilities.max - this.zoomCapabilities.min) / 3;
       let newZoom;
       newZoom = action === "in" ? currentZoom + step : currentZoom - step;
@@ -245,24 +245,49 @@ const VviinnExampleImage = class {
   componentDidLoad() {
     this.videoElement = this.el.shadowRoot.getElementById("camera-preview");
   }
+  createPlaceholderImageCanvas() {
+    const imgPlaceholder = this.el.shadowRoot.getElementById("captured-image-placeholder");
+    const video = this.videoElement;
+    const { videoWidth, videoHeight } = video;
+    const canvas = document.createElement("canvas");
+    canvas.width = videoWidth;
+    canvas.height = videoHeight;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataURI = canvas.toDataURL("image/jpeg");
+    imgPlaceholder.src = dataURI;
+  }
   async selectImage() {
-    this.selected = true;
+    if (!this.srcObject)
+      return;
     this.vviinnImageUpload.emit(this.basicEventData);
     let file;
-    if (this.srcObject) {
-      const video = this.videoElement;
-      const canvas = document.createElement("canvas");
-      this.videoElement.pause();
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      const dataURI = canvas.toDataURL("image/jpeg");
-      file = await imageSearch_store.toFile(dataURI);
-    }
-    else {
-      file = await imageSearch_store.toFile(this.exampleImageSource);
-    }
+    const photoFrame = this.el.shadowRoot.getElementById("photo-frame");
+    const video = this.videoElement;
+    const photoFrameRect = photoFrame.getBoundingClientRect();
+    const videoRect = video.getBoundingClientRect();
+    const { videoWidth, videoHeight } = video;
+    const canvas = document.createElement("canvas");
+    this.selected = true;
+    this.videoElement.pause();
+    this.createPlaceholderImageCanvas();
+    const videoCoefficientWidth = videoWidth / videoRect.width;
+    const videoCoefficientHeight = videoHeight / videoRect.height;
+    const cropDimension = Math.min(photoFrameRect.width * videoCoefficientWidth, photoFrameRect.height * videoCoefficientHeight);
+    canvas.width = cropDimension;
+    canvas.height = cropDimension;
+    const dxFrame = photoFrameRect.left -
+      videoRect.left +
+      (photoFrameRect.width - cropDimension / videoCoefficientWidth) / 2;
+    const dyFrame = photoFrameRect.top -
+      videoRect.top +
+      (photoFrameRect.height - cropDimension / videoCoefficientHeight) / 2;
+    const dx = dxFrame * videoCoefficientWidth;
+    const dy = dyFrame * videoCoefficientHeight;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(video, dx, dy, cropDimension, cropDimension, 0, 0, canvas.width, canvas.height);
+    const dataURI = canvas.toDataURL("image/jpeg");
+    file = await imageSearch_store.toFile(dataURI);
     imageSearch_store._function.pipe(await imageSearch_store.processSelectedFile(file), imageSearch_store.Either.match(() => this.vviinnNoResult.emit(this.basicEventData), () => this.vviinnImageUploadFinished.emit()));
     this.selected = false;
     this.videoInitialized = false;
@@ -288,8 +313,10 @@ 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 || this.selected,
+      }, 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.selected } }), index.h("img", { id: "captured-image-placeholder", class: { hidden: !this.selected } }), index.h("div", { class: "container", id: "container" }, index.h("div", { 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 } }), 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)))));
+      }, id: "photo-frame" }), this.zoomCapabilities && this.videoInitialized && (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 {
@@ -3594,7 +3621,7 @@ var cropper = imageSearch_store.createCommonjsModule(function (module, exports)
 }));
 });
 
-const vviinnImageViewCss = ":host {\n  display: grid;\n  position: relative;\n  justify-self: center;\n  direction: ltr;\n}\n\n.image-container > img {\n  display: block;\n  max-width: 100%;\n}\n\n.image-preloader {\n  background: rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n  bottom: 18px;\n  padding: 4px 6px;\n  pointer-events: none;\n  color: white;\n  position: absolute;\n  right: 18px;\n  z-index: 4;\n}\n\nvviinn-preloader {\n  --preloader-size: 12px;\n}\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  touch-action: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n\n  & img {\n    backface-visibility: hidden;\n    display: block;\n    height: 100%;\n    image-orientation: 0deg;\n    max-height: none !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    min-width: 0 !important;\n    width: 100%;\n  }\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.4;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-view-box,\n.cropper-face {\n  border-radius: 5px;\n}\n\n.cropper-face,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  background-color: #fff;\n  left: 0;\n  top: 0;\n}\n\n.cropper-point {\n  height: 30px;\n  width: 30px;\n  opacity: 1;\n}\n\n.point-e,\n.point-s,\n.point-w,\n.point-n {\n  display: none;\n}\n\n.point-ne {\n  cursor: nesw-resize;\n  right: -15px;\n  top: -15px;\n}\n\n.point-nw {\n  cursor: nwse-resize;\n  left: -15px;\n  top: -15px;\n}\n\n.point-sw {\n  cursor: nesw-resize;\n  bottom: -15px;\n  left: -15px;\n}\n\n.point-se {\n  cursor: nwse-resize;\n  bottom: -15px;\n  right: -15px;\n}\n\n.cropper-point::before {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M3 35H23C29.6274 35 35 29.6274 35 23V3' stroke='white' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E\");\n  display: block;\n  poiter-events: none;\n}\n\n.point-ne::before {\n  transform: rotate(-90deg);\n  left: -20px;\n  top: 12px;\n}\n\n.point-nw::before {\n  transform: rotate(180deg);\n  left: 12px;\n  top: 12px;\n}\n\n.point-sw::before {\n  transform: rotate(90deg);\n  left: 12px;\n  top: -20px;\n}\n\n.point-se::before {\n  left: -20px;\n  top: -20px;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n";
+const vviinnImageViewCss = ":host {\n  display: grid;\n  position: relative;\n  justify-self: center;\n  direction: ltr;\n}\n\n.image-container > img {\n  display: block;\n  max-width: 100%;\n}\n\n.image-preloader {\n  background: rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n  bottom: 18px;\n  padding: 4px 6px;\n  pointer-events: none;\n  color: white;\n  position: absolute;\n  right: 18px;\n  z-index: 4;\n}\n\nvviinn-preloader {\n  --preloader-size: 12px;\n}\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  touch-action: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n\n  & img {\n    backface-visibility: hidden;\n    display: block;\n    height: 100%;\n    image-orientation: 0deg;\n    max-height: none !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    min-width: 0 !important;\n    width: 100%;\n  }\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.4;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-view-box,\n.cropper-face {\n  border-radius: 5px;\n}\n\n.cropper-face,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  left: 0;\n  top: 0;\n}\n\n.cropper-point {\n  height: 30px;\n  width: 30px;\n  opacity: 1;\n}\n\n.point-e,\n.point-s,\n.point-w,\n.point-n {\n  display: none;\n}\n\n.point-ne {\n  cursor: nesw-resize;\n  right: -15px;\n  top: -15px;\n}\n\n.point-nw {\n  cursor: nwse-resize;\n  left: -15px;\n  top: -15px;\n}\n\n.point-sw {\n  cursor: nesw-resize;\n  bottom: -15px;\n  left: -15px;\n}\n\n.point-se {\n  cursor: nwse-resize;\n  bottom: -15px;\n  right: -15px;\n}\n\n.cropper-point::before {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M3 35H23C29.6274 35 35 29.6274 35 23V3' stroke='white' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E\");\n  display: block;\n  poiter-events: none;\n}\n\n.point-ne::before {\n  transform: rotate(-90deg);\n  left: -20px;\n  top: 12px;\n}\n\n.point-nw::before {\n  transform: rotate(180deg);\n  left: 12px;\n  top: 12px;\n}\n\n.point-sw::before {\n  transform: rotate(90deg);\n  left: 12px;\n  top: -20px;\n}\n\n.point-se::before {\n  left: -20px;\n  top: -20px;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n";
 
 const INITIAL_CROP_AREA = 0.91;
 const INITIAL_CROP_AREA_OFFSET = 1 - INITIAL_CROP_AREA;

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-27650790.js');
+const index$1 = require('./index-28052f80.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-27650790.js');
+const index$1 = require('./index-28052f80.js');
 const i18next = require('./i18next-74ff3413.js');
 const customizedSlots = require('./customized-slots-49c03dc1.js');
-const _package = require('./package-240b83d1.js');
+const _package = require('./package-9e48dffa.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-27650790.js');
+const index$1 = require('./index-28052f80.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-240b83d1.js');
-const index$1 = require('./index-27650790.js');
+const _package = require('./package-9e48dffa.js');
+const index$1 = require('./index-28052f80.js');
 
 const vviinnVprButtonCss = ":host{display:block}";
 
@@ -86,7 +86,6 @@ const VviinnVprButton = class {
     if (!this.sidebar)
       return;
     this.sidebar.removeEventListener("vviinnWidgetClose", this.sidebarCloseListener);
-    document.body.removeChild(this.sidebar);
   }
   get el() { return index.getElement(this); }
 };

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-240b83d1.js');
-const index$1 = require('./index-27650790.js');
+const _package = require('./package-9e48dffa.js');
+const index$1 = require('./index-28052f80.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-240b83d1.js');
+const _package = require('./package-9e48dffa.js');
 const customizedSlots = require('./customized-slots-49c03dc1.js');
 const index$1 = require('./index-7ff2ab5f.js');
-const index$2 = require('./index-27650790.js');
+const index$2 = require('./index-28052f80.js');
 const constants = require('./constants-7684cbfc.js');
 
 const resources = {

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

@@ -24,21 +24,55 @@ img {
      object-position: center;
 }
 
-video {
+#camera-preview {
   width: 100%;
   min-height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
   -o-object-position: center;
      object-position: center;
+  position: relative;
 }
 
-.buttons-group {
+#captured-image-placeholder {
+  height: auto;
+}
+
+.container {
   position: absolute;
   width: 100%;
-  height: 64px;
+  height: 96%;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 56px 25px 0 25px;
+  justify-content: space-around;
+  align-content: center;
+  box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: 56px 40px 0 40px;
+  }
+}
+
+#photo-frame {
+  position: relative;
+  aspect-ratio: 1/1;
+  border: 1px solid white;
+  border-radius: 10px;
+  background-color: transparent;
+  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.32);
+  width: 100%;
+  max-width: 580px;
+  margin: 0 auto;
+}
+
+.buttons-group {
+  width: 100%;
   left: 0;
-  bottom: 64px;
   display: flex;
   align-items: center;
 }
@@ -47,13 +81,14 @@ video {
   display: none;
   cursor: pointer;
   border: none;
-  position: absolute;
+  position: relative;
+  z-index: 1;
   padding: 0;
-  left: calc(50% - 36px);
   color: #6f6f6f;
   background-color: transparent;
   -webkit-tap-highlight-color: transparent;
   line-height: 0;
+  margin: 0 auto;
 }
 
 .zoom-buttons {

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

@@ -23,7 +23,7 @@ export class VviinnExampleImage {
       if (!this.videoTrack || !this.zoomCapabilities)
         return;
       const currentSettings = this.videoTrack.getSettings();
-      const currentZoom = (_a = currentSettings.zoom) !== null && _a !== void 0 ? _a : 1;
+      const currentZoom = (_a = currentSettings.zoom) !== null && _a !== void 0 ? _a : this.zoomCapabilities.min;
       const step = (this.zoomCapabilities.max - this.zoomCapabilities.min) / 3;
       let newZoom;
       newZoom = action === "in" ? currentZoom + step : currentZoom - step;
@@ -44,24 +44,49 @@ export class VviinnExampleImage {
   componentDidLoad() {
     this.videoElement = this.el.shadowRoot.getElementById("camera-preview");
   }
+  createPlaceholderImageCanvas() {
+    const imgPlaceholder = this.el.shadowRoot.getElementById("captured-image-placeholder");
+    const video = this.videoElement;
+    const { videoWidth, videoHeight } = video;
+    const canvas = document.createElement("canvas");
+    canvas.width = videoWidth;
+    canvas.height = videoHeight;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataURI = canvas.toDataURL("image/jpeg");
+    imgPlaceholder.src = dataURI;
+  }
   async selectImage() {
-    this.selected = true;
+    if (!this.srcObject)
+      return;
     this.vviinnImageUpload.emit(this.basicEventData);
     let file;
-    if (this.srcObject) {
-      const video = this.videoElement;
-      const canvas = document.createElement("canvas");
-      this.videoElement.pause();
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      const dataURI = canvas.toDataURL("image/jpeg");
-      file = await toFile(dataURI);
-    }
-    else {
-      file = await toFile(this.exampleImageSource);
-    }
+    const photoFrame = this.el.shadowRoot.getElementById("photo-frame");
+    const video = this.videoElement;
+    const photoFrameRect = photoFrame.getBoundingClientRect();
+    const videoRect = video.getBoundingClientRect();
+    const { videoWidth, videoHeight } = video;
+    const canvas = document.createElement("canvas");
+    this.selected = true;
+    this.videoElement.pause();
+    this.createPlaceholderImageCanvas();
+    const videoCoefficientWidth = videoWidth / videoRect.width;
+    const videoCoefficientHeight = videoHeight / videoRect.height;
+    const cropDimension = Math.min(photoFrameRect.width * videoCoefficientWidth, photoFrameRect.height * videoCoefficientHeight);
+    canvas.width = cropDimension;
+    canvas.height = cropDimension;
+    const dxFrame = photoFrameRect.left -
+      videoRect.left +
+      (photoFrameRect.width - cropDimension / videoCoefficientWidth) / 2;
+    const dyFrame = photoFrameRect.top -
+      videoRect.top +
+      (photoFrameRect.height - cropDimension / videoCoefficientHeight) / 2;
+    const dx = dxFrame * videoCoefficientWidth;
+    const dy = dyFrame * videoCoefficientHeight;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(video, dx, dy, cropDimension, cropDimension, 0, 0, canvas.width, canvas.height);
+    const dataURI = canvas.toDataURL("image/jpeg");
+    file = await toFile(dataURI);
     pipe(await processSelectedFile(file), E.match(() => this.vviinnNoResult.emit(this.basicEventData), () => this.vviinnImageUploadFinished.emit()));
     this.selected = false;
     this.videoInitialized = false;
@@ -87,8 +112,10 @@ 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 || this.selected,
+      }, autoplay: true, playsinline: true, muted: true }), h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized || this.selected } }), h("img", { id: "captured-image-placeholder", class: { hidden: !this.selected } }), h("div", { class: "container", id: "container" }, h("div", { 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 } }), 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)))));
+      }, id: "photo-frame" }), this.zoomCapabilities && this.videoInitialized && (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"; }

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

@@ -12,7 +12,7 @@ export const UploadActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000
 export const UpdateIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.5998 4.57C20.3898 4.19 19.8798 3.68 19.4198 0.37C19.3798 0.15 19.2198 0 19.0098 0C18.7998 0 18.6298 0.15 18.5898 0.37C18.1198 3.66 17.6298 4.13 14.4098 4.57C14.1698 4.61 14.0098 4.77 14.0098 5C14.0098 5.23 14.1698 5.39 14.4098 5.42C17.6298 5.81 18.1398 6.31 18.5898 9.62C18.6298 9.84 18.7998 10 19.0098 10C19.2198 10 19.3898 9.84 19.4198 9.62C19.8898 6.31 20.3898 5.81 23.5998 5.42C23.8398 5.38 23.9998 5.22 23.9998 5C23.9998 4.78 23.8298 4.6 23.5998 4.57Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
 export const GalleryActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "24", viewBox: "0 0 25 24", fill: "none" }, 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" })));
 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 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", fill: "white", "fill-opacity": "0.16", stroke: "white", "stroke-width": "2" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M48 29.3333H50.6667C53.6133 29.3333 56 31.72 56 34.6667V45.3333H53.3333V34.6667C53.3333 33.2 52.1333 32 50.6667 32H46.5733L45.7867 30.8133L43.9067 28H36.0933L34.2133 30.8133L33.4267 32H29.3333C27.8667 32 26.6667 33.2 26.6667 34.6667V48C26.6667 49.4667 27.8667 50.6667 29.3333 50.6667H36V53.3333H29.3333C26.3867 53.3333 24 50.9467 24 48V34.6667C24 31.72 26.3867 29.3333 29.3333 29.3333H32L34.6667 25.3333H45.3333L48 29.3333ZM40 34.6667C43.68 34.6667 46.6667 37.6533 46.6667 41.3333L46.6533 41.3467C46.6533 42.6933 46.24 43.96 45.5467 45.0133L51.6 51.0667L49.72 52.9467L43.6667 46.8933C42.6133 47.5867 41.36 48 40 48C36.32 48 33.3333 45.0133 33.3333 41.3333C33.3333 37.6533 36.32 34.6667 40 34.6667ZM36 41.3333C36 43.5333 37.8 45.3333 40 45.3333C42.2 45.3333 44 43.5333 44 41.3333C44 39.1333 42.2 37.3333 40 37.3333C37.8 37.3333 36 39.1333 36 41.3333Z", fill: "#161616" })));
 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-image-view/vviinn-image-view.css

@@ -98,7 +98,6 @@ vviinn-preloader {
 }
 
 .cropper-face {
-  background-color: #fff;
   left: 0;
   top: 0;
 }

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

@@ -76,7 +76,6 @@ export class VviinnVprButton {
     if (!this.sidebar)
       return;
     this.sidebar.removeEventListener("vviinnWidgetClose", this.sidebarCloseListener);
-    document.body.removeChild(this.sidebar);
   }
   static get is() { return "vviinn-vpr-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/esm/{index-7ccdb104.js → index-ac58a953.js}

@@ -21,8 +21,8 @@ const CameraActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg",
   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 = () => (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" })));
+  h("circle", { cx: "40", cy: "40", r: "39", fill: "white", "fill-opacity": "0.16", stroke: "white", "stroke-width": "2" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M48 29.3333H50.6667C53.6133 29.3333 56 31.72 56 34.6667V45.3333H53.3333V34.6667C53.3333 33.2 52.1333 32 50.6667 32H46.5733L45.7867 30.8133L43.9067 28H36.0933L34.2133 30.8133L33.4267 32H29.3333C27.8667 32 26.6667 33.2 26.6667 34.6667V48C26.6667 49.4667 27.8667 50.6667 29.3333 50.6667H36V53.3333H29.3333C26.3867 53.3333 24 50.9467 24 48V34.6667C24 31.72 26.3867 29.3333 29.3333 29.3333H32L34.6667 25.3333H45.3333L48 29.3333ZM40 34.6667C43.68 34.6667 46.6667 37.6533 46.6667 41.3333L46.6533 41.3467C46.6533 42.6933 46.24 43.96 45.5467 45.0133L51.6 51.0667L49.72 52.9467L43.6667 46.8933C42.6133 47.5867 41.36 48 40 48C36.32 48 33.3333 45.0133 33.3333 41.3333C33.3333 37.6533 36.32 34.6667 40 34.6667ZM36 41.3333C36 43.5333 37.8 45.3333 40 45.3333C42.2 45.3333 44 43.5333 44 41.3333C44 39.1333 42.2 37.3333 40 37.3333C37.8 37.3333 36 39.1333 36 41.3333Z", fill: "#161616" })));
 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" })));

package/dist/esm/{package-532eaf3a.js → package-fb112b84.js}

@@ -1,3 +1,3 @@
-const version = "2.43.0";
+const version = "2.44.0";
 
 export { version as v };