@syncfusion/ej2-ribbon 30.2.4 → 31.1.22

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

@@ -2636,6 +2636,11 @@ class RibbonSplitButton {
             }
         };
         let target;
+        splitbutton.beforeOpen = (e) => {
+            if (item.splitButtonSettings.beforeOpen) {
+                item.splitButtonSettings.beforeOpen.call(this, e);
+            }
+        };
         splitbutton.beforeClose = (e) => {
             if (item.splitButtonSettings.beforeClose) {
                 item.splitButtonSettings.beforeClose.call(this, e);
@@ -2677,6 +2682,11 @@ class RibbonSplitButton {
         cssClass = cssClass.filter((value) => value !== RIBBON_POPUP_CONTROL);
         splitbutton.cssClass = cssClass.join(SPACE);
         splitbutton.dataBind();
+        splitbutton.beforeOpen = (e) => {
+            if (item.splitButtonSettings.beforeOpen) {
+                item.splitButtonSettings.beforeOpen.call(this, e);
+            }
+        };
         splitbutton.beforeClose = (e) => {
             if (item.splitButtonSettings.beforeClose) {
                 item.splitButtonSettings.beforeClose.call(this, e);
@@ -2764,6 +2774,7 @@ class RibbonSplitButton {
                 (VERTICAL_DDB + SPACE + prop.cssClass).trim() : prop.cssClass;
             control.cssClass = prop.cssClass;
         }
+        delete prop.beforeOpen;
         delete prop.open;
         delete prop.click;
         delete prop.close;
@@ -4772,13 +4783,21 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
         if (this.activeLayout === 'Simplified') {
-            const activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
-            if (!isNullOrUndefined(activePopup) && activePopup.length) {
-                for (let i = 0; i < activePopup.length; i++) {
-                    const dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+            const activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            const 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((popup) => {
+                const dropDownBtn = getInstance(popup, DropDownButton);
+                if (dropDownBtn) {
                     dropDownBtn.toggle();
                 }
-            }
+            });
+            colorPickerPopups.forEach((picker) => {
+                const colorPickerObj = getInstance(picker, ColorPicker);
+                if (colorPickerObj) {
+                    colorPickerObj.toggle();
+                    colorPickerObj.refresh();
+                }
+            });
         }
         const galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
         if (galleryPopupEle) {