@syncfusion/ej2-ribbon 22.2.12 → 23.1.38

package/dist/es6/ej2-ribbon.es2015.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 __decorate$5 = (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;
@@ -403,6 +421,9 @@ __decorate$9([
 __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);
@@ -515,6 +536,54 @@ __decorate$11([
     Property('')
 ], RibbonTooltip.prototype, "iconCss", void 0);
 
+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.
+ */
+class RibbonGroupButtonItem extends ChildProperty {
+}
+__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);
+
+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.
+ */
+class RibbonGroupButtonSettings extends ChildProperty {
+}
+__decorate$12([
+    Property('Single')
+], RibbonGroupButtonSettings.prototype, "selection", void 0);
+__decorate$12([
+    Collection([], RibbonGroupButtonItem)
+], RibbonGroupButtonSettings.prototype, "items", void 0);
+
 var __decorate$4 = (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);
@@ -580,6 +649,9 @@ __decorate$4([
 __decorate$4([
     Complex({}, RibbonSplitButtonSettings)
 ], RibbonItem.prototype, "splitButtonSettings", void 0);
+__decorate$4([
+    Complex({}, RibbonGroupButtonSettings)
+], RibbonItem.prototype, "groupButtonSettings", void 0);
 
 var __decorate$3 = (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;
@@ -698,7 +770,7 @@ __decorate$1([
     Property('')
 ], RibbonTab.prototype, "header", void 0);
 
-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;
@@ -718,49 +790,151 @@ class FileMenuSettings extends ChildProperty {
         super.setProperties(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);
 
+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.
+ */
+class BackstageBackButton extends ChildProperty {
+}
+__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);
+
+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.
+ */
+class BackstageItem extends ChildProperty {
+}
+__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);
+
+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.
+ */
+class BackStageMenu extends ChildProperty {
+    /**
+     * @param {Object} prop - Gets the property of Backstage Menu.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop, muteOnChange) {
+        super.setProperties(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);
+
 // export * from './file-menu';
 
 /**
@@ -771,6 +945,8 @@ const ITEM_VERTICAL_CENTER = 'e-ribbon-vertical-center';
 /** @hidden */
 const EXPAND_COLLAPSE_ICON = 'e-icons e-drop-icon';
 /** @hidden */
+const BACKSTAGE_CLOSE_ICON = 'e-icons e-arrow-left';
+/** @hidden */
 const OVERFLOW_ICON = 'e-icons e-more-horizontal-1';
 /** @hidden */
 const VERTICAL_DDB = 'e-vertical';
@@ -819,6 +995,14 @@ const RIBBON_MINIMIZE = 'e-ribbon-minimize';
 /** @hidden */
 const RIBBON_GROUP = 'e-ribbon-group';
 /** @hidden */
+const RIBBON_SINGLE_BUTTON_SELECTION = 'e-ribbon-single-selection';
+/** @hidden */
+const RIBBON_MULTIPLE_BUTTON_SELECTION = 'e-ribbon-multiple-selection';
+/** @hidden */
+const RIBBON_GROUP_BUTTON = 'e-ribbon-group-button';
+/** @hidden */
+const RIBBON_GROUP_BUTTON_OVERFLOW_POPUP = 'e-ribbon-group-button-overflow-popup';
+/** @hidden */
 const RIBBON_GROUP_CONTAINER = 'e-ribbon-group-container';
 /** @hidden */
 const RIBBON_OF_TAB_CONTAINER = 'e-ribbon-of-tab';
@@ -881,6 +1065,26 @@ const RIBBON_TEXT_CONTAINER = 'e-ribbon-text-container';
 /** @hidden */
 const RIBBON_SIMPLIFIED_MODE = 'e-ribbon-simplified-mode';
 /** @hidden */
+const RIBBON_BACKSTAGE_POPUP = 'e-ribbon-backstage-popup';
+/** @hidden */
+const RIBBON_BACKSTAGE_OPEN = 'e-ribbon-backstage-open';
+/** @hidden */
+const RIBBON_BACKSTAGE_CONTENT = 'e-ribbon-backstage-content';
+/** @hidden */
+const RIBBON_SELECTED_CONTENT = 'e-ribbon-selected-content';
+/** @hidden */
+const RIBBON_BACKSTAGE = 'e-ribbon-backstage';
+/** @hidden */
+const RIBBON_BACKSTAGE_MENU = 'e-ribbon-backstage-menu';
+/** @hidden */
+const RIBBON_BACKSTAGE_TEMPLATE = 'e-ribbon-backstage-template';
+/** @hidden */
+const RIBBON_BACKSTAGE_MENU_WRAPPER = 'e-ribbon-backstage-wrapper';
+/** @hidden */
+const RIBBON_BACKSTAGE_ITEMS_WRAPPER = 'e-ribbon-backstage-items-wrapper';
+/** @hidden */
+const RIBBON_BACKSTAGE_TEXT_MENU = 'e-blankicon';
+/** @hidden */
 const TAB_ID = '_tab';
 /** @hidden */
 const GROUP_ID = '_group';
@@ -909,10 +1113,20 @@ const DROPDOWN_ID = '_dropdown';
 /** @hidden */
 const RIBBON_FILE_MENU_ID = '_filemenu';
 /** @hidden */
+const RIBBON_BACKSTAGE_MENU_ID = '_backstage';
+/** @hidden */
+const RIBBON_BACKSTAGE_POPUP_ID = '_backstagepopup';
+/** @hidden */
 const RIBBON_FILE_MENU_LIST = '_filemenulist';
 /** @hidden */
+const RIBBON_MENU_LIST = '_menulist';
+/** @hidden */
+const RIBBON_FOOTER_MENU_LIST = '_footermenulist';
+/** @hidden */
 const RIBBON_HELP_PANE_TEMPLATE_ID = '_helppanetemplate';
 /** @hidden */
+const RIBBON_GROUP_BUTTON_ID = '_grpbtn';
+/** @hidden */
 const RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 const RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
@@ -1037,6 +1251,9 @@ class RibbonButton {
             return;
         }
         const 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();
         }
@@ -1309,7 +1526,7 @@ class RibbonColorPicker {
         const 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 = (e) => {
+        colorPickerObj.beforeClose = () => {
             colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
             if (item.colorPickerSettings.beforeClose) {
                 item.colorPickerSettings.beforeClose.call(this);
@@ -1605,6 +1822,7 @@ class RibbonDropDown {
             iconCss: dropDownSettings.iconCss,
             items: dropDownSettings.items,
             target: dropDownSettings.target,
+            createPopupOnClick: dropDownSettings.createPopupOnClick,
             beforeClose: (e) => {
                 if (dropDownSettings.beforeClose) {
                     dropDownSettings.beforeClose.call(this, e);
@@ -1620,7 +1838,7 @@ class RibbonDropDown {
             created: dropDownSettings.created,
             open: dropDownSettings.open,
             select: dropDownSettings.select
-        }, buttonEle);
+        }).appendTo(buttonEle);
     }
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -2557,130 +2775,566 @@ function updateTooltipProp(element, prop) {
     control.setProperties(prop);
 }
 
-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;
-};
-var Ribbon_1;
 /**
- * The Ribbon Component is a structured layout to manage tools with tabs and groups.
+ * Defines the items of Ribbon.
  */
-let Ribbon = Ribbon_1 = class Ribbon extends Component {
-    /**
-     * Constructor for creating the widget.
-     *
-     * @param  {RibbonModel} options - Specifies the ribbon model
-     * @param  {string|HTMLDivElement} element - Specifies the target element
-     */
-    constructor(options, element) {
-        Ribbon_1.Inject(RibbonButton, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonComboBox);
-        super(options, element);
-    }
-    /**
-     * Initialize the control rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    render() {
-        this.initialize();
-    }
-    preRender() {
-        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
-     */
-    getPersistData() {
-        return this.addOnPersist(['activeLayout']);
+class RibbonGroupButton {
+    constructor(parent) {
+        this.parent = parent;
+        this.isSelected = false;
     }
-    /**
-     * Get component name.
-     *
-     * @returns {string} - Module name
-     * @private
-     */
     getModuleName() {
-        return 'ribbon';
+        return 'ribbonGroupButton';
+    }
+    destroy() {
+        this.parent = null;
     }
     /**
-     * To provide the array of modules needed for component rendering
+     * Creates Group Button
      *
-     * @returns {ModuleDeclaration[]} - returns module declaration.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemElement - Gets the ribbon item element.
+     * @returns {void}
      * @hidden
      */
-    requiredModules() {
-        const 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] });
-        return modules;
-    }
-    initialize() {
-        this.element.id = this.element.id || getUniqueID('e-' + this.getModuleName());
-        addClass([this.element], ['e-rbn', ...(this.cssClass ? this.cssClass.split(SPACE) : [])]);
-        if (this.enableRtl) {
-            this.element.classList.add(RTL_CSS);
-        }
-        this.element.style.width = formatUnit(this.width);
-        this.renderTabs();
-        if (this.ribbonFileMenuModule) {
-            this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
-        }
-        this.createHelpPaneTemplate();
-        const toolbar = this.tabObj['tbObj'];
-        toolbar.refreshOverflow();
-        createTooltip(this.element, this);
-        this.wireEvents();
-        this.wireKeyboardEvent();
-        this.currentControlIndex = 0;
-    }
-    wireEvents() {
-        EventHandler.add(window, 'resize', this.resizeHandler, this);
-    }
-    wireKeyboardEvent() {
-        this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
-            keyAction: this.keyActionHandler.bind(this),
-            keyConfigs: this.keyConfigs,
-            eventName: 'keydown'
+    createGroupButton(item, itemElement) {
+        const groupBtnSettings = item.groupButtonSettings;
+        this.count = 0;
+        const btnContainerEle = this.parent.createElement('div', {
+            id: item.id + RIBBON_GROUP_BUTTON_ID,
+            className: 'e-btn-group'
         });
-    }
-    keyActionHandler(e) {
-        if (((e.key === 'Tab') && (!(e.target.classList.contains('e-tab-wrap')) && !(e.target.classList.contains('e-combobox'))))) {
-            e.preventDefault();
-        }
-        const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
-        const ribbonControls = activeContent.querySelectorAll('.e-control');
-        const comboBoxElements = activeContent.querySelectorAll('.e-combobox');
-        let comboBoxEle;
-        if (comboBoxElements) {
-            for (let i = 0; i < comboBoxElements.length; i++) {
-                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
-                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+        itemElement.appendChild(btnContainerEle);
+        for (let i = 0; i < groupBtnSettings.items.length; i++) {
+            if ((groupBtnSettings.items[parseInt(i.toString(), 10)].iconCss)) {
+                const 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);
+                const 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 (comboBoxEle) {
-            for (let i = 0; i < ribbonControls.length; i++) {
-                if (ribbonControls[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
-                    if (ribbonControls[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
-                        this.currentControlIndex = i;
+        if (this.parent.activeLayout === 'Simplified') {
+            let dropdownIcon;
+            let activeEleCount = 0;
+            let count = 0;
+            const buttonEle = this.parent.createElement('button', {
+                id: item.id
+            });
+            itemElement.appendChild(buttonEle);
+            for (let 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;
                     }
                 }
             }
-        }
-        if (this.currentControlIndex === 0) {
-            let item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+            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 = () => {
+                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
+                    this.grpBtnIndex = 0;
+                }
+            };
+            btnContainerEle.onkeydown = (e) => {
+                if (this.parent.activeLayout === 'Simplified') {
+                    this.handleGroupButtonNavigation(e, item);
+                }
+            };
+            createTooltip(btnContainerEle, this.parent);
+            this.isSelected = false;
+        }
+    }
+    groupButtonClicked(itemIndex, item, grpBtnSettings) {
+        const previousItems = [], selectingItems = [], selectedItems = [];
+        let groupButtonEle;
+        let dropdown;
+        for (let 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)]);
+        }
+        const 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 (let j = 0; j < grpBtnSettings.items.length; j++) {
+                    if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
+                        document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
+                    }
+                }
+                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');
+                let activeEleCount = 0;
+                for (let 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') {
+                    let dropdownIcon = null;
+                    let 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 (let 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)]);
+            }
+            const eventArgs = { previousItems: previousItems, selectedItems: selectedItems };
+            if (grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click) {
+                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click.call(this, eventArgs);
+            }
+        }
+    }
+    /**
+     * 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
+     */
+    switchGroupButton(item, itemElement) {
+        const groupBtnSettings = item.groupButtonSettings;
+        let dropdownIcon = null;
+        let activeEleCount = 0;
+        let itemsCount = 0;
+        if (this.parent.activeLayout === 'Simplified') {
+            const containerEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+            const buttonEle = this.parent.createElement('button', {
+                id: item.id
+            });
+            itemElement.appendChild(buttonEle);
+            for (let 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 = () => {
+                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
+                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
+                    this.grpBtnIndex = 0;
+                }
+            };
+            containerEle.onkeydown = (e) => {
+                if (this.parent.activeLayout === 'Simplified') {
+                    this.handleGroupButtonNavigation(e, item);
+                }
+            };
+            createTooltip(containerEle, this.parent);
+        }
+        else {
+            const groupButtonEle = itemElement.querySelector('#' + item.id);
+            const dropdown = getComponent(groupButtonEle, DropDownButton);
+            itemElement.appendChild(dropdown.target);
+            if (groupButtonEle) {
+                dropdown.destroy();
+                remove(groupButtonEle);
+            }
+        }
+    }
+    handleGroupButtonNavigation(e, item) {
+        const groupButtonEle = document.querySelector('#' + item.id);
+        const dropdown = getComponent(groupButtonEle, DropDownButton);
+        const targetEle = dropdown.target;
+        let 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();
+        }
+        const 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
+     */
+    addOverFlowEvents(item, itemEle) {
+        const groupButtonEle = itemEle.querySelector('#' + item.id);
+        const dropdown = getComponent(groupButtonEle, DropDownButton);
+        dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP });
+        const targetEle = dropdown.target;
+        targetEle.onclick = () => {
+            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
+     */
+    removeOverFlowEvents(item, itemEle) {
+        const groupButtonEle = itemEle.querySelector('#' + item.id);
+        if (groupButtonEle) {
+            const dropdown = getComponent(groupButtonEle, DropDownButton);
+            let cssClass = dropdown.cssClass.split(SPACE);
+            cssClass = cssClass.filter((value) => value !== RIBBON_GROUP_BUTTON_OVERFLOW_POPUP);
+            dropdown.setProperties({ cssClass: cssClass.join(SPACE) });
+        }
+    }
+    /**
+     * Removes DropDown.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item.
+     * @returns {void}
+     * @hidden
+     */
+    destroyDropDown(item) {
+        const groupButtonEle = document.querySelector('#' + item.id);
+        if (groupButtonEle) {
+            const dropdown = getComponent(groupButtonEle, DropDownButton);
+            const 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
+     */
+    updateGroupButtonSize(itemElement, item) {
+        const groupBtnSettings = item.groupButtonSettings;
+        let buttonEle;
+        for (let 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) {
+                const 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
+                });
+            }
+        }
+    }
+}
+
+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;
+};
+var Ribbon_1;
+/**
+ * The Ribbon Component is a structured layout to manage tools with tabs and groups.
+ */
+let Ribbon = Ribbon_1 = class Ribbon extends Component {
+    /**
+     * Constructor for creating the widget.
+     *
+     * @param  {RibbonModel} options - Specifies the ribbon model
+     * @param  {string|HTMLDivElement} element - Specifies the target element
+     */
+    constructor(options, element) {
+        Ribbon_1.Inject(RibbonButton, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonComboBox, RibbonGroupButton);
+        super(options, element);
+    }
+    /**
+     * Initialize the control rendering.
+     *
+     * @returns {void}
+     * @private
+     */
+    render() {
+        this.initialize();
+    }
+    preRender() {
+        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
+     */
+    getPersistData() {
+        return this.addOnPersist(['activeLayout']);
+    }
+    /**
+     * Get component name.
+     *
+     * @returns {string} - Module name
+     * @private
+     */
+    getModuleName() {
+        return 'ribbon';
+    }
+    /**
+     * To provide the array of modules needed for component rendering
+     *
+     * @returns {ModuleDeclaration[]} - returns module declaration.
+     * @hidden
+     */
+    requiredModules() {
+        const 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: 'ribbonGroupButton', args: [this] }, { member: 'ribbonFileMenu', args: [this] }, { member: 'ribbonBackstage', args: [this] });
+        return modules;
+    }
+    initialize() {
+        this.element.id = this.element.id || getUniqueID('e-' + this.getModuleName());
+        addClass([this.element], ['e-rbn', ...(this.cssClass ? this.cssClass.split(SPACE) : [])]);
+        if (this.enableRtl) {
+            this.element.classList.add(RTL_CSS);
+        }
+        this.element.style.width = formatUnit(this.width);
+        this.renderTabs();
+        if (this.ribbonFileMenuModule) {
+            this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
+        }
+        if (this.ribbonBackstageModule) {
+            this.ribbonBackstageModule.createBackStage(this.backStageMenu);
+        }
+        this.createHelpPaneTemplate();
+        const toolbar = this.tabObj['tbObj'];
+        toolbar.refreshOverflow();
+        createTooltip(this.element, this);
+        this.wireEvents();
+        this.wireKeyboardEvent();
+        this.currentControlIndex = 0;
+    }
+    wireEvents() {
+        EventHandler.add(window, 'resize', this.resizeHandler, this);
+    }
+    wireKeyboardEvent() {
+        this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    }
+    keyActionHandler(e) {
+        if (((e.key === 'Tab') && (!(e.target.classList.contains('e-tab-wrap')) && !(e.target.classList.contains('e-combobox'))))) {
+            e.preventDefault();
+        }
+        const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        const ribbonControls = activeContent.querySelectorAll('.e-control');
+        const comboBoxElements = activeContent.querySelectorAll('.e-combobox');
+        let comboBoxEle;
+        if (comboBoxElements) {
+            for (let i = 0; i < comboBoxElements.length; i++) {
+                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+                }
+            }
+        }
+        if (comboBoxEle) {
+            for (let i = 0; i < ribbonControls.length; i++) {
+                if (ribbonControls[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
+                    if (ribbonControls[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                        this.currentControlIndex = i;
+                    }
+                }
+            }
+        }
+        if (this.currentControlIndex === 0) {
+            let item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
             while (item && item.classList.contains('e-disabled')) {
                 this.currentControlIndex++;
                 item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
@@ -2932,7 +3586,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.switchLayout();
     }
     tabCreated() {
-        this.addExpandCollapse();
+        if (!this.hideLayoutSwitcher) {
+            this.addExpandCollapse();
+        }
         this.renderInitialTab(this.selectedTab);
     }
     ribbonTabSelected(e) {
@@ -3075,13 +3731,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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) {
                             const 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);
                         }
                     }
@@ -3093,7 +3749,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
     }
     updatePopupItems(item, itemEle, isGroupOF, isMenu) {
-        const dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown) ? DropDownButton : SplitButton);
+        const dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
         const dropDownPopup = dropdown.dropDown;
         // popup is on right if (isGroupOF && isMenu)
         // The position is reversed if RTL is enabled.
@@ -3151,7 +3807,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                             break;
                         }
                         const groupEle = 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.append(itemContainer);
