@syncfusion/ej2-ribbon 33.2.10 → 34.1.30

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

@@ -2081,7 +2081,16 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
                     colorPickerSettings.beforeClose.call(_this);
                 }
             },
-            beforeOpen: colorPickerSettings.beforeOpen,
+            beforeOpen: function (e) {
+                var target = _this.parent.getAppendToElement();
+                var splitBtn = colorPicker['splitBtn'];
+                if (splitBtn && splitBtn.dropDown && !target.contains(splitBtn.dropDown.element)) {
+                    target.appendChild(splitBtn.dropDown.element);
+                }
+                if (colorPickerSettings.beforeOpen) {
+                    colorPickerSettings.beforeOpen.call(_this, e);
+                }
+            },
             beforeTileRender: colorPickerSettings.beforeTileRender,
             created: colorPickerSettings.created,
             change: function (e) {
@@ -2150,6 +2159,16 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
                 item.colorPickerSettings.beforeClose.call(_this);
             }
         };
+        colorPickerObj.beforeOpen = function (e) {
+            var target = _this.parent.getAppendToElement();
+            var splitBtn = colorPickerObj['splitBtn'];
+            if (splitBtn && splitBtn.dropDown && !target.contains(splitBtn.dropDown.element)) {
+                target.appendChild(splitBtn.dropDown.element);
+            }
+            if (item.colorPickerSettings.beforeOpen) {
+                item.colorPickerSettings.beforeOpen.call(_this, e);
+            }
+        };
         splitBtn.close = function () {
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
                 if (overflowButton.element.classList.contains('e-active')) {
@@ -2322,7 +2341,21 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
             text: comboBoxSettings.text,
             value: comboBoxSettings.value,
             width: comboBoxSettings.width,
-            beforeOpen: comboBoxSettings.beforeOpen,
+            beforeOpen: function (e) {
+                requestAnimationFrame(function () {
+                    if (!_this.parent) {
+                        return;
+                    }
+                    var target = _this.parent.getAppendToElement();
+                    var popupEle = document.getElementById(inputEle.id + '_popup');
+                    if (popupEle && !target.contains(popupEle)) {
+                        target.appendChild(popupEle);
+                    }
+                });
+                if (comboBoxSettings.beforeOpen) {
+                    comboBoxSettings.beforeOpen.call(_this, e);
+                }
+            },
             open: comboBoxSettings.open,
             htmlAttributes: comboBoxSettings.htmlAttributes,
             close: function (e) {
@@ -2359,6 +2392,21 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
         var inputEle = itemEle.querySelector('#' + item.id);
         inputEle.setAttribute('data-control', item.type.toString());
         var comboBoxObj = getComponent(inputEle, ComboBox);
+        comboBoxObj.beforeOpen = function (e) {
+            requestAnimationFrame(function () {
+                if (!_this.parent) {
+                    return;
+                }
+                var target = _this.parent.getAppendToElement();
+                var popupEle = document.getElementById(item.id + '_popup');
+                if (popupEle && !target.contains(popupEle)) {
+                    target.appendChild(popupEle);
+                }
+            });
+            if (item.comboBoxSettings.beforeOpen) {
+                item.comboBoxSettings.beforeOpen.call(_this, e);
+            }
+        };
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = function (e) {
             var target = e.event ? e.event.target : null;
@@ -3061,9 +3109,15 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
             }
         };
         var target;
-        splitbutton.beforeOpen = function (e) {
+        splitbutton.beforeOpen = function () {
+            var splitBtn = getComponent(splitButtonEle, SplitButton);
+            var popupEl = splitBtn && splitBtn.dropDown ? splitBtn.dropDown.element : null;
+            var target = _this.parent.getAppendToElement();
+            if (popupEl && !target.contains(popupEl)) {
+                target.appendChild(popupEl);
+            }
             if (item.splitButtonSettings.beforeOpen) {
-                item.splitButtonSettings.beforeOpen.call(_this, e);
+                item.splitButtonSettings.beforeOpen.call(_this);
             }
         };
         splitbutton.beforeClose = function (e) {
@@ -3504,6 +3558,7 @@ function createTooltip(element, ribbon) {
     var ribbonTooltip = new Tooltip({
         target: '.' + RIBBON_TOOLTIP_TARGET,
         beforeRender: beforeTooltipRender.bind(this),
+        beforeOpen: beforeTooltipOpen.bind(this),
         windowCollision: true
     });
     ribbonTooltip.appendTo(element);
@@ -3515,6 +3570,13 @@ function createTooltip(element, ribbon) {
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
     }
+    function beforeTooltipOpen(args) {
+        var target = ribbon.getAppendToElement();
+        var tooltipPopup = args.element;
+        if (tooltipPopup && !target.contains(tooltipPopup)) {
+            target.appendChild(tooltipPopup);
+        }
+    }
 }
 /**
  * Destroys tooltip
@@ -3683,15 +3745,21 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 count++;
             }
-            var dropdown = new DropDownButton({
+            var dropdown_1 = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: btnContainerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
-                disabled: item.disabled
+                disabled: item.disabled,
+                beforeOpen: function () {
+                    var target = _this.parent.getAppendToElement();
+                    if (dropdown_1 && dropdown_1.dropDown && !target.contains(dropdown_1.dropDown.element)) {
+                        target.appendChild(dropdown_1.dropDown.element);
+                    }
+                }
             }, buttonEle);
             if (groupBtnSettings.header) {
-                var dropDownPopup = dropdown.dropDown;
+                var dropDownPopup = dropdown_1.dropDown;
                 this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
             }
             buttonEle.onclick = buttonEle.onkeydown = function () {
@@ -3859,15 +3927,21 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 itemsCount++;
             }
-            var dropdown = new DropDownButton({
+            var dropdown_2 = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: containerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
-                disabled: item.disabled
+                disabled: item.disabled,
+                beforeOpen: function () {
+                    var target = _this.parent.getAppendToElement();
+                    if (dropdown_2 && dropdown_2.dropDown && !target.contains(dropdown_2.dropDown.element)) {
+                        target.appendChild(dropdown_2.dropDown.element);
+                    }
+                }
             }, buttonEle);
             if (groupBtnSettings.header) {
-                var dropDownPopup = dropdown.dropDown;
+                var dropDownPopup = dropdown_2.dropDown;
                 this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
             }
             buttonEle.onclick = buttonEle.onkeydown = function () {
@@ -4505,7 +4579,8 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             className: 'e-ribbon-gallery-popup',
             id: item.id + '_galleryPopup'
         });
-        document.body.append(gallerypopupElement);
+        var appendTarget = this.parent.getAppendToElement();
+        appendTarget.append(gallerypopupElement);
         var galleryPopup = new Popup(gallerypopupElement, {
             relateTo: buttonEle,
             content: popupContainer,
@@ -4610,13 +4685,20 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
             var popup_1 = getComponent(popupEle, Popup);
             var popupContainerEle_1 = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
-            var dropdown = new DropDownButton({
+            var dropdown_1 = new DropDownButton({
                 iconCss: iconCss,
                 content: content,
                 target: popupContainerEle_1,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-gallery-dropdown',
                 disabled: item.disabled,
+                beforeOpen: function () {
+                    var target = _this.parent.getAppendToElement();
+                    var dropDownPopup = dropdown_1 && dropdown_1.dropDown ? dropdown_1.dropDown.element : null;
+                    if (dropDownPopup && !target.contains(dropDownPopup)) {
+                        target.appendChild(dropDownPopup);
+                    }
+                },
                 open: function () {
                     var popupContainerItems = popupContainerEle_1.querySelectorAll('.e-ribbon-gallery-container');
                     _this.setWrapperStyle(popup_1, popupContainerItems);
@@ -4633,11 +4715,11 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 }
             }, buttonEle_1);
             if (popup_1.width !== 'auto') {
-                dropdown.dropDown.width = formatUnit(popup_1.width);
+                dropdown_1.dropDown.width = formatUnit(popup_1.width);
             }
             if (popup_1.height !== 'auto') {
-                dropdown.dropDown.height = formatUnit(popup_1.height);
-                dropdown.dropDown.element.style.height = (popup_1.height).toString();
+                dropdown_1.dropDown.height = formatUnit(popup_1.height);
+                dropdown_1.dropDown.element.style.height = (popup_1.height).toString();
             }
         }
     };
@@ -4741,6 +4823,10 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         if (isCancelled) {
             return;
         }
+        var target = this.parent.getAppendToElement();
+        if (!target.contains(popupEle)) {
+            target.appendChild(popupEle);
+        }
         popup.show();
         this.checkCollision(popup, popupEle);
         var buttonEle = document.querySelector('#' + itemID + '_popupButton');
@@ -9720,7 +9806,6 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         this.tabObj.destroy();
         this.tabObj = undefined;
-        this.l10n = null;
         this.initialPropsData = {};
         this.hiddenGroups = [];
         this.hiddenElements = {};
@@ -10026,6 +10111,13 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
         if (!isOpen && args.event && args.event.target.closest('.e-ribbon-menu')) {
             args.cancel = true;
         }
+        if (isOpen && this.fileMenuDDB && this.fileMenuDDB.dropDown) {
+            var target = this.parent.getAppendToElement();
+            var popupEl = this.fileMenuDDB.dropDown.element;
+            if (popupEl && !target.contains(popupEl)) {
+                target.appendChild(popupEl);
+            }
+        }
         var event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {
@@ -10087,6 +10179,13 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
         }, this);
     };
     RibbonFileMenu.prototype.menuBeforeEvent = function (isOpen, args) {
+        if (isOpen) {
+            var target = this.parent.getAppendToElement();
+            var popup = args.element && args.element.closest('.e-popup');
+            if (popup && !target.contains(popup)) {
+                target.appendChild(popup);
+            }
+        }
         var event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {