@social-mail/social-mail-client 1.2.453 → 1.2.455

package/dist/public/store/Store.pack.js

@@ -1976,7 +1976,7 @@ const UMD = new UMDClass();
 
         AmdLoader.instance.register(
             ["@social-mail/social-mail-client","@web-atoms/core","reflect-metadata","@web-atoms/date-time","@web-atoms/entity","@web-atoms/web-controls","@web-atoms/data-styles"],
-            ["@social-mail/social-mail-client/dist/public/store/Store","@social-mail/social-mail-client/dist/public/store/StoreItemDetailView","@web-atoms/core/dist/core/InjectProperty","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@social-mail/social-mail-client/dist/services/EntityService","@web-atoms/core/dist/di/DISingleton","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/models/TaskManager","@web-atoms/entity/dist/models/Queue","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/services/BusyProgress","@web-atoms/core/dist/style/styled","@social-mail/social-mail-client/dist/common/apiPath","@social-mail/social-mail-client/dist/model/model","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/WatchProperty","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/core/dist/core/sleep","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@web-atoms/web-controls/dist/DataAttributes","@web-atoms/web-controls/dist/basic/PinchZoomView","@web-atoms/web-controls/dist/basic/styles/pinch-zoom-view-style","@social-mail/social-mail-client/dist/common/fileUrl","@web-atoms/core/dist/view-model/Action","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/common/currency","@web-atoms/web-controls/dist/basic/ToggleButtonBar","@web-atoms/web-controls/dist/basic/styles/toggle-button-bar-style","@social-mail/social-mail-client/dist/public/store/StoreItemListView","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/common/Sql","@social-mail/social-mail-client/dist/public/store/storeItemLink","@social-mail/social-mail-client/dist/common/toBase36","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/AtomList","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/data-styles/data-styles","@web-atoms/core/dist/Pack","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme"]);
+            ["@social-mail/social-mail-client/dist/public/store/Store","@social-mail/social-mail-client/dist/public/store/StoreItemDetailView","@web-atoms/core/dist/core/InjectProperty","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@social-mail/social-mail-client/dist/services/EntityService","@web-atoms/core/dist/di/DISingleton","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/models/TaskManager","@web-atoms/entity/dist/models/Queue","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/services/BusyProgress","@web-atoms/core/dist/style/styled","@social-mail/social-mail-client/dist/common/apiPath","@social-mail/social-mail-client/dist/model/model","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/WatchProperty","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/core/dist/core/sleep","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@web-atoms/web-controls/dist/DataAttributes","@web-atoms/web-controls/dist/basic/ZoomView","@web-atoms/web-controls/dist/basic/styles/zoom-view-style","@social-mail/social-mail-client/dist/common/fileUrl","@web-atoms/core/dist/view-model/Action","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/common/currency","@web-atoms/web-controls/dist/basic/ToggleButtonBar","@web-atoms/web-controls/dist/basic/styles/toggle-button-bar-style","@social-mail/social-mail-client/dist/public/store/StoreItemListView","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/common/Sql","@social-mail/social-mail-client/dist/public/store/storeItemLink","@social-mail/social-mail-client/dist/common/toBase36","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/AtomList","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/data-styles/data-styles","@web-atoms/core/dist/Pack","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme"]);
 
 System.register([], function (_export, _context) {
   "use strict";
@@ -18110,13 +18110,38 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
       svg = svgAsCssDataUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0L502.6 54.6zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3l0 50.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/></svg>`);
       styled.css`
         position: relative;
-        overflow: hidden;
         cursor: grab;
+        overflow: hidden;
 
         &[data-state=grabbing] {
             cursor: grabbing;
         }
 
+        & > div {
+
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            scrollbar-width: none;
+            overflow: auto;
+
+            
+            & > .image-container {
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                overflow: hidden;
+                object-fit: contain;
+                width: 100%;
+                height: 100%;
+            }
+
+        }
+
         & > .scale {
             position: absolute;
             right: 10px;
@@ -18134,19 +18159,6 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
             background-repeat: no-repeat;
         }
 
-        & > .image-container {
-            position: absolute;
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            overflow: hidden;
-            display: grid;
-            align-items: center;
-            justify-items: center;
-            justify-content: center;
-        }
-
         & > .spinner {
             position: absolute;
             left: 0;
@@ -18162,18 +18174,18 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
         & > .hide {
             display: none;
         }
-    `.installGlobal("div[data-pinch-zoom]");
+    `.installGlobal("div[data-zoom-view]");
     }
   };
 });
-//# sourceMappingURL=pinch-zoom-view-style.js.map
+//# sourceMappingURL=zoom-view-style.js.map
 
-    AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/styles/pinch-zoom-view-style");
+    AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/styles/zoom-view-style");
 
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "./styles/pinch-zoom-view-style"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "./styles/zoom-view-style"], function (_export, _context) {
   "use strict";
 
-  var __decorate, __metadata, Bind, BindableProperty, XNode, AtomControl, PinchZoomView, center, distance;
+  var __decorate, __metadata, Bind, BindableProperty, XNode, AtomControl, ZoomView, center, distance, findLargestDistance;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -18187,7 +18199,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_webAtomsCoreDistWebControlsAtomControl) {
       AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_stylesPinchZoomViewStyle) {}],