@@ -3195,8 +3851,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
     }
-    createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer) {
+    createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         let overflowButton;
+        const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
+        const isDisabledGroup = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             const overflowDDB = groupContainer.querySelector('#' + groupId + GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -3207,7 +3865,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
-            overflowButton.target.append(itemEle);
+            const 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) {
@@ -3224,9 +3887,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     let 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);
@@ -3258,6 +3924,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             case 'ComboBox':
                 this.ribbonComboBoxModule.addOverFlowEvents(item, itemEle, overflowButton);
                 break;
+            case 'GroupButton':
+                if (this.activeLayout === 'Simplified') {
+                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle);
+                    break;
+                }
         }
     }
     createOfTabContainer(groupId, groupHeader, itemEle, tabIndex) {
@@ -3366,7 +4037,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const 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);
+                }
             }
         };
         const moveCollectionToColumn = (start, end) => {
@@ -3380,7 +4056,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const 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]);
+                }
             }
         };
         const orientation = group.orientation;
@@ -3470,8 +4151,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             const reduce = (i) => {
                 const item = collection.items[parseInt(i.toString(), 10)];
                 if (item.displayOptions & DisplayMode.Classic) {
-                    const ele = activeContent.querySelector('#' + item.id);
+                    let ele = activeContent.querySelector('#' + item.id);
                     item.setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    if (item.type === RibbonItemType.GroupButton) {
+                        ele = activeContent.querySelector('#' + item.id + '_grpbtn');
+                    }
                     this.setItemSize(ele, item);
                 }
             };
