@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

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

@@ -111,6 +111,10 @@ var RibbonItemType;
      * Renders the group button content as ribbon item.
      */
     RibbonItemType["GroupButton"] = "GroupButton";
+    /**
+     * Renders the gallery as ribbon item.
+     */
+    RibbonItemType["Gallery"] = "Gallery";
     /**
      * Renders the template content as ribbon item.
      */
@@ -586,6 +590,9 @@ __decorate$13([
 __decorate$13([
     Property('')
 ], RibbonGroupButtonItem.prototype, "iconCss", void 0);
+__decorate$13([
+    Property('')
+], RibbonGroupButtonItem.prototype, "keyTip", void 0);
 __decorate$13([
     Complex({}, RibbonTooltip)
 ], RibbonGroupButtonItem.prototype, "ribbonTooltipSettings", void 0);
@@ -623,6 +630,111 @@ __decorate$12([
     Collection([], RibbonGroupButtonItem)
 ], RibbonGroupButtonSettings.prototype, "items", 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 gallery item.
+ */
+class RibbonGalleryItem extends ChildProperty {
+}
+__decorate$16([
+    Property('')
+], RibbonGalleryItem.prototype, "content", void 0);
+__decorate$16([
+    Property('')
+], RibbonGalleryItem.prototype, "iconCss", void 0);
+__decorate$16([
+    Property({})
+], RibbonGalleryItem.prototype, "htmlAttributes", void 0);
+__decorate$16([
+    Property('')
+], RibbonGalleryItem.prototype, "cssClass", void 0);
+__decorate$16([
+    Property(false)
+], RibbonGalleryItem.prototype, "disabled", 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 gallery group.
+ */
+class RibbonGalleryGroup extends ChildProperty {
+}
+__decorate$15([
+    Collection([], RibbonGalleryItem)
+], RibbonGalleryGroup.prototype, "items", void 0);
+__decorate$15([
+    Property('')
+], RibbonGalleryGroup.prototype, "header", void 0);
+__decorate$15([
+    Property('auto')
+], RibbonGalleryGroup.prototype, "itemWidth", void 0);
+__decorate$15([
+    Property('auto')
+], RibbonGalleryGroup.prototype, "itemHeight", void 0);
+__decorate$15([
+    Property('')
+], RibbonGalleryGroup.prototype, "cssClass", void 0);
+
+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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon gallery settings.
+ */
+class RibbonGallerySettings extends ChildProperty {
+}
+__decorate$14([
+    Collection([], RibbonGalleryGroup)
+], RibbonGallerySettings.prototype, "groups", void 0);
+__decorate$14([
+    Property(3)
+], RibbonGallerySettings.prototype, "itemCount", void 0);
+__decorate$14([
+    Property(null)
+], RibbonGallerySettings.prototype, "selectedItemIndex", void 0);
+__decorate$14([
+    Property('auto')
+], RibbonGallerySettings.prototype, "popupHeight", void 0);
+__decorate$14([
+    Property('auto')
+], RibbonGallerySettings.prototype, "popupWidth", void 0);
+__decorate$14([
+    Property('')
+], RibbonGallerySettings.prototype, "template", void 0);
+__decorate$14([
+    Property('')
+], RibbonGallerySettings.prototype, "popupTemplate", void 0);
+__decorate$14([
+    Event()
+], RibbonGallerySettings.prototype, "popupOpen", void 0);
+__decorate$14([
+    Event()
+], RibbonGallerySettings.prototype, "popupClose", void 0);
+__decorate$14([
+    Event()
+], RibbonGallerySettings.prototype, "itemHover", void 0);
+__decorate$14([
+    Event()
+], RibbonGallerySettings.prototype, "beforeItemRender", void 0);
+__decorate$14([
+    Event()
+], RibbonGallerySettings.prototype, "beforeSelect", void 0);
+__decorate$14([
+    Event()
+], RibbonGallerySettings.prototype, "select", 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);
@@ -643,6 +755,9 @@ class RibbonItem extends ChildProperty {
         super.setProperties(prop, muteOnChange);
     }
 }
+__decorate$4([
+    Property('')
+], RibbonItem.prototype, "keyTip", void 0);
 __decorate$4([
     Property(RibbonItemSize.Medium)
 ], RibbonItem.prototype, "activeSize", void 0);
@@ -691,6 +806,9 @@ __decorate$4([
 __decorate$4([
     Complex({}, RibbonGroupButtonSettings)
 ], RibbonItem.prototype, "groupButtonSettings", void 0);
+__decorate$4([
+    Complex({}, RibbonGallerySettings)
+], RibbonItem.prototype, "gallerySettings", 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;
@@ -742,6 +860,12 @@ class RibbonGroup extends ChildProperty {
         super.setProperties(prop, muteOnChange);
     }
 }
+__decorate$2([
+    Property('')
+], RibbonGroup.prototype, "keyTip", void 0);
+__decorate$2([
+    Property('')
+], RibbonGroup.prototype, "launcherIconKeyTip", void 0);
 __decorate$2([
     Collection([], RibbonCollection)
 ], RibbonGroup.prototype, "collections", void 0);
@@ -799,6 +923,9 @@ class RibbonTab extends ChildProperty {
         super.setProperties(prop, muteOnChange);
     }
 }
+__decorate$1([
+    Property('')
+], RibbonTab.prototype, "keyTip", void 0);
 __decorate$1([
     Property('')
 ], RibbonTab.prototype, "id", void 0);
@@ -812,7 +939,7 @@ __decorate$1([
     Property('')
 ], RibbonTab.prototype, "header", void 0);
 
-var __decorate$14 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -832,50 +959,53 @@ class FileMenuSettings extends ChildProperty {
         super.setProperties(prop, muteOnChange);
     }
 }
-__decorate$14([
+__decorate$17([
     Property('File')
 ], FileMenuSettings.prototype, "text", void 0);
-__decorate$14([
+__decorate$17([
     Property(false)
 ], FileMenuSettings.prototype, "visible", void 0);
-__decorate$14([
+__decorate$17([
     Collection([], MenuItem)
 ], FileMenuSettings.prototype, "menuItems", void 0);
-__decorate$14([
+__decorate$17([
     Property(false)
 ], FileMenuSettings.prototype, "showItemOnClick", void 0);
-__decorate$14([
+__decorate$17([
     Complex({}, MenuAnimationSettings)
 ], FileMenuSettings.prototype, "animationSettings", void 0);
-__decorate$14([
+__decorate$17([
     Property('')
 ], FileMenuSettings.prototype, "itemTemplate", void 0);
-__decorate$14([
+__decorate$17([
     Property('')
 ], FileMenuSettings.prototype, "popupTemplate", void 0);
-__decorate$14([
+__decorate$17([
     Complex({}, RibbonTooltip)
 ], FileMenuSettings.prototype, "ribbonTooltipSettings", void 0);
-__decorate$14([
+__decorate$17([
     Event()
 ], FileMenuSettings.prototype, "beforeClose", void 0);
-__decorate$14([
+__decorate$17([
     Event()
 ], FileMenuSettings.prototype, "beforeOpen", void 0);
-__decorate$14([
+__decorate$17([
     Event()
 ], FileMenuSettings.prototype, "beforeItemRender", void 0);
-__decorate$14([
+__decorate$17([
     Event()
 ], FileMenuSettings.prototype, "close", void 0);
-__decorate$14([
+__decorate$17([
     Event()
 ], FileMenuSettings.prototype, "open", void 0);
-__decorate$14([
+__decorate$17([
     Event()
 ], FileMenuSettings.prototype, "select", void 0);
+__decorate$17([
+    Property('')
+], FileMenuSettings.prototype, "keyTip", void 0);
 
-var __decorate$16 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$19 = (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;
@@ -886,17 +1016,17 @@ var __decorate$16 = (undefined && undefined.__decorate) || function (decorators,
  */
 class BackstageBackButton extends ChildProperty {
 }
-__decorate$16([
+__decorate$19([
     Property('')
 ], BackstageBackButton.prototype, "text", void 0);
-__decorate$16([
+__decorate$19([
     Property('')
 ], BackstageBackButton.prototype, "iconCss", void 0);
-__decorate$16([
+__decorate$19([
     Property(true)
 ], BackstageBackButton.prototype, "visible", void 0);
 
-var __decorate$17 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$20 = (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;
@@ -907,29 +1037,32 @@ var __decorate$17 = (undefined && undefined.__decorate) || function (decorators,
  */
 class BackstageItem extends ChildProperty {
 }
-__decorate$17([
+__decorate$20([
     Property('')
 ], BackstageItem.prototype, "text", void 0);
-__decorate$17([
+__decorate$20([
     Property('')
 ], BackstageItem.prototype, "id", void 0);
-__decorate$17([
+__decorate$20([
+    Property('')
+], BackstageItem.prototype, "keyTip", void 0);
+__decorate$20([
     Property('')
 ], BackstageItem.prototype, "content", void 0);
-__decorate$17([
+__decorate$20([
     Property('')
 ], BackstageItem.prototype, "iconCss", void 0);
-__decorate$17([
+__decorate$20([
     Property(false)
 ], BackstageItem.prototype, "separator", void 0);
-__decorate$17([
+__decorate$20([
     Property(false)
 ], BackstageItem.prototype, "isFooter", void 0);
-__decorate$17([
+__decorate$20([
     Event()
 ], BackstageItem.prototype, "backStageItemClick", void 0);
 
-var __decorate$15 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$18 = (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;
@@ -949,34 +1082,67 @@ class BackStageMenu extends ChildProperty {
         super.setProperties(prop, muteOnChange);
     }
 }
-__decorate$15([
+__decorate$18([
     Property('File')
 ], BackStageMenu.prototype, "text", void 0);
-__decorate$15([
+__decorate$18([
+    Property('')
+], BackStageMenu.prototype, "keyTip", void 0);
+__decorate$18([
     Property(false)
 ], BackStageMenu.prototype, "visible", void 0);
-__decorate$15([
+__decorate$18([
     Property('auto')
 ], BackStageMenu.prototype, "height", void 0);
-__decorate$15([
+__decorate$18([
     Property('auto')
 ], BackStageMenu.prototype, "width", void 0);
-__decorate$15([
+__decorate$18([
     Property(null)
 ], BackStageMenu.prototype, "target", void 0);
-__decorate$15([
+__decorate$18([
     Complex({}, BackstageBackButton)
 ], BackStageMenu.prototype, "backButton", void 0);
-__decorate$15([
+__decorate$18([
     Collection([], BackstageItem)
 ], BackStageMenu.prototype, "items", void 0);
-__decorate$15([
+__decorate$18([
     Property('')
 ], BackStageMenu.prototype, "template", void 0);
-__decorate$15([
+__decorate$18([
     Complex({}, RibbonTooltip)
 ], BackStageMenu.prototype, "ribbonTooltipSettings", void 0);
 
+var __decorate$21 = (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 contextual tab.
+ */
+class RibbonContextualTabSettings extends ChildProperty {
+    /**
+     * @param {Object} prop - Gets the property of contextual tab.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop, muteOnChange) {
+        super.setProperties(prop, muteOnChange);
+    }
+}
+__decorate$21([
+    Property(false)
+], RibbonContextualTabSettings.prototype, "visible", void 0);
+__decorate$21([
+    Property(false)
+], RibbonContextualTabSettings.prototype, "isSelected", void 0);
+__decorate$21([
+    Collection([], RibbonTab)
+], RibbonContextualTabSettings.prototype, "tabs", void 0);
+
 // export * from './file-menu';
 
 /**
@@ -1005,6 +1171,8 @@ const RIBBON_POPUP_CONTROL = 'e-ribbon-popup-control';
 /** @hidden */
 const RIBBON_POPUP_OPEN = 'e-ribbon-open';
 /** @hidden */
+const RIBBON_KEYTIP = 'e-ribbon-keytip';
+/** @hidden */
 const SPACE = ' ';
 /** @hidden */
 const HORIZONTAL_SCROLLBAR = 'e-hscroll-bar';
@@ -1013,6 +1181,8 @@ const HIDE_CSS = 'e-ribbon-hide';
 /** @hidden */
 const RIBBON_TAB = 'e-ribbon-tab';
 /** @hidden */
+const RIBBON_CONTEXTUAL_TAB = 'e-ribbon-contextual-tab';
+/** @hidden */
 const RIBBON_TAB_ACTIVE = 'e-ribbon-active';
 /** @hidden */
 const RIBBON_TAB_ITEM = 'e-ribbon-tab-item';
@@ -1045,6 +1215,8 @@ 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_BUTTON_CONTENT = 'e-ribbon-group-button-content';
+/** @hidden */
 const RIBBON_GROUP_CONTAINER = 'e-ribbon-group-container';
 /** @hidden */
 const RIBBON_OF_TAB_CONTAINER = 'e-ribbon-of-tab';
@@ -1169,6 +1341,8 @@ const RIBBON_HELP_PANE_TEMPLATE_ID = '_helppanetemplate';
 /** @hidden */
 const RIBBON_GROUP_BUTTON_ID = '_grpbtn';
 /** @hidden */
+const RIBBON_KEYTIP_ID = '_keytip';
+/** @hidden */
 const RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 const RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
@@ -1504,7 +1678,12 @@ class RibbonColorPicker {
             beforeOpen: colorPickerSettings.beforeOpen,
             beforeTileRender: colorPickerSettings.beforeTileRender,
             created: colorPickerSettings.created,
-            change: colorPickerSettings.change,
+            change: (e) => {
+                colorPickerSettings.value = e.value.toString();
+                if (colorPickerSettings.change) {
+                    colorPickerSettings.change.call(this, e);
+                }
+            },
             open: () => {
                 colorPicker.element.parentElement.classList.add(RIBBON_POPUP_OPEN);
                 if (colorPickerSettings.open) {
@@ -2611,10 +2790,11 @@ function getTemplateFunction(template) {
  *
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
+ * @param {RibbonItemType} type - Gets the type of the item.
  * @returns {itemProps} - Gets the ribbon item.
  * @hidden
  */
-function getItem(tabs, id) {
+function getItem(tabs, id, type) {
     for (let i = 0; i < tabs.length; i++) {
         const tab = tabs[parseInt(i.toString(), 10)];
         for (let j = 0; j < tab.groups.length; j++) {
@@ -2623,7 +2803,7 @@ function getItem(tabs, id) {
                 const collection = group.collections[parseInt(k.toString(), 10)];
                 for (let l = 0; l < collection.items.length; l++) {
                     const item = collection.items[parseInt(l.toString(), 10)];
-                    if (item.id === id) {
+                    if ((id && item.id === id) || (type && item.type === type)) {
                         return {
                             item: item, collection: collection, group: group,
                             tabIndex: i, groupIndex: j, collectionIndex: k, itemIndex: l
@@ -2938,6 +3118,9 @@ class RibbonGroupButton {
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes) {
                     setCustomAttributes(groupButtonEle, groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes);
                 }
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                    groupButtonEle.classList.add(RIBBON_GROUP_BUTTON_CONTENT);
+                }
                 const buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
@@ -3376,79 +3559,795 @@ class RibbonGroupButton {
     }
 }
 
-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, RibbonGroupButton);
-        super(options, element);
-    }
-    /**
-     * Initialize the control rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    render() {
-        this.initialize();
-    }
-    preRender() {
-        this.idIndex = 0;
-        this.tooltipData = [];
-        this.initialPropsData = {};
-        this.hiddenElements = {};
-        this.hiddenGroups = [];
-        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 RibbonGallery {
+    constructor(parent) {
+        this.count = 0;
+        this.isAdded = false;
+        this.galleryItemsIndex = 0;
+        this.parent = parent;
     }
-    /**
-     * Get component name.
-     *
-     * @returns {string} - Module name
-     * @private
-     */
     getModuleName() {
-        return 'ribbon';
+        return 'ribbonGallery';
+    }
+    destroy() {
+        this.parent = null;
     }
     /**
-     * To provide the array of modules needed for component rendering
+     * Creates gallery.
      *
-     * @returns {ModuleDeclaration[]} - returns module declaration.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - 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: 'ribbonGroupButton', args: [this] }, { member: 'ribbonFileMenu', args: [this] }, { member: 'ribbonBackstage', args: [this] });
-        return modules;
+    createGallery(item, itemEle) {
+        const gallerySettings = item.gallerySettings;
+        this.renderGalleryItems(gallerySettings, false, item.id, itemEle);
+        const buttonEle = this.parent.createElement('button', {
+            id: item.id + '_popupButton',
+            className: 'e-ribbon-gallery-button e-icons e-drop-icon'
+        });
+        itemEle.appendChild(buttonEle);
+        this.createPopup(item, buttonEle);
+        buttonEle.onclick = (args) => {
+            let popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            if (popupEle) {
+                let popup = getComponent(popupEle, Popup);
+                popupEle.classList.contains('e-popup-close') ? this.showPopup(popup, popupEle, args, gallerySettings, item.id) : this.hidePopup(popup, popupEle, args, gallerySettings, item.id);
+            }
+        };
+        document.onclick = (args) => {
+            let popupEle = document.querySelectorAll('.e-ribbon-gallery-popup.e-popup-open');
+            let popupID;
+            let itemProp;
+            for (let i = 0; i < popupEle.length; i++) {
+                let popup = getComponent(popupEle[parseInt(i.toString(), 10)], Popup);
+                if (args.target.classList.contains('e-ribbon-gallery-button')) {
+                    popupID = (popupEle[parseInt(i.toString(), 10)].id).replace(/_galleryPopup/g, '');
+                    if ((args.target.id).replace(/_popupButton/g, '') !== popupID) {
+                        itemProp = getItem(this.parent.tabs, popupID);
+                        this.hidePopup(popup, popupEle[parseInt(i.toString(), 10)], args, itemProp.item.gallerySettings, popupID);
+                        break;
+                    }
+                }
+                else {
+                    popupID = (popupEle[parseInt(i.toString(), 10)].id).replace(/_galleryPopup/g, '');
+                    itemProp = getItem(this.parent.tabs, popupID);
+                    this.hidePopup(popup, popupEle[parseInt(i.toString(), 10)], args, itemProp.item.gallerySettings, popupID);
+                    break;
+                }
+            }
+        };
     }
-    initialize() {
+    renderGalleryItems(gallerySettings, isPopup, id, itemEle) {
+        let galleryContainerEle;
+        let galleryEle;
+        const itemProp = getItem(this.parent.tabs, id);
+        if (itemProp && itemProp.group) {
+            itemProp.group.isCollapsible = false;
+        }
+        let galleryWrapper = this.parent.createElement('div', {
+            className: 'e-ribbon-gallery-wrapper',
+            id: id + '_galleryWrapper'
+        });
+        if (!isPopup) {
+            itemEle.appendChild(galleryWrapper);
+        }
+        for (let i = 0; i < gallerySettings.groups.length; i++) {
+            let isHeightDefined = false;
+            galleryContainerEle = this.parent.createElement('ol', {
+                className: 'e-ribbon-gallery-container',
+                id: id + '_galleryContainer' + i
+            });
+            if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
+                isHeightDefined = true;
+            }
+            if (gallerySettings.groups[parseInt(i.toString(), 10)].cssClass) {
+                galleryContainerEle.classList.add(gallerySettings.groups[parseInt(i.toString(), 10)].cssClass);
+            }
+            for (let j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                galleryEle = this.parent.createElement('li', {
+                    className: 'e-ribbon-gallery-item',
+                    id: galleryContainerEle.id + '_gallery' + j,
+                    attrs: { 'tabindex': '0' }
+                });
+                const itemEventArgs = { name: 'beforeItemRender', item: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)] };
+                if (gallerySettings.beforeItemRender) {
+                    gallerySettings.beforeItemRender.call(this, itemEventArgs);
+                }
+                galleryContainerEle.appendChild(galleryEle);
+                if (gallerySettings.selectedItemIndex && gallerySettings.selectedItemIndex === this.count) {
+                    galleryEle.classList.add('e-ribbon-gallery-selected');
+                }
+                else {
+                    if (!gallerySettings.selectedItemIndex && this.count === 0) {
+                        galleryEle.classList.add('e-ribbon-gallery-selected');
+                        gallerySettings.selectedItemIndex = this.count;
+                    }
+                }
+                this.count = this.count + 1;
+                galleryEle.onclick = (e) => {
+                    this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                };
+                galleryEle.onkeydown = (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                    }
+                };
+                galleryEle.onmouseover = (e) => {
+                    const hoverEventArgs = { event: e, name: 'itemHover', item: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)] };
+                    if (gallerySettings.itemHover) {
+                        gallerySettings.itemHover.call(this, hoverEventArgs);
+                    }
+                };
+                if (gallerySettings.groups[parseInt(i.toString(), 10)].itemWidth && gallerySettings.groups[parseInt(i.toString(), 10)].itemWidth !== 'auto') {
+                    galleryEle.style.width = gallerySettings.groups[parseInt(i.toString(), 10)].itemWidth + 'px';
+                }
+                if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
+                    galleryEle.style.height = gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight + 'px';
+                    galleryEle.style.paddingTop = '0px';
+                    galleryEle.style.paddingBottom = '0px';
+                    if (this.parent.activeLayout !== 'Simplified' && !isPopup) {
+                        galleryContainerEle.style.flexFlow = 'wrap';
+                    }
+                }
+                if ((!gallerySettings.template && !gallerySettings.popupTemplate) || ((gallerySettings.template && !gallerySettings.popupTemplate) && isPopup) || ((gallerySettings.popupTemplate && !gallerySettings.template) && !isPopup)) {
+                    if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].htmlAttributes) {
+                        setCustomAttributes(galleryEle, gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].htmlAttributes);
+                    }
+                    if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].iconCss) {
+                        const iconEle = this.parent.createElement('span', {
+                            className: 'e-ribbon-gallery-icons' + ' ' + gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].iconCss
+                        });
+                        galleryEle.appendChild(iconEle);
+                        if (this.parent.activeLayout === 'Simplified' && !isPopup) {
+                            iconEle.classList.add('e-hidden');
+                        }
+                    }
+                    if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].content) {
+                        galleryEle.appendChild(this.parent.createElement('span', {
+                            innerHTML: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].content,
+                            className: 'e-ribbon-gallery-text'
+                        }));
+                    }
+                    if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].disabled) {
+                        galleryEle.classList.add('e-disabled');
+                    }
+                    if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].cssClass) {
+                        galleryEle.classList.add(gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].cssClass);
+                    }
+                }
+                if (gallerySettings.template && !isPopup) {
+                    this.createGalleryTemplate(galleryEle, gallerySettings, id, gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)]);
+                }
+                if (gallerySettings.popupTemplate && isPopup) {
+                    this.createGalleryPopupTemplate(galleryEle, gallerySettings, id, gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)]);
+                }
+                if ((!isPopup && !isHeightDefined && (gallerySettings.itemCount === this.count))) {
+                    galleryWrapper.appendChild(galleryContainerEle);
+                    this.isAdded = true;
+                    break;
+                }
+            }
+            if (this.isAdded && !isPopup) {
+                break;
+            }
+            !isPopup ? galleryWrapper.appendChild(galleryContainerEle) : itemEle.appendChild(galleryContainerEle);
+            if (isPopup && gallerySettings.groups[parseInt(i.toString(), 10)].header) {
+                let headerEle = (this.parent.createElement('div', {
+                    className: 'e-ribbon-gallery-header',
+                    innerHTML: gallerySettings.groups[parseInt(i.toString(), 10)].header
+                }));
+                itemEle.insertBefore(headerEle, galleryContainerEle);
+            }
+        }
+        this.count = 0;
+        this.isAdded = false;
+    }
+    setWrapperWidth(itemCount, galleryWrapper, gallerySettings, itemID) {
+        let count = 1;
+        let itemsWidth = 0;
+        let isWidthApplied = false;
+        for (let i = 0; i < gallerySettings.groups.length; i++) {
+            for (let j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
+                    if (itemCount >= count) {
+                        let galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                        if (galleryItemEle) {
+                            itemsWidth += galleryItemEle.offsetWidth;
+                            let itemStyles = window.getComputedStyle(galleryItemEle);
+                            if (itemStyles) {
+                                let paddingWidth = parseFloat(itemStyles.paddingLeft) + parseFloat(itemStyles.paddingRight);
+                                if (!(isNullOrUndefined(paddingWidth)))
+                                    itemsWidth += paddingWidth;
+                                let marginWidth = parseFloat(itemStyles.marginLeft) + parseFloat(itemStyles.marginRight);
+                                if (!(isNullOrUndefined(marginWidth)))
+                                    itemsWidth += marginWidth;
+                            }
+                        }
+                    }
+                    else {
+                        isWidthApplied = true;
+                        break;
+                    }
+                    count++;
+                }
+            }
+            if (isWidthApplied) {
+                break;
+            }
+        }
+        if (itemsWidth > 0)
+            galleryWrapper.style.width = itemsWidth + 'px';
+    }
+    /**
+     * Checks the gallery items height.
+     *
+     * @param {number} selectedTab - Gets the current selected tab.
+     * @param {HTMLElement} activeContent - Gets the current active content.
+     * @returns {void}
+     * @hidden
+     */
+    checkAvailableHeight(selectedTab, activeContent) {
+        let galleryWrapperItems = activeContent.querySelectorAll('.e-ribbon-gallery-wrapper');
+        for (let n = 0; n < galleryWrapperItems.length; n++) {
+            let isHeight = false;
+            let itemsCount = 0;
+            let galleryWrapper = galleryWrapperItems[parseInt(n.toString(), 10)];
+            let galleryWrapperHeight = galleryWrapper.offsetHeight;
+            let itemID = galleryWrapper.id.replace(/_galleryWrapper/g, '');
+            const itemProp = getItem(this.parent.tabs, itemID);
+            if (itemProp) {
+                this.setWrapperWidth(itemProp.item.gallerySettings.itemCount, galleryWrapper, itemProp.item.gallerySettings, itemID);
+                for (let i = 0; i < itemProp.item.gallerySettings.groups.length; i++) {
+                    if (itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
+                        for (let j = 0; j < itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                            let galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                            if (galleryItemEle) {
+                                itemsCount++;
+                                if (!isHeight) {
+                                    if (itemsCount === 1) {
+                                        let itemsValues = 0;
+                                        let itemStyles = window.getComputedStyle(galleryItemEle);
+                                        if (itemStyles) {
+                                            let paddingWidth = parseFloat(itemStyles.paddingTop) + parseFloat(itemStyles.paddingBottom);
+                                            if (!(isNullOrUndefined(paddingWidth)))
+                                                itemsValues += paddingWidth;
+                                            let marginWidth = parseFloat(itemStyles.marginTop) + parseFloat(itemStyles.marginBottom);
+                                            if (!(isNullOrUndefined(marginWidth)))
+                                                itemsValues += marginWidth;
+                                        }
+                                        if (galleryWrapperHeight > (galleryItemEle.offsetHeight + itemsValues)) {
+                                            galleryWrapperHeight -= (galleryItemEle.offsetHeight + itemsValues);
+                                        }
+                                        else {
+                                            isHeight = true;
+                                            galleryItemEle.remove();
+                                        }
+                                    }
+                                    if (itemsCount === itemProp.item.gallerySettings.itemCount) {
+                                        itemsCount = 0;
+                                    }
+                                }
+                                else {
+                                    galleryItemEle.remove();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    checkCollision(popup, popupEle) {
+        let paddingWidth = 0;
+        let marginWidth = 0;
+        if (popupEle) {
+            let screenWidth = window.innerWidth;
+            let paddingStyles = window.getComputedStyle(popupEle);
+            if (paddingStyles) {
+                paddingWidth = parseFloat(paddingStyles.paddingLeft) + parseFloat(paddingStyles.paddingRight);
+                if (!(isNullOrUndefined(paddingWidth)))
+                    screenWidth = screenWidth - paddingWidth;
+            }
+            let popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
+            if (popup.width !== 'auto') {
+                popupContainerItems.forEach((ele) => {
+                    ele.style.flexFlow = 'wrap';
+                });
+            }
+            let isCollideOccurs = false;
+            for (let i = 0; i < popupContainerItems.length; i++) {
+                let itemsWidth = 0;
+                for (let j = 0; j < popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item').length; j++) {
+                    let marginStyles = window.getComputedStyle(popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)]);
+                    if (marginStyles) {
+                        marginWidth = parseFloat(marginStyles.marginLeft) + parseFloat(marginStyles.marginRight);
+                        if (!(isNullOrUndefined(marginWidth)))
+                            itemsWidth += marginWidth;
+                    }
+                    itemsWidth += popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)].offsetWidth;
+                    if (((screenWidth <= itemsWidth) && popup.width === 'auto') || ((popup.width !== 'auto') && (screenWidth <= parseInt(popup.width.toString(), 10)) && (screenWidth <= itemsWidth))) {
+                        popupEle.style.width = ((itemsWidth + Math.abs(paddingWidth - marginWidth)) - popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)].offsetWidth) + 'px';
+                        isCollideOccurs = true;
+                        break;
+                    }
+                }
+                if (isCollideOccurs) {
+                    popupContainerItems.forEach((ele) => {
+                        ele.style.flexFlow = 'wrap';
+                    });
+                    break;
+                }
+            }
+            if (!isCollideOccurs) {
+                if (popup.width === 'auto') {
+                    popupContainerItems.forEach((ele) => {
+                        ele.style.flexFlow = 'nowrap';
+                    });
+                    popupEle.style.width = 'auto';
+                }
+                else {
+                    popupEle.style.width = (popup.width).toString();
+                }
+            }
+        }
+    }
+    createPopup(item, buttonEle) {
+        let popupContainer = this.parent.createElement('div', {
+            className: 'e-ribbon-popup-container',
+            id: item.id + '_popupContainer'
+        });
+        this.renderGalleryItems(item.gallerySettings, true, item.id, popupContainer);
+        const gallerypopupElement = this.parent.createElement('div', {
+            className: 'e-ribbon-gallery-popup',
+            id: item.id + '_galleryPopup'
+        });
+        document.body.append(gallerypopupElement);
+        const galleryPopup = new Popup(gallerypopupElement, {
+            relateTo: buttonEle,
+            content: popupContainer,
+            collision: { X: 'fit', Y: 'flip' },
+            actionOnScroll: 'hide',
+            targetType: 'relative',
+            position: { X: 'left', Y: 'bottom' },
+            enableRtl: this.parent.enableRtl,
+            width: item.gallerySettings.popupWidth,
+            height: item.gallerySettings.popupHeight
+        });
+        galleryPopup.hide();
+    }
+    /**
+     * Updates gallery in mode switching.
+     *
+     * @param {string} activeLayout - Gets the current active layout.
+     * @param {string} itemID - Gets the ribbon item id.
+     * @returns {void}
+     * @hidden
+     */
+    switchGalleryItems(activeLayout, itemID) {
+        let itemEle = this.parent.element.querySelector('#' + itemID + CONTAINER_ID);
+        let count = 0;
+        const itemProp = getItem(this.parent.tabs, itemID);
+        if (itemEle) {
+            let galleryWrapper = itemEle.querySelector('.e-ribbon-gallery-wrapper');
+            let galleryIcons = itemEle.querySelectorAll('.e-ribbon-gallery-icons');
+            let galleryContainer = itemEle.querySelectorAll('.e-ribbon-gallery-container');
+            if (galleryIcons.length) {
+                for (let i = 0; i < galleryIcons.length; i++) {
+                    activeLayout === 'Simplified' ? galleryIcons[parseInt(i.toString(), 10)].classList.add('e-hidden') : galleryIcons[parseInt(i.toString(), 10)].classList.remove('e-hidden');
+                }
+            }
+            if (galleryContainer.length && itemProp) {
+                for (let n = 0; n < itemProp.item.gallerySettings.groups.length; n++) {
+                    for (let i = 0; i < galleryContainer.length; i++) {
+                        if (itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].itemHeight && itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].itemHeight !== 'auto') {
+                            if (itemID + '_galleryContainer' + n === galleryContainer[parseInt(i.toString(), 10)].id) {
+                                activeLayout === 'Simplified' ? galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'nowrap' : galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'wrap';
+                            }
+                        }
+                    }
+                }
+            }
+            if (galleryWrapper) {
+                for (let n = 0; n < itemProp.item.gallerySettings.groups.length; n++) {
+                    for (let i = 0; i < itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].items.length; i++) {
+                        count++;
+                        if (count > itemProp.item.gallerySettings.itemCount) {
+                            let galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + n + '_gallery' + i);
+                            if (galleryItemEle) {
+                                activeLayout === 'Simplified' ? galleryItemEle.classList.add('e-hidden') : galleryItemEle.classList.remove('e-hidden');
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * 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.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
+     * @returns {void}
+     * @hidden
+     */
+    addOverFlowEvents(item, itemEle, overflowButton) {
+        if (itemEle.closest('.e-ribbon-overflow-target')) {
+            const buttonEle = this.parent.createElement('button', {
+                id: item.id,
+            });
+            itemEle.appendChild(buttonEle);
+            itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
+            itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach((ele) => {
+                ele.classList.add('e-hidden');
+            });
+            let popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
+            if (popupButton)
+                popupButton.classList.add('e-hidden');
+            const itemProp = getItem(this.parent.tabs, item.id);
+            let iconCss = itemProp && itemProp.group.groupIconCss ? itemProp.group.groupIconCss : '';
+            let content = itemProp && itemProp.group.header ? itemProp.group.header : '';
+            if (!iconCss) {
+                for (let i = 0; i < item.gallerySettings.groups.length; i++) {
+                    for (let j = 0; j < item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                        if (item.gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].iconCss) {
+                            iconCss = item.gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].iconCss;
+                            break;
+                        }
+                    }
+                    if (iconCss) {
+                        break;
+                    }
+                }
+            }
+            let popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            let popup = getComponent(popupEle, Popup);
+            let popupContainerEle = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
+            const dropdown = new DropDownButton({
+                iconCss: iconCss,
+                content: content,
+                target: popupContainerEle,
+                enableRtl: this.parent.enableRtl,
+                cssClass: 'e-ribbon-gallery-dropdown',
+                disabled: item.disabled,
+                open: () => {
+                    this.setFoucsToFirstItem(popupContainerEle, true, item.id);
+                    this.checkCollision(dropdown.dropDown, dropdown.dropDown.element);
+                },
+                beforeClose: (args) => {
+                    const isCancelled = this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
+                    if (isCancelled) {
+                        args.cancel = true;
+                    }
+                }
+            }, buttonEle);
+            if (popup.width !== 'auto') {
+                dropdown.dropDown.width = formatUnit(popup.width);
+            }
+            if (popup.height !== 'auto') {
+                dropdown.dropDown.height = formatUnit(popup.height);
+                dropdown.dropDown.element.style.height = (popup.height).toString();
+            }
+        }
+    }
+    /**
+     * 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) {
+        let popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
+        if (popupButton) {
+            popupButton.classList.remove('e-hidden');
+        }
+        itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.remove('e-hidden');
+        itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach((ele) => {
+            ele.classList.remove('e-hidden');
+        });
+        const galleryDDBEle = document.querySelector('#' + item.id);
+        if (galleryDDBEle) {
+            let popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            const dropdown = getComponent(galleryDDBEle, DropDownButton);
+            popupEle.appendChild(dropdown.target);
+            dropdown.destroy();
+            remove(galleryDDBEle);
+        }
+    }
+    setActiveState(galleryEle, gallerySettings, itemID, isInteracted, event) {
+        let previousItem;
+        let currentItem;
+        let itemEle = document.querySelector('#' + itemID + CONTAINER_ID);
+        let selctedGalleryItem = Array.prototype.slice.call(itemEle.querySelectorAll('.e-ribbon-gallery-selected'));
+        let popupEle = document.querySelector('#' + itemID + '_popupContainer');
+        let popupGalleryItem = Array.prototype.slice.call(popupEle.querySelectorAll('.e-ribbon-gallery-selected'));
+        if (popupGalleryItem.length) {
+            selctedGalleryItem = selctedGalleryItem.concat(popupGalleryItem);
+        }
+        for (let i = 0; i < gallerySettings.groups.length; i++) {
+            for (let j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                if (selctedGalleryItem[0].id === itemID + '_galleryContainer' + i + '_gallery' + j) {
+                    previousItem = gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)];
+                }
+                if (galleryEle.id === itemID + '_galleryContainer' + i + '_gallery' + j) {
+                    currentItem = gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)];
+                }
+            }
+        }
+        let galleryItem = document.querySelectorAll('#' + galleryEle.id);
+        const selectingEventArgs = { cancel: false, name: 'beforeSelect', previousItem: previousItem, currentItem: currentItem, isInteracted: isInteracted, event: event };
+        if (gallerySettings.beforeSelect) {
+            gallerySettings.beforeSelect.call(this, selectingEventArgs);
+        }
+        if (selectingEventArgs.cancel) {
+            return;
+        }
+        else {
+            for (let i = 0; i < selctedGalleryItem.length; i++) {
+                selctedGalleryItem[parseInt(i.toString(), 10)].classList.remove('e-ribbon-gallery-selected');
+            }
+            for (let i = 0; i < galleryItem.length; i++) {
+                galleryItem[parseInt(i.toString(), 10)].classList.add('e-ribbon-gallery-selected');
+            }
+            const selectedEventArgs = { previousItem: previousItem, currentItem: currentItem, name: 'select', isInteracted: isInteracted, event: event };
+            let galleryPopupItems = document.querySelectorAll('#' + itemID + '_popupContainer .e-ribbon-gallery-item');
+            for (let i = 0; i < galleryPopupItems.length; i++) {
+                if (galleryPopupItems[parseInt(i.toString(), 10)].id === galleryEle.id) {
+                    gallerySettings.selectedItemIndex = i;
+                    break;
+                }
+            }
+            if (gallerySettings.select) {
+                gallerySettings.select.call(this, selectedEventArgs);
+            }
+        }
+    }
+    popupEvents(args, gallerySettings, name, isOpen) {
+        const popupEventArgs = { cancel: false, event: args, name: name };
+        if (isOpen && gallerySettings.popupOpen) {
+            gallerySettings.popupOpen.call(this, popupEventArgs);
+        }
+        else if (!isOpen && gallerySettings.popupClose) {
+            gallerySettings.popupClose.call(this, popupEventArgs);
+        }
+        if (popupEventArgs.cancel) {
+            return true;
+        }
+        return false;
+    }
+    showPopup(popup, popupEle, args, gallerySettings, itemID) {
+        const isCancelled = this.popupEvents(args, gallerySettings, 'popupOpen', true);
+        if (isCancelled) {
+            return;
+        }
+        popup.show();
+        this.checkCollision(popup, popupEle);
+        const buttonEle = document.querySelector('#' + itemID + '_popupButton');
+        buttonEle.classList.add('e-gallery-button-active');
+        const buttonPosition = buttonEle.getBoundingClientRect();
+        const offsetX = Math.abs((popupEle.offsetWidth - buttonPosition.left)) + buttonEle.offsetWidth;
+        popupEle.style.left = offsetX + 'px';
+        popupEle.style.top = popupEle.getBoundingClientRect().top + 2 + 'px';
+        this.setFoucsToFirstItem(popupEle, false, itemID, popup, gallerySettings);
+    }
+    hidePopup(popup, popupEle, args, gallerySettings, itemID) {
+        const isCancelled = this.popupEvents(args, gallerySettings, 'popupClose', false);
+        if (isCancelled) {
+            return;
+        }
+        popup.hide();
+        const buttonEle = document.querySelector('#' + itemID + '_popupButton');
+        buttonEle.classList.remove('e-gallery-button-active');
+    }
+    /**
+     * Shows a specific gallery popup in the ribbon.
+     *
+     * @param {string} id - Gets the ribbon item id.
+     * @returns {void}
+     */
+    showGalleryPopup(id) {
+        const itemProp = getItem(this.parent.tabs, id);
+        let popupEle = document.querySelector('#' + id + '_galleryPopup');
+        let popup = getComponent(popupEle, Popup);
+        this.showPopup(popup, popupEle, null, itemProp.item.gallerySettings, id);
+    }
+    /**
+     * Hides a specific gallery popup in the ribbon.
+     *
+     * @param {string} id - Gets the ribbon item id.
+     * @returns {void}
+     */
+    hideGalleryPopup(id) {
+        const itemProp = getItem(this.parent.tabs, id);
+        let popupEle = document.querySelector('#' + id + '_galleryPopup');
+        let popup = getComponent(popupEle, Popup);
+        this.hidePopup(popup, popupEle, null, itemProp.item.gallerySettings, id);
+    }
+    setFoucsToFirstItem(popupEle, isDropdown, itemID, popup, gallerySettings) {
+        popupEle.querySelectorAll('.e-ribbon-gallery-item')[0].focus();
+        this.galleryItemsIndex = 0;
+        popupEle.onkeydown = (e) => {
+            this.handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings);
+        };
+    }
+    handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings) {
+        let galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
+        if (galleryPopupEle) {
+            if (e.key === 'Home') {
+                this.galleryItemsIndex = 0;
+                galleryPopupEle[this.galleryItemsIndex].focus();
+            }
+            else if (e.key === 'End') {
+                this.galleryItemsIndex = galleryPopupEle.length - 1;
+                galleryPopupEle[this.galleryItemsIndex].focus();
+            }
+            else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                this.galleryItemsIndex++;
+                if (this.galleryItemsIndex !== galleryPopupEle.length) {
+                    if (galleryPopupEle && (galleryPopupEle[this.galleryItemsIndex])) {
+                        galleryPopupEle[this.galleryItemsIndex].focus();
+                    }
+                }
+                else {
+                    this.galleryItemsIndex = 0;
+                    galleryPopupEle[this.galleryItemsIndex].focus();
+                }
+            }
+            else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                if (this.galleryItemsIndex !== 0) {
+                    this.galleryItemsIndex--;
+                    if (galleryPopupEle && (galleryPopupEle[this.galleryItemsIndex])) {
+                        galleryPopupEle[this.galleryItemsIndex].focus();
+                    }
+                }
+                else {
+                    this.galleryItemsIndex = galleryPopupEle.length - 1;
+                    galleryPopupEle[this.galleryItemsIndex].focus();
+                }
+            }
+            else if (e.key === 'Enter' || e.code === 'Space') {
+                galleryPopupEle[this.galleryItemsIndex].click();
+            }
+            else if (e.key === 'Escape' && !isDropdown) {
+                this.hidePopup(popup, popupEle, e, gallerySettings, itemID);
+            }
+        }
+    }
+    createGalleryTemplate(galleryItemEle, gallerySettings, id, items) {
+        galleryItemEle.classList.add('e-ribbon-gallery-template');
+        const templateName = 'ribbon' + id + 'galleryTemplate';
+        this.parent['clearTemplate']([templateName]);
+        const templateFunction = getTemplateFunction(gallerySettings.template);
+        if (items.disabled) {
+            galleryItemEle.classList.add('e-disabled');
+        }
+        if (items.cssClass) {
+            galleryItemEle.classList.add(items.cssClass);
+        }
+        append(templateFunction({ items: items }, this, templateName, (id + 'galleryTemplate'), this.parent.isStringTemplate), galleryItemEle);
+        this.parent['renderReactTemplates']();
+    }
+    createGalleryPopupTemplate(galleryItemEle, gallerySettings, id, items) {
+        galleryItemEle.classList.add('e-ribbon-gallery-popup-template');
+        const templateName = 'ribbon' + id + 'galleryPopupTemplate';
+        this.parent['clearTemplate']([templateName]);
+        const templateFunction = getTemplateFunction(gallerySettings.popupTemplate);
+        if (items.disabled) {
+            galleryItemEle.classList.add('e-disabled');
+        }
+        if (items.cssClass) {
+            galleryItemEle.classList.add(items.cssClass);
+        }
+        append(templateFunction({ items: items }, this, templateName, (id + 'galleryPopupTemplate'), this.parent.isStringTemplate), galleryItemEle);
+        this.parent['renderReactTemplates']();
+    }
+}
+
+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.keysPress = '';
+        this.idIndex = 0;
+        this.tooltipData = [];
+        this.initialPropsData = {};
+        this.hiddenElements = {};
+        this.keyTipElements = {};
+        this.hiddenGroups = [];
+        this.itemsModel = [];
+        this.targetTabs = {};
+        this.isAddRemove = false;
+        this.isUpdateItems = 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], name: 'RibbonButton' }, { member: 'ribbonDropDown', args: [this], name: 'RibbonDropDown' }, { member: 'ribbonSplitButton', args: [this], name: 'RibbonSplitButton' }, { member: 'ribbonCheckBox', args: [this], name: 'RibbonCheckBox' }, { member: 'ribbonComboBox', args: [this], name: 'RibbonComboBox' }, { member: 'ribbonGroupButton', args: [this], name: 'RibbonGroupButton' });
+        const canInjectColorPickerModule = getItem(this.tabs, null, RibbonItemType.ColorPicker);
+        const canInjectGalleryModule = getItem(this.tabs, null, RibbonItemType.Gallery);
+        if (canInjectColorPickerModule) {
+            modules.push({ member: 'ribbonColorPicker', args: [this], name: 'RibbonColorPicker' });
+        }
+        if (canInjectGalleryModule) {
+            modules.push({ member: 'ribbonGallery', args: [this], name: 'RibbonGallery' });
+        }
+        if (this.backStageMenu.visible || this.backStageMenu.items.length) {
+            modules.push({ member: 'ribbonBackstage', args: [this], name: 'RibbonBackstage' });
+        }
+        if (this.fileMenu.visible || this.fileMenu.menuItems.length) {
+            modules.push({ member: 'ribbonFileMenu', args: [this], name: 'RibbonFileMenu' });
+        }
+        if (this.contextualTabs.length) {
+            modules.push({ member: 'ribbonContextualTab', args: [this], name: 'RibbonContextualTab' });
+        }
+        if (this.enableKeyTips) {
+            modules.push({ member: 'ribbonKeyTip', args: [this], name: 'RibbonKeyTip' });
+        }
+        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) {
@@ -3456,6 +4355,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         this.element.style.width = formatUnit(this.width);
         this.renderTabs();
+        if (this.ribbonContextualTabModule) {
+            this.ribbonContextualTabModule.addContextualTabs();
+        }
         if (this.ribbonFileMenuModule) {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
@@ -3465,13 +4367,18 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.createHelpPaneTemplate();
         const toolbar = this.tabObj['tbObj'];
         toolbar.refreshOverflow();
+        this.addTabOverflowKeyTip();
         createTooltip(this.element, this);
+        this.isKeytipOpen = false;
         this.wireEvents();
         this.wireKeyboardEvent();
         this.currentControlIndex = 0;
     }
     wireEvents() {
         EventHandler.add(window, 'resize', this.resizeHandler, this);
+        EventHandler.add(document.body, 'keydown', this.keytipActionHandler, this);
+        EventHandler.add(document, 'mousedown', this.mouseEventHandler, this);
+        EventHandler.add(document, 'scroll', this.mouseEventHandler, this);
     }
     wireKeyboardEvent() {
         this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
@@ -3487,7 +4394,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
         const controlElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-control'));
         const templateElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-template'));
-        const ribbonControls = controlElements.concat(templateElements);
+        const galleryElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-gallery-item'));
+        const ribbonControls = controlElements.concat(templateElements, galleryElements);
         const comboBoxElements = activeContent.querySelectorAll('.e-combobox');
         let comboBoxEle;
         if (comboBoxElements) {
@@ -3516,7 +4424,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
             e.target.classList.contains('e-ribbon-collapse-btn') || e.target.classList.contains('e-ribbon-last-item') ||
             e.target.classList.contains('e-ribbon-first-item') || e.target.classList.contains('e-ribbon-group-of-btn') ||
-            e.target.classList.contains('e-ribbon-overall-of-btn') || e.target.classList.contains('e-ribbon-template')) {
+            e.target.classList.contains('e-ribbon-overall-of-btn') || e.target.classList.contains('e-ribbon-template') || e.target.classList.contains('e-ribbon-gallery-item')) {
             switch (e.action) {
                 case 'rightarrow':
                     this.handleNavigation(e, !this.enableRtl, ribbonControls);
@@ -3558,7 +4466,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
         if ((!enableRtl && (this.currentControlIndex > 0)) || (enableRtl && (this.currentControlIndex < ribbonControls.length - 1))) {
-            if (!e.target.classList.contains('e-combobox') && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template')) && !e.target.classList.contains('e-ribbon-last-item')) {
+            if (!e.target.classList.contains('e-combobox') && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template') || e.target.classList.contains('e-ribbon-gallery-item')) && !e.target.classList.contains('e-ribbon-last-item')) {
                 if (enableRtl) {
                     this.currentControlIndex++;
                 }
@@ -3717,6 +4625,111 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
             }
         }
+        let galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
+        if (galleryPopupEle) {
+            let popup = getComponent(galleryPopupEle, Popup);
+            popup.hide();
+        }
+        if (this.ribbonKeyTipModule && this.enableKeyTips) {
+            this.ribbonKeyTipModule.removeKeytip();
+        }
+    }
+    mouseEventHandler(e) {
+        if (this.ribbonKeyTipModule && this.enableKeyTips) {
+            this.ribbonKeyTipModule.removeKeytip();
+        }
+    }
+    keytipActionHandler(e) {
+        if (this.enableKeyTips) {
+            let isKeyTipPresent = false;
+            const keyPress = e.key;
+            if (e.altKey && e.key === 'Meta') {
+                const activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+                if (activePopup.length) {
+                    for (let i = 0; i < activePopup.length; i++) {
+                        const dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+                        dropDownBtn.toggle();
+                    }
+                    this.ribbonKeyTipModule.removeKeytip();
+                }
+                else {
+                    if (!this.isKeytipOpen) {
+                        const backstagePopup = document.querySelector('.e-ribbon-backstage-popup');
+                        if (backstagePopup && backstagePopup.classList.contains('e-popup-open')) {
+                            this.ribbonBackstageModule.hideBackstage();
+                        }
+                        this.ribbonKeyTipModule.createKeytip('tab');
+                    }
+                    else {
+                        this.ribbonKeyTipModule.removeKeytip();
+                    }
+                }
+            }
+            else if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                this.ribbonKeyTipModule.removeKeytip(e.key);
+            }
+            else {
+                const keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+                if (keyTipItems) {
+                    for (let i = 0; i < keyTipItems.length; i++) {
+                        const keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+                        if (keyTipItem.innerHTML.toLowerCase() === keyPress) {
+                            isKeyTipPresent = true;
+                            this.ribbonKeyTipModule.keytipPress(keyPress);
+                            break;
+                        }
+                    }
+                    if (!isKeyTipPresent) {
+                        this.checkKeyTipPresent(keyPress, this.keysPress.length);
+                    }
+                }
+            }
+        }
+    }
+    checkKeyTipPresent(keyTip, length) {
+        const keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        for (let i = 0; i < keyTipItems.length; i++) {
+            const keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (keyTipItem.innerHTML.length > 1 && keyTipItem.innerHTML[parseInt(length.toString(), 10)].toLowerCase() === keyTip) {
+                this.keysPress += keyTip;
+                this.ribbonKeyTipModule.keytipPress(this.keysPress);
+                this.removeKeytip(this.keysPress);
+                break;
+            }
+        }
+    }
+    removeKeytip(keyTip) {
+        const keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        for (let i = 0; i < keyTipItems.length; i++) {
+            const keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (keyTipItem.innerHTML[0].toLowerCase() !== keyTip && keyTip !== '') {
+                remove(keyTipItem);
+            }
+        }
+    }
+    addKeyTip(tabIndex, keyTip, id, type) {
+        if (this.keyTipElements && this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+            let isKeyTipExist = false;
+            /* eslint-disable */
+            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)][type])) {
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)][type] = [];
+            }
+            if (Object.keys(this.keyTipElements[tabIndex][type]).length) {
+                let keytipData = this.keyTipElements[tabIndex][type];
+                for (let i = 0; i < Object.keys(this.keyTipElements[tabIndex][type]).length; i++) {
+                    if (keytipData[parseInt(i.toString(), 10)].id === id) {
+                        isKeyTipExist = true;
+                    }
+                }
+                if (!isKeyTipExist) {
+                    this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+                }
+            }
+            else {
+                this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+            }
+            /* eslint-enable */
+        }
     }
     renderTabs() {
         this.tabsInternal = this.tabs.slice();
@@ -3778,14 +4791,33 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.renderInitialTab(this.selectedTab);
     }
     ribbonTabSelected(e) {
+        e.preventFocus = true;
         this.isAddRemove = false;
         const selectedTabId = e.selectedItem.getAttribute('data-id');
         let selectedIndex = getIndex(this.tabs, ((tab) => (tab.id === selectedTabId)));
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
-        const eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
+        let isContextual = this.isContextualTab(selectedTabId);
+        this.updateSelectedState(selectedTabId);
+        const eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
         this.setProperties({ selectedTab: selectedIndex }, true);
         this.calculateHiddenElementsWidth(selectedIndex);
+        if (this.isUpdateItems) {
+            for (let i = 0; i < this.itemsModel.length; i++) {
+                const item = this.itemsModel[parseInt(i.toString(), 10)];
+                if (this.selectedTab === this.targetTabs[item.id]) {
+                    this.updateItem(item);
+                    this.itemsModel.splice(i, 1);
+                    i--;
+                }
+            }
+            if (this.itemsModel.length === 0) {
+                this.isUpdateItems = false;
+            }
+        }
         this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
+        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule) {
+            this.ribbonGalleryModule.checkAvailableHeight(selectedIndex, e.selectedContent.firstChild);
+        }
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             const overflowTarget = this.overflowDDB.target;
             const ofTabContainer = overflowTarget.querySelector('.' + RIBBON_TAB_ACTIVE);
@@ -3804,6 +4836,20 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         this.trigger('tabSelected', eventArgs);
     }
+    updateSelectedState(tabID) {
+        if (this.contextualTabs.length) {
+            for (let i = 0; i < this.contextualTabs.length; i++) {
+                let isSelected = false;
+                for (let j = 0; j < this.contextualTabs[parseInt(i.toString(), 10)].tabs.length; j++) {
+                    if (this.contextualTabs[parseInt(i.toString(), 10)].tabs[parseInt(j.toString(), 10)].id === tabID) {
+                        isSelected = true;
+                        break;
+                    }
+                }
+                this.contextualTabs[parseInt(i.toString(), 10)].setProperties({ isSelected: isSelected }, true);
+            }
+        }
+    }
     checkOverflow(tabIndex, activeContent) {
         const tabContent = activeContent.closest('.' + TAB_CONTENT);
         const isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
@@ -3853,6 +4899,17 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
             }
         }
+        this.addTabOverflowKeyTip();
+    }
+    addTabOverflowKeyTip() {
+        const tabOverflow = this.tabObj.element.querySelector('#_nav');
+        if (tabOverflow) {
+            this.keyTipElements['taboverflow'] = [];
+            this.keyTipElements['taboverflow'].push({ id: tabOverflow.id, type: 'taboverflow', keyTip: '00' });
+        }
+        else {
+            delete (this.keyTipElements['taboverflow']);
+        }
     }
     checkSimplifiedItemShrinking(tabIndex, tabContent, activeContent) {
         const tab = this.tabs[parseInt(tabIndex.toString(), 10)];
@@ -3987,7 +5044,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                             this.setItemSize(itemEle, item);
                         }
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, true);
                         }
                     }
@@ -4017,7 +5074,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         return isEmptyCollection;
     }
     updatePopupItems(item, itemEle, isGroupOF, isMenu) {
-        const dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
+        const dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.Gallery || 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.
@@ -4082,7 +5139,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) || (item.type === RibbonItemType.GroupButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, false);
                         }
                         groupEle.append(itemContainer);
@@ -4201,19 +5258,22 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     }
     createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         let overflowButton;
+        let overflowtarget;
         const itemProp = getGroup(this.tabs, groupId);
         const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
         const groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             const overflowDDB = groupContainer.querySelector('#' + groupId + GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
-                overflowButton = this.addOverflowButton(groupId + GROUPOF_BUTTON_ID);
+                overflowButton = this.addOverflowButton(groupId + GROUPOF_BUTTON_ID, isGroupOF);
                 overflowButton.element.classList.add(RIBBON_GROUP_OF_BUTTON);
                 groupContainer.appendChild(overflowButton.element);
             }
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
+            this.addKeyTip(tabIndex, '0' + (itemProp.groupIndex + 1), overflowButton.element.id, 'grpofbtn');
+            overflowtarget = overflowButton.target;
             const overflowBtnTarget = overflowButton.target;
             let headerEle = overflowBtnTarget.querySelector('#' + groupId + GROUPOF_BUTTON_ID + HEADER_ID);
             if (!headerEle) {
@@ -4242,7 +5302,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         else {
             if (!this.overflowDDB) {
-                this.overflowDDB = this.addOverflowButton(this.tabObj.element.id + OVRLOF_BUTTON_ID);
+                this.overflowDDB = this.addOverflowButton(this.tabObj.element.id + OVRLOF_BUTTON_ID, isGroupOF);
                 this.tabObj.element.insertBefore(this.overflowDDB.element, this.collapseButton);
                 this.overflowDDB.element.classList.add(RIBBON_OVERALL_OF_BUTTON);
                 this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -4275,10 +5335,16 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
             }
             overflowButton = this.overflowDDB;
+            overflowtarget = this.overflowDDB ? this.overflowDDB.target : null;
         }
         if (itemEle !== null) {
             this.addOverflowEvents(item, itemEle, overflowButton);
         }
+        if (overflowtarget) {
+            if (item.keyTip) {
+                this.addKeyTip(tabIndex, item.keyTip, item.id, 'popupitem');
+            }
+        }
     }
     addOverflowEvents(item, itemEle, overflowButton) {
         switch (item.type) {
@@ -4300,6 +5366,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             case 'ComboBox':
                 this.ribbonComboBoxModule.addOverFlowEvents(item, itemEle, overflowButton);
                 break;
+            case 'Gallery':
+                if (this.activeLayout === 'Simplified') {
+                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle, overflowButton);
+                }
+                break;
             case 'GroupButton':
                 if (this.activeLayout === 'Simplified') {
                     this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
@@ -4970,6 +6041,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.checkSmallToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             this.checkMediumToLarge(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             const dropdown = this.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow, this.enableRtl);
+            if (group.keyTip) {
+                const overflowDDB = group.id + OVERFLOW_ID + DROPDOWN_ID;
+                this.addKeyTip(tabIndex, group.keyTip, overflowDDB, 'grpoverflow');
+            }
             this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].setProperties({ isCollapsed: true }, true);
             for (let j = 0; j < group.collections.length; j++) {
@@ -4982,6 +6057,25 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         this.handleContentSize(itemEle);
                         this.addOverflowEvents(item, itemEle, dropdown);
                     }
+                    const overflowDDB = document.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID);
+                    const overflowButton = getInstance(overflowDDB, DropDownButton);
+                    if (overflowButton) {
+                        const overflowtarget = overflowButton.target;
+                        if (overflowtarget) {
+                            if (this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+                                if (item.type === RibbonItemType.GroupButton) {
+                                    for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
+                                        if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip) {
+                                            this.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip, item.id + (RIBBON_GROUP_BUTTON_ID + i), 'grpoverflowpopup');
+                                        }
+                                    }
+                                }
+                                if (item.keyTip) {
+                                    this.addKeyTip(tabIndex, item.keyTip, item.id, 'grpoverflowpopup');
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -5066,15 +6160,30 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.removeOverflowDropdown(activeContent, tabContent, true, index);
         }
     }
+    isContextualTab(tabID) {
+        let isContextual = false;
+        if (this.contextualTabs.length) {
+            for (let i = 0; i < this.contextualTabs.length; i++) {
+                for (let j = 0; j < this.contextualTabs[parseInt(i.toString(), 10)].tabs.length; j++) {
+                    if (this.contextualTabs[parseInt(i.toString(), 10)].tabs[parseInt(j.toString(), 10)].id === tabID) {
+                        isContextual = true;
+                        break;
+                    }
+                }
+            }
+        }
+        return isContextual;
+    }
     ribbonTabSelecting(e) {
         this.currentControlIndex = 0;
         const nextTabId = e.selectingItem.getAttribute('data-id');
         const previousTabId = e.previousItem.getAttribute('data-id');
         let nextIndex = getIndex(this.tabs, ((tab) => (tab.id === nextTabId)));
+        let isContextual = this.isContextualTab(nextTabId);
         const previousIndex = getIndex(this.tabs, ((tab) => (tab.id === previousTabId)));
         nextIndex = nextIndex === -1 ? this.selectedTab : nextIndex;
         const eventArgs = {
-            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex
+            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex, isContextual: isContextual
         };
         this.trigger('tabSelecting', eventArgs, (args) => {
             if (args.cancel) {
@@ -5099,6 +6208,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 innerHTML: ribbonTab.header,
                 id: ribbonTab.id + HEADER_ID
             });
+            const tabIndex = getIndex(this.tabs, ((tab) => (tab.id === ribbonTab.id)));
+            if (ribbonTab.keyTip) {
+                if (!this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+                    this.keyTipElements[parseInt(tabIndex.toString(), 10)] = {};
+                }
+                this.addKeyTip(tabIndex, ribbonTab.keyTip, ribbonTab.id, 'tab');
+            }
             header.onclick = () => { this.minimize(false); };
             header.ondblclick = () => { this.minimize(true); };
             const tab = { header: { text: header }, id: ribbonTab.id, cssClass: ribbonTab.cssClass };
@@ -5121,8 +6237,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
         this.checkOverflow(this.selectedTab, activeContent);
+        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule)
+            this.ribbonGalleryModule.checkAvailableHeight(this.selectedTab, activeContent);
     }
-    addOverflowButton(btnId) {
+    addOverflowButton(btnId, isGroupOF) {
         const overflowButton = this.createElement('button', {
             id: btnId
         });
@@ -5158,6 +6276,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }, overflowButton);
         this.element.classList.add(RIBBON_OVERFLOW);
         createTooltip(overflowTarget, this);
+        if (!isGroupOF) {
+            this.keyTipElements['overflowbtn'] = [];
+            this.keyTipElements['overflowbtn'].push({ id: btnId, type: 'overflowbtn', keyTip: '00' });
+        }
         let isGroupOf;
         overflowButton.onkeydown = overflowButton.onclick = () => { this.itemIndex = -1; isGroupOf = overflowButton.classList.contains('e-ribbon-overall-of-btn') ? false : true; };
         overflowTarget.onkeydown = (e) => (this.upDownKeyHandler(e, overflowTarget, isGroupOf), this);
@@ -5318,6 +6440,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 case 'ComboBox':
                     this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
                     break;
+                case 'Gallery':
+                    this.ribbonGalleryModule.removeOverFlowEvents(item, itemEle);
+                    break;
                 case 'GroupButton':
                     this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
                     break;
@@ -5354,6 +6479,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.collapseButton.classList.add(RIBBON_EXPAND_BUTTON);
         }
         this.tabObj.element.appendChild(this.collapseButton);
+        if (this.layoutSwitcherKeyTip) {
+            this.keyTipElements['collapse'] = [];
+            this.keyTipElements['collapse'].push({ id: this.collapseButton.id, type: 'collapse', keyTip: this.layoutSwitcherKeyTip });
+        }
     }
     removeExpandCollapse() {
         const index = getIndex(this.tooltipData, (e) => { return e.id === this.collapseButton.id; });
@@ -5513,7 +6642,7 @@ 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) || (item.type === RibbonItemType.GroupButton)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
                                         }
                                     }
@@ -5526,6 +6655,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                         this.setItemSize(ele, item);
                                     }
                                 }
+                                if (item.type === RibbonItemType.Gallery) {
+                                    this.ribbonGalleryModule.switchGalleryItems(this.activeLayout, item.id);
+                                }
                             }
                         }
                         if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
@@ -5609,7 +6741,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     let itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
                                     if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
                                         }
                                         this.removeOverflowEvent(item, itemEle);
@@ -5629,6 +6761,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     (item.allowedSizes & RibbonItemSize.Medium) ? RibbonItemSize.Medium : RibbonItemSize.Small;
                                 item.setProperties({ activeSize: itemsize }, true);
                                 this.setItemSize(ele, item);
+                                if (item.type === RibbonItemType.Gallery) {
+                                    this.ribbonGalleryModule.switchGalleryItems(this.activeLayout, item.id);
+                                }
                             }
                             if (group.enableGroupOverflow && overflowDDB) {
                                 if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
@@ -5648,7 +6783,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.overflowDDB = null;
         }
     }
-    createLauncherIcon(groupId, groupContainer) {
+    createLauncherIcon(groupId, groupContainer, tabIndex) {
         const launcherIcon = this.createElement('div', {
             className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.launcherIconCss : RIBBON_LAUNCHER_ICON),
             id: groupId + LAUNCHER_ID,
@@ -5662,6 +6797,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 this.launcherIconClicked(groupId);
             }
         }, this);
+        const itemProp = getGroup(this.tabs, groupId);
+        if (itemProp.group.launcherIconKeyTip) {
+            this.addKeyTip(tabIndex, itemProp.group.launcherIconKeyTip, launcherIcon.id, 'launcher');
+        }
     }
     launcherIconClicked(id) {
         const eventArgs = { groupId: id };
@@ -5699,7 +6838,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 groupContainer.appendChild(groupHeader);
             }
             if (group.showLauncherIcon) {
-                this.createLauncherIcon(group.id, groupContainer);
+                this.createLauncherIcon(group.id, groupContainer, tabIndex);
             }
             const elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
@@ -5826,6 +6965,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             case 'GroupButton':
                 this.ribbonGroupButtonModule.createGroupButton(item, itemEle);
                 break;
+            case 'Gallery':
+                this.ribbonGalleryModule.createGallery(item, itemEle);
+                break;
         }
     }
     createItems(itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
@@ -5858,17 +7000,34 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 itemEle.classList.add(RIBBON_TOOLTIP_TARGET);
                 this.tooltipData.push({ id: itemEle.id, data: item.ribbonTooltipSettings });
             }
-            let size = item.activeSize;
-            if (this.activeLayout === 'Simplified') {
-                size = ((item.allowedSizes === RibbonItemSize.Large) || (item.allowedSizes & RibbonItemSize.Medium) ||
-                    (item.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                item.setProperties({ activeSize: size }, true);
+            if (item.type === RibbonItemType.GroupButton) {
+                for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
+                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] && item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip) {
+                        this.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip, item.id + (RIBBON_GROUP_BUTTON_ID + i), 'item');
+                    }
+                }
             }
-            if (size & RibbonItemSize.Large) {
-                itemEle.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+            if (item.keyTip) {
+                if (item.type === RibbonItemType.Gallery) {
+                    this.addKeyTip(tabIndex, item.keyTip, (item.id + '_popupButton'), 'item');
+                }
+                else {
+                    this.addKeyTip(tabIndex, item.keyTip, item.id, 'item');
+                }
             }
-            else {
-                itemEle.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+            let size = item.activeSize;
+            if (!(item.type === RibbonItemType.Gallery)) {
+                if (this.activeLayout === 'Simplified') {
+                    size = ((item.allowedSizes === RibbonItemSize.Large) || (item.allowedSizes & RibbonItemSize.Medium) ||
+                        (item.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                    item.setProperties({ activeSize: size }, true);
+                }
+                if (size & RibbonItemSize.Large) {
+                    itemEle.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+                }
+                else {
+                    itemEle.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+                }
             }
             const initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
             if (initialProps && initialProps.hiddenItems && initialProps.hiddenItems.length) {
@@ -5880,7 +7039,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) || (item.type === RibbonItemType.GroupButton)) {
+                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                     this.updatePopupItems(item, itemEle, isGroupOF, true);
                 }
             }
@@ -6071,12 +7230,18 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + RIBBON_GROUP_BUTTON_ID) :
                                         contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
                                 }
+                                if (item.type === RibbonItemType.Gallery) {
+                                    ele = contentEle.querySelector('#' + item.id + CONTAINER_ID);
+                                }
                             }
                         }
                         else {
                             //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
                             ele = (item.displayOptions & DisplayMode.Simplified) ?
                                 contentEle.querySelector('#' + item.id) : null;
+                            if (item.type === RibbonItemType.Gallery) {
+                                ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id + CONTAINER_ID) : null;
+                            }
                             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
                             if (!ele) {
                                 ele = dropdown ? dropdown.target.querySelector('#' + item.id) : null;
@@ -6127,6 +7292,30 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
             }
         }
+        else if (moduleName === 'gallery') {
+            if (ele.closest('.e-ribbon-overflow-target')) {
+                destroyControl(ele, 'dropdown-btn');
+                let galleryPopupEle = Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '_galleryPopup'));
+                galleryPopupEle.concat(Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '-popup')));
+                for (let i = 0; i < galleryPopupEle.length; i++) {
+                    galleryPopupEle[parseInt(i.toString(), 10)].remove();
+                }
+            }
+            else {
+                let galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
+                let galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
+                if (galleryPopupBtn) {
+                    galleryPopupBtn.remove();
+                }
+                for (let i = 0; i < galleryEle.length; i++) {
+                    galleryEle[parseInt(i.toString(), 10)].remove();
+                }
+                let galleryPopupEle = document.querySelectorAll('#' + item.id + '_galleryPopup');
+                for (let i = 0; i < galleryPopupEle.length; i++) {
+                    galleryPopupEle[parseInt(i.toString(), 10)].remove();
+                }
+            }
+        }
         else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
@@ -6140,6 +7329,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.ribbonGroupButtonModule.destroyDropDown(item);
         }
     }
+    /**
+     * Gets the item module name.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
     getItemModuleName(item) {
         switch (item.type) {
             case 'Button':
@@ -6156,6 +7352,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 return 'combobox';
             case 'GroupButton':
                 return 'group-btn';
+            case 'Gallery':
+                return 'gallery';
             default:
                 return 'template';
         }
@@ -6195,8 +7393,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
      * @param {string} tabId - The ID of the tab to be shown.
      * @returns {void}
      */
-    showTab(tabId) {
-        this.showHideTab(tabId, false);
+    showTab(tabId, isContextual = false) {
+        this.showHideTab(tabId, false, isContextual);
     }
     /**
      * Hides a specific tab in the ribbon.
@@ -6204,15 +7402,44 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
      * @param {string} tabId - The ID of the tab to be hidden.
      * @returns {void}
      */
-    hideTab(tabId) {
-        this.showHideTab(tabId, true);
+    hideTab(tabId, isContextual = false) {
+        this.showHideTab(tabId, true, isContextual);
     }
-    showHideTab(tabId, value) {
+    showHideTab(tabId, value, isContextual) {
         const index = getIndex(this.tabs, (e) => { return e.id === tabId; });
         if (index === -1) {
             return;
         }
         this.tabObj.hideTab(index, value);
+        if (isContextual) {
+            let contextualTab;
+            const tabEle = this.tabObj.element;
+            for (let i = 0; i < this.contextualTabs.length; i++) {
+                for (let j = 0; j < this.contextualTabs[parseInt(i.toString(), 10)].tabs.length; j++) {
+                    if (tabId === this.contextualTabs[parseInt(i.toString(), 10)].tabs[parseInt(j.toString(), 10)].id) {
+                        contextualTab = this.contextualTabs[parseInt(i.toString(), 10)];
+                    }
+                }
+            }
+            if (contextualTab) {
+                let isTabHidden = true;
+                for (let i = 0; i < contextualTab.tabs.length; i++) {
+                    const index = getIndex(this.tabs, (e) => { return e.id === contextualTab.tabs[parseInt(i.toString(), 10)].id; });
+                    if (index !== -1) {
+                        const toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index.toString(), 10)];
+                        if (!(toolbarEle.classList.contains('e-hidden'))) {
+                            isTabHidden = false;
+                        }
+                    }
+                }
+                if (isTabHidden) {
+                    contextualTab.setProperties({ visible: false }, true);
+                }
+                else {
+                    contextualTab.setProperties({ visible: true }, true);
+                }
+            }
+        }
     }
     /**
      * Enables a specific tab in the ribbon.
@@ -7215,7 +8442,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (contentEle.innerHTML !== '') {
             // Check whether showLauncherIcon or orientation is passed by the user and sets the updated values.
             if (group.showLauncherIcon) {
-                this.createLauncherIcon(ribbongroup.id, groupContainer);
+                this.createLauncherIcon(ribbongroup.id, groupContainer, itemProp.tabIndex);
             }
             // Check whether collections or orientation is passed by the user and sets the updated values.
             if (group.collections || group.orientation) {
@@ -7334,96 +8561,111 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         //Check whether the tab items are rendered
         const contentEle = this.tabObj.items[itemProp.tabIndex].content;
         const groupEle = contentEle.querySelector('#' + itemProp.group.id);
-        const groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
-        let itemContainer = null;
-        let itemEle = null;
-        let dropdownElement;
-        let dropdown;
-        if (contentEle.innerHTML !== '') {
-            if (this.activeLayout === RibbonLayout.Simplified) {
-                dropdownElement = itemProp.group.enableGroupOverflow ?
-                    contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
-                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
-            }
-            if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
-                itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
-                itemEle = dropdown.target.querySelector('#' + itemId);
-                if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
-                    const collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
-                    if (collectionEle) {
-                        collectionEle.appendChild(itemContainer);
+        if (groupEle) {
+            const groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+            let itemContainer = null;
+            let itemEle = null;
+            let dropdownElement;
+            let dropdown;
+            if (contentEle.innerHTML !== '') {
+                if (this.activeLayout === RibbonLayout.Simplified) {
+                    dropdownElement = itemProp.group.enableGroupOverflow ?
+                        contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
+                    dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+                }
+                if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
+                    itemEle = dropdown.target.querySelector('#' + itemId);
+                    if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
+                        const collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
+                        if (collectionEle) {
+                            collectionEle.appendChild(itemContainer);
+                        }
                     }
                 }
-            }
-            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);
+                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) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                            this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                        }
+                    }
                 }
-                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) || (item.type === RibbonItemType.GroupButton)) {
-                        this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+                if (item.cssClass) {
+                    if (itemProp.item.cssClass) {
+                        itemContainer.classList.remove(itemProp.item.cssClass);
                     }
                 }
-            }
-            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
-            if (item.cssClass) {
-                if (itemProp.item.cssClass) {
-                    itemContainer.classList.remove(itemProp.item.cssClass);
+                this.destroyFunction(itemProp.item, itemEle);
+                itemEle.remove();
+                const removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+                if (removeCss) {
+                    removeClass([itemContainer], removeCss);
                 }
             }
-            this.destroyFunction(itemProp.item, itemEle);
-            itemEle.remove();
-            const removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
-            if (removeCss) {
-                removeClass([itemContainer], removeCss);
-            }
-        }
-        const ribbonItem = itemProp.item;
-        ribbonItem.setProperties(item, true);
-        this.validateItemSize();
-        if (contentEle.innerHTML !== '') {
-            if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
-                itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
-            }
-            else {
-                itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
-            }
-            // To avoid undefined items condition is added
-            if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
-                itemContainer.classList.add(RIBBON_TOOLTIP_TARGET);
-                this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
-            }
-            let size = ribbonItem.activeSize;
-            if (this.activeLayout === 'Simplified') {
-                size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
-                    (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                ribbonItem.setProperties({ activeSize: size }, true);
-            }
-            if (size & RibbonItemSize.Large) {
-                itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
-            }
-            else {
-                itemContainer.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
-            }
-            this.createRibbonItem(ribbonItem, itemContainer);
-            if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
-                if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
-                    this.removeOverflowButton(dropdown);
+            const ribbonItem = itemProp.item;
+            ribbonItem.setProperties(item, true);
+            this.validateItemSize();
+            if (contentEle.innerHTML !== '') {
+                if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
+                    itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
                 }
+                else {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
+                }
+                // To avoid undefined items condition is added
+                if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
+                    itemContainer.classList.add(RIBBON_TOOLTIP_TARGET);
+                    this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
+                }
+                let size = ribbonItem.activeSize;
+                if (this.activeLayout === 'Simplified') {
+                    size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
+                        (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                    ribbonItem.setProperties({ activeSize: size }, true);
+                }
+                if (size & RibbonItemSize.Large) {
+                    itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+                }
+                else {
+                    if (size & RibbonItemSize.Medium) {
+                        itemContainer.classList.add(RIBBON_MEDIUM_ITEM);
+                    }
+                    else {
+                        itemContainer.classList.add(RIBBON_SMALL_ITEM);
+                    }
+                }
+                this.createRibbonItem(ribbonItem, itemContainer);
+                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                    if (dropdown.target.childElementCount === 0 ||
+                        (dropdown.target.childElementCount === 1 &&
+                            this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                        this.removeOverflowButton(dropdown);
+                    }
+                }
+                if (this.selectedTab === itemProp.tabIndex) {
+                    this.refreshLayout();
+                }
+                if (item.cssClass) {
+                    itemContainer.classList.add(ribbonItem.cssClass);
+                }
+                if (!(ribbonItem.disabled) && itemContainer.classList.contains(DISABLED_CSS)) {
+                    itemContainer.classList.remove(DISABLED_CSS);
+                }
+                this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
             }
-            if (this.selectedTab === itemProp.tabIndex) {
-                this.refreshLayout();
-            }
-            if (item.cssClass) {
-                itemContainer.classList.add(ribbonItem.cssClass);
-            }
-            if (!(ribbonItem.disabled) && itemContainer.classList.contains(DISABLED_CSS)) {
-                itemContainer.classList.remove(DISABLED_CSS);
-            }
-            this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
+        }
+        else {
+            this.isUpdateItems = true;
+            this.itemsModel.push(item);
+            this.targetTabs[item.id] = itemProp.tabIndex;
         }
     }
     removeItemElement(contentEle, item, dropdown) {
@@ -7470,6 +8712,15 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     disableItem(itemId) {
         this.enableDisableItem(itemId, true);
     }
+    /**
+     * Gets the Ribbon item model associated with the specified item ID.
+     *
+     * @param {string} itemId - The unique ID of the Ribbon item.
+     * @returns {RibbonItemModel}
+     */
+    getItem(itemId) {
+        return getItem(this.tabs, itemId).item;
+    }
     enableDisableItem(itemId, isDisabled) {
         let isUpdated = false;
         const itemProp = getItem(this.tabs, itemId);
@@ -7517,6 +8768,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     }
     unwireEvents() {
         EventHandler.remove(window, 'resize', this.resizeHandler);
+        EventHandler.remove(document.body, 'keydown', this.keytipActionHandler);
+        EventHandler.remove(document, 'mousedown', this.mouseEventHandler);
+        EventHandler.remove(document, 'scroll', this.mouseEventHandler);
     }
     destroy() {
         this.keyboardModuleRibbon.destroy();
@@ -7544,6 +8798,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.initialPropsData = {};
         this.hiddenGroups = [];
         this.hiddenElements = {};
+        this.keyTipElements = {};
+        this.itemsModel = [];
+        this.targetTabs = {};
         remove(this.element.querySelector('#' + this.element.id + TAB_ID));
         this.element.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(RIBBON_HELP_PANE_TEMPLATE_WIDTH);
@@ -7620,7 +8877,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     }
                     break;
                 case 'selectedTab':
-                    this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
+                    const tabEle = this.tabObj.element;
+                    const toolbarItem = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(newProp.selectedTab.toString(), 10)];
+                    if (!(toolbarItem.classList.contains('e-hidden') || toolbarItem.classList.contains('e-disable'))) {
+                        this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
+                    }
                     break;
                 case 'tabAnimation':
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
@@ -7628,6 +8889,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 case 'tabs':
                     this.reRenderTabs(newProp.tabs);
                     break;
+                case 'contextualTabs':
+                    for (let i = 0; i < this.contextualTabs.length; i++) {
+                        if (newProp.contextualTabs[parseInt(i.toString(), 10)]) {
+                            this.ribbonContextualTabModule.updateContextualTabs(newProp.contextualTabs[parseInt(i.toString(), 10)], this.contextualTabs[parseInt(i.toString(), 10)]);
+                        }
+                    }
+                    break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
                     this.refreshLayout();
@@ -7671,6 +8939,12 @@ __decorate([
 __decorate([
     Property('')
 ], Ribbon.prototype, "cssClass", void 0);
+__decorate([
+    Property(false)
+], Ribbon.prototype, "enableKeyTips", void 0);
+__decorate([
+    Property('')
+], Ribbon.prototype, "layoutSwitcherKeyTip", void 0);
 __decorate([
     Complex({}, FileMenuSettings)
 ], Ribbon.prototype, "fileMenu", void 0);
@@ -7695,6 +8969,9 @@ __decorate([
 __decorate([
     Collection([], RibbonTab)
 ], Ribbon.prototype, "tabs", void 0);
+__decorate([
+    Collection([], RibbonContextualTabSettings)
+], Ribbon.prototype, "contextualTabs", void 0);
 __decorate([
     Property('100%')
 ], Ribbon.prototype, "width", void 0);
@@ -7789,6 +9066,7 @@ class RibbonFileMenu {
         }
         this.parent.tabObj.refreshActiveTabBorder();
         this.addFileMenuTooltip(fileMenuOptions);
+        this.addFileMenuKeytip();
     }
     addFileMenuTooltip(fileMenuOptions) {
         if (isTooltipPresent(fileMenuOptions.ribbonTooltipSettings)) {
@@ -7796,6 +9074,12 @@ class RibbonFileMenu {
             this.parent.tooltipData.push({ id: this.ddbElement.id, data: fileMenuOptions.ribbonTooltipSettings });
         }
     }
+    addFileMenuKeytip() {
+        if (this.parent.fileMenu.keyTip) {
+            this.parent.keyTipElements['filemenu'] = [];
+            this.parent.keyTipElements['filemenu'].push({ id: this.ddbElement.id, type: 'filemenu', keyTip: this.parent.fileMenu.keyTip });
+        }
+    }
     ddbBeforeEvent(isOpen, args) {
         //args.event is null when dropdown button is closed using a method call
         if (!isOpen && args.event && args.event.target.closest('.e-ribbon-menu')) {
@@ -7947,7 +9231,9 @@ class RibbonFileMenu {
                     }
                 }
                 this.removeFileMenuTooltip();
+                this.removeFileMenuKeytip();
                 this.addFileMenuTooltip(fileMenuOptions);
+                this.addFileMenuKeytip();
             }
             else {
                 this.createFileMenu(fileMenuOptions);
@@ -7966,6 +9252,7 @@ class RibbonFileMenu {
     }
     destroyDDB() {
         this.removeFileMenuTooltip();
+        this.removeFileMenuKeytip();
         const tabEle = this.parent.tabObj.element;
         tabEle.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.destroyMenu();
@@ -7981,6 +9268,14 @@ class RibbonFileMenu {
             this.parent.tooltipData.splice(index, 1);
         }
     }
+    removeFileMenuKeytip() {
+        if (this.parent.keyTipElements['filemenu']) {
+            const index = getIndex(this.parent.keyTipElements['filemenu'], (e) => { return e.id === this.ddbElement.id; });
+            if (index !== -1) {
+                this.parent.keyTipElements['filemenu'].splice(index, 1);
+            }
+        }
+    }
     /**
      * Add items to FileMenu.
      *
@@ -8170,6 +9465,7 @@ class RibbonBackstage extends Component {
         };
         this.parent.tabObj.refreshActiveTabBorder();
         this.addBackStageMenuTooltip(backStageOptions);
+        this.addBackStageMenuKeyTip(backStageOptions);
         EventHandler.add(document, 'click', this.onClickEvent, this);
     }
     onClickEvent(e) {
@@ -8187,6 +9483,24 @@ class RibbonBackstage extends Component {
             this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
         }
     }
+    addBackStageMenuKeyTip(backStageOptions) {
+        if (backStageOptions.keyTip) {
+            if (!(this.parent.keyTipElements['backstage'])) {
+                this.parent.keyTipElements['backstage'] = [];
+            }
+            this.parent.keyTipElements['backstage'].push({ id: this.backstageButtonEle.id, type: 'backstage', keyTip: backStageOptions.keyTip });
+        }
+        if (backStageOptions.items && backStageOptions.items.length) {
+            if (!(this.parent.keyTipElements['backstageMenu'])) {
+                this.parent.keyTipElements['backstageMenu'] = [];
+            }
+            for (let i = 0; i < backStageOptions.items.length; i++) {
+                if (backStageOptions.items[parseInt(i.toString(), 10)].keyTip) {
+                    this.parent.keyTipElements['backstageMenu'].push({ id: backStageOptions.items[parseInt(i.toString(), 10)].id, type: 'backstageMenu', keyTip: backStageOptions.items[parseInt(i.toString(), 10)].keyTip });
+                }
+            }
+        }
+    }
     checkMenuItems(backStageItems) {
         for (let i = 0; i < backStageItems.length; i++) {
             const item = backStageItems[parseInt(i.toString(), 10)];
@@ -8475,7 +9789,9 @@ class RibbonBackstage extends Component {
                     }
                 }
                 this.removeBackstageMenuTooltip();
+                this.removeBackstageMenuKeyTip();
                 this.addBackStageMenuTooltip(backStageOptions);
+                this.addBackStageMenuKeyTip(backStageOptions);
             }
             else {
                 this.createBackStage(backStageOptions);
@@ -8494,6 +9810,7 @@ class RibbonBackstage extends Component {
     }
     destroyDDB() {
         this.removeBackstageMenuTooltip();
+        this.removeBackstageMenuKeyTip();
         const tabEle = this.parent.tabObj.element;
         tabEle.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.destroyMenu();
@@ -8510,6 +9827,20 @@ class RibbonBackstage extends Component {
             this.parent.tooltipData.splice(index, 1);
         }
     }
+    removeBackstageMenuKeyTip() {
+        if (this.parent.keyTipElements['backstage'] && this.parent.keyTipElements['backstage'].length) {
+            const index = getIndex(this.parent.keyTipElements['backstage'], (e) => { return e.id === this.backstageButtonEle.id; });
+            if (index !== -1) {
+                this.parent.keyTipElements['backstage'].splice(index, 1);
+            }
+        }
+        if (this.parent.keyTipElements['backstageMenu'] && this.parent.keyTipElements['backstageMenu'].length) {
+            for (let i = 0; i < this.parent.keyTipElements['backstageMenu'].length; i++) {
+                this.parent.keyTipElements['backstageMenu'].splice(i, 1);
+                i--;
+            }
+        }
+    }
     /**
      * Add items to Backstage Menu.
      *
@@ -8577,6 +9908,622 @@ class RibbonBackstage extends Component {
     }
 }
 
+/**
+ * Defines the ribbon contextual tab.
+ */
+class RibbonContextualTab {
+    constructor(parent) {
+        this.parent = parent;
+    }
+    getModuleName() {
+        return 'ribbonContextualTab';
+    }
+    destroy() {
+        this.parent = null;
+    }
+    /**
+     * Creates Contextual tab.
+     *
+     * @returns {void}
+     * @hidden
+     */
+    addContextualTabs() {
+        let isSelected = false;
+        for (let n = 0; n < this.parent.contextualTabs.length; n++) {
+            for (let i = 0; i < this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs.length; i++) {
+                this.parent.addTab(this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs[parseInt(i.toString(), 10)]);
+                const index = this.parent.tabs.length - 1;
+                const tabEle = this.parent.tabObj.element;
+                const toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index.toString(), 10)];
+                toolbarEle.classList.add(RIBBON_CONTEXTUAL_TAB);
+                toolbarEle.classList.add('e-hidden');
+                if (this.parent.contextualTabs[parseInt(n.toString(), 10)].visible) {
+                    this.parent.showTab(this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs[parseInt(i.toString(), 10)].id, true);
+                    if (this.parent.contextualTabs[parseInt(n.toString(), 10)].isSelected && !isSelected) {
+                        this.parent.selectTab(this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs[0].id);
+                        isSelected = true;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Updates Contextual tab.
+     *
+     * @param {RibbonContextualTabSettingsModel} newProp - Specifies new properties.
+     * @param {RibbonContextualTabSettingsModel} contextualTab - Gets the property of contextual tab.
+     * @returns {void}
+     * @hidden
+     */
+    updateContextualTabs(newProp, contextualTab) {
+        if (!(isNullOrUndefined(newProp.visible))) {
+            for (let i = 0; i < contextualTab.tabs.length; i++) {
+                if (newProp.visible) {
+                    this.parent.showTab(contextualTab.tabs[parseInt(i.toString(), 10)].id, true);
+                }
+                else {
+                    this.parent.hideTab(contextualTab.tabs[parseInt(i.toString(), 10)].id, true);
+                }
+            }
+        }
+        if (!(isNullOrUndefined(newProp.isSelected))) {
+            if (newProp.isSelected && contextualTab.visible) {
+                this.parent.selectTab(contextualTab.tabs[0].id);
+            }
+            else {
+                const tabEle = this.parent.tabObj.element;
+                for (let i = 0; i < this.parent.tabs.length; i++) {
+                    const toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(i.toString(), 10)];
+                    if (!(toolbarEle.classList.contains('e-hidden') || toolbarEle.classList.contains('e-disable'))) {
+                        this.parent.selectTab(this.parent.tabs[parseInt(i.toString(), 10)].id);
+                        break;
+                    }
+                }
+            }
+        }
+        if (newProp.tabs) {
+            for (const key in newProp.tabs) {
+                let index = parseInt(key, 10);
+                const tab = this.parent.tabs.filter((e) => e.id === contextualTab.tabs[parseInt(index.toString(), 10)].id)[0];
+                this.parent.updateTab(tab);
+            }
+        }
+    }
+}
+
+/**
+ * Defines the keytip of Ribbon.
+ */
+class RibbonKeyTip {
+    constructor(parent) {
+        this.isKeytipPopupOpen = false;
+        this.parent = parent;
+    }
+    getModuleName() {
+        return 'ribbonKeyTip';
+    }
+    destroy() {
+        this.parent = null;
+    }
+    /**
+     * Creates the keytips.
+     *
+     * @param {string} key - get's the keytip type.
+     * @returns {void}
+     * @hidden
+     */
+    createKeytip(key) {
+        if (this.parent.keyTipElements) {
+            let keytipData;
+            if (key === 'tab') {
+                for (let i = 0; i < this.parent.tabs.length; i++) {
+                    if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
+                        // eslint-disable-next-line
+                        keytipData = this.parent.keyTipElements[i][key];
+                        this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true);
+                    }
+                }
+                if (this.parent.keyTipElements['filemenu']) {
+                    keytipData = this.parent.keyTipElements['filemenu'];
+                    this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'filemenu');
+                }
+                if (this.parent.keyTipElements['backstage']) {
+                    keytipData = this.parent.keyTipElements['backstage'];
+                    this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'backstage');
+                }
+                if (this.parent.keyTipElements['collapse']) {
+                    keytipData = this.parent.keyTipElements['collapse'];
+                    this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'collapse');
+                }
+                if (this.parent.keyTipElements['taboverflow']) {
+                    keytipData = this.parent.keyTipElements['taboverflow'];
+                    this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'taboverflow');
+                }
+            }
+            else if (key === 'popupitem') {
+                if (this.parent.keyTipElements[this.parent.selectedTab]['popupitem']) {
+                    const popupKeyTipData = this.parent.keyTipElements[this.parent.selectedTab]['popupitem'];
+                    for (let i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['popupitem']).length; i++) {
+                        this.createKeyTipElement((popupKeyTipData[parseInt(i.toString(), 10)].id), popupKeyTipData[parseInt(i.toString(), 10)].keyTip, 'popupitem', 'left', 'top', false, true);
+                    }
+                }
+            }
+            else if (key === 'backstageMenu') {
+                if (this.parent.keyTipElements['backstageMenu']) {
+                    const backstageKeyTipData = this.parent.keyTipElements['backstageMenu'];
+                    for (let i = 0; i < Object.keys(this.parent.keyTipElements['backstageMenu']).length; i++) {
+                        this.createKeyTipElement((backstageKeyTipData[parseInt(i.toString(), 10)].id), backstageKeyTipData[parseInt(i.toString(), 10)].keyTip, 'backstageMenu', 'left', 'center');
+                    }
+                }
+            }
+            else if (key === 'grpoverflowpopup' && this.parent.activeLayout === 'Classic') {
+                if (this.parent.keyTipElements[this.parent.selectedTab]['grpoverflowpopup']) {
+                    this.calculateItemPosition(key);
+                }
+                if (this.parent.keyTipElements[this.parent.selectedTab]['launcher']) {
+                    for (let i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['launcher']).length; i++) {
+                        keytipData = this.parent.keyTipElements[this.parent.selectedTab]['launcher'];
+                        this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'launcher', 'center', 'bottom', false, true);
+                    }
+                }
+            }
+            else {
+                this.calculateItemPosition(key);
+                if (this.parent.activeLayout === 'Classic') {
+                    if (this.parent.keyTipElements[this.parent.selectedTab]['launcher']) {
+                        for (let i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['launcher']).length; i++) {
+                            keytipData = this.parent.keyTipElements[this.parent.selectedTab]['launcher'];
+                            this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'launcher');
+                        }
+                    }
+                    if (this.parent.keyTipElements[this.parent.selectedTab]['grpoverflow']) {
+                        for (let i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['grpoverflow']).length; i++) {
+                            keytipData = this.parent.keyTipElements[this.parent.selectedTab]['grpoverflow'];
+                            this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'grpoverflow');
+                        }
+                    }
+                }
+                if (this.parent.activeLayout === 'Simplified') {
+                    if (this.parent.keyTipElements['overflowbtn']) {
+                        keytipData = this.parent.keyTipElements['overflowbtn'];
+                        this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'overflowbtn');
+                    }
+                    if (this.parent.keyTipElements[this.parent.selectedTab]['grpofbtn']) {
+                        for (let i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['grpofbtn']).length; i++) {
+                            keytipData = this.parent.keyTipElements[this.parent.selectedTab]['grpofbtn'];
+                            this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'grpofbtn');
+                        }
+                    }
+                }
+            }
+        }
+    }
+    calculateItemPosition(key, isMethod = false, keyTip) {
+        let xOffset;
+        let yOffset;
+        let keytipData;
+        /* eslint-disable */
+        keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key];
+        if (keytipData) {
+            for (let i = 0; i < Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key]).length; i++) {
+                /* eslint-enable */
+                if ((isMethod && (keytipData[parseInt(i.toString(), 10)].keyTip === keyTip)) || !isMethod) {
+                    let itemID = keytipData[parseInt(i.toString(), 10)].id;
+                    if (keytipData[parseInt(i.toString(), 10)].id.includes("_grpbtn")) {
+                        itemID = keytipData[parseInt(i.toString(), 10)].id.replace(/_grpbtn\d+/, '');
+                    }
+                    const itemProp = getItem(this.parent.tabs, itemID);
+                    if (itemProp && itemProp.group.orientation === 'Column' && itemProp.collection.items.length > 1 && this.parent.activeLayout !== 'Simplified') {
+                        if (itemProp.itemIndex === 0) {
+                            xOffset = 'center';
+                            yOffset = 'top';
+                        }
+                        else if (itemProp.itemIndex === 1) {
+                            xOffset = 'center';
+                            yOffset = 'center';
+                        }
+                        else {
+                            xOffset = 'center';
+                            yOffset = 'bottom';
+                        }
+                    }
+                    else if (itemProp && itemProp.group.orientation === 'Row' && itemProp.group.collections.length > 1 && this.parent.activeLayout !== 'Simplified') {
+                        if (itemProp.collectionIndex === 0) {
+                            xOffset = 'center';
+                            yOffset = 'top';
+                        }
+                        else {
+                            xOffset = 'center';
+                            yOffset = 'bottom';
+                        }
+                    }
+                    key === 'item' ? this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset) : this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset, false, true);
+                }
+            }
+        }
+    }
+    createKeyTipElement(id, keyTip, type, xOffset = 'center', yOffset = 'bottom', isTab = false, isPopUpItem = false) {
+        let keyEle = document.querySelector('#' + id);
+        let isPopUpPresent = false;
+        let splitBtnID;
+        if (isTab) {
+            keyEle = document.querySelector('#' + id + HEADER_ID);
+        }
+        if (keyEle) {
+            if (keyEle.closest('.e-ribbon-group-overflow-ddb')) {
+                isPopUpPresent = true;
+            }
+            if ((isTab && isPopUpItem) && keyEle.closest('.e-toolbar-pop')) {
+                isPopUpPresent = true;
+            }
+            if (keyEle.closest('.e-split-btn-wrapper')) {
+                let splitBtn = keyEle.closest('.e-split-btn-wrapper');
+                splitBtnID = splitBtn.closest('.e-ribbon-item').id;
+            }
+            else {
+                if (keyEle.closest('.e-colorpicker-wrapper')) {
+                    keyEle = keyEle.closest('.e-colorpicker-wrapper');
+                    splitBtnID = keyEle.closest('.e-ribbon-item').id;
+                }
+            }
+        }
+        if ((keyEle && keyEle.offsetParent) || (isTab && isPopUpItem)) {
+            if ((isPopUpItem && isPopUpPresent) || !isPopUpItem) {
+                const keytipElement = this.parent.createElement('div', {
+                    className: RIBBON_KEYTIP,
+                    id: id + RIBBON_KEYTIP_ID
+                });
+                document.body.append(keytipElement);
+                const keytipPopup = new Popup(keytipElement, {
+                    relateTo: '#' + (isTab ? id + HEADER_ID : splitBtnID ? splitBtnID : id),
+                    content: keyTip,
+                    collision: { X: 'fit', Y: 'flip' },
+                    targetType: 'relative',
+                    position: { X: xOffset, Y: yOffset },
+                    enableRtl: this.parent.enableRtl
+                });
+                keytipPopup.show();
+                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset, (isTab && isPopUpItem));
+                this.parent.isKeytipOpen = true;
+            }
+        }
+    }
+    calculateKeyTipPosition(itemEle, keytipElement, type, yOffset, isTabOverflow = false) {
+        const position = itemEle.getBoundingClientRect();
+        if (type === 'backstageMenu') {
+            keytipElement.style.top = position.top + ((keytipElement.offsetHeight) / 2) + 'px';
+            keytipElement.style.left = position.left + (itemEle.offsetWidth / 5) + 'px';
+        }
+        else {
+            if (type !== 'popupitem') {
+                keytipElement.style.left = position.left + (position.width - keytipElement.offsetWidth) / 2 + 'px';
+            }
+        }
+        if (type === 'filemenu' || type === 'backstage') {
+            keytipElement.style.top = position.top + ((itemEle.offsetHeight - (itemEle.offsetHeight / 3)) + (keytipElement.offsetHeight / 6)) + 'px';
+        }
+        else if ((type === 'item' && yOffset === 'top')) {
+            keytipElement.style.top = (position.top - (itemEle.offsetHeight) / 2) + 'px';
+        }
+    }
+    /**
+     * Performs keytip action.
+     *
+     * @param {string} keyPress - Gets the keytip text.
+     * @returns {void}
+     * @hidden
+     */
+    keytipPress(keyPress, isMethod = false) {
+        this.isKeytipPresent = false;
+        for (let i = 0; ((i < Object.keys(this.parent.keyTipElements).length) && !this.isKeytipPresent); i++) {
+            if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
+                for (let j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) && !this.isKeytipPresent); j++) {
+                    let keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
+                    for (let k = 0; ((k < keytipData.length) && !this.isKeytipPresent); k++) {
+                        if (keyPress.toUpperCase() === keytipData[parseInt(k.toString(), 10)].keyTip) {
+                            const keyTipElement = document.querySelector('#' + keytipData[parseInt(k.toString(), 10)].id + RIBBON_KEYTIP_ID);
+                            if (keyTipElement || isMethod) {
+                                this.isKeytipPresent = true;
+                                this.removeKeytip();
+                                if (keytipData[parseInt(k.toString(), 10)].type === 'tab') {
+                                    if (i !== this.parent.selectedTab) {
+                                        this.parent.tabObj.select(i);
+                                        setTimeout(() => {
+                                            const tabOverflow = this.parent.tabObj.element.querySelector('.e-nav-active');
+                                            if (tabOverflow)
+                                                tabOverflow.click();
+                                            this.createKeytip('item');
+                                        }, 600);
+                                    }
+                                    else {
+                                        this.createKeytip('item');
+                                    }
+                                }
+                                else {
+                                    if (keytipData[parseInt(k.toString(), 10)].type === 'item' || keytipData[parseInt(k.toString(), 10)].type === 'grpoverflowpopup' || keytipData[parseInt(k.toString(), 10)].type === 'popupitem') {
+                                        if (document.getElementById(keytipData[parseInt(k.toString(), 10)].id) && document.getElementById(keytipData[parseInt(k.toString(), 10)].id).classList.contains('e-ribbon-group-button')) {
+                                            document.getElementById(keytipData[parseInt(k.toString(), 10)].id).click();
+                                        }
+                                        else {
+                                            let itemProp;
+                                            if ((keytipData[parseInt(k.toString(), 10)].id).includes("_popupButton")) {
+                                                const galleryID = keytipData[parseInt(k.toString(), 10)].id.replace(/_popupButton/g, '');
+                                                itemProp = getItem(this.parent.tabs, galleryID);
+                                            }
+                                            else {
+                                                itemProp = getItem(this.parent.tabs, keytipData[parseInt(k.toString(), 10)].id);
+                                            }
+                                            if (!isMethod || (isMethod && itemProp.tabIndex === this.parent.selectedTab)) {
+                                                this.clickItems(itemProp, keytipData, k, false, isMethod);
+                                            }
+                                        }
+                                    }
+                                    else if (keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow' || keytipData[parseInt(k.toString(), 10)].type === 'grpofbtn' || keytipData[parseInt(k.toString(), 10)].type === 'launcher') {
+                                        const keyEle = document.querySelector('#' + keytipData[parseInt(k.toString(), 10)].id);
+                                        this.removeKeytip();
+                                        if (keyEle) {
+                                            let groupID = keytipData[parseInt(k.toString(), 10)].id;
+                                            if (isMethod) {
+                                                if (keytipData[parseInt(k.toString(), 10)].id.includes("_launcher") || keytipData[parseInt(k.toString(), 10)].id.includes("_sim_grp_overflow") || keytipData[parseInt(k.toString(), 10)].id.includes("_overflow_dropdown")) {
+                                                    groupID = keytipData[parseInt(k.toString(), 10)].id.replace(/_launcher|_sim_grp_overflow|_overflow_dropdown/g, '');
+                                                    const itemProp = getGroup(this.parent.tabs, groupID);
+                                                    if (itemProp.tabIndex === this.parent.selectedTab) {
+                                                        this.clickItems(itemProp, keytipData, k, true, isMethod, keyEle);
+                                                    }
+                                                }
+                                            }
+                                            else {
+                                                this.clickItems(null, keytipData, k, true, isMethod, keyEle);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                if (this.parent.keyTipElements) {
+                    this.commonItemsKeyTipPress(keyPress, Object.keys(this.parent.keyTipElements)[parseInt(i.toString(), 10)], isMethod);
+                }
+            }
+        }
+    }
+    clickItems(itemProp, keytipData, k, isGroupItems, isMethod, keyEle) {
+        if (isGroupItems) {
+            keyEle.click();
+            if (!(keytipData[parseInt(k.toString(), 10)].type === 'launcher')) {
+                this.isKeytipPopupOpen = true;
+                keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow' ? this.createKeytip('grpoverflowpopup') : this.createKeytip('popupitem');
+            }
+        }
+        else {
+            let itemID = keytipData[parseInt(k.toString(), 10)].id;
+            if (document.querySelector('#' + itemID) && isMethod) {
+                if (this.parent.activeLayout === 'Simplified') {
+                    if (document.querySelector('#' + itemID).closest('#' + itemProp.group.id + '_sim_grp_overflow-popup') && document.querySelector('#' + itemID).closest('#' + itemProp.group.id + '_sim_grp_overflow-popup').classList.contains('e-popup-close')) {
+                        document.querySelector('#' + itemProp.group.id + '_sim_grp_overflow').click();
+                    }
+                    else if (document.querySelector('#' + itemID).closest('#' + this.parent.tabObj.element.id + OVRLOF_BUTTON_ID + '-popup') && document.querySelector('#' + itemID).closest('#' + this.parent.tabObj.element.id + OVRLOF_BUTTON_ID + '-popup').classList.contains('e-popup-close')) {
+                        document.querySelector('#' + this.parent.tabObj.element.id + OVRLOF_BUTTON_ID).click();
+                    }
+                }
+                else {
+                    if (document.querySelector('#' + itemID).closest('#' + itemProp.group.id + OVERFLOW_ID + DROPDOWN_ID + '-popup') && document.querySelector('#' + itemID).closest('#' + itemProp.group.id + OVERFLOW_ID + DROPDOWN_ID + '-popup').classList.contains('e-popup-close')) {
+                        document.querySelector('#' + itemProp.group.id + OVERFLOW_ID + DROPDOWN_ID).click();
+                    }
+                }
+            }
+            const itemType = this.parent.getItemModuleName(itemProp.item);
+            switch (itemType) {
+                case 'btn':
+                    this.parent.ribbonButtonModule.click(itemID);
+                    break;
+                case 'dropdown-btn':
+                    this.parent.ribbonDropDownModule.toggle(itemID);
+                    break;
+                case 'split-btn':
+                    this.parent.ribbonSplitButtonModule.toggle(itemID);
+                    break;
+                case 'checkbox':
+                    this.parent.ribbonCheckBoxModule.click(itemID);
+                    break;
+                case 'colorpicker':
+                    this.parent.ribbonColorPickerModule.toggle(itemID);
+                    break;
+                case 'combobox':
+                    const itemEle = document.querySelector('#' + itemID);
+                    setTimeout(() => {
+                        itemEle.focus();
+                    }, 100);
+                    break;
+                case 'gallery':
+                    const galleryEle = document.querySelector('#' + itemID);
+                    galleryEle.click();
+                    break;
+                case 'template':
+                    const templateEle = document.querySelector('#' + itemID);
+                    templateEle.focus();
+                    break;
+                case 'group-btn':
+                    const itemElement = document.querySelector('#' + itemID);
+                    if (itemElement) {
+                        const item = getInstance(itemElement, DropDownButton);
+                        item.toggle();
+                        for (let i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            if (itemProp.item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip) {
+                                this.createKeyTipElement(itemID + (RIBBON_GROUP_BUTTON_ID + i), itemProp.item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip, 'item');
+                            }
+                        }
+                    }
+                    break;
+            }
+        }
+    }
+    commonItemsKeyTipPress(keyPress, key, isMethod) {
+        /* eslint-disable */
+        if (this.parent.keyTipElements[key]) {
+            let isKeyPressed = false;
+            let keytipData = this.parent.keyTipElements[key];
+            let keyEle;
+            let keytipElement;
+            if (keytipData) {
+                if (key === 'backstageMenu') {
+                    for (let i = 0; i < Object.keys(this.parent.keyTipElements[key]).length; i++) {
+                        /* eslint-enable */
+                        if (keytipData[parseInt(i.toString(), 10)].keyTip === keyPress.toUpperCase()) {
+                            keyEle = document.querySelector('#' + keytipData[parseInt(i.toString(), 10)].id);
+                            keytipElement = document.querySelector('#' + keyEle.id + RIBBON_KEYTIP_ID);
+                            if (keytipElement || isMethod) {
+                                isKeyPressed = true;
+                                if (isMethod && document.querySelector('.e-ribbon-backstage-popup').classList.contains('e-popup-close')) {
+                                    this.parent.tabObj.element.querySelector('.e-ribbon-backstage').click();
+                                }
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (keytipData[0] && keytipData[0].keyTip === keyPress.toUpperCase()) {
+                        keyEle = document.querySelector('#' + keytipData[0].id);
+                        keytipElement = document.querySelector('#' + keytipData[0].id + RIBBON_KEYTIP_ID);
+                        if (keytipElement || isMethod) {
+                            isKeyPressed = true;
+                        }
+                    }
+                }
+            }
+            if (isKeyPressed) {
+                this.removeKeytip();
+                this.isKeytipPresent = true;
+                if (keyEle) {
+                    keyEle.click();
+                    if (key === 'backstage') {
+                        this.createKeytip('backstageMenu');
+                    }
+                    else if (key === 'overflowbtn') {
+                        this.isKeytipPopupOpen = true;
+                        this.createKeytip('popupitem');
+                    }
+                    else if (key === 'taboverflow') {
+                        setTimeout(() => {
+                            for (let i = 0; i < Object.keys(this.parent.keyTipElements).length; i++) {
+                                if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
+                                    let keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)]['tab'];
+                                    this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true, true);
+                                }
+                            }
+                        }, 600);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Removes the keytip.
+     *
+     * @param {string} key - Gets the keyboard key element.
+     * @returns {void}
+     * @hidden
+     */
+    removeKeytip(key) {
+        const keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        let isKeyTipExist = false;
+        this.parent.keysPress = '';
+        for (let i = 0; i < keyTipItems.length; i++) {
+            const keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (key === 'Escape' && this.parent.keyTipElements && this.parent.keyTipElements[this.parent.selectedTab]) {
+                /* eslint-disable */
+                for (let j = 0; j < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]).length; j++) {
+                    let keyText = (Object.keys(this.parent.keyTipElements[this.parent.selectedTab]))[j];
+                    if (this.parent.keyTipElements[this.parent.selectedTab][keyText]) {
+                        const index = getIndex(this.parent.keyTipElements[this.parent.selectedTab][keyText], (e) => { return e.id + RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
+                        /* eslint-enable */
+                        if (index !== -1) {
+                            if ((keyText === 'item' && !(this.isKeytipPopupOpen)) || (keyText === 'grpoverflow' && this.parent.activeLayout === 'Classic')) {
+                                this.createKeytip('tab');
+                                key = '';
+                                isKeyTipExist = true;
+                                break;
+                            }
+                            else if (this.isKeytipPopupOpen) {
+                                if ((keyText === 'popupitem' && this.parent.activeLayout === 'Simplified') || (keyText === 'grpoverflowpopup' && this.parent.activeLayout === 'Classic')) {
+                                    this.createKeytip('item');
+                                    key = '';
+                                    isKeyTipExist = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                for (let n = 0; n < Object.keys(this.parent.keyTipElements).length; n++) {
+                    if (this.parent.keyTipElements[parseInt(n.toString(), 10)]) {
+                        let keytipData = this.parent.keyTipElements[parseInt(n.toString(), 10)]['tab'];
+                        for (let j = 0; j < keytipData.length; j++) {
+                            if (keyTipItem.id === keytipData[0].id + RIBBON_KEYTIP_ID) {
+                                if (document.querySelector('#' + keytipData[0].id + HEADER_ID).closest('.e-toolbar-pop')) {
+                                    const tabOverflow = this.parent.tabObj.element.querySelector('.e-nav-active');
+                                    tabOverflow.click();
+                                    setTimeout(() => {
+                                        this.createKeytip('tab');
+                                    }, 600);
+                                    key = '';
+                                    isKeyTipExist = true;
+                                    break;
+                                }
+                            }
+                        }
+                        if (isKeyTipExist) {
+                            break;
+                        }
+                    }
+                }
+                if (!isKeyTipExist && this.parent.keyTipElements['backstageMenu']) {
+                    const index = getIndex(this.parent.keyTipElements['backstageMenu'], (e) => { return e.id + RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
+                    if (index !== -1) {
+                        this.createKeytip('tab');
+                        key = '';
+                        isKeyTipExist = true;
+                    }
+                }
+            }
+            if (keyTipItem) {
+                remove(keyTipItem);
+            }
+        }
+        this.isKeytipPopupOpen = false;
+        if (!isKeyTipExist)
+            this.parent.isKeytipOpen = false;
+    }
+    /**
+     * Shows the Keytip dynamically.
+     *
+     * @param  {string} keyAction - Item for which the tooltip is to be shown.
+     * @returns {void}
+     */
+    showKeyTips(keyAction) {
+        if (this.parent.enableKeyTips) {
+            if (keyAction) {
+                this.keytipPress(keyAction, true);
+            }
+            else {
+                this.createKeytip('tab');
+            }
+        }
+    }
+    /**
+     * Hides the Keytip dynamically.
+     *
+     * @returns {void}
+     */
+    hideKeyTips() {
+        this.removeKeytip();
+    }
+}
+
 /**
  * Ribbon modules
  */
@@ -8584,5 +10531,5 @@ class RibbonBackstage extends Component {
 // export all modules from current location
 // example: export * from './module'
 
-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, setCustomAttributes, 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 };
+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, RIBBON_KEYTIP, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_CONTEXTUAL_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_BUTTON_CONTENT, 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_KEYTIP_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, setCustomAttributes, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonContextualTabSettings, RibbonGalleryGroup, RibbonGalleryItem, RibbonGallerySettings, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonGallery, RibbonFileMenu, RibbonBackstage, RibbonContextualTab, RibbonKeyTip };
 //# sourceMappingURL=ej2-ribbon.es2015.js.map