@syncfusion/ej2-ribbon 33.2.3 → 33.2.5

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

@@ -2123,7 +2123,16 @@ class RibbonDropDown {
                 }
             },
             beforeItemRender: dropDownSettings.beforeItemRender,
-            beforeOpen: dropDownSettings.beforeOpen,
+            beforeOpen: (e) => {
+                const ddb = getComponent(buttonEle, DropDownButton);
+                const target = this.parent.getAppendToElement();
+                if (ddb && ddb.dropDown && !target.contains(ddb.dropDown.element)) {
+                    target.appendChild(ddb.dropDown.element);
+                }
+                if (dropDownSettings.beforeOpen) {
+                    dropDownSettings.beforeOpen.call(this, e);
+                }
+            },
             close: (e) => {
                 if (dropDownSettings.close) {
                     dropDownSettings.close.call(this, e);
@@ -2226,6 +2235,12 @@ class RibbonDropDown {
             cssClass: VERTICAL_DDB + SPACE + RIBBON_GROUP_OVERFLOW_DDB,
             iconPosition: 'Top',
             content: name,
+            beforeOpen: () => {
+                const target = this.parent.getAppendToElement();
+                if (dropdown && dropdown.dropDown && !target.contains(dropdown.dropDown.element)) {
+                    target.appendChild(dropdown.dropDown.element);
+                }
+            },
             beforeClose: (args) => {
                 args.cancel = !isNullOrUndefined(args.event && closest(args.event.target, '.' + RIBBON_POPUP_CONTROL));
             }
@@ -2565,7 +2580,16 @@ class RibbonSplitButton {
                 }
             },
             beforeItemRender: splitButtonSettings.beforeItemRender,
-            beforeOpen: splitButtonSettings.beforeOpen,
+            beforeOpen: () => {
+                const popupEl = splitbutton.dropDown.element;
+                const target = this.parent.getAppendToElement();
+                if (popupEl && !target.contains(popupEl)) {
+                    target.appendChild(popupEl);
+                }
+                if (splitButtonSettings.beforeOpen) {
+                    splitButtonSettings.beforeOpen.call(this);
+                }
+            },
             close: () => {
                 splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
                 if (splitButtonSettings.close) {
@@ -3902,7 +3926,7 @@ class RibbonGallery {
     setWrapperStyle(popup, popupContainerItems) {
         if (popup.width !== 'auto') {
             popupContainerItems.forEach((ele) => {
-                ele.style.flexFlow = 'wrap';
+                ele.style.flexFlow = 'column wrap';
             });
         }
     }
@@ -4175,6 +4199,9 @@ class RibbonGallery {
                     const popupContainerItems = popupContainerEle.querySelectorAll('.e-ribbon-gallery-container');
                     this.setWrapperStyle(popup, popupContainerItems);
                     this.setFoucsToFirstItem(popupContainerEle, true, item.id);
+                    if (popup.width !== 'auto') {
+                        this.alignGalleryPopupLeft(popupContainerEle, buttonEle);
+                    }
                 },
                 beforeClose: (args) => {
                     const isCancelled = this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
@@ -4345,6 +4372,22 @@ class RibbonGallery {
             this.handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings);
         };
     }
+    alignGalleryPopupLeft(popup, buttonEle) {
+        const popupEl = popup.parentElement;
+        if (!popupEl) {
+            return;
+        }
+        const currentLeft = parseFloat(popupEl.style.left);
+        const buttonRect = buttonEle.getBoundingClientRect();
+        const popupWidth = popupEl.offsetWidth;
+        let targetLeft = buttonRect.left - popupWidth - 1;
+        if (targetLeft < 0) {
+            targetLeft = 1;
+        }
+        if (Math.abs(currentLeft - targetLeft) > 1) {
+            popupEl.style.left = `${targetLeft}px`;
+        }
+    }
     handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings) {
         const galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
         if (galleryPopupEle) {
@@ -4510,6 +4553,16 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         return modules;
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     initialize() {
         this.element.id = this.element.id || getUniqueID('e-' + this.getModuleName());
         this.initializeLocale();
@@ -6480,6 +6533,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
             beforeOpen: (args) => {
+                const target = this.getAppendToElement();
+                if (overflowDDB && overflowDDB.dropDown && !target.contains(overflowDDB.dropDown.element)) {
+                    target.appendChild(overflowDDB.dropDown.element);
+                }
                 const eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
                 this.trigger('overflowPopupOpen', eventArgs, (ribbonArgs) => {
                     if (ribbonArgs.cancel) {