+    }, function (_stylesZoomViewStyle) {}],
     execute: function () {
       center = ev => {
         const touch = ev.touches[0];
@@ -18205,7 +18217,33 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       distance = (first, second) => {
         return Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY);
       };
-      _export("default", PinchZoomView = class PinchZoomView extends AtomControl {
+      findLargestDistance = touches => {
+        let pair = null;
+        for (let i = 0; i < touches.length; i++) {
+          const t1 = touches[i];
+          for (let j = i + 1; j < touches.length; j++) {
+            const t2 = touches[j];
+            const distance = Math.hypot(t1.pageX - t2.pageX, t1.pageY - t2.pageY);
+            if (pair === null) {
+              pair = {
+                t1,
+                t2,
+                distance
+              };
+              continue;
+            }
+            if (pair.distance < distance) {
+              pair = {
+                t1,
+                t2,
+                distance
+              };
+            }
+          }
+        }
+        return pair;
+      };
+      _export("default", ZoomView = class ZoomView extends AtomControl {
         preCreate() {
           this.element.title = "Use mouse wheel to zoom";
           this.loading = false;
@@ -18216,11 +18254,12 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             x: 0,
             y: 0
           };
-          this.element.dataset.pinchZoom = "true";
+          this.element.setAttribute("data-zoom-view", "zoom-view");
           this.element.draggable = false;
           this.render(XNode.create("div", null, XNode.create("div", {
-            class: "image-container"
+            class: "scroll"
           }, XNode.create("img", {
+            class: "image-container",
             src: Bind.oneWay(() => this.getSource(this.source)),
             "style-opacity": Bind.oneWay(() => this.loading ? "0.3" : "1"),
             "event-load": () => {
@@ -18234,8 +18273,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             class: Bind.oneWay(() => this.zoom.scale ? "scale" : "hide"),
             title: "Display entire image"
           })));
-          this.imageContainer = this.element.firstElementChild;
-          this.image = this.imageContainer.firstElementChild;
+          this.scrollDiv = this.element.firstElementChild;
+          this.imageContainer = this.scrollDiv.firstElementChild;
+          this.image = this.imageContainer;
           const scrollView = this.element;
           let previous;
           let touchMoveDisposable;
@@ -18251,15 +18291,14 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
                 anchorY,
                 scale
               } = this.zoom;
-              if (ev.touches.length === 2) {
+              if (ev.touches.length > 1) {
                 ev.preventDefault();
                 ev.stopImmediatePropagation();
                 const rect = this.element.getBoundingClientRect();
-                const first = ev.touches[0];
-                const second = ev.touches[1];
-                anchorX = (first.clientX + second.clientX) / 2 - rect.left;
-                anchorY = (first.clientY + second.clientY) / 2 - rect.top;
-                const newScale = distance(first, second);
+                const ld = findLargestDistance(ev.touches);
+                const first = ld.t1;
+                const second = ld.t2;
+                const newScale = ld.distance;
                 if (previousDistance === void 0) {
                   previousDistance = newScale;
                   return;
@@ -18267,6 +18306,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
                 if (previousDistance === newScale) {
                   return;
                 }
+                anchorX = (first.clientX + second.clientX) / 2 - rect.left;
+                anchorY = (first.clientY + second.clientY) / 2 - rect.top;
                 scale += newScale - previousDistance;
                 previousDistance = newScale;
                 this.updateZoom({
@@ -18278,20 +18319,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
                 });
                 return;
               }
-              if (!previous) {
-                return;
-              }
-              const cp = center(ev);
-              x += cp.x - previous.x;
-              y += cp.y - previous.y;
-              previous = cp;
-              this.updateZoom({
-                anchorX,
-                anchorY,
-                x,
-                y,
-                scale
-              });
             });
             touchEndDisposable !== null && touchEndDisposable !== void 0 ? touchEndDisposable : touchEndDisposable = this.bindEvent(scrollView, "touchend", ev => {
               touchMoveDisposable === null || touchMoveDisposable === void 0 ? void 0 : touchMoveDisposable.dispose();
@@ -18317,29 +18344,14 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               var _a;
               e.preventDefault();
               (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
-              const {
-                anchorX,
-                anchorY,
-                scale
-              } = this.zoom;
-              let {
-                x,
-                y
-              } = this.zoom;
               const cp = {
                 x: e.clientX,
                 y: e.clientY
               };
-              x += cp.x - previous.x;
-              y += cp.y - previous.y;
+              const diffX = previous.x - cp.x;
+              const diffY = previous.y - cp.y;
               previous = cp;
-              this.updateZoom({
-                anchorX,
-                anchorY,
-                x,
-                y,
-                scale
-              });
+              this.scrollDiv.scrollBy(diffX, diffY);
             });
             mouseUpDisposable !== null && mouseUpDisposable !== void 0 ? mouseUpDisposable : mouseUpDisposable = this.bindEvent(scrollView, "mouseup", e => {
               var _a;
@@ -18355,7 +18367,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           });
           this.bindEvent(scrollView, "wheel", ev => {
             var _a;
-            const target = ev.currentTarget;
             ev.preventDefault();
             (_a = ev.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(ev);
             const newScale = this.zoom.scale - (ev.deltaY < 0 ? -50 : 50);
@@ -18408,29 +18419,39 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           if (scale <= 0) {
             scale = 0;
           }
-          const newWidth = this.element.clientWidth + scale + "px";
-          const newHeight = this.element.clientHeight + scale + "px";
-          this.image.style.maxWidth = this.element.clientWidth + "px";
-          this.image.style.maxHeight = this.element.clientHeight + "px";
+          const {
+            clientWidth,
+            clientHeight
+          } = this.element;
           if (scale <= 0) {
-            this.imageContainer.style.transform = "";
+            this.element.scrollTo(0, 0);
+            this.imageContainer.style.transform = ``;
             return;
           }
-          const clientWidth = this.element.clientWidth;
           const scaleFactor = (clientWidth + scale) / clientWidth;
-          this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}`;
-          this.imageContainer.style.transform = `translate(${x}px, ${y}px) scale(${scaleFactor})`;
+          this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}px`;
+          this.imageContainer.style.transform = `scale(${scaleFactor})`;
+          const e = this.imageContainer.getBoundingClientRect();
+          const left = -e.left;
+          const top = -e.top;
+          this.imageContainer.style.transformOrigin = "0 0";
+          const de = this.imageContainer.getBoundingClientRect();
+          this.scrollDiv.scrollTo({
+            left: left + de.left,
+            top: top + de.top,
+            behavior: "instant"
+          });
         }
       });
-      __decorate([BindableProperty, __metadata("design:type", Object)], PinchZoomView.prototype, "zoom", void 0);
-      __decorate([BindableProperty, __metadata("design:type", String)], PinchZoomView.prototype, "source", void 0);
-      __decorate([BindableProperty, __metadata("design:type", Boolean)], PinchZoomView.prototype, "loading", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Object)], ZoomView.prototype, "zoom", void 0);
+      __decorate([BindableProperty, __metadata("design:type", String)], ZoomView.prototype, "source", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Boolean)], ZoomView.prototype, "loading", void 0);
     }
   };
 });
