@syncfusion/ej2-ribbon 22.2.12 → 23.1.38

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

@@ -4,7 +4,7 @@ import { ComboBox, FieldSettings } from '@syncfusion/ej2-dropdowns';
 import { DropDownButton, Item, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import { Button, CheckBox } from '@syncfusion/ej2-buttons';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
-import { Tooltip } from '@syncfusion/ej2-popups';
+import { Popup, Tooltip } from '@syncfusion/ej2-popups';
 
 /**
  * Defines the layout types of ribbon.
@@ -74,7 +74,7 @@ var DisplayMode;
      */
     DisplayMode[DisplayMode["Overflow"] = 1] = "Overflow";
     /**
-      * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
+     * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
      */
     DisplayMode[DisplayMode["Auto"] = 7] = "Auto";
 })(DisplayMode || (DisplayMode = {}));
@@ -107,11 +107,29 @@ var RibbonItemType;
      * Renders splitbutton as ribbon item.
      */
     RibbonItemType["SplitButton"] = "SplitButton";
+    /**
+     * Renders the group button content as ribbon item.
+     */
+    RibbonItemType["GroupButton"] = "GroupButton";
     /**
      * Renders the template content as ribbon item.
      */
     RibbonItemType["Template"] = "Template";
 })(RibbonItemType || (RibbonItemType = {}));
+/**
+ * Defines the alignment of the items in the ribbon group.
+ */
+var RibbonGroupButtonSelection;
+(function (RibbonGroupButtonSelection) {
+    /**
+     * Allows selecting single button from button group.
+     */
+    RibbonGroupButtonSelection["Single"] = "Single";
+    /**
+     * Allows selecting multiple buttons from button group.
+     */
+    RibbonGroupButtonSelection["Multiple"] = "Multiple";
+})(RibbonGroupButtonSelection || (RibbonGroupButtonSelection = {}));
 
 var __extends$5 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -491,6 +509,9 @@ var RibbonDropDownSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$9([
         Property('')
     ], RibbonDropDownSettings.prototype, "target", void 0);
+    __decorate$9([
+        Property(false)
+    ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
     __decorate$9([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeClose", void 0);
@@ -641,6 +662,90 @@ var RibbonTooltip = /** @__PURE__ @class */ (function (_super) {
     return RibbonTooltip;
 }(ChildProperty));
 
+var __extends$13 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$13 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon group button settings.
+ */
+var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
+    __extends$13(RibbonGroupButtonItem, _super);
+    function RibbonGroupButtonItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$13([
+        Property('')
+    ], RibbonGroupButtonItem.prototype, "content", void 0);
+    __decorate$13([
+        Property('')
+    ], RibbonGroupButtonItem.prototype, "iconCss", void 0);
+    __decorate$13([
+        Complex({}, RibbonTooltip)
+    ], RibbonGroupButtonItem.prototype, "ribbonTooltipSettings", void 0);
+    __decorate$13([
+        Property(false)
+    ], RibbonGroupButtonItem.prototype, "selected", void 0);
+    __decorate$13([
+        Event()
+    ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);
+    __decorate$13([
+        Event()
+    ], RibbonGroupButtonItem.prototype, "click", void 0);
+    return RibbonGroupButtonItem;
+}(ChildProperty));
+
+var __extends$12 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$12 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon group button settings.
+ */
+var RibbonGroupButtonSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$12(RibbonGroupButtonSettings, _super);
+    function RibbonGroupButtonSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$12([
+        Property('Single')
+    ], RibbonGroupButtonSettings.prototype, "selection", void 0);
+    __decorate$12([
+        Collection([], RibbonGroupButtonItem)
+    ], RibbonGroupButtonSettings.prototype, "items", void 0);
+    return RibbonGroupButtonSettings;
+}(ChildProperty));
+
 var __extends$4 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -722,6 +827,9 @@ var RibbonItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$4([
         Complex({}, RibbonSplitButtonSettings)
     ], RibbonItem.prototype, "splitButtonSettings", void 0);
+    __decorate$4([
+        Complex({}, RibbonGroupButtonSettings)
+    ], RibbonItem.prototype, "groupButtonSettings", void 0);
     return RibbonItem;
 }(ChildProperty));
 
@@ -896,7 +1004,7 @@ var RibbonTab = /** @__PURE__ @class */ (function (_super) {
     return RibbonTab;
 }(ChildProperty));
 