@@ -3490,8 +4174,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             const reduce = (i) => {
                 const collection = group.collections[parseInt(i.toString(), 10)];
                 if (collection.items[0].displayOptions & DisplayMode.Classic) {
-                    const ele = activeContent.querySelector('#' + collection.items[0].id);
+                    let ele = activeContent.querySelector('#' + collection.items[0].id);
                     collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    if (collection.items[0].type === RibbonItemType.GroupButton) {
+                        ele = activeContent.querySelector('#' + collection.items[0].id + RIBBON_GROUP_BUTTON_ID);
+                    }
                     this.setItemSize(ele, collection.items[0]);
                 }
             };
@@ -3591,7 +4278,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                         const 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;
@@ -3626,8 +4313,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
             const item = collection.items[parseInt(index.toString(), 10)];
             if (item.displayOptions & DisplayMode.Classic) {
-                const ele = parentEle.id === item.id ? parentEle : parentEle.querySelector('#' + item.id);
+                let ele = parentEle.id === item.id ? parentEle : parentEle.querySelector('#' + item.id);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
+                if (item.type === RibbonItemType.GroupButton) {
+                    ele = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                }
                 this.setItemSize(ele, item);
             }
         };
@@ -3636,8 +4326,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 .groups[parseInt(groupIndex.toString(), 10)].collections;
             const item = collections[parseInt(i.toString(), 10)].items[0];
             if (item.displayOptions & DisplayMode.Classic) {
-                const ele = activeContent.querySelector('#' + collections[parseInt(i.toString(), 10)].items[0].id);
+                let ele = 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 = activeContent.querySelector('#' + collections[parseInt(i.toString(), 10)].items[0].id + RIBBON_GROUP_BUTTON_ID);
+                }
                 this.setItemSize(ele, collections[parseInt(i.toString(), 10)].items[0]);
             }
         };
