@syncfusion/ej2-ribbon 33.2.3 → 33.2.4

package/dist/es6/ej2-ribbon.es5.js

@@ -4322,7 +4322,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
     RibbonGallery.prototype.setWrapperStyle = function (popup, popupContainerItems) {
         if (popup.width !== 'auto') {
             popupContainerItems.forEach(function (ele) {
-                ele.style.flexFlow = 'wrap';
+                ele.style.flexFlow = 'column wrap';
             });
         }
     };
@@ -4552,12 +4552,12 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
     RibbonGallery.prototype.addOverFlowEvents = function (item, itemEle) {
         var _this = this;
         if (itemEle.closest('.e-ribbon-overflow-target')) {
-            var buttonEle = this.parent.createElement('button', {
+            var buttonEle_1 = this.parent.createElement('button', {
                 id: item.id
             });
-            itemEle.appendChild(buttonEle);
+            itemEle.appendChild(buttonEle_1);
             if (itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.contains('e-disabled')) {
-                buttonEle.classList.add('e-disabled');
+                buttonEle_1.classList.add('e-disabled');
             }
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
             itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach(function (ele) {
@@ -4597,6 +4597,9 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                     var popupContainerItems = popupContainerEle_1.querySelectorAll('.e-ribbon-gallery-container');
                     _this.setWrapperStyle(popup_1, popupContainerItems);
                     _this.setFoucsToFirstItem(popupContainerEle_1, true, item.id);
+                    if (popup_1.width !== 'auto') {
+                        _this.alignGalleryPopupLeft(popupContainerEle_1, buttonEle_1);
+                    }
                 },
                 beforeClose: function (args) {
                     var isCancelled = _this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
@@ -4604,7 +4607,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                         args.cancel = true;
                     }
                 }
-            }, buttonEle);
+            }, buttonEle_1);
             if (popup_1.width !== 'auto') {
                 dropdown.dropDown.width = formatUnit(popup_1.width);
             }
@@ -4768,6 +4771,22 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             _this.handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings);
         };
     };
+    RibbonGallery.prototype.alignGalleryPopupLeft = function (popup, buttonEle) {
+        var popupEl = popup.parentElement;
+        if (!popupEl) {
+            return;
+        }
+        var currentLeft = parseFloat(popupEl.style.left);
+        var buttonRect = buttonEle.getBoundingClientRect();
+        var popupWidth = popupEl.offsetWidth;
+        var targetLeft = buttonRect.left - popupWidth - 1;
+        if (targetLeft < 0) {
+            targetLeft = 1;
+        }
+        if (Math.abs(currentLeft - targetLeft) > 1) {
+            popupEl.style.left = targetLeft + "px";
+        }
+    };
     RibbonGallery.prototype.handleGalleryPopupNavigation = function (e, popupEle, isDropdown, itemID, popup, gallerySettings) {
         var galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
         if (galleryPopupEle) {