-//# sourceMappingURL=PinchZoomView.js.map
+//# sourceMappingURL=ZoomView.js.map
 
-    AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/PinchZoomView");
+    AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/ZoomView");
 
 System.register(["./apiPath"], function (_export, _context) {
   "use strict";
@@ -19444,10 +19465,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/BindableProperty", "@web-at
 
     AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/ToggleButtonBar");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/web/controls/AtomControl", "../../services/EntityService", "../../model/model", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/AtomRepeater", "@web-atoms/web-controls/dist/basic/PinchZoomView", "../../common/fileUrl", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/services/FetchBuilder", "../../common/currency", "@web-atoms/web-controls/dist/basic/ToggleButtonBar"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/web/controls/AtomControl", "../../services/EntityService", "../../model/model", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/AtomRepeater", "@web-atoms/web-controls/dist/basic/ZoomView", "../../common/fileUrl", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/services/FetchBuilder", "../../common/currency", "@web-atoms/web-controls/dist/basic/ToggleButtonBar"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, AtomControl, EntityService, StoreItem, XNode, AtomRepeater, PinchZoomView, signedImageUrl, signedUrl, Bind, Action, styled, FetchBuilder, formatPrice, ToggleButtonBar, StoreItemDetailView, _a, url, storeID, itemID, css;
+  var __awaiter, __decorate, __metadata, InjectProperty, AtomControl, EntityService, StoreItem, XNode, AtomRepeater, ZoomView, signedImageUrl, signedUrl, Bind, Action, styled, FetchBuilder, formatPrice, ToggleButtonBar, StoreItemDetailView, _a, url, storeID, itemID, css;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -19466,8 +19487,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
       AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
-    }, function (_webAtomsWebControlsDistBasicPinchZoomView) {
-      PinchZoomView = _webAtomsWebControlsDistBasicPinchZoomView.default;
+    }, function (_webAtomsWebControlsDistBasicZoomView) {
+      ZoomView = _webAtomsWebControlsDistBasicZoomView.default;
     }, function (_commonFileUrl) {
       signedImageUrl = _commonFileUrl.signedImageUrl;
       signedUrl = _commonFileUrl.signedUrl;
@@ -19649,7 +19670,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
                 src: signedImageUrl(x, 150)
               }),
               class: "thumbnails"
-            }), XNode.create(PinchZoomView, {
+            }), XNode.create(ZoomView, {
               class: "preview",
               source: Bind.oneWay(() => signedImageUrl(this.selectedFile, 720))
             })), XNode.create("section", {