@@ -3653,7 +4346,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                         const item = collection.items[parseInt(l.toString(), 10)];
                         if (canExpandItem(item)) {
-                            const itemEle = activeContent.querySelector('#' + item.id);
+                            let itemEle = activeContent.querySelector('#' + item.id);
+                            if (item.type === 'GroupButton') {
+                                itemEle = activeContent.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                            }
                             const valString = itemEle.getAttribute('data-medium-width');
                             const value = valString ? parseInt(valString, 10) : null;
                             if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
@@ -3752,10 +4448,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const item = items[parseInt(i.toString(), 10)];
                 if (item.displayOptions & DisplayMode.Classic) {
                     const container = parentEle.querySelector('#' + item.id + CONTAINER_ID);
-                    const ele = container.querySelector('#' + item.id);
+                    let ele = container.querySelector('#' + item.id);
                     item.setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    if (item.type === RibbonItemType.GroupButton) {
+                        ele = container.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                    }
                     this.setItemSize(ele, item);
-                    parentEle.insertAdjacentElement('afterend', container);
+                    parentEle.insertAdjacentElement('beforebegin', container);
                 }
             };
             reduce(start);
@@ -3774,10 +4473,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const collection = collections[parseInt(i.toString(), 10)];
                 if (collection.items[0].displayOptions & DisplayMode.Classic) {
                     const collectionEle = parentEle.querySelector('#' + collection.id);
-                    const ele = collectionEle.querySelector('#' + collection.items[0].id);
+                    let ele = collectionEle.querySelector('#' + collection.items[0].id);
                     collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    if (collection.items[0].type === RibbonItemType.GroupButton) {
+                        ele = collectionEle.querySelector('#' + collection.items[0].id + RIBBON_GROUP_BUTTON_ID);
+                    }
                     this.setItemSize(ele, collection.items[0]);
-                    parentEle.insertAdjacentElement('afterend', collectionEle);
+                    parentEle.insertAdjacentElement('beforebegin', collectionEle);
                 }
             };
             reduce(start);
