@syncfusion/ej2-ribbon 33.2.4 → 33.2.10

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

@@ -2518,7 +2518,16 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
                 }
             },
             beforeItemRender: dropDownSettings.beforeItemRender,
-            beforeOpen: dropDownSettings.beforeOpen,
+            beforeOpen: function (e) {
+                var ddb = getComponent(buttonEle, DropDownButton);
+                var 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: function (e) {
                 if (dropDownSettings.close) {
                     dropDownSettings.close.call(_this, e);
@@ -2624,6 +2633,12 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             cssClass: VERTICAL_DDB + SPACE + RIBBON_GROUP_OVERFLOW_DDB,
             iconPosition: 'Top',
             content: name,
+            beforeOpen: function () {
+                var target = _this.parent.getAppendToElement();
+                if (dropdown && dropdown.dropDown && !target.contains(dropdown.dropDown.element)) {
+                    target.appendChild(dropdown.dropDown.element);
+                }
+            },
             beforeClose: function (args) {
                 args.cancel = !isNullOrUndefined(args.event && closest(args.event.target, '.' + RIBBON_POPUP_CONTROL));
             }
@@ -2965,7 +2980,16 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
                 }
             },
             beforeItemRender: splitButtonSettings.beforeItemRender,
-            beforeOpen: splitButtonSettings.beforeOpen,
+            beforeOpen: function () {
+                var popupEl = splitbutton.dropDown.element;
+                var target = _this.parent.getAppendToElement();
+                if (popupEl && !target.contains(popupEl)) {
+                    target.appendChild(popupEl);
+                }
+                if (splitButtonSettings.beforeOpen) {
+                    splitButtonSettings.beforeOpen.call(_this);
+                }
+            },
             close: function () {
                 splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
                 if (splitButtonSettings.close) {
@@ -4969,6 +4993,16 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         return modules;
     };
+    Ribbon.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     Ribbon.prototype.initialize = function () {
         this.element.id = this.element.id || getUniqueID('e-' + this.getModuleName());
         this.initializeLocale();
@@ -5250,7 +5284,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
         if (this.activeLayout === 'Simplified') {
-            var activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            var activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active[aria-expanded="true"], .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active[aria-expanded="true"]');
             var colorPickerPopups = document.querySelectorAll('.e-ribbon .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker, .e-ribbon-group-overflow-ddb .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker');
             activePopups.forEach(function (popup) {
                 var dropDownBtn = getInstance(popup, DropDownButton);
@@ -6971,6 +7005,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
             beforeOpen: function (args) {
+                var target = _this.getAppendToElement();
+                if (overflowDDB && overflowDDB.dropDown && !target.contains(overflowDDB.dropDown.element)) {
+                    target.appendChild(overflowDDB.dropDown.element);
+                }
                 var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
                 _this.trigger('overflowPopupOpen', eventArgs, function (ribbonArgs) {
                     if (ribbonArgs.cancel) {