@syncfusion/ej2-ribbon 29.1.39 → 30.1.37

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

@@ -3536,6 +3536,7 @@ function setCustomAttributes(element, attributes) {
  */
 var RibbonGroupButton = /** @__PURE__ @class */ (function () {
     function RibbonGroupButton(parent) {
+        this.grpBtnIndex = 0;
         this.parent = parent;
         this.isSelected = false;
     }
@@ -3603,6 +3604,7 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                             this.count++;
                         }
                     }
+                    this.grpBtnIndex = i;
                 }
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings &&
                     isTooltipPresent(groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings)) {
@@ -3673,7 +3675,7 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
         var previousItems = [];
         var selectingItems = [];
         var selectedItems = [];
-        var groupButtonEle;
+        var groupButtonEle = document.querySelector('#' + item.id);
         var dropdown;
         for (var j = 0; j < grpBtnSettings.items.length; j++) {
             if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j)) {
@@ -3711,7 +3713,6 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
                 if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active') && this.parent.activeLayout === 'Simplified') {
                     this.grpBtnIndex = itemIndex;
-                    groupButtonEle = document.querySelector('#' + item.id);
                     dropdown = getComponent(groupButtonEle, DropDownButton);
                     dropdown.setProperties({
                         iconCss: grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].iconCss
@@ -3742,7 +3743,6 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 if (this.parent.activeLayout === 'Simplified') {
                     var dropdownIcon = null;
                     var itemsCount = 0;
-                    groupButtonEle = document.querySelector('#' + item.id);
                     dropdown = getComponent(groupButtonEle, DropDownButton);
                     if (!this.isSelected) {
                         if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
@@ -3776,6 +3776,10 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
             if (grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click) {
                 grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click.call(this, eventArgs_1);
             }
+            if (this.parent.activeLayout === 'Simplified' && groupButtonEle) {
+                dropdown = getComponent(groupButtonEle, DropDownButton);
+                dropdown.toggle();
+            }
         }
     };
     /**
@@ -3860,7 +3864,6 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
             else {
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
             }
-            this.grpBtnIndex = 0;
         }
     };
     RibbonGroupButton.prototype.addGroupButtonHeader = function (itemID, groupBtnSettings, popupEle) {
@@ -3942,28 +3945,37 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
         var groupBtnSettings = item.groupButtonSettings;
         var isIconOnly = true;
         var groupButtonEle = itemEle.querySelector('#' + item.id);
-        var dropdown = getComponent(groupButtonEle, DropDownButton);
-        dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
-        var targetEle = dropdown.target;
-        if (targetEle.children.length) {
-            for (var i = 0; i < targetEle.children.length; i++) {
-                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
-                    isIconOnly = false;
-                    break;
+        if (groupButtonEle) {
+            var dropdown = getComponent(groupButtonEle, DropDownButton);
+            dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
+            var targetEle_1 = dropdown.target;
+            if (targetEle_1.children.length) {
+                for (var i = 0; i < targetEle_1.children.length; i++) {
+                    if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                        isIconOnly = false;
+                        break;
+                    }
+                }
+                if (isIconOnly) {
+                    targetEle_1.classList.add('e-icon-btn');
                 }
             }
-            if (isIconOnly) {
-                targetEle.classList.add('e-icon-btn');
-            }
+            targetEle_1.onclick = function () {
+                if (_this.parent.activeLayout === 'Simplified' && targetEle_1.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
+                    if (overflowButton.element.classList.contains('e-active')) {
+                        overflowButton.toggle();
+                    }
+                }
+            };
         }
-        targetEle.onclick = function () {
-            if (_this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
-                dropdown.toggle();
+        var overflowGroupButtonEle = itemEle.querySelector('#' + item.id + '_grpbtn');
+        if (this.parent.activeLayout === 'Classic' && overflowGroupButtonEle) {
+            overflowGroupButtonEle.onclick = function () {
                 if (overflowButton.element.classList.contains('e-active')) {
                     overflowButton.toggle();
                 }
-            }
-        };
+            };
+        }
     };
     /**
      * Removes the additional event handlers as the item moved into overflow popup.
@@ -4175,8 +4187,6 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 }
                 if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
                     galleryEle.style.height = gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight + 'px';
-                    galleryEle.style.paddingTop = '0px';
-                    galleryEle.style.paddingBottom = '0px';
                     if (this_1.parent.activeLayout !== 'Simplified' && !isPopup) {
                         galleryContainerEle.style.flexFlow = 'wrap';
                     }
@@ -4298,6 +4308,13 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             galleryWrapper.style.width = itemsWidth + 'px';
         }
     };
+    RibbonGallery.prototype.setWrapperStyle = function (popup, popupContainerItems) {
+        if (popup.width !== 'auto') {
+            popupContainerItems.forEach(function (ele) {
+                ele.style.flexFlow = 'wrap';
+            });
+        }
+    };
     /**
      * Checks the gallery items height.
      *
@@ -4390,11 +4407,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 }
             }
             var popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
-            if (popup.width !== 'auto') {
-                popupContainerItems.forEach(function (ele) {
-                    ele.style.flexFlow = 'wrap';
-                });
-            }
+            this.setWrapperStyle(popup, popupContainerItems);
             var isCollideOccurs = false;
             for (var i = 0; i < popupContainerItems.length; i++) {
                 var itemsWidth = 0;
@@ -4560,7 +4573,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 }
             }
             var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
-            var popup = getComponent(popupEle, Popup);
+            var popup_1 = getComponent(popupEle, Popup);
             var popupContainerEle_1 = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
             var dropdown = new DropDownButton({
                 iconCss: iconCss,
@@ -4570,6 +4583,8 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 cssClass: 'e-ribbon-gallery-dropdown',
                 disabled: item.disabled,
                 open: function () {
+                    var popupContainerItems = popupContainerEle_1.querySelectorAll('.e-ribbon-gallery-container');
+                    _this.setWrapperStyle(popup_1, popupContainerItems);
                     _this.setFoucsToFirstItem(popupContainerEle_1, true, item.id);
                 },
                 beforeClose: function (args) {
@@ -4579,12 +4594,12 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                     }
                 }
             }, buttonEle);
-            if (popup.width !== 'auto') {
-                dropdown.dropDown.width = formatUnit(popup.width);
+            if (popup_1.width !== 'auto') {
+                dropdown.dropDown.width = formatUnit(popup_1.width);
             }
-            if (popup.height !== 'auto') {
-                dropdown.dropDown.height = formatUnit(popup.height);
-                dropdown.dropDown.element.style.height = (popup.height).toString();
+            if (popup_1.height !== 'auto') {
+                dropdown.dropDown.height = formatUnit(popup_1.height);
+                dropdown.dropDown.element.style.height = (popup_1.height).toString();
             }
         }
     };
@@ -5670,7 +5685,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (dropDownPopup) {
             dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
             if (isMenu) {
-                dropdown.beforeOpen = function () {
+                dropdown.beforeOpen = function (e) {
                     if (isLeft) {
                         if (item.type === RibbonItemType.Gallery && _this.ribbonGalleryModule) {
                             _this.ribbonGalleryModule.checkCollision(dropDownPopup, dropDownPopup.element);
@@ -5681,6 +5696,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         dropDownPopup.element.style.removeProperty('display');
                         dropDownPopup.element.style.removeProperty('visibility');
                     }
+                    if (item.splitButtonSettings.beforeOpen) {
+                        item.splitButtonSettings.beforeOpen.call(_this, e);
+                    }
+                    if (item.dropDownSettings.beforeOpen) {
+                        item.dropDownSettings.beforeOpen.call(_this, e);
+                    }
                 };
             }
             else {
@@ -5975,10 +5996,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
                 break;
             case 'GroupButton':
-                if (this.activeLayout === 'Simplified') {
-                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
-                    break;
-                }
+                this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
+                break;
         }
     };
     Ribbon.prototype.createOfTabContainer = function (groupId, groupHeader, itemEle, tabIndex) {
@@ -6893,9 +6912,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             className: RIBBON_OVERFLOW_TARGET,
             attrs: { 'tabindex': '0' }
         });
+        var overFlowCss = this.cssClass ? SPACE + this.cssClass : '';
         var overflowDDB = new DropDownButton({
             iconCss: OVERFLOW_ICON,
-            cssClass: DROPDOWNBUTTON_HIDE + SPACE + RIBBON_GROUP_OVERFLOW_DDB,
+            cssClass: DROPDOWNBUTTON_HIDE + SPACE + RIBBON_GROUP_OVERFLOW_DDB + overFlowCss,
             target: overflowTarget,
             locale: this.locale,
             enableRtl: this.enableRtl,
@@ -9440,7 +9460,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 if (itemProp.item.type === 'Gallery' && document.querySelector('#' + itemId + '_container').closest('.e-ribbon-overflow-target') && item.displayOptions !== DisplayMode.Overflow) {
                     this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
                 }
-                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow && dropdown) {
                     if (dropdown.target.childElementCount === 0 ||
                         (dropdown.target.childElementCount === 1 &&
                             this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
@@ -10006,9 +10026,14 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
         if (event) {
             var eventArgs = { element: args.element, item: args.item, event: args.event };
             event.call(this, eventArgs);
-            if (!args.element.classList.contains('e-menu-caret-icon')) {
-                this.fileMenuDDB.toggle();
-            }
+        }
+        var menuOpen = !!args.element.closest('.e-ribbon-menu.e-popup-open');
+        var fileTriggerOpen = !!args.element.closest('.e-ribbon-file-menu.e-popup-open');
+        var fileMenuOpen = !!document.querySelector('.e-ribbon-file-menu.e-popup-open');
+        // True if the file trigger was clicked open, or if the ribbon menu is open and the file menu popup is actually present
+        var isMenuOpen = fileTriggerOpen || (menuOpen && fileMenuOpen);
+        if (!args.element.classList.contains('e-menu-caret-icon') && isMenuOpen) {
+            this.fileMenuDDB.toggle();
         }
     };
     /**