@@ -3825,6 +4527,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         return false;
     }
+    handleContentSize(itemEle, isRemoveOverflow) {
+        const itemContainer = itemEle.closest('.' + RIBBON_GROUP_CONTENT);
+        (isRemoveOverflow ? (itemContainer.classList.add(RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT)));
+    }
     setItemSize(itemEle, item) {
         const itemContainer = itemEle.closest('.' + RIBBON_ITEM);
         if (item.type === RibbonItemType.Button) {
@@ -3840,6 +4546,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             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);
@@ -3879,6 +4588,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const item = collection.items[parseInt(k.toString(), 10)];
                     const itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
                     if (itemEle !== null) {
+                        this.handleContentSize(itemEle);
                         this.addOverflowEvents(item, itemEle, dropdown);
                     }
                 }
@@ -3916,6 +4626,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const item = collection.items[parseInt(k.toString(), 10)];
                     const itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
                     if (itemEle !== null) {
+                        this.handleContentSize(itemEle, true);
                         this.removeOverflowEvent(item, itemEle);
                     }
                 }
@@ -4178,6 +4889,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             case 'ComboBox':
                 this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
                 break;
+            case 'GroupButton':
+                this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
+                break;
         }
     }
     createGroupContainer(groupId, groupHeader) {
@@ -4220,20 +4934,76 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         remove(this.tabObj.element.querySelector('.' + RIBBON_COLLAPSE_BUTTON));
         this.collapseButton = null;
     }
-    reRenderTabs() {
+    reRenderTabs(tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        this.destroyTabItems(this.tabsInternal);
-        this.tabsInternal = this.tabs.slice();
-        this.validateItemSize();
-        const 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 });
-        const contentEle = this.tabObj.items[this.selectedTab].content;
-        if (contentEle.innerHTML === '') {
-            this.renderInitialTab(this.selectedTab);
+        for (const key in tabs) {
+            const index = parseInt(key, 10);
+            const tab = tabs[parseInt(index.toString(), 10)];
+            let 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();
+                const 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 {
+                const groups = this.tabs[parseInt(index.toString(), 10)].groups;
+                const tabEle = this.tabObj.element;
+                const ribbonTab = this.tabs[parseInt(index.toString(), 10)];
+                ribbonTab.setProperties(tab, true);
+                this.setProperties({ groups: this.checkID(ribbonTab.groups, 'group', ribbonTab.id) }, true);
+                this.validateItemSize();
+                const 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 (const group of groups) {
+                            const dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
+                            for (const collection of group.collections) {
+                                for (const item of collection.items) {
+                                    const ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                                    if (ele) {
+                                        this.destroyFunction(item, ele);
+                                    }
+                                }
+                            }
+                            if (dropdownElement) {
+                                this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                            }
+                        }
+                        const groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                        // eslint-disable-next-line @typescript-eslint/tslint/config
+                        groupElements.forEach(groupEle => { groupEle.remove(); });
+                        const elements = this.createGroups(ribbonTab.groups, index);
+                        append(elements, contentEle);
+                    }
+                }
+            }
         }
     }
     switchLayout() {
@@ -4311,10 +5081,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     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);
                                     const ele = itemEle.querySelector('#' + item.id);
                                     this.setItemSize(ele, item);
@@ -4402,14 +5175,20 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     let 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);
                                 }
-                                const ele = groupContainer.querySelector('#' + item.id);
+                                let ele = groupContainer.querySelector('#' + item.id);
+                                if (item.type === RibbonItemType.GroupButton) {
+                                    ele = groupContainer.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                                }
                                 const itemsize = (item.allowedSizes & RibbonItemSize.Large) ? RibbonItemSize.Large :
                                     (item.allowedSizes & RibbonItemSize.Medium) ? RibbonItemSize.Medium : RibbonItemSize.Small;
                                 item.setProperties({ activeSize: itemsize }, true);
@@ -4575,6 +5354,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             case 'Template':
                 this.createTemplateContent(item, itemEle);
                 break;
+            case 'GroupButton':
+                this.ribbonGroupButtonModule.createGroupButton(item, itemEle);
+                break;
         }
     }
     createItems(itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
@@ -4622,7 +5404,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             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);
                 }
             }
@@ -4701,51 +5483,71 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (this.ribbonFileMenuModule) {
             this.ribbonFileMenuModule.setCommonProperties(commonProp);
         }
