@syncfusion/ej2-ribbon 22.2.12 → 23.1.36

package/src/ribbon/base/ribbon.js

@@ -20,10 +20,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { addClass, append, Event, Collection, Complex, Component, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEvents } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, isUndefined, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';
 import { Tab, TabAnimationSettings, HScroll, Toolbar } from '@syncfusion/ej2-navigations';
-import { RibbonTab, FileMenuSettings } from '../models/index';
+import { RibbonTab, FileMenuSettings, BackStageMenu } from '../models/index';
 import { DisplayMode, RibbonLayout } from './interface';
 import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';
-import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSplitButton } from '../items/index';
+import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton } from '../items/index';
 import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';
 import * as constants from './constant';
 import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
@@ -41,7 +41,7 @@ var Ribbon = /** @class */ (function (_super) {
      */
     function Ribbon(options, element) {
         var _this = this;
-        Ribbon_1.Inject(RibbonButton, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonComboBox);
+        Ribbon_1.Inject(RibbonButton, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonComboBox, RibbonGroupButton);
         _this = _super.call(this, options, element) || this;
         return _this;
     }
@@ -91,7 +91,7 @@ var Ribbon = /** @class */ (function (_super) {
      */
     Ribbon.prototype.requiredModules = function () {
         var modules = [];
-        modules.push({ member: 'ribbonButton', args: [this] }, { member: 'ribbonDropDown', args: [this] }, { member: 'ribbonSplitButton', args: [this] }, { member: 'ribbonCheckBox', args: [this] }, { member: 'ribbonColorPicker', args: [this] }, { member: 'ribbonComboBox', args: [this] }, { member: 'ribbonFileMenu', args: [this] });
+        modules.push({ member: 'ribbonButton', args: [this] }, { member: 'ribbonDropDown', args: [this] }, { member: 'ribbonSplitButton', args: [this] }, { member: 'ribbonCheckBox', args: [this] }, { member: 'ribbonColorPicker', args: [this] }, { member: 'ribbonComboBox', args: [this] }, { member: 'ribbonGroupButton', args: [this] }, { member: 'ribbonFileMenu', args: [this] }, { member: 'ribbonBackstage', args: [this] });
         return modules;
     };
     Ribbon.prototype.initialize = function () {
@@ -105,6 +105,9 @@ var Ribbon = /** @class */ (function (_super) {
         if (this.ribbonFileMenuModule) {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
+        if (this.ribbonBackstageModule) {
+            this.ribbonBackstageModule.createBackStage(this.backStageMenu);
+        }
         this.createHelpPaneTemplate();
         var toolbar = this.tabObj['tbObj'];
         toolbar.refreshOverflow();
@@ -401,7 +404,9 @@ var Ribbon = /** @class */ (function (_super) {
         this.switchLayout();
     };
     Ribbon.prototype.tabCreated = function () {
-        this.addExpandCollapse();
+        if (!this.hideLayoutSwitcher) {
+            this.addExpandCollapse();
+        }
         this.renderInitialTab(this.selectedTab);
     };
     Ribbon.prototype.ribbonTabSelected = function (e) {
@@ -550,7 +555,7 @@ var Ribbon = /** @class */ (function (_super) {
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                             this.setItemSize(itemEle, item);
                         }
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, true);
                         }
                     }
@@ -562,7 +567,7 @@ var Ribbon = /** @class */ (function (_super) {
         }
     };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
-        var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown) ? DropDownButton : SplitButton);
+        var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
         var dropDownPopup = dropdown.dropDown;
         // popup is on right if (isGroupOF && isMenu)
         // The position is reversed if RTL is enabled.
@@ -621,7 +626,7 @@ var Ribbon = /** @class */ (function (_super) {
                             break;
                         }
                         var groupEle_1 = tabContent.querySelector('#' + collection.id);
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, false);
                         }
                         groupEle_1.append(itemContainer);
@@ -667,6 +672,8 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer) {
         var overflowButton;
+        var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
+        var isDisabledGroup = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             var overflowDDB = groupContainer.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -677,6 +684,9 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
+            if (isDisabledGroup && isDisabledGroup.classList.contains('e-disabled')) {
+                overflowButton.target.classList.add('e-disabled');
+            }
             overflowButton.target.append(itemEle);
         }
         else {
@@ -694,6 +704,9 @@ var Ribbon = /** @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + constants.CONTAINER_ID);
                     if (!ofGroupContainer) {
                         ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
+                        if (isDisabledGroup && isDisabledGroup.classList.contains('e-disabled')) {
+                            ofGroupContainer.classList.add('e-disabled');
+                        }
                         ofTabContainer.append(ofGroupContainer);
                     }
                     ofGroupContainer.append(itemEle);
@@ -728,6 +741,11 @@ var Ribbon = /** @class */ (function (_super) {
             case 'ComboBox':
                 this.ribbonComboBoxModule.addOverFlowEvents(item, itemEle, overflowButton);
                 break;
+            case 'GroupButton':
+                if (this.activeLayout === 'Simplified') {
+                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle);
+                    break;
+                }
         }
     };
     Ribbon.prototype.createOfTabContainer = function (groupId, groupHeader, itemEle, tabIndex) {
@@ -838,7 +856,12 @@ var Ribbon = /** @class */ (function (_super) {
                 var ele = activeContent.querySelector('#' + item.id + constants.CONTAINER_ID);
                 shrinkEle.appendChild(ele);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
-                _this.setItemSize(ele.querySelector('#' + item.id), item);
+                if (item.type === RibbonItemType.GroupButton && _this.activeLayout === 'Classic') {
+                    _this.setItemSize(ele.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID), item);
+                }
+                else {
+                    _this.setItemSize(ele.querySelector('#' + item.id), item);
+                }
             }
         };
         var moveCollectionToColumn = function (start, end) {
@@ -852,7 +875,12 @@ var Ribbon = /** @class */ (function (_super) {
                 var ele = activeContent.querySelector('#' + collection.id);
                 shrinkEle.appendChild(ele);
                 collection.items[0].setProperties({ activeSize: RibbonItemSize.Medium }, true);
-                _this.setItemSize(ele.querySelector('#' + collection.items[0].id), collection.items[0]);
+                if (collection.items[0].type === RibbonItemType.GroupButton && _this.activeLayout === 'Classic') {
+                    _this.setItemSize(ele.querySelector('#' + collection.items[0].id + constants.RIBBON_GROUP_BUTTON_ID), collection.items[0]);
+                }
+                else {
+                    _this.setItemSize(ele.querySelector('#' + collection.items[0].id), collection.items[0]);
+                }
             }
         };
         var orientation = group.orientation;
@@ -947,6 +975,9 @@ var Ribbon = /** @class */ (function (_super) {
                 if (item.displayOptions & DisplayMode.Classic) {
                     var ele_1 = activeContent.querySelector('#' + item.id);
                     item.setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    if (item.type === RibbonItemType.GroupButton) {
+                        ele_1 = activeContent.querySelector('#' + item.id + '_grpbtn');
+                    }
                     _this.setItemSize(ele_1, item);
                 }
             };
@@ -968,6 +999,9 @@ var Ribbon = /** @class */ (function (_super) {
                 if (collection.items[0].displayOptions & DisplayMode.Classic) {
                     var ele_2 = activeContent.querySelector('#' + collection.items[0].id);
                     collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    if (collection.items[0].type === RibbonItemType.GroupButton) {
+                        ele_2 = activeContent.querySelector('#' + collection.items[0].id + constants.RIBBON_GROUP_BUTTON_ID);
+                    }
                     _this.setItemSize(ele_2, collection.items[0]);
                 }
             };
@@ -1067,7 +1101,7 @@ var Ribbon = /** @class */ (function (_super) {
                         }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canReduceItem(item)) {
-                            setWidth(item.id);
+                            item.type !== RibbonItemType.GroupButton ? setWidth(item.id) : setWidth(item.id + constants.RIBBON_GROUP_BUTTON_ID);
                             reduceItemsToSmall(k, l, l);
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
@@ -1105,6 +1139,9 @@ var Ribbon = /** @class */ (function (_super) {
             if (item.displayOptions & DisplayMode.Classic) {
                 var ele_4 = parentEle.id === item.id ? parentEle : parentEle.querySelector('#' + item.id);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
+                if (item.type === RibbonItemType.GroupButton) {
+                    ele_4 = document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                }
                 _this.setItemSize(ele_4, item);
             }
         };
@@ -1115,6 +1152,9 @@ var Ribbon = /** @class */ (function (_super) {
             if (item.displayOptions & DisplayMode.Classic) {
                 var ele_5 = activeContent.querySelector('#' + collections[parseInt(i.toString(), 10)].items[0].id);
                 collections[parseInt(i.toString(), 10)].items[0].setProperties({ activeSize: RibbonItemSize.Medium }, true);
+                if (item.type === RibbonItemType.GroupButton) {
+                    ele_5 = activeContent.querySelector('#' + collections[parseInt(i.toString(), 10)].items[0].id + constants.RIBBON_GROUP_BUTTON_ID);
+                }
                 _this.setItemSize(ele_5, collections[parseInt(i.toString(), 10)].items[0]);
             }
         };
@@ -1131,6 +1171,9 @@ var Ribbon = /** @class */ (function (_super) {
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canExpandItem(item)) {
                             var itemEle = activeContent.querySelector('#' + item.id);
+                            if (item.type === 'GroupButton') {
+                                itemEle = activeContent.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                            }
                             var valString = itemEle.getAttribute('data-medium-width');
                             var value = valString ? parseInt(valString, 10) : null;
                             if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
@@ -1232,8 +1275,11 @@ var Ribbon = /** @class */ (function (_super) {
                     var container = parentEle.querySelector('#' + item.id + constants.CONTAINER_ID);
                     var ele_6 = container.querySelector('#' + item.id);
                     item.setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    if (item.type === RibbonItemType.GroupButton) {
+                        ele_6 = container.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                    }
                     _this.setItemSize(ele_6, item);
-                    parentEle.insertAdjacentElement('afterend', container);
+                    parentEle.insertAdjacentElement('beforebegin', container);
                 }
             };
             reduce(start);
@@ -1254,8 +1300,11 @@ var Ribbon = /** @class */ (function (_super) {
                     var collectionEle = parentEle.querySelector('#' + collection.id);
                     var ele_7 = collectionEle.querySelector('#' + collection.items[0].id);
                     collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    if (collection.items[0].type === RibbonItemType.GroupButton) {
+                        ele_7 = collectionEle.querySelector('#' + collection.items[0].id + constants.RIBBON_GROUP_BUTTON_ID);
+                    }
                     _this.setItemSize(ele_7, collection.items[0]);
-                    parentEle.insertAdjacentElement('afterend', collectionEle);
+                    parentEle.insertAdjacentElement('beforebegin', collectionEle);
                 }
             };
             reduce(start);
@@ -1303,6 +1352,10 @@ var Ribbon = /** @class */ (function (_super) {
         }
         return false;
     };
+    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)));
+    };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
         var itemContainer = itemEle.closest('.' + constants.RIBBON_ITEM);
         if (item.type === RibbonItemType.Button) {
@@ -1318,6 +1371,9 @@ var Ribbon = /** @class */ (function (_super) {
             remove(itemEle);
             this.createTemplateContent(item, itemContainer);
         }
+        else if (item.type === RibbonItemType.GroupButton) {
+            this.ribbonGroupButtonModule.updateGroupButtonSize(itemEle, item);
+        }
         itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT, constants.RIBBON_LARGE_ITEM, constants.RIBBON_MEDIUM_ITEM, constants.RIBBON_SMALL_ITEM);
         if (item.activeSize === RibbonItemSize.Large) {
             itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
@@ -1357,6 +1413,7 @@ var Ribbon = /** @class */ (function (_super) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + constants.CONTAINER_ID);
                     if (itemEle !== null) {
+                        this_1.handleContentSize(itemEle);
                         this_1.addOverflowEvents(item, itemEle, dropdown);
                     }
                 }
@@ -1399,6 +1456,7 @@ var Ribbon = /** @class */ (function (_super) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + constants.CONTAINER_ID);
                     if (itemEle !== null) {
+                        this_2.handleContentSize(itemEle, true);
                         this_2.removeOverflowEvent(item, itemEle);
                     }
                 }
@@ -1673,6 +1731,9 @@ var Ribbon = /** @class */ (function (_super) {
             case 'ComboBox':
                 this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
                 break;
+            case 'GroupButton':
+                this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
+                break;
         }
     };
     Ribbon.prototype.createGroupContainer = function (groupId, groupHeader) {
@@ -1808,10 +1869,13 @@ 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)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
                                         }
                                     }
+                                    if (item.type === RibbonItemType.GroupButton) {
+                                        this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
+                                    }
                                     item.setProperties({ activeSize: size }, true);
                                     var ele = itemEle.querySelector('#' + item.id);
                                     this.setItemSize(ele, item);
@@ -1899,14 +1963,20 @@ var Ribbon = /** @class */ (function (_super) {
                                     var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
                                     if (!itemEle) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
                                         }
                                         this.removeOverflowEvent(item, itemEle);
                                     }
+                                    if (item.type === RibbonItemType.GroupButton) {
+                                        this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
+                                    }
                                     groupCollection.append(itemEle);
                                 }
                                 var ele = groupContainer.querySelector('#' + item.id);
+                                if (item.type === RibbonItemType.GroupButton) {
+                                    ele = groupContainer.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
+                                }
                                 var itemsize = (item.allowedSizes & RibbonItemSize.Large) ? RibbonItemSize.Large :
                                     (item.allowedSizes & RibbonItemSize.Medium) ? RibbonItemSize.Medium : RibbonItemSize.Small;
                                 item.setProperties({ activeSize: itemsize }, true);
@@ -2073,6 +2143,9 @@ var Ribbon = /** @class */ (function (_super) {
             case 'Template':
                 this.createTemplateContent(item, itemEle);
                 break;
+            case 'GroupButton':
+                this.ribbonGroupButtonModule.createGroupButton(item, itemEle);
+                break;
         }
     };
     Ribbon.prototype.createItems = function (itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
@@ -2121,7 +2194,7 @@ 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)) {
+                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                     this.updatePopupItems(item, itemEle, isGroupOF, true);
                 }
             }
@@ -2200,54 +2273,74 @@ var Ribbon = /** @class */ (function (_super) {
         if (this.ribbonFileMenuModule) {
             this.ribbonFileMenuModule.setCommonProperties(commonProp);
         }
+        if (this.ribbonBackstageModule) {
+            this.ribbonBackstageModule.setCommonProperties(commonProp);
+        }
         for (var i = 0; i < this.tabs.length; i++) {
             var tab = this.tabs[parseInt(i.toString(), 10)];
             var contentEle = this.tabObj.items[parseInt(i.toString(), 10)].content;
-            for (var _i = 0, _a = tab.groups; _i < _a.length; _i++) {
-                var group = _a[_i];
-                var dropdownElement = void 0;
-                var dropdown = void 0;
-                if (this.activeLayout === RibbonLayout.Classic) {
-                    dropdownElement = group.isCollapsed ?
-                        contentEle.querySelector('#' + group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID) : null;
-                }
-                else {
-                    dropdownElement = group.enableGroupOverflow ?
-                        contentEle.querySelector('#' + group.id + constants.GROUPOF_BUTTON_ID) : null;
-                    dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
-                    if (dropdown) {
-                        updateTooltipProp(dropdown.target, commonProp);
-                        dropdown.setProperties(commonProp);
+            if (contentEle.querySelector('.' + constants.RIBBON_GROUP)) {
+                for (var _i = 0, _a = tab.groups; _i < _a.length; _i++) {
+                    var group = _a[_i];
+                    var dropdownElement = void 0;
+                    var dropdown = void 0;
+                    if (this.activeLayout === RibbonLayout.Classic) {
+                        dropdownElement = group.isCollapsed ?
+                            contentEle.querySelector('#' + group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID) : null;
                     }
-                }
-                for (var _b = 0, _c = group.collections; _b < _c.length; _b++) {
-                    var collection = _c[_b];
-                    for (var _d = 0, _e = collection.items; _d < _e.length; _d++) {
-                        var item = _e[_d];
-                        var ele = null;
-                        if (this.activeLayout === RibbonLayout.Classic) {
-                            if (item.displayOptions & DisplayMode.Classic) {
-                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
-                            }
+                    else {
+                        dropdownElement = group.enableGroupOverflow ?
+                            contentEle.querySelector('#' + group.id + constants.GROUPOF_BUTTON_ID) : null;
+                        dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+                        if (dropdown) {
+                            updateTooltipProp(dropdown.target, commonProp);
+                            dropdown.setProperties(commonProp);
                         }
-                        else {
-                            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
-                            ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id) : null;
-                            // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-                            if (!ele) {
-                                ele = dropdown.target.querySelector('#' + item.id);
-                                if (item.type === 'DropDown') {
-                                    this.updatePopupItems(item, dropdown.target, group.enableGroupOverflow, true);
+                    }
+                    for (var _b = 0, _c = group.collections; _b < _c.length; _b++) {
+                        var collection = _c[_b];
+                        for (var _d = 0, _e = collection.items; _d < _e.length; _d++) {
+                            var item = _e[_d];
+                            var ele = null;
+                            if (this.activeLayout === RibbonLayout.Classic) {
+                                if (item.displayOptions & DisplayMode.Classic) {
+                                    ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : item.type === RibbonItemType.GroupButton ? contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID) : contentEle.querySelector('#' + item.id);
                                 }
                             }
-                        }
-                        if (ele) {
-                            var moduleName = this.getItemModuleName(item);
-                            if (moduleName !== 'template') {
-                                updateCommonProperty(ele, moduleName, commonProp);
+                            else {
+                                //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
+                                ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id) : null;
+                                // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
+                                if (!ele) {
+                                    ele = dropdown.target.querySelector('#' + item.id);
+                                    if (item.type === 'DropDown') {
+                                        this.updatePopupItems(item, dropdown.target, group.enableGroupOverflow, true);
+                                    }
+                                }
                             }
-                            else if (!isNullOrUndefined(commonProp.enableRtl)) {
-                                ele.classList.toggle(constants.RTL_CSS, commonProp.enableRtl);
+                            if (ele) {
+                                var moduleName = this.getItemModuleName(item);
+                                if (moduleName !== 'template') {
+                                    if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                                        for (var i_4 = 0; i_4 < item.groupButtonSettings.items.length; i_4++) {
+                                            var btnEle = ele.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i_4);
+                                            updateCommonProperty(btnEle, 'btn', commonProp);
+                                        }
+                                    }
+                                    else if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
+                                        updateCommonProperty(ele, 'dropdown-btn', commonProp);
+                                        for (var i_5 = 0; i_5 < item.groupButtonSettings.items.length; i_5++) {
+                                            var btnEle = document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i_5);
+                                            updateCommonProperty(btnEle, 'btn', commonProp);
+                                        }
+                                    }
+                                    else {
+                                        updateCommonProperty(ele, moduleName, commonProp);
+                                    }
+                                }
+                                else if (!isNullOrUndefined(commonProp.enableRtl)) {
+                                    ele.classList.toggle(constants.RTL_CSS, commonProp.enableRtl);
+                                }
                             }
                         }
                     }
@@ -2293,6 +2386,10 @@ var Ribbon = /** @class */ (function (_super) {
                             if (item.displayOptions & DisplayMode.Classic) {
                                 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);
+                                }
                             }
                         }
                         else {
@@ -2327,6 +2424,32 @@ var Ribbon = /** @class */ (function (_super) {
         if (moduleName === 'colorpicker') {
             this.ribbonColorPickerModule.unwireColorPickerEvents(ele);
         }
+        else if (moduleName === 'group-btn') {
+            if (this.activeLayout === 'Classic') {
+                for (var i = 0; i < item.groupButtonSettings.items.length; i++) {
+                    var btnEle = ele.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i);
+                    if (btnEle) {
+                        destroyControl(btnEle, 'btn');
+                    }
+                }
+            }
+            else {
+                this.ribbonGroupButtonModule.destroyDropDown(item);
+            }
+            var _loop_3 = function (i) {
+                if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings) {
+                    var groupButtonID_1 = item.id + constants.RIBBON_GROUP_BUTTON_ID + i;
+                    var index = getIndex(this_3.tooltipData, function (e) { return e.id === groupButtonID_1; });
+                    if (index !== -1) {
+                        this_3.tooltipData.splice(index, 1);
+                    }
+                }
+            };
+            var this_3 = this;
+            for (var i = 0; i < item.groupButtonSettings.items.length; i++) {
+                _loop_3(i);
+            }
+        }
         else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
@@ -2336,6 +2459,9 @@ var Ribbon = /** @class */ (function (_super) {
                 this.tooltipData.splice(index, 1);
             }
         }
+        if (item.type === 'GroupButton') {
+            this.ribbonGroupButtonModule.destroyDropDown(item);
+        }
     };
     Ribbon.prototype.getItemModuleName = function (item) {
         switch (item.type) {
@@ -2351,6 +2477,8 @@ var Ribbon = /** @class */ (function (_super) {
                 return 'colorpicker';
             case 'ComboBox':
                 return 'combobox';
+            case 'GroupButton':
+                return 'group-btn';
             default:
                 return 'template';
         }
@@ -2384,6 +2512,56 @@ var Ribbon = /** @class */ (function (_super) {
         var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
         this.setProperties({ selectedTab: index });
     };
+    /**
+     * Shows a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be shown.
+     * @returns {void}
+     */
+    Ribbon.prototype.showTab = function (tabId) {
+        this.showHideTab(tabId, false);
+    };
+    /**
+     * Hides a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be hidden.
+     * @returns {void}
+     */
+    Ribbon.prototype.hideTab = function (tabId) {
+        this.showHideTab(tabId, true);
+    };
+    Ribbon.prototype.showHideTab = function (tabId, value) {
+        var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
+        if (index === -1) {
+            return;
+        }
+        this.tabObj.hideTab(index, value);
+    };
+    /**
+     * Enables a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be enabled.
+     * @returns {void}
+     */
+    Ribbon.prototype.enableTab = function (tabId) {
+        this.enableDisableTab(tabId, true);
+    };
+    /**
+     * Disables a specific tab in the ribbon.
+     *
+     * @param {string} tabId - The ID of the tab to be disabled.
+     * @returns {void}
+     */
+    Ribbon.prototype.disableTab = function (tabId) {
+        this.enableDisableTab(tabId, false);
+    };
+    Ribbon.prototype.enableDisableTab = function (tabId, value) {
+        var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
+        if (index === -1) {
+            return;
+        }
+        this.tabObj.enableTab(index, value);
+    };
     /**
      * Adds the ribbon tab.
      *
@@ -2426,6 +2604,10 @@ var Ribbon = /** @class */ (function (_super) {
                     for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
                         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);
+                        }
                         if (ele) {
                             this.destroyFunction(item, ele);
                         }
@@ -2549,6 +2731,105 @@ var Ribbon = /** @class */ (function (_super) {
             this.refreshLayout();
         }
     };
+    /**
+     * Hides a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be hidden.
+     * @returns {void}
+     */
+    Ribbon.prototype.hideGroup = function (groupID) {
+        this.showHideGroup(groupID, true);
+    };
+    /**
+     * Shows a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be shown.
+     * @returns {void}
+     */
+    Ribbon.prototype.showGroup = function (groupID) {
+        this.showHideGroup(groupID, false);
+    };
+    Ribbon.prototype.showHideGroup = function (groupID, isHidden) {
+        var overflowDDB;
+        var overflowtarget;
+        var itemProp = getGroup(this.tabs, groupID);
+        if (!itemProp) {
+            return;
+        }
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var groupEle = contentEle.querySelector('#' + groupID);
+        isHidden ? groupEle.classList.add('e-hidden') : groupEle.classList.remove('e-hidden');
+        if (this.overflowDDB) {
+            var overflowEle = this.overflowDDB.target;
+            var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
+            if (itemProp.group.enableGroupOverflow) {
+                var overflowDDBEle = contentEle.querySelector('#' + groupID + constants.GROUPOF_BUTTON_ID);
+                if (overflowDDBEle) {
+                    overflowDDB = getInstance(overflowDDBEle, DropDownButton);
+                    overflowtarget = overflowDDB.target;
+                }
+                if (overflowtarget) {
+                    isHidden ? overflowtarget.classList.add('e-hidden') : 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');
+                }
+            }
+        }
+        this.refreshLayout();
+    };
+    /**
+     * Disables a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be disabled.
+     * @returns {void}
+     */
+    Ribbon.prototype.disableGroup = function (groupID) {
+        this.enableDisableGroup(groupID, true);
+    };
+    /**
+     * Enables a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be enabled.
+     * @returns {void}
+     */
+    Ribbon.prototype.enableGroup = function (groupID) {
+        this.enableDisableGroup(groupID, false);
+    };
+    Ribbon.prototype.enableDisableGroup = function (groupID, isDisabled) {
+        var overflowDDB;
+        var overflowtarget;
+        var itemProp = getGroup(this.tabs, groupID);
+        if (!itemProp) {
+            return;
+        }
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var groupEle = contentEle.querySelector('#' + groupID);
+        isDisabled ? groupEle.classList.add('e-disabled') : groupEle.classList.remove('e-disabled');
+        if (this.overflowDDB) {
+            var overflowEle = this.overflowDDB.target;
+            var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
+            if (itemProp.group.enableGroupOverflow) {
+                var overflowDDBEle = contentEle.querySelector('#' + groupID + constants.GROUPOF_BUTTON_ID);
+                if (overflowDDBEle) {
+                    overflowDDB = getInstance(overflowDDBEle, DropDownButton);
+                    overflowtarget = overflowDDB.target;
+                }
+                if (overflowtarget) {
+                    isDisabled ? overflowtarget.classList.add('e-disabled') : 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');
+                }
+            }
+        }
+    };
     /**
      * adds the ribbon collection.
      *
@@ -2722,6 +3003,41 @@ var Ribbon = /** @class */ (function (_super) {
             this.refreshLayout();
         }
     };
+    /**
+     * Hides a specific ribbon item.
+     *
+     * @param {string} itemId - The ID of the item to be hidden.
+     * @returns {void}
+     */
+    Ribbon.prototype.hideItem = function (itemId) {
+        this.showHideItem(itemId, true);
+    };
+    /**
+     * Shows a specific ribbon item.
+     *
+     * @param {string} itemId - The ID of the item to be shown.
+     * @returns {void}
+     */
+    Ribbon.prototype.showItem = function (itemId) {
+        this.showHideItem(itemId, false);
+    };
+    Ribbon.prototype.showHideItem = function (itemId, isHidden) {
+        var itemProp = getItem(this.tabs, itemId);
+        if (!itemProp) {
+            return;
+        }
+        var ele;
+        if (itemProp.item.type === 'GroupButton') {
+            ele = getItemElement(this, itemId + constants.RIBBON_GROUP_BUTTON_ID, itemProp);
+        }
+        else {
+            ele = getItemElement(this, itemId, itemProp);
+        }
+        if (ele) {
+            var itemEle = closest(ele, '.e-ribbon-item');
+            isHidden ? itemEle.classList.add('e-hidden') : itemEle.classList.remove('e-hidden');
+        }
+    };
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *
@@ -2755,6 +3071,10 @@ var Ribbon = /** @class */ (function (_super) {
                         for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
                             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);
+                            }
                             if (ele) {
                                 this.destroyFunction(item, ele);
                             }
@@ -3026,9 +3346,12 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
                 itemEle = contentEle.querySelector('#' + itemId);
+                if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
+                    itemEle = contentEle.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID);
+                }
                 if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
                     this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
-                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton)) {
+                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                         this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
                     }
                 }
@@ -3092,6 +3415,9 @@ var Ribbon = /** @class */ (function (_super) {
         var ele = null;
         if (this.activeLayout === RibbonLayout.Classic) {
             ele = (item.displayOptions & DisplayMode.Classic) ? contentEle.querySelector('#' + item.id) : null;
+            if (item.type === 'GroupButton') {
+                ele = (item.displayOptions & DisplayMode.Classic) ? contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID) : null;
+            }
         }
         else {
             //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
@@ -3103,7 +3429,12 @@ var Ribbon = /** @class */ (function (_super) {
         }
         if (ele) {
             this.destroyFunction(item, ele);
-            ele.closest('#' + item.id + constants.CONTAINER_ID).remove();
+            if (item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Simplified) {
+                document.getElementById(item.id + constants.CONTAINER_ID).remove();
+            }
+            else {
+                ele.closest('#' + item.id + constants.CONTAINER_ID).remove();
+            }
         }
     };
     /**
@@ -3130,13 +3461,34 @@ var Ribbon = /** @class */ (function (_super) {
             return;
         }
         itemProp.item.setProperties({ disabled: isDisabled }, true);
-        var ele = getItemElement(this, itemId, itemProp);
+        var ele;
+        if (itemProp.item.type === 'GroupButton') {
+            ele = getItemElement(this, itemId + constants.RIBBON_GROUP_BUTTON_ID, itemProp);
+        }
+        else {
+            ele = getItemElement(this, itemId, itemProp);
+        }
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
             itemEle.classList.toggle(constants.DISABLED_CSS, itemProp.item.disabled);
             var moduleName = this.getItemModuleName(itemProp.item);
             if (moduleName !== 'template') {
-                updateControlDisabled(ele, moduleName, isDisabled);
+                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 + constants.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 + constants.RIBBON_GROUP_BUTTON_ID + i);
+                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    }
+                }
+                else {
+                    updateControlDisabled(ele, moduleName, isDisabled);
+                }
             }
             else {
                 ele.classList.toggle(constants.DISABLED_CSS, isDisabled);
@@ -3152,7 +3504,9 @@ var Ribbon = /** @class */ (function (_super) {
         this.keyboardModuleRibbon = null;
         destroyTooltip(this.element);
         this.destroyTabItems(this.tabs);
-        this.removeExpandCollapse();
+        if (!this.hideLayoutSwitcher) {
+            this.removeExpandCollapse();
+        }
         this.collapseButton = undefined;
         if (this.scrollModule) {
             this.scrollModule.destroy();
@@ -3262,6 +3616,13 @@ var Ribbon = /** @class */ (function (_super) {
                     var toolbarEle = this.tabObj['tbObj'];
                     toolbarEle.refreshOverflow();
                     break;
+                case 'backStageMenu':
+                    if (this.ribbonBackstageModule) {
+                        this.ribbonBackstageModule.updateBackStageMenu(this.backStageMenu);
+                    }
+                    var toolbarElement = this.tabObj['tbObj'];
+                    toolbarElement.refreshOverflow();
+                    break;
                 case 'helpPaneTemplate':
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
@@ -3274,6 +3635,9 @@ var Ribbon = /** @class */ (function (_super) {
                     var toolbar_1 = this.tabObj['tbObj'];
                     toolbar_1.refreshOverflow();
                     break;
+                case 'hideLayoutSwitcher':
+                    this.hideLayoutSwitcher ? this.removeExpandCollapse() : this.addExpandCollapse();
+                    break;
             }
         }
     };
@@ -3287,6 +3651,9 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Complex({}, FileMenuSettings)
     ], Ribbon.prototype, "fileMenu", void 0);
+    __decorate([
+        Complex({}, BackStageMenu)
+    ], Ribbon.prototype, "backStageMenu", void 0);
     __decorate([
         Property('')
     ], Ribbon.prototype, "launcherIconCss", void 0);
@@ -3311,6 +3678,9 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], Ribbon.prototype, "helpPaneTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], Ribbon.prototype, "hideLayoutSwitcher", void 0);
     __decorate([
         Event()
     ], Ribbon.prototype, "tabSelecting", void 0);
@@ -3326,6 +3696,9 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "launcherIconClick", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "created", void 0);
     Ribbon = Ribbon_1 = __decorate([
         NotifyPropertyChanges
     ], Ribbon);