@dreamcommerce/aurora 0.3.4-163 → 0.3.4-167

package/build/esm/packages/aurora/src/components/gallery/index.js

@@ -57,22 +57,22 @@ var Gallery = /** @class */ (function () {
         this.previousCursorX = 0;
         this.previousCursorY = 0;
         this.selectors = {
-            newGallery: "." + JS_CLASSES.newGallery,
-            anchorImage: "." + JS_CLASSES.anchorImage,
-            image: "." + JS_CLASSES.image,
-            imageContainer: "." + cssClasses[cssGalleryImageContainer],
-            selectedImageNumber: "." + JS_CLASSES.selectedImageNumber,
-            imageDescription: "." + JS_CLASSES.imageDescription,
-            previous: "." + JS_CLASSES.previous,
-            next: "." + JS_CLASSES.next,
-            images: "." + JS_CLASSES.images,
-            imagesContainer: "." + JS_CLASSES.imagesContainer,
-            copyLinkButton: "." + JS_CLASSES.copyLinkButton,
-            copyLinkConfirmation: "." + cssClasses[cssGalleryBarCopyLinkConfirmation],
-            firstTemporaryContainer: "." + JS_CLASSES.firstTemporaryContainer,
-            lastTemporaryContainer: "." + JS_CLASSES.lastTemporaryContainer,
-            bar: "." + cssClasses[cssGalleryBar],
-            arrowContainer: "." + cssClasses[cssIconArrowContainer],
+            newGallery: ".".concat(JS_CLASSES.newGallery),
+            anchorImage: ".".concat(JS_CLASSES.anchorImage),
+            image: ".".concat(JS_CLASSES.image),
+            imageContainer: ".".concat(cssClasses[cssGalleryImageContainer]),
+            selectedImageNumber: ".".concat(JS_CLASSES.selectedImageNumber),
+            imageDescription: ".".concat(JS_CLASSES.imageDescription),
+            previous: ".".concat(JS_CLASSES.previous),
+            next: ".".concat(JS_CLASSES.next),
+            images: ".".concat(JS_CLASSES.images),
+            imagesContainer: ".".concat(JS_CLASSES.imagesContainer),
+            copyLinkButton: ".".concat(JS_CLASSES.copyLinkButton),
+            copyLinkConfirmation: ".".concat(cssClasses[cssGalleryBarCopyLinkConfirmation]),
+            firstTemporaryContainer: ".".concat(JS_CLASSES.firstTemporaryContainer),
+            lastTemporaryContainer: ".".concat(JS_CLASSES.lastTemporaryContainer),
+            bar: ".".concat(cssClasses[cssGalleryBar]),
+            arrowContainer: ".".concat(cssClasses[cssIconArrowContainer]),
             close: '',
         };
         this.isFirstTemporaryContainerExist = false;
@@ -192,7 +192,7 @@ var Gallery = /** @class */ (function () {
             _this.imageAttributes[imageIndex].isDragging = true;
             _this.imageAttributes[imageIndex].transX = -availableTranslateX;
             _this.imageAttributes[imageIndex].transY = -availableTranslateY;
-            $image.style.transform = "translate3d(" + _this.imageAttributes[imageIndex].transX + "px, " + _this.imageAttributes[imageIndex].transY + "px, 0)";
+            $image.style.transform = "translate3d(".concat(_this.imageAttributes[imageIndex].transX, "px, ").concat(_this.imageAttributes[imageIndex].transY, "px, 0)");
             $image.classList.remove(cssClasses[cssZoomOut]);
             $image.classList.add(cssClasses[cssGrabbing]);
         };
@@ -202,7 +202,7 @@ var Gallery = /** @class */ (function () {
             }
             _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
             var panDistance = Math.round((ev.deltaX * 100) / window.innerWidth);
-            _this.$images.style.transform = "translateX(" + (_this.transform + panDistance) + "%)";
+            _this.$images.style.transform = "translateX(".concat(_this.transform + panDistance, "%)");
             if (ev.type === 'panend') {
                 if (Math.abs(panDistance) > 15) {
                     _this.partialTransform = _this.transform + panDistance;
@@ -216,7 +216,7 @@ var Gallery = /** @class */ (function () {
                 else {
                     _this.isAnimating = true;
                     _this.$images.classList.add(cssClasses[cssGalleryImagesWithTransition]);
-                    _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                    _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
                     setTimeout(function () {
                         _this.isAnimating = false;
                     }, 300);
@@ -297,7 +297,7 @@ var Gallery = /** @class */ (function () {
                     var _a = _this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, -transX, -transY), availableTranslateX = _a.availableTranslateX, availableTranslateY = _a.availableTranslateY;
                     _this.imageAttributes[imageIndex].transX = -availableTranslateX;
                     _this.imageAttributes[imageIndex].transY = -availableTranslateY;
-                    $image.style.transform = "translate3d(" + _this.imageAttributes[imageIndex].transX + "px, " + _this.imageAttributes[imageIndex].transY + "px, 0)";
+                    $image.style.transform = "translate3d(".concat(_this.imageAttributes[imageIndex].transX, "px, ").concat(_this.imageAttributes[imageIndex].transY, "px, 0)");
                 }
             });
         };
@@ -364,7 +364,7 @@ var Gallery = /** @class */ (function () {
                 else {
                     _this.transform = _this.partialTransform % 100 === 0 ? _this.transform - 100 : _this.transform + (_this.partialTransform % 100);
                 }
-                _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
             }
             if (isTemporaryContainerNeeded) {
                 _this.appendTemporaryImage(imageIndex);
@@ -403,12 +403,12 @@ var Gallery = /** @class */ (function () {
                 _this.isLastTemporaryContainerExist = false;
                 _this.updateGridColumnStyles();
                 _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
-                _this.$images.style.transform = "translateX(" + _this.partialTransform % 100 + "%)";
+                _this.$images.style.transform = "translateX(".concat(_this.partialTransform % 100, "%)");
             }
             if (!_this.isNeighboringImageShow) {
                 _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
                 _this.transform = _this.selectedImageNumber === 1 ? -100 : createdImageIndex * -100;
-                _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
             }
             // wait for the fake translate
             setTimeout(function () {
@@ -418,7 +418,7 @@ var Gallery = /** @class */ (function () {
                     _this.handleTransitionEnd();
                 }, 300);
                 if (_this.isNeighboringImageShow) {
-                    _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                    _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
                 }
             }, 10);
             _this.popstateUpdate = false;
@@ -434,20 +434,20 @@ var Gallery = /** @class */ (function () {
                 if (_this.hasUserGoneToNextImage && _this.selectedImageNumber === 1) {
                     _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
                     _this.transform = -100;
-                    _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                    _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
                 }
                 if ((_this.selectedImageNumber === _this.imagesCount && !_this.hasUserGoneToNextImage) ||
                     (_this.popstateUpdate && _this.selectedImageNumber !== 1)) {
                     _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
                     var createdImageIndex = _this.createdImagesIndex.findIndex(function (index) { return index === _this.selectedImageNumber - 1; });
                     _this.transform = -100 * (createdImageIndex + 1) + (_this.partialTransform % 100);
-                    _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                    _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
                     var $lastTemporaryContainer = document.querySelector(_this.selectors.lastTemporaryContainer);
                     $lastTemporaryContainer.remove();
                     _this.isLastTemporaryContainerExist = false;
                     _this.updateGridColumnStyles();
                     _this.transform += 100 - _this.partialTransform;
-                    _this.$images.style.transform = "translateX(" + _this.transform + "%)";
+                    _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
                 }
             }
             if (_this.isMaxImageMode()) {
@@ -481,7 +481,7 @@ var Gallery = /** @class */ (function () {
                     $image.style.maxWidth = '';
                     $image.style.maxHeight = '';
                     _this.imageAttributes[imageIndex] = __assign(__assign({}, _this.imageAttributes[imageIndex]), { transX: 0, transY: 0, scale: 1, initialScale: 1, currentScale: 1 });
-                    $image.style.transform = "translate3d(" + _this.imageAttributes[imageIndex].transX + "px, " + _this.imageAttributes[imageIndex].transY + "px, 0)";
+                    $image.style.transform = "translate3d(".concat(_this.imageAttributes[imageIndex].transX, "px, ").concat(_this.imageAttributes[imageIndex].transY, "px, 0)");
                     $image.classList.add(cssClasses[cssGalleryImageAdjusted]);
                     _this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.real);
                 }
@@ -598,14 +598,14 @@ var Gallery = /** @class */ (function () {
         this.setInitialImagesInfo();
         this.isTouchDevice = checkIsTouchDevice();
         this.initLocation = window.location;
-        JS_CLASSES.close = "js__gallery-" + this.options.name + "-close";
-        this.selectors.close = "." + JS_CLASSES.close;
+        JS_CLASSES.close = "js__gallery-".concat(this.options.name, "-close");
+        this.selectors.close = ".".concat(JS_CLASSES.close);
         this.createMarkup();
         this.$bar = document.querySelector(this.selectors.bar);
         this._createInitialImagesMarkup();
         this.$images = this.$gallery.querySelector(this.selectors.images);
-        this.$images.style['msGridColumns'] = "(100%)[" + (this.imagesCount + 2) + "]";
-        this.$images.style.gridTemplateColumns = "repeat(" + (this.imagesCount + 2) + ", 100%)";
+        this.$images.style['msGridColumns'] = "(100%)[".concat(this.imagesCount + 2, "]");
+        this.$images.style.gridTemplateColumns = "repeat(".concat(this.imagesCount + 2, ", 100%)");
         this.appendImages();
         var isTemporaryContainerNeeded = this.options.isCarouselEnabled &&
             this.imagesCount > 1 &&
@@ -619,7 +619,7 @@ var Gallery = /** @class */ (function () {
         if (isTemporaryContainerNeeded && this.selectedImageNumber === 1) {
             this.transform = -100;
         }
-        this.$images.style.transform = "translateX(" + this.transform + "%)";
+        this.$images.style.transform = "translateX(".concat(this.transform, "%)");
         this.addListeners();
         if (this.options.handleHistory) {
             handleHistory(this.$gallery, this.options.name, this.selectedImageNumber, this.remove, this.showImage);
@@ -630,7 +630,7 @@ var Gallery = /** @class */ (function () {
     }
     Gallery.prototype.setInitialImagesInfo = function () {
         var _this = this;
-        var $images = document.querySelectorAll("[data-gallery-name=" + this.options.name + "]");
+        var $images = document.querySelectorAll("[data-gallery-name=".concat(this.options.name, "]"));
         $images.forEach(function ($image) {
             var shorterEdge = $image.naturalHeight < $image.naturalWidth ? 'height' : 'width';
             var $anchor = $image.closest(_this.selectors.anchorImage);
@@ -680,7 +680,7 @@ var Gallery = /** @class */ (function () {
             }
         }
         var barMarkup = this._createBarMarkup();
-        var markup = "\n            " + barMarkup + "\n\n            <div class=\"" + cssClasses[cssGalleryImagesContainer] + " " + JS_CLASSES.imagesContainer + "\">\n                " + previousArrowMarkup + "\n\n                <div class=\"" + cssClasses[cssGalleryImages] + " " + JS_CLASSES.images + "\"></div>\n\n                " + nextArrowMarkup + "\n            </div>\n        ";
+        var markup = "\n            ".concat(barMarkup, "\n\n            <div class=\"").concat(cssClasses[cssGalleryImagesContainer], " ").concat(JS_CLASSES.imagesContainer, "\">\n                ").concat(previousArrowMarkup, "\n\n                <div class=\"").concat(cssClasses[cssGalleryImages], " ").concat(JS_CLASSES.images, "\"></div>\n\n                ").concat(nextArrowMarkup, "\n            </div>\n        ");
         this.$gallery.innerHTML = markup;
         document.body.append(this.$gallery);
         this.changeImageDescription();
@@ -688,42 +688,42 @@ var Gallery = /** @class */ (function () {
     Gallery.prototype._createBarMarkup = function () {
         var imagesNumberMarkup = '';
         var copyLinkMarkup = '';
-        var imageDescriptionMarkup = "\n            <div class=\"" + cssClasses[cssGalleryBarImageDescription] + " " + JS_CLASSES.imageDescription + "\">\n            </div>\n        ";
+        var imageDescriptionMarkup = "\n            <div class=\"".concat(cssClasses[cssGalleryBarImageDescription], " ").concat(JS_CLASSES.imageDescription, "\">\n            </div>\n        ");
         if (this.options.hasImageNumbers) {
             imagesNumberMarkup = this._createImageNumbersMarkup();
         }
         if (this.options.hasCopyLink) {
             copyLinkMarkup = this._createCopyLinkMarkup();
         }
-        return "\n            <div class=\"" + cssClasses[cssGalleryBar] + "\">\n                " + imagesNumberMarkup + "\n\n                " + imageDescriptionMarkup + "\n\n                " + copyLinkMarkup + "\n\n                <span class=\"" + cssClasses[cssIcon] + " " + cssClasses[cssIconClose] + " " + cssClasses[cssGalleryBarImageClose] + " " + JS_CLASSES.close + "\"></span>\n            </div>\n        ";
+        return "\n            <div class=\"".concat(cssClasses[cssGalleryBar], "\">\n                ").concat(imagesNumberMarkup, "\n\n                ").concat(imageDescriptionMarkup, "\n\n                ").concat(copyLinkMarkup, "\n\n                <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconClose], " ").concat(cssClasses[cssGalleryBarImageClose], " ").concat(JS_CLASSES.close, "\"></span>\n            </div>\n        ");
     };
     Gallery.prototype._createImageNumbersMarkup = function () {
-        return "\n            <div class=\"" + cssClasses[cssGalleryBarImageNumbers] + "\">\n                <span class=\"" + JS_CLASSES.selectedImageNumber + "\">\n                    " + this.selectedImageNumber + "\n                </span> / " + this.imagesCount + "\n            </div>\n        ";
+        return "\n            <div class=\"".concat(cssClasses[cssGalleryBarImageNumbers], "\">\n                <span class=\"").concat(JS_CLASSES.selectedImageNumber, "\">\n                    ").concat(this.selectedImageNumber, "\n                </span> / ").concat(this.imagesCount, "\n            </div>\n        ");
     };
     Gallery.prototype._createCopyLinkMarkup = function () {
         var _a = this.options.translations, copyLink = _a.copyLink, picture = _a.picture, copyLinkShortVersion = _a.copyLinkShortVersion, copyLinkConfirmation = _a.copyLinkConfirmation;
-        return "\n            <div class=\"" + cssClasses[cssGalleryBarCopyLink] + " " + JS_CLASSES.copyLinkButton + "\">\n                <span class=\"" + cssClasses[cssIcon] + " " + cssClasses[cssIconLink] + " " + cssClasses[cssHideMobile] + "\"></span>\n                <span class=\"" + cssClasses[cssHideDesktop] + "\">" + copyLinkShortVersion + "</span>\n                <span class=\"" + cssClasses[cssHideMobile] + "\">\n                    " + copyLink + " (" + picture + " <span class=\"" + JS_CLASSES.selectedImageNumber + "\">" + this.selectedImageNumber + "</span>)\n                </span>\n                \n                <div class=\"" + cssClasses[cssHide] + " " + cssClasses[cssGalleryBarCopyLinkConfirmation] + "\">\n                    <span class=\"" + cssClasses[cssIcon] + " " + cssClasses[cssIconSuccess] + "\"></span>\n\n                    <div class=\"" + cssClasses[cssGalleryBarCopyLinkConfirmationText] + "\">\n                        " + copyLinkConfirmation + "\n                    </div>\n                </div>\n            </div>\n        ";
+        return "\n            <div class=\"".concat(cssClasses[cssGalleryBarCopyLink], " ").concat(JS_CLASSES.copyLinkButton, "\">\n                <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconLink], " ").concat(cssClasses[cssHideMobile], "\"></span>\n                <span class=\"").concat(cssClasses[cssHideDesktop], "\">").concat(copyLinkShortVersion, "</span>\n                <span class=\"").concat(cssClasses[cssHideMobile], "\">\n                    ").concat(copyLink, " (").concat(picture, " <span class=\"").concat(JS_CLASSES.selectedImageNumber, "\">").concat(this.selectedImageNumber, "</span>)\n                </span>\n                \n                <div class=\"").concat(cssClasses[cssHide], " ").concat(cssClasses[cssGalleryBarCopyLinkConfirmation], "\">\n                    <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconSuccess], "\"></span>\n\n                    <div class=\"").concat(cssClasses[cssGalleryBarCopyLinkConfirmationText], "\">\n                        ").concat(copyLinkConfirmation, "\n                    </div>\n                </div>\n            </div>\n        ");
     };
     Gallery.prototype._createNavigationMarkup = function (arrowType) {
-        var arrowClasses = cssClasses[cssIcon] + " " + cssClasses[cssIconArrow];
-        var arrowContainerClasses = cssClasses[cssIconArrowContainer] + " " + JS_CLASSES[arrowType];
+        var arrowClasses = "".concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconArrow]);
+        var arrowContainerClasses = "".concat(cssClasses[cssIconArrowContainer], " ").concat(JS_CLASSES[arrowType]);
         var isPreviousArrow = arrowType === 'previous';
         if (isPreviousArrow) {
-            arrowClasses += " " + cssClasses[cssIconArrowRotate180];
-            arrowContainerClasses += " " + cssClasses[cssIconArrowContainerPrevious];
+            arrowClasses += " ".concat(cssClasses[cssIconArrowRotate180]);
+            arrowContainerClasses += " ".concat(cssClasses[cssIconArrowContainerPrevious]);
             var isFirstImage = this.selectedImageNumber === 1;
             if (isFirstImage && !this.options.isCarouselEnabled) {
-                arrowContainerClasses += " " + cssClasses[cssHide];
+                arrowContainerClasses += " ".concat(cssClasses[cssHide]);
             }
         }
         else {
-            arrowContainerClasses += " " + cssClasses[cssIconArrowContainerNext];
+            arrowContainerClasses += " ".concat(cssClasses[cssIconArrowContainerNext]);
             var isLastImage = this.selectedImageNumber === this.imagesCount;
             if (isLastImage && !this.options.isCarouselEnabled) {
-                arrowContainerClasses += " " + cssClasses[cssHide];
+                arrowContainerClasses += " ".concat(cssClasses[cssHide]);
             }
         }
-        return "\n            <div class=\"" + arrowContainerClasses + "\">\n                <span class=\"" + arrowClasses + "\"></span>\n            </div>\n        ";
+        return "\n            <div class=\"".concat(arrowContainerClasses, "\">\n                <span class=\"").concat(arrowClasses, "\"></span>\n            </div>\n        ");
     };
     Gallery.prototype._createImageMarkup = function (imageIndex, source) {
         var $imageContainer = document.createElement('div');
@@ -765,7 +765,7 @@ var Gallery = /** @class */ (function () {
             if (_this.createdImagesIndex.length !== 0) {
                 var lowerIndex = _this.getClosestLowerIndex(_this.createdImagesIndex, index);
                 if (lowerIndex != null) {
-                    var lowerIndexImages = document.querySelectorAll("[src='" + _this.imageAttributes[lowerIndex].source + "']");
+                    var lowerIndexImages = document.querySelectorAll("[src='".concat(_this.imageAttributes[lowerIndex].source, "']"));
                     lowerIndexImages.forEach(function (image) {
                         if (image.classList.contains(JS_CLASSES.image)) {
                             var $lowerIndexImage = image;
@@ -778,7 +778,7 @@ var Gallery = /** @class */ (function () {
                 }
                 else {
                     var firstCreatedImageIndex = _this.createdImagesIndex[0];
-                    var $firstImage = document.querySelector("[src='" + _this.imageAttributes[firstCreatedImageIndex].source + "']");
+                    var $firstImage = document.querySelector("[src='".concat(_this.imageAttributes[firstCreatedImageIndex].source, "']"));
                     var $firstImageContainer = $firstImage.closest(_this.selectors.imageContainer);
                     $firstImageContainer.before($markup);
                 }
@@ -790,7 +790,7 @@ var Gallery = /** @class */ (function () {
                 _this.createdImagesIndex.push(index);
                 if (index === 0 && _this.hasUserGoneToNextImage) {
                     _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
-                    _this.$images.style.transform = "translateX(" + (_this.transform - 100 + (_this.partialTransform % 100)) + "%)";
+                    _this.$images.style.transform = "translateX(".concat(_this.transform - 100 + (_this.partialTransform % 100), "%)");
                 }
             }
             _this.createdImagesIndex.sort(_this.sortAscending);
@@ -807,7 +807,7 @@ var Gallery = /** @class */ (function () {
             if (this.hasUserGoneToNextImage) {
                 this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
                 this.transform = -100 * this.createdImagesIndex.length + (this.partialTransform % 100);
-                this.$images.style.transform = "translateX(" + this.transform + "%)";
+                this.$images.style.transform = "translateX(".concat(this.transform, "%)");
             }
         }
         else if (imageIndex === this.imagesCount - 1) {
@@ -855,7 +855,7 @@ var Gallery = /** @class */ (function () {
             var $copyLink = document.querySelector(this.selectors.copyLinkButton);
             $copyLink.addEventListener('click', function () {
                 var galleryUrl = getUrl(_this.options.name, _this.selectedImageNumber);
-                copy(galleryUrl + "-copied");
+                copy("".concat(galleryUrl, "-copied"));
                 var $copyLinkConfirmation = document.querySelector(_this.selectors.copyLinkConfirmation);
                 $copyLinkConfirmation.classList.remove(cssClasses[cssHide]);
                 setTimeout(function () {
@@ -874,7 +874,7 @@ var Gallery = /** @class */ (function () {
         var newTranslateX = -(ev.deltaX + this.imageAttributes[imageIndex].transX);
         var newTranslateY = -(deltaY + this.imageAttributes[imageIndex].transY);
         var _a = this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY), availableTranslateX = _a.availableTranslateX, availableTranslateY = _a.availableTranslateY;
-        $image.style.transform = "translate3d(" + availableTranslateX * -1 + "px, " + availableTranslateY * -1 + "px, 0)";
+        $image.style.transform = "translate3d(".concat(availableTranslateX * -1, "px, ").concat(availableTranslateY * -1, "px, 0)");
         if (ev.type === 'panend') {
             this.imageAttributes[imageIndex].transX = -availableTranslateX;
             this.imageAttributes[imageIndex].transY = -availableTranslateY;
@@ -905,8 +905,8 @@ var Gallery = /** @class */ (function () {
         var _a = this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, initialWidth = _a.initialWidth, initialHeight = _a.initialHeight;
         this.imageAttributes[imageIndex].currentScale = Math.max(1, Math.min(this.imageAttributes[imageIndex].scale * ev.scale, maxImageHeight / initialHeight));
         var currentScale = this.imageAttributes[imageIndex].currentScale;
-        $image.style.maxWidth = initialWidth * currentScale + "px";
-        $image.style.maxHeight = initialHeight * currentScale + "px";
+        $image.style.maxWidth = "".concat(initialWidth * currentScale, "px");
+        $image.style.maxHeight = "".concat(initialHeight * currentScale, "px");
         var $container = $image.closest(this.selectors.imageContainer);
         var _b = this.getTranslate($container, imageIndex), translateX = _b.translateX, translateY = _b.translateY;
         this.imageAttributes[imageIndex].transX = -translateX;
@@ -928,7 +928,7 @@ var Gallery = /** @class */ (function () {
             this.imageAttributes[imageIndex].scale = currentScale;
             this.imageAttributes[imageIndex].initialScale = currentScale;
         }
-        $image.style.transform = "translate3d(" + this.imageAttributes[imageIndex].transX + "px, " + this.imageAttributes[imageIndex].transY + "px, 0)";
+        $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
     };
     Gallery.prototype.changeSelectedImageModeToMaxImage = function ($image, imageIndex, ev) {
         this.options.mode = GALLERY_MODE.maxImage;
@@ -943,13 +943,12 @@ var Gallery = /** @class */ (function () {
             eventCenterY = ev.center.y;
         }
         var _a = this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, initialHeight = _a.initialHeight;
-        this.imageAttributes[imageIndex] = __assign(__assign({}, this.imageAttributes[imageIndex]), { currentScale: maxImageHeight / initialHeight, scale: maxImageHeight / initialHeight, left: $image.getBoundingClientRect().left, top: $image.getBoundingClientRect().top, eventCenterX: eventCenterX,
-            eventCenterY: eventCenterY });
+        this.imageAttributes[imageIndex] = __assign(__assign({}, this.imageAttributes[imageIndex]), { currentScale: maxImageHeight / initialHeight, scale: maxImageHeight / initialHeight, left: $image.getBoundingClientRect().left, top: $image.getBoundingClientRect().top, eventCenterX: eventCenterX, eventCenterY: eventCenterY });
         var $container = $image.closest(this.selectors.imageContainer);
         var _b = this.getTranslate($container, imageIndex), translateX = _b.translateX, translateY = _b.translateY;
         this.imageAttributes[imageIndex] = __assign(__assign({}, this.imageAttributes[imageIndex]), { transX: -translateX, transY: -translateY, initialScale: maxImageHeight / initialHeight });
         $container.style.overflow = 'hidden';
-        $image.style.transform = "translate3d(" + this.imageAttributes[imageIndex].transX + "px, " + this.imageAttributes[imageIndex].transY + "px, 0)";
+        $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
         $image.classList.add(cssClasses[cssZoomOut]);
         $image.classList.remove(cssClasses[cssZoomIn]);
         $image.classList.toggle(cssClasses[cssGalleryImageAdjusted]);
@@ -968,7 +967,7 @@ var Gallery = /** @class */ (function () {
             $image.style.maxWidth = '';
             $image.style.maxHeight = '';
             this.imageAttributes[imageIndex] = __assign(__assign({}, this.imageAttributes[imageIndex]), { transX: 0, transY: 0, scale: 1, initialScale: 1, currentScale: 1 });
-            $image.style.transform = "translate3d(" + this.imageAttributes[imageIndex].transX + "px, " + this.imageAttributes[imageIndex].transY + "px, 0)";
+            $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
             $image.classList.toggle(cssClasses[cssGalleryImageAdjusted]);
             $image.classList.remove(cssClasses[cssZoomOut]);
             $image.classList.add(cssClasses[cssZoomIn]);
@@ -1068,7 +1067,7 @@ var Gallery = /** @class */ (function () {
         var _b = this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, translateX, translateY), availableTranslateX = _b.availableTranslateX, availableTranslateY = _b.availableTranslateY;
         this.imageAttributes[imageIndex].transX = -availableTranslateX;
         this.imageAttributes[imageIndex].transY = -availableTranslateY;
-        $image.style.transform = "translate3d(" + this.imageAttributes[imageIndex].transX + "px, " + this.imageAttributes[imageIndex].transY + "px, 0)";
+        $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
         $image.classList.remove(cssClasses[cssGalleryImageAdjusted]);
     };
     Gallery.prototype.changeImagesMode = function () {
@@ -1101,7 +1100,7 @@ var Gallery = /** @class */ (function () {
     Gallery.prototype.changeImageNumber = function () {
         var _this = this;
         var imageNumbers = document.querySelectorAll(this.selectors.selectedImageNumber);
-        imageNumbers.forEach(function ($imageNumber) { return ($imageNumber.textContent = "" + _this.selectedImageNumber); });
+        imageNumbers.forEach(function ($imageNumber) { return ($imageNumber.textContent = "".concat(_this.selectedImageNumber)); });
     };
     Gallery.prototype.changeImageDescription = function () {
         var imageDescription = document.querySelector(this.selectors.imageDescription);