+        if (this.ribbonBackstageModule) {
+            this.ribbonBackstageModule.setCommonProperties(commonProp);
+        }
         for (let i = 0; i < this.tabs.length; i++) {
             const tab = this.tabs[parseInt(i.toString(), 10)];
             const contentEle = this.tabObj.items[parseInt(i.toString(), 10)].content;
-            for (const group of tab.groups) {
-                let dropdownElement;
-                let dropdown;
-                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 (const group of tab.groups) {
+                    let dropdownElement;
+                    let dropdown;
+                    if (this.activeLayout === RibbonLayout.Classic) {
+                        dropdownElement = group.isCollapsed ?
+                            contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
                     }
-                }
-                for (const collection of group.collections) {
-                    for (const item of collection.items) {
-                        let 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 (const collection of group.collections) {
+                        for (const item of collection.items) {
+                            let 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) {
-                            const 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) {
+                                const moduleName = this.getItemModuleName(item);
+                                if (moduleName !== 'template') {
+                                    if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                                        for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
+                                            const btnEle = ele.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
+                                            updateCommonProperty(btnEle, 'btn', commonProp);
+                                        }
+                                    }
+                                    else if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
+                                        updateCommonProperty(ele, 'dropdown-btn', commonProp);
+                                        for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
+                                            const btnEle = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
+                                            updateCommonProperty(btnEle, 'btn', commonProp);
+                                        }
+                                    }
+                                    else {
+                                        updateCommonProperty(ele, moduleName, commonProp);
+                                    }
+                                }
+                                else if (!isNullOrUndefined(commonProp.enableRtl)) {
+                                    ele.classList.toggle(RTL_CSS, commonProp.enableRtl);
+                                }
                             }
                         }
                     }
@@ -4788,6 +5590,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                             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 {
@@ -4822,6 +5628,28 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (moduleName === 'colorpicker') {
             this.ribbonColorPickerModule.unwireColorPickerEvents(ele);
         }
+        else if (moduleName === 'group-btn') {
+            if (this.activeLayout === 'Classic') {
+                for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
+                    const btnEle = ele.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
+                    if (btnEle) {
+                        destroyControl(btnEle, 'btn');
+                    }
+                }
+            }
+            else {
+                this.ribbonGroupButtonModule.destroyDropDown(item);
+            }
+            for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
+                if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings) {
+                    const groupButtonID = item.id + RIBBON_GROUP_BUTTON_ID + i;
+                    const index = getIndex(this.tooltipData, (e) => { return e.id === groupButtonID; });
+                    if (index !== -1) {
+                        this.tooltipData.splice(index, 1);
+                    }
+                }
+            }
+        }
         else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
@@ -4831,6 +5659,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 this.tooltipData.splice(index, 1);
             }
         }
