@syncfusion/ej2-ribbon 25.2.5 → 26.1.38

package/src/ribbon/base/ribbon.js

@@ -410,7 +410,7 @@ var Ribbon = /** @class */ (function (_super) {
             this.ribbonKeyTipModule.removeKeytip();
         }
     };
-    Ribbon.prototype.mouseEventHandler = function (e) {
+    Ribbon.prototype.mouseEventHandler = function () {
         if (this.ribbonKeyTipModule && this.enableKeyTips) {
             this.ribbonKeyTipModule.removeKeytip();
         }
@@ -486,25 +486,24 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.addKeyTip = function (tabIndex, keyTip, id, type) {
         if (this.keyTipElements && this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
             var isKeyTipExist = false;
-            /* eslint-disable */
-            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)][type])) {
-                this.keyTipElements[parseInt(tabIndex.toString(), 10)][type] = [];
+            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type])) {
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type] = [];
             }
-            if (Object.keys(this.keyTipElements[tabIndex][type]).length) {
-                var keytipData = this.keyTipElements[tabIndex][type];
-                for (var i = 0; i < Object.keys(this.keyTipElements[tabIndex][type]).length; i++) {
+            if (Object.keys(this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type]).length) {
+                var keytipData = this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type];
+                for (var i = 0; i < Object.keys(this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type]).length; i++) {
                     if (keytipData[parseInt(i.toString(), 10)].id === id) {
                         isKeyTipExist = true;
                     }
                 }
                 if (!isKeyTipExist) {
-                    this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+                    this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type].
+                        push({ id: id, type: type, keyTip: keyTip });
                 }
             }
             else {
-                this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type].push({ id: id, type: type, keyTip: keyTip });
             }
-            /* eslint-enable */
         }
     };
     Ribbon.prototype.renderTabs = function () {
@@ -573,6 +572,11 @@ var Ribbon = /** @class */ (function (_super) {
         var selectedTabId = e.selectedItem.getAttribute('data-id');
         var selectedIndex = getIndex(this.tabs, (function (tab) { return (tab.id === selectedTabId); }));
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
+        var selectedContent = this.tabObj.items[parseInt(selectedIndex.toString(), 10)].content;
+        if ((!selectedContent.querySelector('.' + constants.RIBBON_GROUP)) && (this.tabs[parseInt(selectedIndex.toString(), 10)].groups.length !== 0)) {
+            var elements = this.createGroups(this.tabs[parseInt(selectedIndex.toString(), 10)].groups, selectedIndex);
+            append(elements, selectedContent);
+        }
         var isContextual = this.isContextualTab(selectedTabId);
         this.updateSelectedState(selectedTabId);
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
@@ -591,10 +595,10 @@ var Ribbon = /** @class */ (function (_super) {
                 this.isUpdateItems = false;
             }
         }
-        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
-        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule) {
-            this.ribbonGalleryModule.checkAvailableHeight(selectedIndex, e.selectedContent.firstChild);
+        if (this.ribbonGalleryModule) {
+            this.ribbonGalleryModule.checkAvailableHeight(e.selectedContent.firstChild);
         }
+        this.checkOverflow(selectedIndex, selectedContent);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + constants.RIBBON_TAB_ACTIVE);
@@ -623,7 +627,8 @@ var Ribbon = /** @class */ (function (_super) {
                         break;
                     }
                 }
-                this.contextualTabs[parseInt(i.toString(), 10)].setProperties({ isSelected: isSelected }, true);
+                this.contextualTabs[parseInt(i.toString(), 10)].
+                    setProperties({ isSelected: isSelected }, true);
             }
         }
     };
@@ -821,7 +826,8 @@ var Ribbon = /** @class */ (function (_super) {
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                             this.setItemSize(itemEle, item);
                         }
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, true);
                         }
                     }
