@syncfusion/ej2-ribbon 24.1.44 → 24.2.3

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

@@ -570,6 +570,15 @@ var __decorate$13 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon group button settings.
  */
 class RibbonGroupButtonItem extends ChildProperty {
+    /**
+     * @param {Object} prop - Gets the property of group button.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop, muteOnChange) {
+        super.setProperties(prop, muteOnChange);
+    }
 }
 __decorate$13([
     Property('')
@@ -3046,11 +3055,11 @@ class RibbonGroupButton {
                 for (let j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
-                        grpBtnSettings.items[parseInt(j.toString(), 10)].selected = false;
+                        grpBtnSettings.items[parseInt(j.toString(), 10)].setProperties({ selected: false }, true);
                     }
                 }
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
-                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
+                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);
@@ -3067,10 +3076,10 @@ class RibbonGroupButton {
                 }
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
                 if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
                 }
                 else {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = false;
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: false }, true);
                 }
                 let activeEleCount = 0;
                 for (let n = 0; n < grpBtnSettings.items.length; n++) {
@@ -7410,6 +7419,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (item.cssClass) {
                 itemContainer.classList.add(ribbonItem.cssClass);
             }
+            if (!(ribbonItem.disabled) && itemContainer.classList.contains(DISABLED_CSS)) {
+                itemContainer.classList.remove(DISABLED_CSS);
+            }
             this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
         }
     }
@@ -7458,6 +7470,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.enableDisableItem(itemId, true);
     }
     enableDisableItem(itemId, isDisabled) {
+        let isUpdated = false;
         const itemProp = getItem(this.tabs, itemId);
         if (!itemProp) {
             return;
@@ -7472,30 +7485,33 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         if (ele) {
             const itemEle = closest(ele, '.e-ribbon-item');
-            itemEle.classList.toggle(DISABLED_CSS, itemProp.item.disabled);
             const moduleName = this.getItemModuleName(itemProp.item);
+            isUpdated = isDisabled ? !itemEle.classList.contains(DISABLED_CSS) : itemEle.classList.contains(DISABLED_CSS);
             if (moduleName !== 'template') {
-                if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
-                    updateControlDisabled(ele, 'dropdown-btn', isDisabled);
-                    for (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
-                        const btnEle = document.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
-                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                if (isUpdated) {
+                    if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
+                        updateControlDisabled(ele, 'dropdown-btn', isDisabled);
+                        for (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            const btnEle = document.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
+                            updateControlDisabled(btnEle, 'btn', isDisabled);
+                        }
                     }
-                }
-                else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
-                    for (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
-                        const btnEle = ele.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
-                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                        for (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            const btnEle = ele.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
+                            updateControlDisabled(btnEle, 'btn', isDisabled);
+                        }
+                    }
+                    else {
+                        updateControlDisabled(ele, moduleName, isDisabled);
                     }
-                }
-                else {
-                    updateControlDisabled(ele, moduleName, isDisabled);
                 }
             }
             else {
                 ele.classList.toggle(DISABLED_CSS, isDisabled);
                 ele.toggleAttribute('disabled', isDisabled);
             }
+            itemEle.classList.toggle(DISABLED_CSS, itemProp.item.disabled);
         }
     }
     unwireEvents() {