+        if (item.type === 'GroupButton') {
+            this.ribbonGroupButtonModule.destroyDropDown(item);
+        }
     }
     getItemModuleName(item) {
         switch (item.type) {
@@ -4846,6 +5677,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 return 'colorpicker';
             case 'ComboBox':
                 return 'combobox';
+            case 'GroupButton':
+                return 'group-btn';
             default:
                 return 'template';
         }
@@ -4879,6 +5712,56 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const index = getIndex(this.tabs, (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}
+     */
+    showTab(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}
+     */
+    hideTab(tabId) {
+        this.showHideTab(tabId, true);
+    }
+    showHideTab(tabId, value) {
+        const index = getIndex(this.tabs, (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}
+     */
+    enableTab(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}
+     */
+    disableTab(tabId) {
+        this.enableDisableTab(tabId, false);
+    }
+    enableDisableTab(tabId, value) {
+        const index = getIndex(this.tabs, (e) => { return e.id === tabId; });
+        if (index === -1) {
+            return;
+        }
+        this.tabObj.enableTab(index, value);
+    }
     /**
      * Adds the ribbon tab.
      *
@@ -4917,7 +5800,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
                 for (const collection of group.collections) {
                     for (const item of collection.items) {
-                        const ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                        let 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);
                         }
@@ -5039,6 +5926,105 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.refreshLayout();
         }
     }
+    /**
+     * Hides a specific group within a ribbon tab.
+     *
+     * @param {string} groupID - The ID of the group to be hidden.
+     * @returns {void}
+     */
+    hideGroup(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}
+     */
+    showGroup(groupID) {
+        this.showHideGroup(groupID, false);
+    }
+    showHideGroup(groupID, isHidden) {
+        let overflowDDB;
+        let overflowtarget;
+        const itemProp = getGroup(this.tabs, groupID);
+        if (!itemProp) {
+            return;
+        }
+        const contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        const groupEle = contentEle.querySelector('#' + groupID);
+        isHidden ? groupEle.classList.add('e-hidden') : groupEle.classList.remove('e-hidden');
+        if (this.overflowDDB) {
+            const overflowEle = this.overflowDDB.target;
+            const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + OVERFLOW_ID);
+            if (itemProp.group.enableGroupOverflow) {
+                const 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) {
+                const 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}
+     */
+    disableGroup(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}
+     */
+    enableGroup(groupID) {
+        this.enableDisableGroup(groupID, false);
+    }
+    enableDisableGroup(groupID, isDisabled) {
+        let overflowDDB;
+        let overflowtarget;
+        const itemProp = getGroup(this.tabs, groupID);
+        if (!itemProp) {
+            return;
+        }
+        const contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        const groupEle = contentEle.querySelector('#' + groupID);
+        isDisabled ? groupEle.classList.add('e-disabled') : groupEle.classList.remove('e-disabled');
+        if (this.overflowDDB) {
+            const overflowEle = this.overflowDDB.target;
+            const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + OVERFLOW_ID);
+            if (itemProp.group.enableGroupOverflow) {
+                const 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) {
+                const grpContainer = ofTabContainer.querySelector('#' + groupID + CONTAINER_ID);
+                if (grpContainer) {
+                    isDisabled ? grpContainer.classList.add('e-disabled') : grpContainer.classList.remove('e-disabled');
+                }
+            }
+        }
+    }
     /**
      * adds the ribbon collection.
      *
@@ -5211,6 +6197,41 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.refreshLayout();
         }
     }
+    /**
+     * Hides a specific ribbon item.
+     *
+     * @param {string} itemId - The ID of the item to be hidden.
+     * @returns {void}
+     */
+    hideItem(itemId) {
+        this.showHideItem(itemId, true);
+    }
+    /**
+     * Shows a specific ribbon item.
+     *
+     * @param {string} itemId - The ID of the item to be shown.
+     * @returns {void}
+     */
+    showItem(itemId) {
+        this.showHideItem(itemId, false);
+    }
+    showHideItem(itemId, isHidden) {
+        const itemProp = getItem(this.tabs, itemId);
+        if (!itemProp) {
+            return;
+        }
+        let ele;
+        if (itemProp.item.type === 'GroupButton') {
+            ele = getItemElement(this, itemId + RIBBON_GROUP_BUTTON_ID, itemProp);
+        }
+        else {
+            ele = getItemElement(this, itemId, itemProp);
+        }
+        if (ele) {
+            const 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.
      *
@@ -5240,7 +6261,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
                     for (const collection of group.collections) {
                         for (const item of collection.items) {
-                            const ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            let 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);
                             }
@@ -5509,9 +6534,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             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);
                     }
                 }
@@ -5575,6 +6603,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         let 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)
@@ -5586,7 +6617,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         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();
+            }
         }
     }
     /**
@@ -5613,13 +6649,34 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             return;
         }
         itemProp.item.setProperties({ disabled: isDisabled }, true);
-        const ele = getItemElement(this, itemId, itemProp);
+        let ele;
+        if (itemProp.item.type === 'GroupButton') {
+            ele = getItemElement(this, itemId + RIBBON_GROUP_BUTTON_ID, itemProp);
+        }
+        else {
+            ele = getItemElement(this, itemId, itemProp);
+        }
         if (ele) {
             const itemEle = closest(ele, '.e-ribbon-item');
             itemEle.classList.toggle(DISABLED_CSS, itemProp.item.disabled);
             const 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 (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                        const btnEle = document.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
+                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    }
+                }
+                else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                    for (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                        const btnEle = ele.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID + i);
+                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    }
+                }
+                else {
+                    updateControlDisabled(ele, moduleName, isDisabled);
+                }
             }
             else {
                 ele.classList.toggle(DISABLED_CSS, isDisabled);
@@ -5635,7 +6692,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         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();
@@ -5729,7 +6788,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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);
@@ -5742,6 +6801,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const toolbarEle = this.tabObj['tbObj'];
                     toolbarEle.refreshOverflow();
                     break;
+                case 'backStageMenu':
+                    if (this.ribbonBackstageModule) {
+                        this.ribbonBackstageModule.updateBackStageMenu(this.backStageMenu);
+                    }
+                    const toolbarElement = this.tabObj['tbObj'];
+                    toolbarElement.refreshOverflow();
+                    break;
                 case 'helpPaneTemplate':
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
@@ -5754,6 +6820,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const toolbar = this.tabObj['tbObj'];
                     toolbar.refreshOverflow();
                     break;
+                case 'hideLayoutSwitcher':
+                    this.hideLayoutSwitcher ? this.removeExpandCollapse() : this.addExpandCollapse();
+                    break;
             }
         }
     }
@@ -5767,6 +6836,9 @@ __decorate([
 __decorate([
     Complex({}, FileMenuSettings)
 ], Ribbon.prototype, "fileMenu", void 0);
+__decorate([
+    Complex({}, BackStageMenu)
+], Ribbon.prototype, "backStageMenu", void 0);
 __decorate([
     Property('')
 ], Ribbon.prototype, "launcherIconCss", void 0);
@@ -5791,6 +6863,9 @@ __decorate([
 __decorate([
     Property('')
 ], Ribbon.prototype, "helpPaneTemplate", void 0);
+__decorate([
+    Property(false)
+], Ribbon.prototype, "hideLayoutSwitcher", void 0);
 __decorate([
     Event()
 ], Ribbon.prototype, "tabSelecting", void 0);
@@ -5806,6 +6881,9 @@ __decorate([
 __decorate([
     Event()
 ], Ribbon.prototype, "launcherIconClick", void 0);
+__decorate([
+    Event()
+], Ribbon.prototype, "created", void 0);
 Ribbon = Ribbon_1 = __decorate([
     NotifyPropertyChanges
 ], Ribbon);
@@ -6125,6 +7203,533 @@ class RibbonFileMenu {
     }
 }
 
+/**
+ * Defines the items of Ribbon.
+ */
+class RibbonBackstage extends Component {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+    }
+    /**
+    * @private
+    * @returns {void}
+    */
+    render() {
+        // render code
+    }
+    /**
+     * @private
+     * @returns {void}
+     */
+    preRender() {
+        // pre render code
+    }
+    getPersistData() {
+        return '';
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    onPropertyChanged() {
+        // onProperty changes code
+    }
+    getModuleName() {
+        return 'ribbonBackstage';
+    }
+    destroy() {
+        if (this.backstageButton) {
+            this.destroyDDB();
+        }
+        this.parent = null;
+    }
+    /**
+     * Creates Backstage Menu
+     *
+     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage.
+     * @returns {void}
+     * @hidden
+     */
+    createBackStage(backStageOptions) {
+        if (!backStageOptions.visible) {
+            return;
+        }
+        this.backstageButtonEle = this.parent.createElement('button', {
+            id: this.parent.element.id + RIBBON_BACKSTAGE_MENU_ID
+        });
+        const tabEle = this.parent.tabObj.element;
+        const 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: () => {
+                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 {
+            let footerItemCount = 0;
+            let itemCount = 0;
+            for (let i = 0; i < backStageOptions.items.length; i++) {
+                const 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 = (e) => {
+            e.stopPropagation();
+            this.showBackstage();
+            this.popupHTMLElement.classList.add(RIBBON_BACKSTAGE_OPEN);
+            const menuItem = this.menuWrapper.querySelector('.e-menu-item.e-selected');
+            if (menuItem) {
+                menuItem.classList.remove('e-selected');
+            }
+            for (let i = 0; i < backStageOptions.items.length; i++) {
+                const item = backStageOptions.items[parseInt(i.toString(), 10)];
+                if (!item.isFooter && this.menuCtrl.items[0].text === item.text) {
+                    const 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);
+    }
+    onClickEvent(e) {
+        const targetEle = e.target;
+        if (this.popupHTMLElement.contains(targetEle)) {
+            return;
+        }
+        else {
+            this.hideBackstage();
+        }
+    }
+    addBackStageMenuTooltip(backStageOptions) {
+        if (isTooltipPresent(backStageOptions.ribbonTooltipSettings)) {
+            this.backstageButtonEle.classList.add(RIBBON_TOOLTIP_TARGET);
+            this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
+        }
+    }
+    checkMenuItems(backStageItems) {
+        for (let i = 0; i < backStageItems.length; i++) {
+            const item = backStageItems[parseInt(i.toString(), 10)];
+            if (!item.iconCss) {
+                const menuItemEle = this.popupHTMLElement.querySelector('#' + item.id);
+                menuItemEle.classList.add(RIBBON_BACKSTAGE_TEXT_MENU);
+            }
+        }
+    }
+    createBackStagePopup(backStageOptions) {
+        this.popupHTMLElement = this.parent.createElement('div', {
+            id: this.parent.element.id + RIBBON_BACKSTAGE_POPUP_ID,
+            className: RIBBON_BACKSTAGE_POPUP
+        });
+        let 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 = (e) => { if (e.code === 'Escape') {
+            this.hideBackstage();
+        } };
+        this.hideBackstage();
+    }
+    updatePopupPositionOnRtl(enableRtl) {
+        const popupStyle = this.popupHTMLElement.style;
+        if (enableRtl) {
+            popupStyle.right = popupStyle.left;
+            popupStyle.left = 'unset';
+        }
+        else {
+            popupStyle.left = popupStyle.right;
+            popupStyle.right = 'unset';
+        }
+    }
+    createBackstageMenu(menuOptions, isFooter) {
+        const 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) {
+            const 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 = () => {
+                this.popupHTMLElement.classList.remove(RIBBON_BACKSTAGE_OPEN);
+                this.hideBackstage();
+                this.isBackButtonClicked = true;
+            };
+        }
+        const 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);
+        }
+        let 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);
+        }
+    }
+    cloneMenuItem(items) {
+        const itemsList = [];
+        for (let i = 0; i < items.length; i++) {
+            const 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;
+    }
+    cloneFooterMenuItem(items) {
+        const itemsList = [];
+        for (let i = 0; i < items.length; i++) {
+            const 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;
+    }
+    createBackStageContent(itemId, content) {
+        const 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;
+        }
+        const templateFunction = getTemplateFunction(content);
+        append(templateFunction({}, this, templateName, 'backstageContent', this.parent.isStringTemplate), this.backstageContentEle);
+        if (content) {
+            this.popupHTMLElement.append(this.backstageContentEle);
+        }
+        this.renderReactTemplates();
+        return templateFunction;
+    }
+    createBackStageTemplate(template) {
+        const 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
+        });
+        const templateFunction = getTemplateFunction(template);
+        append(templateFunction({}, this, templateName, 'backstageTemplate', this.parent.isStringTemplate), this.backstageTempEle);
+        this.popupHTMLElement.append(this.backstageTempEle);
+        this.renderReactTemplates();
+        return templateFunction;
+    }
+    menuSelect(menuOptions, args) {
+        for (let i = 0; i < menuOptions.items.length; i++) {
+            const 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);
+        const 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
+     */
+    setCommonProperties(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
+     */
+    updateBackStageMenu(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 {
+                        let footerItemCount = 0;
+                        let itemCount = 0;
+                        for (let i = 0; i < backStageOptions.items.length; i++) {
+                            const 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();
+    }
+    destroyMenu() {
+        if (this.menuCtrl) {
+            this.menuCtrl.destroy();
+            this.menuCtrl = null;
+        }
+    }
+    destroyDDB() {
+        this.removeBackstageMenuTooltip();
+        const 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);
+    }
+    removeBackstageMenuTooltip() {
+        const index = getIndex(this.parent.tooltipData, (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}
+     */
+    addBackstageItems(items, target, isAfter, isUniqueId) {
+        for (let i = 0; i < items.length; i++) {
+            const 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);
+            }
+        }
+        const backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
+        const backStageOptions = this.parent.backStageMenu;
+        for (let i = 0; i < backStageOptions.items.length; i++) {
+            const item = backStageOptions.items[parseInt(i.toString(), 10)];
+            for (let i = 0; i < backstageItems.length; i++) {
+                const item1 = backstageItems[parseInt(i.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}
+     */
+    removeBackstageItems(items, isUniqueId) {
+        this.menuCtrl.removeItems(items, isUniqueId);
+        this.footerMenuCtrl.removeItems(items, isUniqueId);
+        const backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
+        this.parent.backStageMenu.setProperties({ items: backstageItems }, true);
+    }
+    /**
+     * Renders the backstage dynamically.
+     *
+     * @returns {void}
+     */
+    showBackstage() {
+        this.popupEle.show();
+    }
+    /**
+     * Hides the backstage dynamically.
+     *
+     * @returns {void}
+     */
+    hideBackstage() {
+        if (this.popupEle.element.classList.contains(RIBBON_BACKSTAGE_OPEN)) {
+            this.popupEle.element.classList.remove(RIBBON_BACKSTAGE_OPEN);
+        }
+        this.popupEle.hide();
+    }
+}
+
 /**
  * Ribbon modules
  */
@@ -6132,5 +7737,5 @@ class RibbonFileMenu {
 // 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.es2015.js.map