@@ -851,6 +857,7 @@ var Ribbon = /** @class */ (function (_super) {
         return isEmptyCollection;
     };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
+        var _this = this;
         var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.Gallery || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
         var dropDownPopup = dropdown.dropDown;
         // popup is on right if (isGroupOF && isMenu)
@@ -862,6 +869,9 @@ var Ribbon = /** @class */ (function (_super) {
             if (isMenu) {
                 dropdown.beforeOpen = function () {
                     if (isLeft) {
+                        if (item.type === RibbonItemType.Gallery && _this.ribbonGalleryModule) {
+                            _this.ribbonGalleryModule.checkCollision(dropDownPopup, dropDownPopup.element);
+                        }
                         dropDownPopup.element.style.setProperty('visibility', 'hidden');
                         dropDownPopup.element.style.setProperty('display', 'block');
                         dropDownPopup.setProperties({ offsetX: -1 * dropDownPopup.element.offsetWidth });
@@ -917,7 +927,8 @@ var Ribbon = /** @class */ (function (_super) {
                             break;
                         }
                         var groupEle = tabContent.querySelector('#' + collection.id);
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, false);
                         }
                         groupEle.append(itemContainer);
@@ -962,7 +973,8 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
-                    if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
+                    if (overflowtarget.childElementCount === 0 ||
+                        (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                         this.removeOverflowButton(overflowDDB);
                     }
                 }
@@ -1075,8 +1087,12 @@ var Ribbon = /** @class */ (function (_super) {
                     overflowBtnTarget.classList.add('e-hide-group');
                 }
             }
-            isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + constants.RIBBON_ITEM))
-                : overflowBtnTarget.append(itemEle);
+            if (isResize) {
+                overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + constants.RIBBON_ITEM));
+            }
+            else {
+                overflowBtnTarget.append(itemEle);
+            }
         }
         else {
             if (!this.overflowDDB) {
@@ -1088,7 +1104,8 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 this.overflowDDB.element.classList.remove(constants.HIDE_CSS);
                 var overflowEle = this.overflowDDB.target;
-                var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
+                var ofTabContainer = overflowEle.querySelector('#' +
+                    this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
                 if (ofTabContainer) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + constants.CONTAINER_ID);
                     if (!ofGroupContainer) {
@@ -1106,7 +1123,12 @@ var Ribbon = /** @class */ (function (_super) {
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
-                    isResize ? ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + constants.RIBBON_ITEM)) : ofGroupContainer.append(itemEle);
+                    if (isResize) {
+                        ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + constants.RIBBON_ITEM));
+                    }
+                    else {
+                        ofGroupContainer.append(itemEle);
+                    }
                 }
                 else {
                     this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -1146,7 +1168,7 @@ var Ribbon = /** @class */ (function (_super) {
                 break;
             case 'Gallery':
                 if (this.activeLayout === 'Simplified') {
-                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle, overflowButton);
+                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle);
                 }
                 break;
             case 'GroupButton':
@@ -1164,7 +1186,8 @@ var Ribbon = /** @class */ (function (_super) {
         var overflowtarget = this.overflowDDB.target;
         overflowtarget.append(ofTabContainer);
         var itemProp = getGroup(this.tabs, groupId);
-        var ofGroupContainer = itemProp.group.overflowHeader ? this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
+        var ofGroupContainer = itemProp.group.overflowHeader ?
+            this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
         ofGroupContainer.append(itemEle);
         ofTabContainer.append(ofGroupContainer);
         if (tabIndex === this.selectedTab) {
@@ -1522,7 +1545,12 @@ var Ribbon = /** @class */ (function (_super) {
                         }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canReduceItem(item)) {
-                            item.type !== RibbonItemType.GroupButton ? setWidth(item.id) : setWidth(item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                            if (item.type !== RibbonItemType.GroupButton) {
+                                setWidth(item.id);
+                            }
+                            else {
+                                setWidth(item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                            }
                             reduceItemsToSmall(k, l, l);
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
@@ -1775,7 +1803,12 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.handleContentSize = function (itemEle, isRemoveOverflow) {
         var itemContainer = itemEle.closest('.' + constants.RIBBON_GROUP_CONTENT);
-        (isRemoveOverflow ? (itemContainer.classList.add(constants.RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT)));
+        if (isRemoveOverflow) {
+            itemContainer.classList.add(constants.RIBBON_CONTENT_HEIGHT);
+        }
+        else {
+            itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT);
+        }
     };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
         if (itemEle) {
@@ -1977,14 +2010,15 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.ribbonTabSelecting = function (e) {
         var _this = this;
         this.currentControlIndex = 0;
-        var nextTabId = e.selectingItem.getAttribute('data-id');
+        var nextTabId = e.selectingItem ? e.selectingItem.getAttribute('data-id') : null;
         var previousTabId = e.previousItem.getAttribute('data-id');
         var nextIndex = getIndex(this.tabs, (function (tab) { return (tab.id === nextTabId); }));
         var isContextual = this.isContextualTab(nextTabId);
         var previousIndex = getIndex(this.tabs, (function (tab) { return (tab.id === previousTabId); }));
         nextIndex = nextIndex === -1 ? this.selectedTab : nextIndex;
         var eventArgs = {
-            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex, isContextual: isContextual
+            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex,
+            selectedIndex: nextIndex, isContextual: isContextual
         };
         this.trigger('tabSelecting', eventArgs, function (args) {
             if (args.cancel) {
@@ -2042,9 +2076,10 @@ var Ribbon = /** @class */ (function (_super) {
             this.element.classList.add(constants.RIBBON_SIMPLIFIED_MODE);
         }
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
+        if (this.ribbonGalleryModule) {
+            this.ribbonGalleryModule.checkAvailableHeight(activeContent);
+        }
         this.checkOverflow(this.selectedTab, activeContent);
-        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule)
-            this.ribbonGalleryModule.checkAvailableHeight(this.selectedTab, activeContent);
     };
     Ribbon.prototype.addOverflowButton = function (btnId, isGroupOF) {
         var _this = this;
@@ -2102,7 +2137,8 @@ var Ribbon = /** @class */ (function (_super) {
             items = currentList.getElementsByClassName('e-ribbon-item');
         }
         var control = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control');
-        var comboBoxEle = control && control.classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
+        var comboBoxEle = control && control.classList.contains('e-combobox') ?
+            items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
         var ribbonItem;
         var templateEle;
         if (comboBoxEle === null || (e.key === 'Tab') || this.itemIndex < 0) {
@@ -2159,7 +2195,7 @@ var Ribbon = /** @class */ (function (_super) {
             target.setAttribute('index', this.itemIndex.toString());
         }
         var currentItemIndex = parseInt(target.getAttribute('index'), 10);
-        var itemType = "";
+        var itemType = '';
         var controlItem = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control') : null;
         if (controlItem) {
             itemType = controlItem.getAttribute('data-control');
@@ -2189,12 +2225,20 @@ var Ribbon = /** @class */ (function (_super) {
         }
         if (((itemType === 'SplitButton') && (e.key === 'ArrowRight' || e.key === 'ArrowLeft'))) {
             if (e.key === 'ArrowRight') {
-                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus() :
+                if (this.enableRtl) {
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+                }
+                else {
                     items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus();
+                }
             }
             if (e.key === 'ArrowLeft') {
-                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus() :
+                if (this.enableRtl) {
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus();
+                }
+                else {
                     items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+                }
             }
         }
         if (e.key === 'Enter') {
@@ -2305,7 +2349,8 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.reRenderTabs = function (tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        for (var key in tabs) {
+        for (var _i = 0, _a = Object.keys(tabs); _i < _a.length; _i++) {
+            var key = _a[_i];
             var index = parseInt(key, 10);
             var tab = tabs[parseInt(index.toString(), 10)];
             var isNewTab = false;
@@ -2350,13 +2395,13 @@ var Ribbon = /** @class */ (function (_super) {
                     }
                     // Check whether group is passed by the user, and if it is, then remove the old values.
                     if (tab.groups) {
-                        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-                            var group = groups_1[_i];
+                        for (var _b = 0, groups_1 = groups; _b < groups_1.length; _b++) {
+                            var group = groups_1[_b];
                             var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID) : null;
-                            for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
-                                var collection = _b[_a];
-                                for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
-                                    var item = _d[_c];
+                            for (var _c = 0, _d = group.collections; _c < _d.length; _c++) {
+                                var collection = _d[_c];
+                                for (var _e = 0, _f = collection.items; _e < _f.length; _e++) {
+                                    var item = _f[_e];
                                     var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                                     if (ele) {
                                         this.destroyFunction(item, ele);
@@ -2454,7 +2499,8 @@ var Ribbon = /** @class */ (function (_super) {
                                     itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
                                     if (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)) {
                                         this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
                                         }
                                     }
@@ -2553,7 +2599,8 @@ var Ribbon = /** @class */ (function (_super) {
                                     var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
                                     if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
                                         }
                                         this.removeOverflowEvent(item, itemEle);
@@ -2578,7 +2625,8 @@ var Ribbon = /** @class */ (function (_super) {
                                 }
                             }
                             if (group.enableGroupOverflow && overflowDDB) {
-                                if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
+                                if (overflowtarget.childElementCount === 0 ||
+                                    (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                                     this.removeOverflowButton(overflowDDB);
                                 }
                             }
@@ -2691,7 +2739,12 @@ var Ribbon = /** @class */ (function (_super) {
         // eslint-disable-next-line
         var groupIndex = initialProps[key].indexOf(groupEle.id);
         if (groupIndex !== -1) {
-            key === 'hiddenGroups' ? groupEle.classList.add('e-hidden') : groupEle.classList.add('e-disabled');
+            if (key === 'hiddenGroups') {
+                groupEle.classList.add('e-hidden');
+            }
+            else {
+                groupEle.classList.add('e-disabled');
+            }
         }
     };
     Ribbon.prototype.validateItemSize = function () {
@@ -2816,7 +2869,8 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (item.type === RibbonItemType.GroupButton) {
                 for (var i_7 = 0; i_7 < item.groupButtonSettings.items.length; i_7++) {
-                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] && item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip) {
+                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] &&
+                        item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip) {
                         this.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip, item.id + (constants.RIBBON_GROUP_BUTTON_ID + i_7), 'item');
                     }
                 }
@@ -2853,7 +2907,8 @@ var Ribbon = /** @class */ (function (_super) {
             this.createRibbonItem(item, itemEle);
             if ((this.activeLayout === 'Simplified') && ((item.displayOptions === DisplayMode.Overflow) || (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)))) {
                 this.createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer);
-                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                    (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                     this.updatePopupItems(item, itemEle, isGroupOF, true);
                 }
             }
@@ -3073,8 +3128,8 @@ var Ribbon = /** @class */ (function (_super) {
                                 ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) :
                                     contentEle.querySelector('#' + item.id);
                                 if (item.type === RibbonItemType.GroupButton) {
-                                    ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + constants.RIBBON_GROUP_BUTTON_ID) :
-                                        contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                                    ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id +
+                                        constants.RIBBON_GROUP_BUTTON_ID) : contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
                                 }
                                 if (item.type === RibbonItemType.Gallery) {
                                     ele = contentEle.querySelector('#' + item.id + constants.CONTAINER_ID);
@@ -3241,6 +3296,7 @@ var Ribbon = /** @class */ (function (_super) {
      * Shows a specific tab in the ribbon.
      *
      * @param {string} tabId - The ID of the tab to be shown.
+     * @param {boolean} isContextual - The boolean if the rendering is contextual.
      * @returns {void}
      */
     Ribbon.prototype.showTab = function (tabId, isContextual) {
@@ -3251,6 +3307,7 @@ var Ribbon = /** @class */ (function (_super) {
      * Hides a specific tab in the ribbon.
      *
      * @param {string} tabId - The ID of the tab to be hidden.
+     * @param {boolean} isContextual - The boolean if the rendering is contextual.
      * @returns {void}
      */
     Ribbon.prototype.hideTab = function (tabId, isContextual) {
@@ -3276,7 +3333,9 @@ var Ribbon = /** @class */ (function (_super) {
             if (contextualTab_1) {
                 var isTabHidden = true;
                 var _loop_5 = function (i) {
-                    var index_1 = getIndex(this_5.tabs, function (e) { return e.id === contextualTab_1.tabs[parseInt(i.toString(), 10)].id; });
+                    var index_1 = getIndex(this_5.tabs, function (e) {
+                        return e.id === contextualTab_1.tabs[parseInt(i.toString(), 10)].id;
+                    });
                     if (index_1 !== -1) {
                         var toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index_1.toString(), 10)];
                         if (!(toolbarEle.classList.contains('e-hidden'))) {
@@ -3320,6 +3379,9 @@ var Ribbon = /** @class */ (function (_super) {
         if (index === -1) {
             return;
         }
+        var tbItems = this.tabObj.items[parseInt(index.toString(), 10)].content;
+        this.tabObj.element.querySelector('#' + tabId + constants.HEADER_ID).classList[value ? 'remove' : 'add']('e-disabled');
+        tbItems.classList[value ? 'remove' : 'add']('e-disabled');
         this.tabObj.enableTab(index, value);
     };
     /**
@@ -3365,8 +3427,8 @@ var Ribbon = /** @class */ (function (_super) {
                         var item = _d[_c];
                         var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                         if (item.type === RibbonItemType.GroupButton && this.activeLayout === 'Classic') {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + constants.RIBBON_GROUP_BUTTON_ID) :
-                                contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id +
+                                constants.RIBBON_GROUP_BUTTON_ID) : contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
                         }
                         if (ele) {
                             this.destroyFunction(item, ele);
@@ -3464,7 +3526,8 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (this.activeLayout === RibbonLayout.Simplified) {
                 if (itemProp.group.enableGroupOverflow) {
-                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount
+                        === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                         this.removeOverflowButton(dropdown);
                     }
                 }
@@ -3537,13 +3600,23 @@ var Ribbon = /** @class */ (function (_super) {
                     overflowtarget = overflowDDB.target;
                 }
                 if (overflowtarget) {
-                    isHidden ? overflowtarget.classList.add('e-hidden') : overflowtarget.classList.remove('e-hidden');
+                    if (isHidden) {
+                        overflowtarget.classList.add('e-hidden');
+                    }
+                    else {
+                        overflowtarget.classList.remove('e-hidden');
+                    }
                 }
             }
             else if (ofTabContainer) {
                 var grpContainer = ofTabContainer.querySelector('#' + groupID + constants.CONTAINER_ID);
                 if (grpContainer) {
-                    isHidden ? grpContainer.classList.add('e-hidden') : grpContainer.classList.remove('e-hidden');
+                    if (isHidden) {
+                        grpContainer.classList.add('e-hidden');
+                    }
+                    else {
+                        grpContainer.classList.remove('e-hidden');
+                    }
                 }
             }
         }
@@ -3581,38 +3654,35 @@ var Ribbon = /** @class */ (function (_super) {
                 hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
             }
             if (hiddenProps) {
-                /* eslint-disable */
-                if (!hiddenProps[key]) {
-                    hiddenProps[key] = [];
+                if (!hiddenProps["" + key]) {
+                    hiddenProps["" + key] = [];
                 }
-                if (hiddenProps[key].length) {
-                    var index = hiddenProps[key].indexOf(id);
+                if (hiddenProps["" + key].length) {
+                    var index = hiddenProps["" + key].indexOf(id);
                     if (index === -1) {
-                        hiddenProps[key].push(id);
+                        hiddenProps["" + key].push(id);
                     }
                 }
                 else {
-                    hiddenProps[key].push(id);
+                    hiddenProps["" + key].push(id);
                 }
-                /* eslint-enable */
             }
         }
     };
     Ribbon.prototype.updateItemsSimplifiedWidth = function (tabIndex, key) {
         var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
-        /* eslint-disable */
-        if (hiddenProps && hiddenProps[key] && hiddenProps[key].length) {
+        if (hiddenProps && hiddenProps["" + key] && hiddenProps["" + key].length) {
             var _loop_6 = function (i) {
-                var contentEle = this_6.tabObj.items[tabIndex].content;
+                var contentEle = this_6.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
                 var hiddenEle;
                 var groupEle = void 0;
                 var isGroupHidden = false;
                 var widthDifference = 0;
                 if (key === 'hideGroup' || key === 'showGroup') {
-                    hiddenEle = contentEle.querySelector('#' + hiddenProps[key][i]);
+                    hiddenEle = contentEle.querySelector('#' + hiddenProps["" + key][parseInt(i.toString(), 10)]);
                 }
                 else {
-                    hiddenEle = contentEle.querySelector('#' + hiddenProps[key][i] + constants.CONTAINER_ID);
+                    hiddenEle = contentEle.querySelector('#' + hiddenProps["" + key][parseInt(i.toString(), 10)] + constants.CONTAINER_ID);
                 }
                 if (hiddenEle) {
                     if (key === 'hideGroup' || key === 'hideItem') {
@@ -3672,15 +3742,15 @@ var Ribbon = /** @class */ (function (_super) {
                         groupEle.classList.add('e-ribbon-emptyCollection');
                     }
                 }
-                var index = hiddenProps[key].indexOf(hiddenProps[key][i]);
+                var index = hiddenProps["" + key].indexOf(hiddenProps["" + key][parseInt(i.toString(), 10)]);
                 if (index !== -1) {
-                    hiddenProps[key].splice(index, 1);
+                    hiddenProps["" + key].splice(index, 1);
                     i--;
                 }
                 out_i_1 = i;
             };
             var this_6 = this, out_i_1;
-            for (var i = 0; i < hiddenProps[key].length; i++) {
+            for (var i = 0; i < hiddenProps["" + key].length; i++) {
                 _loop_6(i);
                 i = out_i_1;
             }
@@ -3814,7 +3884,12 @@ var Ribbon = /** @class */ (function (_super) {
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + groupID);
         if (groupEle) {
-            isDisabled ? groupEle.classList.add('e-disabled') : groupEle.classList.remove('e-disabled');
+            if (isDisabled) {
+                groupEle.classList.add('e-disabled');
+            }
+            else {
+                groupEle.classList.remove('e-disabled');
+            }
         }
         else {
             this.updateInitialProps(itemProp.tabIndex, groupID, 'disabledGroups', isDisabled);
@@ -3829,13 +3904,23 @@ var Ribbon = /** @class */ (function (_super) {
                     overflowtarget = overflowDDB.target;
                 }
                 if (overflowtarget) {
-                    isDisabled ? overflowtarget.classList.add('e-disabled') : overflowtarget.classList.remove('e-disabled');
+                    if (isDisabled) {
+                        overflowtarget.classList.add('e-disabled');
+                    }
+                    else {
+                        overflowtarget.classList.remove('e-disabled');
+                    }
                 }
             }
             else if (ofTabContainer) {
                 var grpContainer = ofTabContainer.querySelector('#' + groupID + constants.CONTAINER_ID);
                 if (grpContainer) {
-                    isDisabled ? grpContainer.classList.add('e-disabled') : grpContainer.classList.remove('e-disabled');
+                    if (isDisabled) {
+                        grpContainer.classList.add('e-disabled');
+                    }
+                    else {
+                        grpContainer.classList.remove('e-disabled');
+                    }
                 }
             }
         }
@@ -4061,19 +4146,22 @@ var Ribbon = /** @class */ (function (_super) {
             initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
         }
         if (initialProps) {
-            /* eslint-disable */
-            if (!initialProps[key])
-                initialProps[key] = [];
-            var itemIndex = initialProps[key].indexOf(id);
+            if (!initialProps["" + key]) {
+                initialProps["" + key] = [];
+            }
+            var itemIndex = initialProps["" + key].indexOf(id);
             if (isInsert) {
-                if (itemIndex === -1)
-                    initialProps[key].push(id);
+                if (itemIndex === -1) {
+                    initialProps["" + key].push(id);
+                }
             }
             else {
-                if (itemIndex !== -1)
-                    initialProps[key].splice(itemIndex, 1);
-                initialProps[key].length === 0 && delete initialProps[key];
-                /* eslint-enable */
+                if (itemIndex !== -1) {
+                    initialProps["" + key].splice(itemIndex, 1);
+                }
+                if (initialProps["" + key].length === 0) {
+                    delete initialProps["" + key];
+                }
                 if (Object.keys(initialProps).length === 0) {
                     delete this.initialPropsData[parseInt(tabIndex.toString(), 10)];
                 }
@@ -4134,7 +4222,12 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowtarget = overflowDDB.target;
             }
             if (overflowtarget) {
-                isHidden ? overflowtarget.classList.add('e-hide-group') : overflowtarget.classList.remove('e-hide-group');
+                if (isHidden) {
+                    overflowtarget.classList.add('e-hide-group');
+                }
+                else {
+                    overflowtarget.classList.remove('e-hide-group');
+                }
             }
         }
         else {
@@ -4144,7 +4237,12 @@ var Ribbon = /** @class */ (function (_super) {
                 if (ofTabContainer) {
                     var grpContainer = ofTabContainer.querySelector('#' + groupID + constants.CONTAINER_ID);
                     if (grpContainer) {
-                        isHidden ? grpContainer.classList.add('e-hide-group') : grpContainer.classList.remove('e-hide-group');
+                        if (isHidden) {
+                            grpContainer.classList.add('e-hide-group');
+                        }
+                        else {
+                            grpContainer.classList.remove('e-hide-group');
+                        }
                     }
                 }
             }
@@ -4184,8 +4282,8 @@ var Ribbon = /** @class */ (function (_super) {
                             var item = _d[_c];
                             var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                             if (item.type === RibbonItemType.GroupButton && this.activeLayout === 'Classic') {
-                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + constants.RIBBON_GROUP_BUTTON_ID) :
-                                    contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id +
+                                    constants.RIBBON_GROUP_BUTTON_ID) : contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
                             }
                             if (ele) {
                                 this.destroyFunction(item, ele);
@@ -4291,7 +4389,8 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (this.activeLayout === RibbonLayout.Simplified) {
                 if (itemProp.group.enableGroupOverflow) {
-                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount
+                        === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                         this.removeOverflowButton(dropdown);
                     }
                 }
@@ -4589,7 +4688,7 @@ var Ribbon = /** @class */ (function (_super) {
      * Gets the Ribbon item model associated with the specified item ID.
      *
      * @param {string} itemId - The unique ID of the Ribbon item.
-     * @returns {RibbonItemModel}
+     * @returns {RibbonItemModel} - Returns the Ribbon item model.
      */
     Ribbon.prototype.getItem = function (itemId) {
         return getItem(this.tabs, itemId).item;
@@ -4611,7 +4710,8 @@ var Ribbon = /** @class */ (function (_super) {
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
             var moduleName = this.getItemModuleName(itemProp.item);
-            isUpdated = isDisabled ? !itemEle.classList.contains(constants.DISABLED_CSS) : itemEle.classList.contains(constants.DISABLED_CSS);
+            isUpdated = isDisabled ? !itemEle.classList.contains(constants.DISABLED_CSS) :
+                itemEle.classList.contains(constants.DISABLED_CSS);
             if (moduleName !== 'template') {
                 if (isUpdated) {
                     if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
@@ -4752,13 +4852,14 @@ var Ribbon = /** @class */ (function (_super) {
                         }
                     }
                     break;
-                case 'selectedTab':
+                case 'selectedTab': {
                     var tabEle = this.tabObj.element;
                     var toolbarItem = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(newProp.selectedTab.toString(), 10)];
                     if (!(toolbarItem.classList.contains('e-hidden') || toolbarItem.classList.contains('e-disable'))) {
                         this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
                     }
                     break;
+                }
                 case 'tabAnimation':
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
                     break;
@@ -4776,21 +4877,23 @@ var Ribbon = /** @class */ (function (_super) {
                     this.element.style.width = formatUnit(newProp.width);
                     this.refreshLayout();
                     break;
-                case 'fileMenu':
+                case 'fileMenu': {
                     if (this.ribbonFileMenuModule) {
                         this.ribbonFileMenuModule.updateFileMenu(this.fileMenu);
                     }
                     var toolbarEle = this.tabObj['tbObj'];
                     toolbarEle.refreshOverflow();
                     break;
-                case 'backStageMenu':
+                }
+                case 'backStageMenu': {
                     if (this.ribbonBackstageModule) {
                         this.ribbonBackstageModule.updateBackStageMenu(this.backStageMenu);
                     }
                     var toolbarElement = this.tabObj['tbObj'];
                     toolbarElement.refreshOverflow();
                     break;
-                case 'helpPaneTemplate':
+                }
+                case 'helpPaneTemplate': {
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
                         this.ribbonTempEle = null;
@@ -4802,8 +4905,14 @@ var Ribbon = /** @class */ (function (_super) {
                     var toolbar_1 = this.tabObj['tbObj'];
                     toolbar_1.refreshOverflow();
                     break;
+                }
                 case 'hideLayoutSwitcher':
-                    this.hideLayoutSwitcher ? this.removeExpandCollapse() : this.addExpandCollapse();
+                    if (this.hideLayoutSwitcher) {
+                        this.removeExpandCollapse();
+                    }
+                    else {
+                        this.addExpandCollapse();
+                    }
                     break;
             }
         }