-var __extends$12 = (undefined && undefined.__extends) || (function () {
+var __extends$14 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -909,7 +1017,7 @@ var __extends$12 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$12 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$14 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -919,7 +1027,7 @@ var __decorate$12 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon file menu settings.
  */
 var FileMenuSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$12(FileMenuSettings, _super);
+    __extends$14(FileMenuSettings, _super);
     function FileMenuSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -932,51 +1040,207 @@ var FileMenuSettings = /** @__PURE__ @class */ (function (_super) {
     FileMenuSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$12([
+    __decorate$14([
         Property('File')
     ], FileMenuSettings.prototype, "text", void 0);
-    __decorate$12([
+    __decorate$14([
         Property(false)
     ], FileMenuSettings.prototype, "visible", void 0);
-    __decorate$12([
+    __decorate$14([
         Collection([], MenuItem)
     ], FileMenuSettings.prototype, "menuItems", void 0);
-    __decorate$12([
+    __decorate$14([
         Property(false)
     ], FileMenuSettings.prototype, "showItemOnClick", void 0);
-    __decorate$12([
+    __decorate$14([
         Complex({}, MenuAnimationSettings)
     ], FileMenuSettings.prototype, "animationSettings", void 0);
-    __decorate$12([
+    __decorate$14([
         Property('')
     ], FileMenuSettings.prototype, "itemTemplate", void 0);
-    __decorate$12([
+    __decorate$14([
         Property('')
     ], FileMenuSettings.prototype, "popupTemplate", void 0);
-    __decorate$12([
+    __decorate$14([
         Complex({}, RibbonTooltip)
     ], FileMenuSettings.prototype, "ribbonTooltipSettings", void 0);
-    __decorate$12([
+    __decorate$14([
         Event()
     ], FileMenuSettings.prototype, "beforeClose", void 0);
-    __decorate$12([
+    __decorate$14([
         Event()
     ], FileMenuSettings.prototype, "beforeOpen", void 0);
-    __decorate$12([
+    __decorate$14([
         Event()
     ], FileMenuSettings.prototype, "beforeItemRender", void 0);
-    __decorate$12([
+    __decorate$14([
         Event()
     ], FileMenuSettings.prototype, "close", void 0);
-    __decorate$12([
+    __decorate$14([
         Event()
     ], FileMenuSettings.prototype, "open", void 0);
-    __decorate$12([
+    __decorate$14([
         Event()
     ], FileMenuSettings.prototype, "select", void 0);
     return FileMenuSettings;
 }(ChildProperty));
 
+var __extends$16 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$16 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon backstage back button.
+ */
+var BackstageBackButton = /** @__PURE__ @class */ (function (_super) {
+    __extends$16(BackstageBackButton, _super);
+    function BackstageBackButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$16([
+        Property('')
+    ], BackstageBackButton.prototype, "text", void 0);
+    __decorate$16([
+        Property('')
+    ], BackstageBackButton.prototype, "iconCss", void 0);
+    __decorate$16([
+        Property(true)
+    ], BackstageBackButton.prototype, "visible", void 0);
+    return BackstageBackButton;
+}(ChildProperty));
+
+var __extends$17 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$17 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon backstage back button.
+ */
+var BackstageItem = /** @__PURE__ @class */ (function (_super) {
+    __extends$17(BackstageItem, _super);
+    function BackstageItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$17([
+        Property('')
+    ], BackstageItem.prototype, "text", void 0);
+    __decorate$17([
+        Property('')
+    ], BackstageItem.prototype, "id", void 0);
+    __decorate$17([
+        Property('')
+    ], BackstageItem.prototype, "content", void 0);
+    __decorate$17([
+        Property('')
+    ], BackstageItem.prototype, "iconCss", void 0);
+    __decorate$17([
+        Property(false)
+    ], BackstageItem.prototype, "separator", void 0);
+    __decorate$17([
+        Property(false)
+    ], BackstageItem.prototype, "isFooter", void 0);
+    __decorate$17([
+        Event()
+    ], BackstageItem.prototype, "backStageItemClick", void 0);
+    return BackstageItem;
+}(ChildProperty));
+
+var __extends$15 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$15 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon file menu settings.
+ */
+var BackStageMenu = /** @__PURE__ @class */ (function (_super) {
+    __extends$15(BackStageMenu, _super);
+    function BackStageMenu() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of Backstage Menu.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    BackStageMenu.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate$15([
+        Property('File')
+    ], BackStageMenu.prototype, "text", void 0);
+    __decorate$15([
+        Property(false)
+    ], BackStageMenu.prototype, "visible", void 0);
+    __decorate$15([
+        Property('auto')
+    ], BackStageMenu.prototype, "height", void 0);
+    __decorate$15([
+        Property('auto')
+    ], BackStageMenu.prototype, "width", void 0);
+    __decorate$15([
+        Property(null)
+    ], BackStageMenu.prototype, "target", void 0);
+    __decorate$15([
+        Complex({}, BackstageBackButton)
+    ], BackStageMenu.prototype, "backButton", void 0);
+    __decorate$15([
+        Collection([], BackstageItem)
+    ], BackStageMenu.prototype, "items", void 0);
+    __decorate$15([
+        Property('')
+    ], BackStageMenu.prototype, "template", void 0);
+    __decorate$15([
+        Complex({}, RibbonTooltip)
+    ], BackStageMenu.prototype, "ribbonTooltipSettings", void 0);
+    return BackStageMenu;
+}(ChildProperty));
+
 // export * from './file-menu';
 
 /**
@@ -987,6 +1251,8 @@ var ITEM_VERTICAL_CENTER = 'e-ribbon-vertical-center';
 /** @hidden */
 var EXPAND_COLLAPSE_ICON = 'e-icons e-drop-icon';
 /** @hidden */
+var BACKSTAGE_CLOSE_ICON = 'e-icons e-arrow-left';
+/** @hidden */
 var OVERFLOW_ICON = 'e-icons e-more-horizontal-1';
 /** @hidden */
 var VERTICAL_DDB = 'e-vertical';
@@ -1035,6 +1301,14 @@ var RIBBON_MINIMIZE = 'e-ribbon-minimize';
 /** @hidden */
 var RIBBON_GROUP = 'e-ribbon-group';
 /** @hidden */
+var RIBBON_SINGLE_BUTTON_SELECTION = 'e-ribbon-single-selection';
+/** @hidden */
+var RIBBON_MULTIPLE_BUTTON_SELECTION = 'e-ribbon-multiple-selection';
+/** @hidden */
+var RIBBON_GROUP_BUTTON = 'e-ribbon-group-button';
+/** @hidden */
+var RIBBON_GROUP_BUTTON_OVERFLOW_POPUP = 'e-ribbon-group-button-overflow-popup';
+/** @hidden */
 var RIBBON_GROUP_CONTAINER = 'e-ribbon-group-container';
 /** @hidden */
 var RIBBON_OF_TAB_CONTAINER = 'e-ribbon-of-tab';
@@ -1097,6 +1371,26 @@ var RIBBON_TEXT_CONTAINER = 'e-ribbon-text-container';
 /** @hidden */
 var RIBBON_SIMPLIFIED_MODE = 'e-ribbon-simplified-mode';
 /** @hidden */
+var RIBBON_BACKSTAGE_POPUP = 'e-ribbon-backstage-popup';
+/** @hidden */
+var RIBBON_BACKSTAGE_OPEN = 'e-ribbon-backstage-open';
+/** @hidden */
+var RIBBON_BACKSTAGE_CONTENT = 'e-ribbon-backstage-content';
+/** @hidden */
+var RIBBON_SELECTED_CONTENT = 'e-ribbon-selected-content';
+/** @hidden */
+var RIBBON_BACKSTAGE = 'e-ribbon-backstage';
+/** @hidden */
+var RIBBON_BACKSTAGE_MENU = 'e-ribbon-backstage-menu';
+/** @hidden */
+var RIBBON_BACKSTAGE_TEMPLATE = 'e-ribbon-backstage-template';
+/** @hidden */
+var RIBBON_BACKSTAGE_MENU_WRAPPER = 'e-ribbon-backstage-wrapper';
+/** @hidden */
+var RIBBON_BACKSTAGE_ITEMS_WRAPPER = 'e-ribbon-backstage-items-wrapper';
+/** @hidden */
+var RIBBON_BACKSTAGE_TEXT_MENU = 'e-blankicon';
+/** @hidden */
 var TAB_ID = '_tab';
 /** @hidden */
 var GROUP_ID = '_group';
@@ -1125,10 +1419,20 @@ var DROPDOWN_ID = '_dropdown';
 /** @hidden */
 var RIBBON_FILE_MENU_ID = '_filemenu';
 /** @hidden */
+var RIBBON_BACKSTAGE_MENU_ID = '_backstage';
+/** @hidden */
+var RIBBON_BACKSTAGE_POPUP_ID = '_backstagepopup';
+/** @hidden */
 var RIBBON_FILE_MENU_LIST = '_filemenulist';
 /** @hidden */
+var RIBBON_MENU_LIST = '_menulist';
+/** @hidden */
+var RIBBON_FOOTER_MENU_LIST = '_footermenulist';
+/** @hidden */
 var RIBBON_HELP_PANE_TEMPLATE_ID = '_helppanetemplate';
 /** @hidden */
+var RIBBON_GROUP_BUTTON_ID = '_grpbtn';
+/** @hidden */
 var RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 var RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
@@ -1256,6 +1560,9 @@ var RibbonButton = /** @__PURE__ @class */ (function () {
             return;
         }
         var buttonObj = getComponent(buttonEle, Button);
+        if (prop.isToggle) {
+            buttonEle.classList.add('e-active');
+        }
         if (prop.cssClass) {
             prop.cssClass = (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + prop.cssClass).trim();
         }
@@ -1536,7 +1843,7 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
         var splitBtn = colorPickerObj['splitBtn'];
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         splitBtn.close = null;
-        colorPickerObj.beforeClose = function (e) {
+        colorPickerObj.beforeClose = function () {
             colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
             if (item.colorPickerSettings.beforeClose) {
                 item.colorPickerSettings.beforeClose.call(_this);
@@ -1838,6 +2145,7 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             iconCss: dropDownSettings.iconCss,
             items: dropDownSettings.items,
             target: dropDownSettings.target,
+            createPopupOnClick: dropDownSettings.createPopupOnClick,
             beforeClose: function (e) {
                 if (dropDownSettings.beforeClose) {
                     dropDownSettings.beforeClose.call(_this, e);
@@ -1853,7 +2161,7 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             created: dropDownSettings.created,
             open: dropDownSettings.open,
             select: dropDownSettings.select
-        }, buttonEle);
+        }).appendTo(buttonEle);
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -2798,68 +3106,505 @@ function updateTooltipProp(element, prop) {
     control.setProperties(prop);
 }
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 /**
- * The Ribbon Component is a structured layout to manage tools with tabs and groups.
+ * Defines the items of Ribbon.
  */
-var Ribbon = /** @__PURE__ @class */ (function (_super) {
-    __extends(Ribbon, _super);
-    /**
-     * Constructor for creating the widget.
-     *
-     * @param  {RibbonModel} options - Specifies the ribbon model
-     * @param  {string|HTMLDivElement} element - Specifies the target element
-     */
-    function Ribbon(options, element) {
-        var _this = this;
-        Ribbon_1.Inject(RibbonButton, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonComboBox);
-        _this = _super.call(this, options, element) || this;
-        return _this;
+var RibbonGroupButton = /** @__PURE__ @class */ (function () {
+    function RibbonGroupButton(parent) {
+        this.parent = parent;
+        this.isSelected = false;
     }
-    Ribbon_1 = Ribbon;
-    /**
-     * Initialize the control rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    Ribbon.prototype.render = function () {
-        this.initialize();
+    RibbonGroupButton.prototype.getModuleName = function () {
+        return 'ribbonGroupButton';
     };
-    Ribbon.prototype.preRender = function () {
-        this.idIndex = 0;
-        this.tooltipData = [];
-        this.isAddRemove = false;
-        this.keyConfigs = {
-            leftarrow: 'leftarrow',
-            rightarrow: 'rightarrow',
-            tab: 'tab',
-            shiftTab: 'shift+tab'
-        };
+    RibbonGroupButton.prototype.destroy = function () {
+        this.parent = null;
     };
     /**
-     * Get the properties to be maintained in the persisted state.
+     * Creates Group Button
      *
-     * @returns {string} - Persist data
-     */
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemElement - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGroupButton.prototype.createGroupButton = function (item, itemElement) {
+        var _this = this;
+        var groupBtnSettings = item.groupButtonSettings;
+        this.count = 0;
+        var btnContainerEle = this.parent.createElement('div', {
+            id: item.id + RIBBON_GROUP_BUTTON_ID,
+            className: 'e-btn-group'
+        });
+        itemElement.appendChild(btnContainerEle);
+        for (var i = 0; i < groupBtnSettings.items.length; i++) {
+            if ((groupBtnSettings.items[parseInt(i.toString(), 10)].iconCss)) {
+                var groupButtonEle = this.parent.createElement('button', {
+                    id: item.id + RIBBON_GROUP_BUTTON_ID + i,
+                    className: RIBBON_GROUP_BUTTON
+                });
+                btnContainerEle.appendChild(groupButtonEle);
+                new Button({
+                    iconCss: groupBtnSettings.items[parseInt(i.toString(), 10)].iconCss,
+                    disabled: item.disabled,
+                    enableRtl: this.parent.enableRtl,
+                    content: item.activeSize === RibbonItemSize.Small ? '' : groupBtnSettings.items[parseInt(i.toString(), 10)].content,
+                    iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left'
+                }, groupButtonEle);
+                var buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
+                if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
+                    btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
+                }
+                else {
+                    btnContainerEle.classList.add(RIBBON_MULTIPLE_BUTTON_SELECTION);
+                }
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].selected) {
+                    if (groupBtnSettings.selection === RibbonGroupButtonSelection.Multiple) {
+                        buttonEle.classList.add('e-active');
+                    }
+                    else {
+                        if (this.count < 1) {
+                            buttonEle.classList.add('e-active');
+                            this.count++;
+                        }
+                    }
+                }
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings &&
+                    isTooltipPresent(groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings)) {
+                    groupButtonEle.classList.add(RIBBON_TOOLTIP_TARGET);
+                    this.parent.tooltipData.push({
+                        id: groupButtonEle.id, data: groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings
+                    });
+                }
+                EventHandler.add(buttonEle, 'click', this.groupButtonClicked.bind(this, i, item, groupBtnSettings), this);
+            }
+        }
+        if (this.parent.activeLayout === 'Simplified') {
+            var dropdownIcon = void 0;
+            var activeEleCount = 0;
+            var count = 0;
+            var buttonEle = this.parent.createElement('button', {
+                id: item.id
+            });
+            itemElement.appendChild(buttonEle);
+            for (var i = 0; i < groupBtnSettings.items.length; i++) {
+                if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].selected &&
+                    !this.isSelected && groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
+                    dropdownIcon = item.groupButtonSettings.items[parseInt(i.toString(), 10)].iconCss;
+                    this.isSelected = true;
+                }
+                else if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].selected &&
+                    groupBtnSettings.selection === RibbonGroupButtonSelection.Multiple) {
+                    activeEleCount++;
+                    if (activeEleCount === 1) {
+                        dropdownIcon = item.groupButtonSettings.items[parseInt(i.toString(), 10)].iconCss;
+                    }
+                    else {
+                        dropdownIcon = null;
+                    }
+                }
+            }
+            while (count < item.groupButtonSettings.items.length && !this.isSelected && !dropdownIcon) {
+                if (item.groupButtonSettings.items[parseInt(count.toString(), 10)].iconCss) {
+                    dropdownIcon = item.groupButtonSettings.items[parseInt(count.toString(), 10)].iconCss;
+                    this.isSelected = true;
+                }
+                count++;
+            }
+            new DropDownButton({
+                iconCss: dropdownIcon,
+                target: btnContainerEle,
+                enableRtl: this.parent.enableRtl,
+                cssClass: 'e-ribbon-dropdown-group-button',
+                disabled: item.disabled
+            }, buttonEle);
+            buttonEle.onclick = buttonEle.onkeydown = function () {
+                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
+                    _this.grpBtnIndex = 0;
+                }
+            };
+            btnContainerEle.onkeydown = function (e) {
+                if (_this.parent.activeLayout === 'Simplified') {
+                    _this.handleGroupButtonNavigation(e, item);
+                }
+            };
+            createTooltip(btnContainerEle, this.parent);
+            this.isSelected = false;
+        }
+    };
+    RibbonGroupButton.prototype.groupButtonClicked = function (itemIndex, item, grpBtnSettings) {
+        var previousItems = [], selectingItems = [], selectedItems = [];
+        var groupButtonEle;
+        var dropdown;
+        for (var j = 0; j < grpBtnSettings.items.length; j++) {
+            if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j)) {
+                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
+                    previousItems.push(grpBtnSettings.items[parseInt(j.toString(), 10)]);
+                }
+            }
+        }
+        if (!(document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active'))) {
+            selectingItems.push(grpBtnSettings.items[parseInt(itemIndex.toString(), 10)]);
+        }
+        var eventArgs = {
+            cancel: false, previousItems: previousItems, selectingItems: selectingItems
+        };
+        if (grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].beforeClick) {
+            grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].beforeClick.call(this, eventArgs);
+        }
+        if (eventArgs.cancel) {
+            return;
+        }
+        else {
+            if (grpBtnSettings.selection === RibbonGroupButtonSelection.Single) {
+                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.contains(RIBBON_MULTIPLE_BUTTON_SELECTION)) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.remove(RIBBON_MULTIPLE_BUTTON_SELECTION);
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
+                }
+                for (var j = 0; j < grpBtnSettings.items.length; j++) {
+                    if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
+                        document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
+                    }
+                }
+                document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
+                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active') && this.parent.activeLayout === 'Simplified') {
+                    this.grpBtnIndex = itemIndex;
+                    groupButtonEle = document.querySelector('#' + item.id);
+                    dropdown = getComponent(groupButtonEle, DropDownButton);
+                    dropdown.setProperties({
+                        iconCss: grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].iconCss
+                    });
+                }
+            }
+            else {
+                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.contains(RIBBON_SINGLE_BUTTON_SELECTION)) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.remove(RIBBON_SINGLE_BUTTON_SELECTION);
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.add(RIBBON_MULTIPLE_BUTTON_SELECTION);
+                }
+                document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
+                var activeEleCount = 0;
+                for (var n = 0; n < grpBtnSettings.items.length; n++) {
+                    if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + n) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + n).classList.contains('e-active') && this.parent.activeLayout === 'Simplified' && n !== itemIndex) {
+                        this.isSelected = true;
+                        activeEleCount++;
+                    }
+                }
+                if (this.parent.activeLayout === 'Simplified') {
+                    var dropdownIcon = null;
+                    var itemsCount = 0;
+                    groupButtonEle = document.querySelector('#' + item.id);
+                    dropdown = getComponent(groupButtonEle, DropDownButton);
+                    if (!this.isSelected) {
+                        if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
+                            dropdownIcon = grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].iconCss;
+                        }
+                    }
+                    else {
+                        if (activeEleCount === 1 && !(document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active'))) {
+                            for (var n = 0; n < grpBtnSettings.items.length; n++) {
+                                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + n) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + n).classList.contains('e-active')) {
+                                    dropdownIcon = grpBtnSettings.items[parseInt(n.toString(), 10)].iconCss;
+                                }
+                            }
+                        }
+                    }
+                    while (itemsCount < grpBtnSettings.items.length && !dropdownIcon) {
+                        if (grpBtnSettings.items[parseInt(itemsCount.toString(), 10)].iconCss) {
+                            dropdownIcon = grpBtnSettings.items[parseInt(itemsCount.toString(), 10)].iconCss;
+                        }
+                        itemsCount++;
+                    }
+                    dropdown.setProperties({ iconCss: dropdownIcon });
+                    this.grpBtnIndex = itemIndex;
+                }
+                this.isSelected = false;
+            }
+            if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
+                selectedItems.push(grpBtnSettings.items[parseInt(itemIndex.toString(), 10)]);
+            }
+            var eventArgs_1 = { previousItems: previousItems, selectedItems: selectedItems };
+            if (grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click) {
+                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click.call(this, eventArgs_1);
+            }
+        }
+    };
+    /**
+     * updates group button in mode switching
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemElement - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGroupButton.prototype.switchGroupButton = function (item, itemElement) {
+        var _this = this;
+        var groupBtnSettings = item.groupButtonSettings;
+        var dropdownIcon = null;
+        var activeEleCount = 0;
+        var itemsCount = 0;
+        if (this.parent.activeLayout === 'Simplified') {
+            var containerEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+            var buttonEle = this.parent.createElement('button', {
+                id: item.id
+            });
+            itemElement.appendChild(buttonEle);
+            for (var i = 0; i < groupBtnSettings.items.length; i++) {
+                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i)) {
+                    if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i).classList.contains('e-active') && groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
+                        dropdownIcon = groupBtnSettings.items[parseInt(i.toString(), 10)].iconCss;
+                    }
+                    else if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i).classList.contains('e-active') && groupBtnSettings.selection === RibbonGroupButtonSelection.Multiple) {
+                        activeEleCount++;
+                        if (activeEleCount === 1) {
+                            dropdownIcon = groupBtnSettings.items[parseInt(i.toString(), 10)].iconCss;
+                        }
+                        else if (activeEleCount > 1) {
+                            dropdownIcon = null;
+                        }
+                    }
+                }
+            }
+            while (itemsCount < groupBtnSettings.items.length && !dropdownIcon) {
+                if (groupBtnSettings.items[parseInt(itemsCount.toString(), 10)].iconCss) {
+                    dropdownIcon = groupBtnSettings.items[parseInt(itemsCount.toString(), 10)].iconCss;
+                }
+                itemsCount++;
+            }
+            new DropDownButton({
+                iconCss: dropdownIcon,
+                target: containerEle,
+                enableRtl: this.parent.enableRtl,
+                cssClass: 'e-ribbon-dropdown-group-button',
+                disabled: item.disabled
+            }, buttonEle);
+            buttonEle.onclick = buttonEle.onkeydown = function () {
+                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
+                    _this.grpBtnIndex = 0;
+                }
+            };
+            containerEle.onkeydown = function (e) {
+                if (_this.parent.activeLayout === 'Simplified') {
+                    _this.handleGroupButtonNavigation(e, item);
+                }
+            };
+            createTooltip(containerEle, this.parent);
+        }
+        else {
+            var groupButtonEle = itemElement.querySelector('#' + item.id);
+            var dropdown = getComponent(groupButtonEle, DropDownButton);
+            itemElement.appendChild(dropdown.target);
+            if (groupButtonEle) {
+                dropdown.destroy();
+                remove(groupButtonEle);
+            }
+        }
+    };
+    RibbonGroupButton.prototype.handleGroupButtonNavigation = function (e, item) {
+        var groupButtonEle = document.querySelector('#' + item.id);
+        var dropdown = getComponent(groupButtonEle, DropDownButton);
+        var targetEle = dropdown.target;
+        var isOverflowPopup = false;
+        if (this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
+            isOverflowPopup = true;
+        }
+        if (e.key === 'Tab') {
+            e.preventDefault();
+        }
+        var groupBtnSettings = item.groupButtonSettings;
+        if ((e.key === 'ArrowRight' && !isOverflowPopup) || (e.key === 'ArrowDown' && isOverflowPopup)) {
+            if (!this.parent.enableRtl || (e.key === 'ArrowDown' && isOverflowPopup)) {
+                this.grpBtnIndex++;
+                if (this.grpBtnIndex < groupBtnSettings.items.length) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+                else {
+                    this.grpBtnIndex = 0;
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+            }
+            else {
+                if (this.grpBtnIndex === 0) {
+                    this.grpBtnIndex = groupBtnSettings.items.length - 1;
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+                else {
+                    this.grpBtnIndex--;
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+            }
+        }
+        else if ((e.key === 'ArrowLeft' && !isOverflowPopup) || (e.key === 'ArrowUp' && isOverflowPopup)) {
+            if (!this.parent.enableRtl || (e.key === 'ArrowUp' && isOverflowPopup)) {
+                if (this.grpBtnIndex === 0) {
+                    this.grpBtnIndex = groupBtnSettings.items.length - 1;
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+                else {
+                    this.grpBtnIndex--;
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+            }
+            else {
+                this.grpBtnIndex++;
+                if (this.grpBtnIndex < groupBtnSettings.items.length) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+                else {
+                    this.grpBtnIndex = 0;
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + (this.grpBtnIndex)).focus();
+                }
+            }
+        }
+    };
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGroupButton.prototype.addOverFlowEvents = function (item, itemEle) {
+        var _this = this;
+        var groupButtonEle = itemEle.querySelector('#' + item.id);
+        var dropdown = getComponent(groupButtonEle, DropDownButton);
+        dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP });
+        var targetEle = dropdown.target;
+        targetEle.onclick = function () {
+            if (_this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
+                dropdown.element.focus();
+                dropdown.toggle();
+            }
+        };
+    };
+    /**
+     * Removes the additional event handlers as the item moved into overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGroupButton.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var groupButtonEle = itemEle.querySelector('#' + item.id);
+        if (groupButtonEle) {
+            var dropdown = getComponent(groupButtonEle, DropDownButton);
+            var cssClass = dropdown.cssClass.split(SPACE);
+            cssClass = cssClass.filter(function (value) { return value !== RIBBON_GROUP_BUTTON_OVERFLOW_POPUP; });
+            dropdown.setProperties({ cssClass: cssClass.join(SPACE) });
+        }
+    };
+    /**
+     * Removes DropDown.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGroupButton.prototype.destroyDropDown = function (item) {
+        var groupButtonEle = document.querySelector('#' + item.id);
+        if (groupButtonEle) {
+            var dropdown = getComponent(groupButtonEle, DropDownButton);
+            var tooltip = getComponent(dropdown.target, Tooltip);
+            tooltip.destroy();
+            dropdown.destroy();
+            remove(groupButtonEle);
+        }
+    };
+    /**
+     * Updates the group button size.
+     *
+     * @param {HTMLElement} itemElement - Gets the group button container element.
+     * @param {RibbonItemModel} item - Gets the ribbon item.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGroupButton.prototype.updateGroupButtonSize = function (itemElement, item) {
+        var groupBtnSettings = item.groupButtonSettings;
+        var buttonEle;
+        for (var i = 0; i < groupBtnSettings.items.length; i++) {
+            if (this.parent.activeLayout === 'Classic') {
+                buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
+            }
+            else {
+                buttonEle = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
+            }
+            if (buttonEle) {
+                var buttonObj = getComponent(buttonEle, Button);
+                buttonObj.setProperties({
+                    iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
+                    content: item.activeSize === RibbonItemSize.Small ? '' : groupBtnSettings.items[parseInt(i.toString(), 10)].content
+                });
+            }
+        }
+    };
+    return RibbonGroupButton;
+}());
+
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The Ribbon Component is a structured layout to manage tools with tabs and groups.
+ */
+var Ribbon = /** @__PURE__ @class */ (function (_super) {
+    __extends(Ribbon, _super);
+    /**
+     * Constructor for creating the widget.
+     *
+     * @param  {RibbonModel} options - Specifies the ribbon model
+     * @param  {string|HTMLDivElement} element - Specifies the target element
+     */
+    function Ribbon(options, element) {
+        var _this = this;
+        Ribbon_1.Inject(RibbonButton, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonComboBox, RibbonGroupButton);
+        _this = _super.call(this, options, element) || this;
+        return _this;
+    }
+    Ribbon_1 = Ribbon;
+    /**
+     * Initialize the control rendering.
+     *
+     * @returns {void}
+     * @private
+     */
+    Ribbon.prototype.render = function () {
+        this.initialize();
+    };
+    Ribbon.prototype.preRender = function () {
+        this.idIndex = 0;
+        this.tooltipData = [];
+        this.isAddRemove = false;
+        this.keyConfigs = {
+            leftarrow: 'leftarrow',
+            rightarrow: 'rightarrow',
+            tab: 'tab',
+            shiftTab: 'shift+tab'
+        };
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
     Ribbon.prototype.getPersistData = function () {
         return this.addOnPersist(['activeLayout']);
     };
@@ -2880,7 +3625,7 @@ var Ribbon = /** @__PURE__ @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 () {
@@ -2894,6 +3639,9 @@ var Ribbon = /** @__PURE__ @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();
@@ -3190,7 +3938,9 @@ var Ribbon = /** @__PURE__ @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) {
@@ -3333,13 +4083,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     if (((item.displayOptions === DisplayMode.Auto) ||
                         (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
                         itemContainer.setAttribute('data-simplified-width', activeContent.offsetWidth.toString());
-                        this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemContainer, groupContainer);
+                        this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemContainer, groupContainer, true);
                         if (item.activeSize === RibbonItemSize.Small) {
                             var itemEle = itemContainer.querySelector('#' + item.id);
                             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);
                         }
                     }
@@ -3351,7 +4101,7 @@ var Ribbon = /** @__PURE__ @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.
@@ -3410,7 +4160,7 @@ var Ribbon = /** @__PURE__ @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);
@@ -3454,8 +4204,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer) {
+    Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
+        var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
+        var isDisabledGroup = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             var overflowDDB = groupContainer.querySelector('#' + groupId + GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -3466,7 +4218,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
-            overflowButton.target.append(itemEle);
+            var overflowBtnTarget = overflowButton.target;
+            if (isDisabledGroup && isDisabledGroup.classList.contains('e-disabled')) {
+                overflowBtnTarget.classList.add('e-disabled');
+            }
+            isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + RIBBON_ITEM))
+                : overflowBtnTarget.append(itemEle);
         }
         else {
             if (!this.overflowDDB) {
@@ -3483,9 +4240,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + 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);
+                    isResize ? ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + RIBBON_ITEM)) : ofGroupContainer.append(itemEle);
                 }
                 else {
                     this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -3517,6 +4277,11 @@ var Ribbon = /** @__PURE__ @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) {
@@ -3627,7 +4392,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 var ele = activeContent.querySelector('#' + item.id + 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 + RIBBON_GROUP_BUTTON_ID), item);
+                }
+                else {
+                    _this.setItemSize(ele.querySelector('#' + item.id), item);
+                }
             }
         };
         var moveCollectionToColumn = function (start, end) {
@@ -3641,7 +4411,12 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID), collection.items[0]);
+                }
+                else {
+                    _this.setItemSize(ele.querySelector('#' + collection.items[0].id), collection.items[0]);
+                }
             }
         };
         var orientation = group.orientation;
@@ -3736,6 +4511,9 @@ var Ribbon = /** @__PURE__ @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);
                 }
             };
@@ -3757,6 +4535,9 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID);
+                    }
                     _this.setItemSize(ele_2, collection.items[0]);
                 }
             };
@@ -3856,7 +4637,7 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID);
                             reduceItemsToSmall(k, l, l);
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
@@ -3894,6 +4675,9 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID);
+                }
                 _this.setItemSize(ele_4, item);
             }
         };
@@ -3904,6 +4688,9 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID);
+                }
                 _this.setItemSize(ele_5, collections[parseInt(i.toString(), 10)].items[0]);
             }
         };
@@ -3920,6 +4707,9 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID);
+                            }
                             var valString = itemEle.getAttribute('data-medium-width');
                             var value = valString ? parseInt(valString, 10) : null;
                             if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
@@ -4021,8 +4811,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var container = parentEle.querySelector('#' + item.id + 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 + RIBBON_GROUP_BUTTON_ID);
+                    }
                     _this.setItemSize(ele_6, item);
-                    parentEle.insertAdjacentElement('afterend', container);
+                    parentEle.insertAdjacentElement('beforebegin', container);
                 }
             };
             reduce(start);
@@ -4043,8 +4836,11 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID);
+                    }
                     _this.setItemSize(ele_7, collection.items[0]);
-                    parentEle.insertAdjacentElement('afterend', collectionEle);
+                    parentEle.insertAdjacentElement('beforebegin', collectionEle);
                 }
             };
             reduce(start);
@@ -4092,6 +4888,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         return false;
     };
+    Ribbon.prototype.handleContentSize = function (itemEle, isRemoveOverflow) {
+        var itemContainer = itemEle.closest('.' + RIBBON_GROUP_CONTENT);
+        (isRemoveOverflow ? (itemContainer.classList.add(RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT)));
+    };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
         var itemContainer = itemEle.closest('.' + RIBBON_ITEM);
         if (item.type === RibbonItemType.Button) {
@@ -4107,6 +4907,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             remove(itemEle);
             this.createTemplateContent(item, itemContainer);
         }
+        else if (item.type === RibbonItemType.GroupButton) {
+            this.ribbonGroupButtonModule.updateGroupButtonSize(itemEle, item);
+        }
         itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM);
         if (item.activeSize === RibbonItemSize.Large) {
             itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
@@ -4146,6 +4949,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
                     if (itemEle !== null) {
+                        this_1.handleContentSize(itemEle);
                         this_1.addOverflowEvents(item, itemEle, dropdown);
                     }
                 }
@@ -4188,6 +4992,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
                     if (itemEle !== null) {
+                        this_2.handleContentSize(itemEle, true);
                         this_2.removeOverflowEvent(item, itemEle);
                     }
                 }
@@ -4462,6 +5267,9 @@ var Ribbon = /** @__PURE__ @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) {
@@ -4506,24 +5314,83 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         remove(this.tabObj.element.querySelector('.' + RIBBON_COLLAPSE_BUTTON));
         this.collapseButton = null;
     };
-    Ribbon.prototype.reRenderTabs = function () {
+    Ribbon.prototype.reRenderTabs = function (tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        this.destroyTabItems(this.tabsInternal);
-        this.tabsInternal = this.tabs.slice();
-        this.validateItemSize();
-        var tabItems = this.createTabItems(this.tabs);
-        if (this.selectedTab >= this.tabs.length) {
-            this.selectedTab = this.tabs.length - 1;
-        }
-        this.tabObj.setProperties({ items: tabItems, selectedItem: this.selectedTab });
-        var contentEle = this.tabObj.items[this.selectedTab].content;
-        if (contentEle.innerHTML === '') {
-            this.renderInitialTab(this.selectedTab);
-        }
-    };
-    Ribbon.prototype.switchLayout = function () {
-        this.currentControlIndex = 0;
+        for (var key in tabs) {
+            var index = parseInt(key, 10);
+            var tab = tabs[parseInt(index.toString(), 10)];
+            var isNewTab = false;
+            for (var j = 0; j < (this.tabObj.items.length); j++) {
+                if (this.tabs[parseInt(index.toString(), 10)].id === this.tabObj.items[parseInt(j.toString(), 10)].id) {
+                    isNewTab = true;
+                    break;
+                }
+            }
+            if (!isNewTab) {
+                this.destroyTabItems(this.tabsInternal);
+                this.tabsInternal = this.tabs.slice();
+                this.validateItemSize();
+                var tabItems = this.createTabItems(this.tabs);
+                if (this.selectedTab >= this.tabs.length) {
+                    this.selectedTab = this.tabs.length - 1;
+                }
+                this.tabObj.setProperties({ items: tabItems, selectedItem: this.selectedTab });
+                break;
+            }
+            else {
+                var groups = this.tabs[parseInt(index.toString(), 10)].groups;
+                var tabEle = this.tabObj.element;
+                var ribbonTab = this.tabs[parseInt(index.toString(), 10)];
+                ribbonTab.setProperties(tab, true);
+                this.setProperties({ groups: this.checkID(ribbonTab.groups, 'group', ribbonTab.id) }, true);
+                this.validateItemSize();
+                var contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
+                if (groups) {
+                    // Check whether header is passed by the user and sets the updated values.
+                    if (tab.header) {
+                        this.tabObj.items[parseInt(index.toString(), 10)].header.text.innerText = ribbonTab.header;
+                    }
+                    // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+                    if (tab.cssClass) {
+                        if (this.tabObj.items[parseInt(index.toString(), 10)].cssClass) {
+                            contentEle.classList.remove(this.tabObj.items[parseInt(index.toString(), 10)].cssClass);
+                            tabEle.querySelector('.e-active').classList.remove(this.tabObj.items[parseInt(index.toString(), 10)].cssClass);
+                        }
+                        contentEle.classList.add(ribbonTab.cssClass);
+                        tabEle.querySelector('.e-active').classList.add(ribbonTab.cssClass);
+                    }
+                    // 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];
+                            var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + 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];
+                                    var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                                    if (ele) {
+                                        this.destroyFunction(item, ele);
+                                    }
+                                }
+                            }
+                            if (dropdownElement) {
+                                this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                            }
+                        }
+                        var groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                        // eslint-disable-next-line @typescript-eslint/tslint/config
+                        groupElements.forEach(function (groupEle) { groupEle.remove(); });
+                        var elements = this.createGroups(ribbonTab.groups, index);
+                        append(elements, contentEle);
+                    }
+                }
+            }
+        }
+    };
+    Ribbon.prototype.switchLayout = function () {
+        this.currentControlIndex = 0;
         this.destroyScroll();
         this.collapseButton.classList.toggle(RIBBON_EXPAND_BUTTON, this.activeLayout === 'Simplified');
         this.element.classList.toggle(RIBBON_SIMPLIFIED_MODE, this.activeLayout === 'Simplified');
@@ -4597,10 +5464,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                     itemEle = groupContainer.querySelector('#' + item.id + 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);
@@ -4688,14 +5558,20 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                     var itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
                                     if (!itemEle) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + 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 + 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);
@@ -4862,6 +5738,9 @@ var Ribbon = /** @__PURE__ @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) {
@@ -4910,7 +5789,7 @@ var Ribbon = /** @__PURE__ @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);
                 }
             }
@@ -4989,54 +5868,74 @@ var Ribbon = /** @__PURE__ @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 + OVERFLOW_ID + DROPDOWN_ID) : null;
-                }
-                else {
-                    dropdownElement = group.enableGroupOverflow ?
-                        contentEle.querySelector('#' + group.id + GROUPOF_BUTTON_ID) : null;
-                    dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
-                    if (dropdown) {
-                        updateTooltipProp(dropdown.target, commonProp);
-                        dropdown.setProperties(commonProp);
+            if (contentEle.querySelector('.' + 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 + OVERFLOW_ID + 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 + 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 + 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(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 + 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 + RIBBON_GROUP_BUTTON_ID + i_5);
+                                            updateCommonProperty(btnEle, 'btn', commonProp);
+                                        }
+                                    }
+                                    else {
+                                        updateCommonProperty(ele, moduleName, commonProp);
+                                    }
+                                }
+                                else if (!isNullOrUndefined(commonProp.enableRtl)) {
+                                    ele.classList.toggle(RTL_CSS, commonProp.enableRtl);
+                                }
                             }
                         }
                     }
@@ -5082,6 +5981,10 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID) :
+                                        contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                                }
                             }
                         }
                         else {
@@ -5116,6 +6019,32 @@ var Ribbon = /** @__PURE__ @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 + 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 + 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);
         }
@@ -5125,6 +6054,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 this.tooltipData.splice(index, 1);
             }
         }
+        if (item.type === 'GroupButton') {
+            this.ribbonGroupButtonModule.destroyDropDown(item);
+        }
     };
     Ribbon.prototype.getItemModuleName = function (item) {
         switch (item.type) {
@@ -5140,6 +6072,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 return 'colorpicker';
             case 'ComboBox':
                 return 'combobox';
+            case 'GroupButton':
+                return 'group-btn';
             default:
                 return 'template';
         }
@@ -5173,6 +6107,56 @@ var Ribbon = /** @__PURE__ @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.
      *
@@ -5207,14 +6191,18 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
         var groups = this.tabs[parseInt(index.toString(), 10)].groups;
         if (groups && (contentEle.innerHTML !== '')) {
-            for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-                var group = groups_1[_i];
+            for (var _i = 0, groups_2 = groups; _i < groups_2.length; _i++) {
+                var group = groups_2[_i];
                 var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + 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];
                         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 + RIBBON_GROUP_BUTTON_ID) :
+                                contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                        }
                         if (ele) {
                             this.destroyFunction(item, ele);
                         }
@@ -5338,6 +6326,105 @@ var Ribbon = /** @__PURE__ @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 + OVERFLOW_ID);
+            if (itemProp.group.enableGroupOverflow) {
+                var overflowDDBEle = contentEle.querySelector('#' + groupID + 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 + 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 + OVERFLOW_ID);
+            if (itemProp.group.enableGroupOverflow) {
+                var overflowDDBEle = contentEle.querySelector('#' + groupID + 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 + CONTAINER_ID);
+                if (grpContainer) {
+                    isDisabled ? grpContainer.classList.add('e-disabled') : grpContainer.classList.remove('e-disabled');
+                }
+            }
+        }
+    };
     /**
      * adds the ribbon collection.
      *
@@ -5511,6 +6598,41 @@ var Ribbon = /** @__PURE__ @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 + 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.
      *
@@ -5536,14 +6658,18 @@ var Ribbon = /** @__PURE__ @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_2 = groups; _i < groups_2.length; _i++) {
-                    var group = groups_2[_i];
+                for (var _i = 0, groups_3 = groups; _i < groups_3.length; _i++) {
+                    var group = groups_3[_i];
                     var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + 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];
                             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 + RIBBON_GROUP_BUTTON_ID) :
+                                    contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                            }
                             if (ele) {
                                 this.destroyFunction(item, ele);
                             }
@@ -5815,9 +6941,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
                 itemEle = contentEle.querySelector('#' + itemId);
+                if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
+                    itemEle = contentEle.querySelector('#' + itemId + 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);
                     }
                 }
@@ -5881,6 +7010,9 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID) : null;
+            }
         }
         else {
             //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
@@ -5892,7 +7024,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         if (ele) {
             this.destroyFunction(item, ele);
-            ele.closest('#' + item.id + CONTAINER_ID).remove();
+            if (item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Simplified) {
+                document.getElementById(item.id + CONTAINER_ID).remove();
+            }
+            else {
+                ele.closest('#' + item.id + CONTAINER_ID).remove();
+            }
         }
     };
     /**
@@ -5919,13 +7056,34 @@ var Ribbon = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID, itemProp);
+        }
+        else {
+            ele = getItemElement(this, itemId, itemProp);
+        }
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
             itemEle.classList.toggle(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 + RIBBON_GROUP_BUTTON_ID + i);
+                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    }
+                }
+                else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                    for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                        var btnEle = ele.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
+                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    }
+                }
+                else {
+                    updateControlDisabled(ele, moduleName, isDisabled);
+                }
             }
             else {
                 ele.classList.toggle(DISABLED_CSS, isDisabled);
@@ -5941,7 +7099,9 @@ var Ribbon = /** @__PURE__ @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();
@@ -6038,7 +7198,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
                     break;
                 case 'tabs':
-                    this.reRenderTabs();
+                    this.reRenderTabs(newProp.tabs);
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
@@ -6051,6 +7211,13 @@ var Ribbon = /** @__PURE__ @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);
@@ -6063,6 +7230,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var toolbar_1 = this.tabObj['tbObj'];
                     toolbar_1.refreshOverflow();
                     break;
+                case 'hideLayoutSwitcher':
+                    this.hideLayoutSwitcher ? this.removeExpandCollapse() : this.addExpandCollapse();
+                    break;
             }
         }
     };
@@ -6076,6 +7246,9 @@ var Ribbon = /** @__PURE__ @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);
@@ -6100,6 +7273,9 @@ var Ribbon = /** @__PURE__ @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);
@@ -6115,6 +7291,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "launcherIconClick", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "created", void 0);
     Ribbon = Ribbon_1 = __decorate([
         NotifyPropertyChanges
     ], Ribbon);
@@ -6440,6 +7619,553 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
     return RibbonFileMenu;
 }());
 
+var __extends$18 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
+    __extends$18(RibbonBackstage, _super);
+    function RibbonBackstage(parent) {
+        var _this = _super.call(this) || this;
+        _this.parent = parent;
+        return _this;
+    }
+    /**
+    * @private
+    * @returns {void}
+    */
+    RibbonBackstage.prototype.render = function () {
+        // render code
+    };
+    /**
+     * @private
+     * @returns {void}
+     */
+    RibbonBackstage.prototype.preRender = function () {
+        // pre render code
+    };
+    RibbonBackstage.prototype.getPersistData = function () {
+        return '';
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    RibbonBackstage.prototype.onPropertyChanged = function () {
+        // onProperty changes code
+    };
+    RibbonBackstage.prototype.getModuleName = function () {
+        return 'ribbonBackstage';
+    };
+    RibbonBackstage.prototype.destroy = function () {
+        if (this.backstageButton) {
+            this.destroyDDB();
+        }
+        this.parent = null;
+    };
+    /**
+     * Creates Backstage Menu
+     *
+     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonBackstage.prototype.createBackStage = function (backStageOptions) {
+        var _this = this;
+        if (!backStageOptions.visible) {
+            return;
+        }
+        this.backstageButtonEle = this.parent.createElement('button', {
+            id: this.parent.element.id + RIBBON_BACKSTAGE_MENU_ID
+        });
+        var tabEle = this.parent.tabObj.element;
+        var toolbarEle = tabEle.querySelector('.e-toolbar');
+        tabEle.insertBefore(this.backstageButtonEle, toolbarEle);
+        this.backstageButton = new Button({
+            content: backStageOptions.text,
+            enableRtl: this.parent.enableRtl,
+            cssClass: RIBBON_BACKSTAGE,
+            created: function () {
+                tabEle.style.setProperty(RIBBON_FILE_MENU_WIDTH, _this.backstageButtonEle.offsetWidth + 'px');
+            }
+        }, this.backstageButtonEle);
+        this.createBackStagePopup(backStageOptions);
+        if (this.parent.backStageMenu.template) {
+            this.createBackStageTemplate(this.parent.backStageMenu.template);
+        }
+        else {
+            var footerItemCount = 0;
+            var itemCount = 0;
+            for (var i = 0; i < backStageOptions.items.length; i++) {
+                var item = backStageOptions.items[parseInt(i.toString(), 10)];
+                if (item.isFooter) {
+                    footerItemCount++;
+                }
+                else {
+                    itemCount++;
+                }
+            }
+            if (itemCount > 0) {
+                this.createBackstageMenu(backStageOptions, false);
+            }
+            if (footerItemCount > 0) {
+                this.createBackstageMenu(backStageOptions, true);
+            }
+            if (this.menuCtrl) {
+                this.checkMenuItems(this.menuCtrl.items);
+            }
+            if (this.footerMenuCtrl) {
+                this.checkMenuItems(this.footerMenuCtrl.items);
+            }
+        }
+        this.backstageButtonEle.onclick = function (e) {
+            e.stopPropagation();
+            _this.showBackstage();
+            _this.popupHTMLElement.classList.add(RIBBON_BACKSTAGE_OPEN);
+            var menuItem = _this.menuWrapper.querySelector('.e-menu-item.e-selected');
+            if (menuItem) {
+                menuItem.classList.remove('e-selected');
+            }
+            for (var i = 0; i < backStageOptions.items.length; i++) {
+                var item = backStageOptions.items[parseInt(i.toString(), 10)];
+                if (!item.isFooter && _this.menuCtrl.items[0].text === item.text) {
+                    var firstMenuEle = _this.popupHTMLElement.querySelector('#' + _this.menuCtrl.items[0].id);
+                    if (firstMenuEle) {
+                        firstMenuEle.classList.add('e-selected');
+                        firstMenuEle.focus();
+                    }
+                    _this.createBackStageContent(_this.menuCtrl.items[0].id, item.content);
+                    break;
+                }
+                else {
+                    continue;
+                }
+            }
+        };
+        this.parent.tabObj.refreshActiveTabBorder();
+        this.addBackStageMenuTooltip(backStageOptions);
+        EventHandler.add(document, 'click', this.onClickEvent, this);
+    };
+    RibbonBackstage.prototype.onClickEvent = function (e) {
+        var targetEle = e.target;
+        if (this.popupHTMLElement.contains(targetEle)) {
+            return;
+        }
+        else {
+            this.hideBackstage();
+        }
+    };
+    RibbonBackstage.prototype.addBackStageMenuTooltip = function (backStageOptions) {
+        if (isTooltipPresent(backStageOptions.ribbonTooltipSettings)) {
+            this.backstageButtonEle.classList.add(RIBBON_TOOLTIP_TARGET);
+            this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
+        }
+    };
+    RibbonBackstage.prototype.checkMenuItems = function (backStageItems) {
+        for (var i = 0; i < backStageItems.length; i++) {
+            var item = backStageItems[parseInt(i.toString(), 10)];
+            if (!item.iconCss) {
+                var menuItemEle = this.popupHTMLElement.querySelector('#' + item.id);
+                menuItemEle.classList.add(RIBBON_BACKSTAGE_TEXT_MENU);
+            }
+        }
+    };
+    RibbonBackstage.prototype.createBackStagePopup = function (backStageOptions) {
+        var _this = this;
+        this.popupHTMLElement = this.parent.createElement('div', {
+            id: this.parent.element.id + RIBBON_BACKSTAGE_POPUP_ID,
+            className: RIBBON_BACKSTAGE_POPUP
+        });
+        var targetEle;
+        if (backStageOptions.target) {
+            targetEle = backStageOptions.target instanceof HTMLElement ? backStageOptions.target : document.querySelector(backStageOptions.target);
+            targetEle.appendChild(this.popupHTMLElement);
+        }
+        else {
+            this.parent.element.appendChild(this.popupHTMLElement);
+        }
+        this.popupEle = new Popup(this.popupHTMLElement, {
+            height: backStageOptions.height,
+            width: backStageOptions.width,
+            relateTo: backStageOptions.target || this.parent.element,
+            enableRtl: this.parent.enableRtl
+        });
+        if (this.parent.enableRtl) {
+            this.updatePopupPositionOnRtl(this.parent.enableRtl);
+        }
+        this.popupHTMLElement.onkeydown = function (e) { if (e.code === 'Escape') {
+            _this.hideBackstage();
+        } };
+        this.hideBackstage();
+    };
+    RibbonBackstage.prototype.updatePopupPositionOnRtl = function (enableRtl) {
+        var popupStyle = this.popupHTMLElement.style;
+        if (enableRtl) {
+            popupStyle.right = popupStyle.left;
+            popupStyle.left = 'unset';
+        }
+        else {
+            popupStyle.left = popupStyle.right;
+            popupStyle.right = 'unset';
+        }
+    };
+    RibbonBackstage.prototype.createBackstageMenu = function (menuOptions, isFooter) {
+        var _this = this;
+        var wrapperEle = this.popupHTMLElement.querySelector('#' + this.parent.element.id + '_wrapper');
+        if (!wrapperEle) {
+            this.menuWrapper = this.parent.createElement('div', {
+                id: this.parent.element.id + '_wrapper',
+                className: RIBBON_BACKSTAGE_MENU_WRAPPER
+            });
+            this.popupHTMLElement.appendChild(this.menuWrapper);
+        }
+        if (menuOptions.backButton.visible && !isFooter) {
+            var closeBtnEle = this.parent.createElement('button', {
+                id: this.parent.element.id + '_close',
+                className: 'e-ribbon-close-btn'
+            });
+            this.closeBtn = new Button({
+                content: menuOptions.backButton.text,
+                iconCss: menuOptions.backButton.iconCss ? menuOptions.backButton.iconCss : BACKSTAGE_CLOSE_ICON,
+                enableRtl: this.parent.enableRtl
+            }, closeBtnEle);
+            this.menuWrapper.append(closeBtnEle);
+            closeBtnEle.onclick = function () {
+                _this.popupHTMLElement.classList.remove(RIBBON_BACKSTAGE_OPEN);
+                _this.hideBackstage();
+                _this.isBackButtonClicked = true;
+            };
+        }
+        var itemsWrapperEle = this.popupHTMLElement.querySelector('#' + this.parent.element.id + '_itemswrapper');
+        if (!itemsWrapperEle) {
+            this.itemsWrapperEle = this.parent.createElement('div', {
+                id: this.parent.element.id + '_itemswrapper',
+                className: RIBBON_BACKSTAGE_ITEMS_WRAPPER
+            });
+            this.menuWrapper.append(this.itemsWrapperEle);
+        }
+        var ulFooterElem;
+        if (isFooter) {
+            ulFooterElem = this.parent.createElement('ul', {
+                id: this.parent.element.id + RIBBON_FOOTER_MENU_LIST
+            });
+            this.itemsWrapperEle.appendChild(ulFooterElem);
+        }
+        else {
+            this.ulMenuElem = this.parent.createElement('ul', {
+                id: this.parent.element.id + RIBBON_MENU_LIST
+            });
+            this.itemsWrapperEle.appendChild(this.ulMenuElem);
+        }
+        if (!isFooter) {
+            this.menuCtrl = new Menu({
+                orientation: 'Vertical',
+                enableRtl: this.parent.enableRtl,
+                cssClass: RIBBON_BACKSTAGE_MENU,
+                items: this.cloneMenuItem(menuOptions.items),
+                select: this.menuSelect.bind(this, menuOptions)
+            }, this.ulMenuElem);
+        }
+        else {
+            this.footerMenuCtrl = new Menu({
+                orientation: 'Vertical',
+                enableRtl: this.parent.enableRtl,
+                cssClass: RIBBON_BACKSTAGE_MENU,
+                items: this.cloneFooterMenuItem(menuOptions.items),
+                select: this.menuSelect.bind(this, menuOptions)
+            }, ulFooterElem);
+        }
+    };
+    RibbonBackstage.prototype.cloneMenuItem = function (items) {
+        var itemsList = [];
+        for (var i = 0; i < items.length; i++) {
+            var item = items[parseInt(i.toString(), 10)];
+            if (item.isFooter) {
+                continue;
+            }
+            else {
+                itemsList.push({
+                    id: item.id,
+                    iconCss: item.iconCss,
+                    separator: item.separator,
+                    text: item.text
+                });
+            }
+        }
+        return itemsList;
+    };
+    RibbonBackstage.prototype.cloneFooterMenuItem = function (items) {
+        var itemsList = [];
+        for (var i = 0; i < items.length; i++) {
+            var item = items[parseInt(i.toString(), 10)];
+            if (!item.isFooter) {
+                continue;
+            }
+            else {
+                itemsList.push({
+                    id: item.id,
+                    iconCss: item.iconCss,
+                    separator: item.separator,
+                    text: item.text
+                });
+            }
+        }
+        return itemsList;
+    };
+    RibbonBackstage.prototype.createBackStageContent = function (itemId, content) {
+        var templateName = 'backstageContent';
+        this.clearTemplate([templateName]);
+        if (!this.backstageContentEle) {
+            this.backstageContentEle = this.parent.createElement('div', {
+                id: itemId + CONTENT_ID,
+                className: RIBBON_BACKSTAGE_CONTENT
+            });
+        }
+        else {
+            this.backstageContentEle.innerHTML = '';
+            this.backstageContentEle.id = itemId + CONTENT_ID;
+        }
+        var templateFunction = getTemplateFunction(content);
+        append(templateFunction({}, this, templateName, 'backstageContent', this.parent.isStringTemplate), this.backstageContentEle);
+        if (content) {
+            this.popupHTMLElement.append(this.backstageContentEle);
+        }
+        this.renderReactTemplates();
+        return templateFunction;
+    };
+    RibbonBackstage.prototype.createBackStageTemplate = function (template) {
+        var templateName = 'backstageTemplate';
+        this.clearTemplate([templateName]);
+        this.backstageTempEle = this.parent.createElement('div', {
+            id: this.parent.element.id + RIBBON_BACKSTAGE_MENU_ID + '_template',
+            className: RIBBON_BACKSTAGE_TEMPLATE
+        });
+        var templateFunction = getTemplateFunction(template);
+        append(templateFunction({}, this, templateName, 'backstageTemplate', this.parent.isStringTemplate), this.backstageTempEle);
+        this.popupHTMLElement.append(this.backstageTempEle);
+        this.renderReactTemplates();
+        return templateFunction;
+    };
+    RibbonBackstage.prototype.menuSelect = function (menuOptions, args) {
+        for (var i = 0; i < menuOptions.items.length; i++) {
+            var item = menuOptions.items[parseInt(i.toString(), 10)];
+            if (item.text === args.item.text) {
+                this.contentItem = item;
+                break;
+            }
+        }
+        this.createBackStageContent(args.item.id, this.contentItem.content);
+        var eventArgs = { cancel: false, target: args.element, item: this.contentItem, isBackButton: this.isBackButtonClicked };
+        if (this.contentItem.backStageItemClick) {
+            this.contentItem.backStageItemClick.call(this, eventArgs);
+        }
+        if (eventArgs.cancel) {
+            return;
+        }
+    };
+    /**
+     * setRtl
+     *
+     * @param {commonProperties} commonProp - Get the common property of ribbon.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonBackstage.prototype.setCommonProperties = function (commonProp) {
+        if (this.backstageButton) {
+            this.backstageButton.setProperties(commonProp);
+            if (this.popupEle) {
+                this.popupEle.setProperties(commonProp);
+                if (this.popupHTMLElement)
+                    this.updatePopupPositionOnRtl(commonProp.enableRtl);
+                if (this.menuCtrl) {
+                    this.menuCtrl.setProperties(commonProp);
+                    if (this.closeBtn) {
+                        this.closeBtn.setProperties(commonProp);
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Update Backstage menu
+     *
+     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage menu.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonBackstage.prototype.updateBackStageMenu = function (backStageOptions) {
+        if (backStageOptions.visible) {
+            if (this.backstageButton) {
+                if (backStageOptions.text) {
+                    this.backstageButton.setProperties({
+                        content: backStageOptions.text
+                    });
+                    this.parent.tabObj.element.style.setProperty(RIBBON_FILE_MENU_WIDTH, this.backstageButtonEle.offsetWidth + 'px');
+                }
+                if (this.popupEle) {
+                    this.popupEle.setProperties({
+                        height: backStageOptions.height,
+                        width: backStageOptions.width,
+                        target: backStageOptions.target || this.parent.element,
+                    });
+                }
+                if (backStageOptions.template) {
+                    if (this.backstageTempEle) {
+                        remove(this.backstageTempEle);
+                        this.backstageTempEle = null;
+                    }
+                    this.createBackStageTemplate(backStageOptions.template);
+                }
+                else {
+                    if (this.menuCtrl) {
+                        this.menuCtrl.setProperties({
+                            items: this.cloneMenuItem(backStageOptions.items)
+                        });
+                    }
+                    if (this.footerMenuCtrl) {
+                        this.footerMenuCtrl.setProperties({
+                            items: this.cloneFooterMenuItem(backStageOptions.items)
+                        });
+                    }
+                    else {
+                        var footerItemCount = 0;
+                        var itemCount = 0;
+                        for (var i = 0; i < backStageOptions.items.length; i++) {
+                            var item = backStageOptions.items[parseInt(i.toString(), 10)];
+                            if (item.isFooter) {
+                                footerItemCount++;
+                            }
+                            else {
+                                itemCount++;
+                            }
+                        }
+                        if (itemCount > 0) {
+                            this.createBackstageMenu(backStageOptions, false);
+                        }
+                        if (footerItemCount > 0) {
+                            this.createBackstageMenu(backStageOptions, true);
+                        }
+                    }
+                }
+                this.removeBackstageMenuTooltip();
+                this.addBackStageMenuTooltip(backStageOptions);
+            }
+            else {
+                this.createBackStage(backStageOptions);
+            }
+        }
+        else if (this.backstageButton) {
+            this.destroyDDB();
+        }
+        this.parent.tabObj.refreshActiveTabBorder();
+    };
+    RibbonBackstage.prototype.destroyMenu = function () {
+        if (this.menuCtrl) {
+            this.menuCtrl.destroy();
+            this.menuCtrl = null;
+        }
+    };
+    RibbonBackstage.prototype.destroyDDB = function () {
+        this.removeBackstageMenuTooltip();
+        var tabEle = this.parent.tabObj.element;
+        tabEle.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
+        this.destroyMenu();
+        this.backstageButton.destroy();
+        this.backstageButton = null;
+        remove(this.backstageButtonEle);
+        this.backstageButtonEle = null;
+        EventHandler.remove(document, 'click', this.onClickEvent);
+    };
+    RibbonBackstage.prototype.removeBackstageMenuTooltip = function () {
+        var _this = this;
+        var index = getIndex(this.parent.tooltipData, function (e) { return e.id === _this.backstageButtonEle.id; });
+        if (index !== -1) {
+            this.backstageButtonEle.classList.remove(RIBBON_TOOLTIP_TARGET);
+            this.parent.tooltipData.splice(index, 1);
+        }
+    };
+    /**
+     * Add items to Backstage Menu.
+     *
+     * @param {BackstageItemModel[]} items - Gets the items to be added.
+     * @param {string} target - Gets the target item to add the items.
+     * @param {boolean} isAfter - Gets the boolean value to add the items after or before the target item.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonBackstage.prototype.addBackstageItems = function (items, target, isAfter, isUniqueId) {
+        for (var i = 0; i < items.length; i++) {
+            var item = items[parseInt(i.toString(), 10)];
+            if (item.isFooter) {
+                isAfter ? this.footerMenuCtrl.insertAfter(items, target, isUniqueId) : this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
+            }
+            else {
+                isAfter ? this.menuCtrl.insertAfter(items, target, isUniqueId) : this.menuCtrl.insertBefore(items, target, isUniqueId);
+            }
+        }
+        var backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
+        var backStageOptions = this.parent.backStageMenu;
+        for (var i = 0; i < backStageOptions.items.length; i++) {
+            var item = backStageOptions.items[parseInt(i.toString(), 10)];
+            for (var i_1 = 0; i_1 < backstageItems.length; i_1++) {
+                var item1 = backstageItems[parseInt(i_1.toString(), 10)];
+                if (item.text === item1.text) {
+                    item1.content = item.content;
+                    break;
+                }
+            }
+        }
+        this.parent.backStageMenu.setProperties({ items: backstageItems }, true);
+    };
+    /**
+     * Remove items from Backstage Menu.
+     *
+     * @param {string[]} items - Gets the items to be removed.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonBackstage.prototype.removeBackstageItems = function (items, isUniqueId) {
+        this.menuCtrl.removeItems(items, isUniqueId);
+        this.footerMenuCtrl.removeItems(items, isUniqueId);
+        var backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
+        this.parent.backStageMenu.setProperties({ items: backstageItems }, true);
+    };
+    /**
+     * Renders the backstage dynamically.
+     *
+     * @returns {void}
+     */
+    RibbonBackstage.prototype.showBackstage = function () {
+        this.popupEle.show();
+    };
+    /**
+     * Hides the backstage dynamically.
+     *
+     * @returns {void}
+     */
+    RibbonBackstage.prototype.hideBackstage = function () {
+        if (this.popupEle.element.classList.contains(RIBBON_BACKSTAGE_OPEN)) {
+            this.popupEle.element.classList.remove(RIBBON_BACKSTAGE_OPEN);
+        }
+        this.popupEle.hide();
+    };
+    return RibbonBackstage;
+}(Component));
+
 /**
  * Ribbon modules
  */
@@ -6447,5 +8173,5 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
 // export all modules from current location
 // example: export * from './module'
 
-export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_FILE_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, RibbonTooltip, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonFileMenu };
+export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
 //# sourceMappingURL=ej2-ribbon.es5.js.map