@syncfusion/ej2-ribbon 29.2.4 → 30.1.39

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

@@ -3133,6 +3133,7 @@ function setCustomAttributes(element, attributes) {
  */
 class RibbonGroupButton {
     constructor(parent) {
+        this.grpBtnIndex = 0;
         this.parent = parent;
         this.isSelected = false;
     }
@@ -3199,6 +3200,7 @@ class RibbonGroupButton {
                             this.count++;
                         }
                     }
+                    this.grpBtnIndex = i;
                 }
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings &&
                     isTooltipPresent(groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings)) {
@@ -3269,7 +3271,7 @@ class RibbonGroupButton {
         const previousItems = [];
         const selectingItems = [];
         const selectedItems = [];
-        let groupButtonEle;
+        const groupButtonEle = document.querySelector('#' + item.id);
         let dropdown;
         for (let j = 0; j < grpBtnSettings.items.length; j++) {
             if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j)) {
@@ -3307,7 +3309,6 @@ class RibbonGroupButton {
                 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
@@ -3338,7 +3339,6 @@ class RibbonGroupButton {
                 if (this.parent.activeLayout === 'Simplified') {
                     let dropdownIcon = null;
                     let 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')) {
@@ -3372,6 +3372,10 @@ class RibbonGroupButton {
             if (grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click) {
                 grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click.call(this, eventArgs);
             }
+            if (this.parent.activeLayout === 'Simplified' && groupButtonEle) {
+                dropdown = getComponent(groupButtonEle, DropDownButton);
+                dropdown.toggle();
+            }
         }
     }
     /**
@@ -3455,7 +3459,6 @@ class RibbonGroupButton {
             else {
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
             }
-            this.grpBtnIndex = 0;
         }
     }
     addGroupButtonHeader(itemID, groupBtnSettings, popupEle) {
@@ -3536,28 +3539,37 @@ class RibbonGroupButton {
         const groupBtnSettings = item.groupButtonSettings;
         let isIconOnly = true;
         const groupButtonEle = itemEle.querySelector('#' + item.id);
-        const dropdown = getComponent(groupButtonEle, DropDownButton);
-        dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
-        const targetEle = dropdown.target;
-        if (targetEle.children.length) {
-            for (let i = 0; i < targetEle.children.length; i++) {
-                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
-                    isIconOnly = false;
-                    break;
+        if (groupButtonEle) {
+            const dropdown = getComponent(groupButtonEle, DropDownButton);
+            dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
+            const targetEle = dropdown.target;
+            if (targetEle.children.length) {
+                for (let i = 0; i < targetEle.children.length; i++) {
+                    if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                        isIconOnly = false;
+                        break;
+                    }
+                }
+                if (isIconOnly) {
+                    targetEle.classList.add('e-icon-btn');
                 }
             }
-            if (isIconOnly) {
-                targetEle.classList.add('e-icon-btn');
-            }
+            targetEle.onclick = () => {
+                if (this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
+                    if (overflowButton.element.classList.contains('e-active')) {
+                        overflowButton.toggle();
+                    }
+                }
+            };
         }
-        targetEle.onclick = () => {
-            if (this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
-                dropdown.toggle();
+        const overflowGroupButtonEle = itemEle.querySelector('#' + item.id + '_grpbtn');
+        if (this.parent.activeLayout === 'Classic' && overflowGroupButtonEle) {
+            overflowGroupButtonEle.onclick = () => {
                 if (overflowButton.element.classList.contains('e-active')) {
                     overflowButton.toggle();
                 }
-            }
-        };
+            };
+        }
     }
     /**
      * Removes the additional event handlers as the item moved into overflow popup.
@@ -3766,8 +3778,6 @@ class RibbonGallery {
                 }
                 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.parent.activeLayout !== 'Simplified' && !isPopup) {
                         galleryContainerEle.style.flexFlow = 'wrap';
                     }
@@ -3878,6 +3888,13 @@ class RibbonGallery {
             galleryWrapper.style.width = itemsWidth + 'px';
         }
     }
+    setWrapperStyle(popup, popupContainerItems) {
+        if (popup.width !== 'auto') {
+            popupContainerItems.forEach((ele) => {
+                ele.style.flexFlow = 'wrap';
+            });
+        }
+    }
     /**
      * Checks the gallery items height.
      *
@@ -3969,11 +3986,7 @@ class RibbonGallery {
                 }
             }
             const popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
-            if (popup.width !== 'auto') {
-                popupContainerItems.forEach((ele) => {
-                    ele.style.flexFlow = 'wrap';
-                });
-            }
+            this.setWrapperStyle(popup, popupContainerItems);
             let isCollideOccurs = false;
             for (let i = 0; i < popupContainerItems.length; i++) {
                 let itemsWidth = 0;
@@ -4148,6 +4161,8 @@ class RibbonGallery {
                 cssClass: 'e-ribbon-gallery-dropdown',
                 disabled: item.disabled,
                 open: () => {
+                    const popupContainerItems = popupContainerEle.querySelectorAll('.e-ribbon-gallery-container');
+                    this.setWrapperStyle(popup, popupContainerItems);
                     this.setFoucsToFirstItem(popupContainerEle, true, item.id);
                 },
                 beforeClose: (args) => {
@@ -4512,7 +4527,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.currentControlIndex = 0;
     }
     wireEvents() {
-        EventHandler.add(window, 'resize', this.resizeHandler, this);
+        this.resizeListener = this.resizeHandler.bind(this);
+        EventHandler.add(window, 'resize', this.resizeListener);
         EventHandler.add(document.body, 'keydown', this.keytipActionHandler, this);
         EventHandler.add(document, 'mousedown', this.mouseEventHandler, this);
         EventHandler.add(document, 'scroll', this.mouseEventHandler, this);
@@ -5228,7 +5244,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (dropDownPopup) {
             dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
             if (isMenu) {
-                dropdown.beforeOpen = () => {
+                dropdown.beforeOpen = (e) => {
                     if (isLeft) {
                         if (item.type === RibbonItemType.Gallery && this.ribbonGalleryModule) {
                             this.ribbonGalleryModule.checkCollision(dropDownPopup, dropDownPopup.element);
@@ -5239,6 +5255,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         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 {
@@ -5532,10 +5554,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
                 break;
             case 'GroupButton':
-                if (this.activeLayout === 'Simplified') {
-                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
-                    break;
-                }
+                this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
+                break;
         }
     }
     createOfTabContainer(groupId, groupHeader, itemEle, tabIndex) {
@@ -6421,9 +6441,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             className: RIBBON_OVERFLOW_TARGET,
             attrs: { 'tabindex': '0' }
         });
+        const overFlowCss = this.cssClass ? SPACE + this.cssClass : '';
         const 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,
@@ -6442,6 +6463,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
                 this.trigger('overflowPopupClose', eventArgs, (ribbonArgs) => {
                     if (ele || ribbonArgs.cancel || groupButtonEle) {
+                        args.element = null;
                         args.cancel = true;
                     }
                 });
@@ -8926,7 +8948,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 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))) {
@@ -9069,7 +9091,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
     }
     unwireEvents() {
-        EventHandler.remove(window, 'resize', this.resizeHandler);
+        EventHandler.remove(window, 'resize', this.resizeListener);
         EventHandler.remove(document.body, 'keydown', this.keytipActionHandler);
         EventHandler.remove(document, 'mousedown', this.mouseEventHandler);
         EventHandler.remove(document, 'scroll', this.mouseEventHandler);
@@ -9485,9 +9507,14 @@ class RibbonFileMenu {
         if (event) {
             const 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();
-            }
+        }
+        const menuOpen = !!args.element.closest('.e-ribbon-menu.e-popup-open');
+        const fileTriggerOpen = !!args.element.closest('.e-ribbon-file-menu.e-popup-open');
+        const 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
+        const isMenuOpen = fileTriggerOpen || (menuOpen && fileMenuOpen);
+        if (!args.element.classList.contains('e-menu-caret-icon') && isMenuOpen) {
+            this.fileMenuDDB.toggle();
         }
     }
     /**