@syncfusion/ej2-ribbon 24.1.44 → 24.2.3

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

@@ -713,6 +713,15 @@ var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
     function RibbonGroupButtonItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    /**
+     * @param {Object} prop - Gets the property of group button.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonGroupButtonItem.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
     __decorate$13([
         Property('')
     ], RibbonGroupButtonItem.prototype, "content", void 0);
@@ -3378,11 +3387,11 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 for (var 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);
@@ -3399,10 +3408,10 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 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);
                 }
                 var activeEleCount = 0;
                 for (var n = 0; n < grpBtnSettings.items.length; n++) {
@@ -7822,6 +7831,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             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);
         }
     };
@@ -7870,6 +7882,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.enableDisableItem(itemId, true);
     };
     Ribbon.prototype.enableDisableItem = function (itemId, isDisabled) {
+        var isUpdated = false;
         var itemProp = getItem(this.tabs, itemId);
         if (!itemProp) {
             return;
@@ -7884,30 +7897,33 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
-            itemEle.classList.toggle(DISABLED_CSS, itemProp.item.disabled);
             var 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 (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
-                        var 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 (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            var btnEle = document.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
+                            updateControlDisabled(btnEle, 'btn', isDisabled);
+                        }
                     }
-                }
-                else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
-                    for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
-                        var btnEle = ele.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
-                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                        for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            var 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);
         }
     };
     Ribbon.prototype.unwireEvents = function () {