@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

package/dist/es6/ej2-ribbon.es5.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.
      */
@@ -728,6 +732,9 @@ var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -785,6 +792,165 @@ var RibbonGroupButtonSettings = /** @__PURE__ @class */ (function (_super) {
     return RibbonGroupButtonSettings;
 }(ChildProperty));
 
+var __extends$16 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$16 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon gallery item.
+ */
+var RibbonGalleryItem = /** @__PURE__ @class */ (function (_super) {
+    __extends$16(RibbonGalleryItem, _super);
+    function RibbonGalleryItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return RibbonGalleryItem;
+}(ChildProperty));
+
+var __extends$15 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$15 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Defines the ribbon gallery group.
+ */
+var RibbonGalleryGroup = /** @__PURE__ @class */ (function (_super) {
+    __extends$15(RibbonGalleryGroup, _super);
+    function RibbonGalleryGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return RibbonGalleryGroup;
+}(ChildProperty));
+
+var __extends$14 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$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.
+ */
+var RibbonGallerySettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$14(RibbonGallerySettings, _super);
+    function RibbonGallerySettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return RibbonGallerySettings;
+}(ChildProperty));
+
 var __extends$4 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -821,6 +987,9 @@ var RibbonItem = /** @__PURE__ @class */ (function (_super) {
     RibbonItem.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
+    __decorate$4([
+        Property('')
+    ], RibbonItem.prototype, "keyTip", void 0);
     __decorate$4([
         Property(RibbonItemSize.Medium)
     ], RibbonItem.prototype, "activeSize", void 0);
@@ -869,6 +1038,9 @@ var RibbonItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$4([
         Complex({}, RibbonGroupButtonSettings)
     ], RibbonItem.prototype, "groupButtonSettings", void 0);
+    __decorate$4([
+        Complex({}, RibbonGallerySettings)
+    ], RibbonItem.prototype, "gallerySettings", void 0);
     return RibbonItem;
 }(ChildProperty));
 
@@ -956,6 +1128,12 @@ var RibbonGroup = /** @__PURE__ @class */ (function (_super) {
     RibbonGroup.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, 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);
@@ -1031,6 +1209,9 @@ var RibbonTab = /** @__PURE__ @class */ (function (_super) {
     RibbonTab.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
+    __decorate$1([
+        Property('')
+    ], RibbonTab.prototype, "keyTip", void 0);
     __decorate$1([
         Property('')
     ], RibbonTab.prototype, "id", void 0);
@@ -1046,7 +1227,7 @@ var RibbonTab = /** @__PURE__ @class */ (function (_super) {
     return RibbonTab;
 }(ChildProperty));
 
-var __extends$14 = (undefined && undefined.__extends) || (function () {
+var __extends$17 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1059,7 +1240,7 @@ var __extends$14 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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;
@@ -1069,7 +1250,7 @@ var __decorate$14 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon file menu settings.
  */
 var FileMenuSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$14(FileMenuSettings, _super);
+    __extends$17(FileMenuSettings, _super);
     function FileMenuSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1082,52 +1263,55 @@ var FileMenuSettings = /** @__PURE__ @class */ (function (_super) {
     FileMenuSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, 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);
     return FileMenuSettings;
 }(ChildProperty));
 
-var __extends$16 = (undefined && undefined.__extends) || (function () {
+var __extends$19 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1140,7 +1324,7 @@ var __extends$16 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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;
@@ -1150,23 +1334,23 @@ var __decorate$16 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon backstage back button.
  */
 var BackstageBackButton = /** @__PURE__ @class */ (function (_super) {
-    __extends$16(BackstageBackButton, _super);
+    __extends$19(BackstageBackButton, _super);
     function BackstageBackButton() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __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);
     return BackstageBackButton;
 }(ChildProperty));
 
-var __extends$17 = (undefined && undefined.__extends) || (function () {
+var __extends$20 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1179,7 +1363,7 @@ var __extends$17 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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;
@@ -1189,35 +1373,38 @@ var __decorate$17 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon backstage back button.
  */
 var BackstageItem = /** @__PURE__ @class */ (function (_super) {
-    __extends$17(BackstageItem, _super);
+    __extends$20(BackstageItem, _super);
     function BackstageItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __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);
     return BackstageItem;
 }(ChildProperty));
 
-var __extends$15 = (undefined && undefined.__extends) || (function () {
+var __extends$18 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1230,7 +1417,7 @@ var __extends$15 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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;
@@ -1240,7 +1427,7 @@ var __decorate$15 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon file menu settings.
  */
 var BackStageMenu = /** @__PURE__ @class */ (function (_super) {
-    __extends$15(BackStageMenu, _super);
+    __extends$18(BackStageMenu, _super);
     function BackStageMenu() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1253,36 +1440,87 @@ var BackStageMenu = /** @__PURE__ @class */ (function (_super) {
     BackStageMenu.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, 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);
     return BackStageMenu;
 }(ChildProperty));
 
+var __extends$21 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$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.
+ */
+var RibbonContextualTabSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$21(RibbonContextualTabSettings, _super);
+    function RibbonContextualTabSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of contextual tab.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonContextualTabSettings.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, 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);
+    return RibbonContextualTabSettings;
+}(ChildProperty));
+
 // export * from './file-menu';
 
 /**
@@ -1311,6 +1549,8 @@ var RIBBON_POPUP_CONTROL = 'e-ribbon-popup-control';
 /** @hidden */
 var RIBBON_POPUP_OPEN = 'e-ribbon-open';
 /** @hidden */
+var RIBBON_KEYTIP = 'e-ribbon-keytip';
+/** @hidden */
 var SPACE = ' ';
 /** @hidden */
 var HORIZONTAL_SCROLLBAR = 'e-hscroll-bar';
@@ -1319,6 +1559,8 @@ var HIDE_CSS = 'e-ribbon-hide';
 /** @hidden */
 var RIBBON_TAB = 'e-ribbon-tab';
 /** @hidden */
+var RIBBON_CONTEXTUAL_TAB = 'e-ribbon-contextual-tab';
+/** @hidden */
 var RIBBON_TAB_ACTIVE = 'e-ribbon-active';
 /** @hidden */
 var RIBBON_TAB_ITEM = 'e-ribbon-tab-item';
@@ -1351,6 +1593,8 @@ var RIBBON_GROUP_BUTTON = 'e-ribbon-group-button';
 /** @hidden */
 var RIBBON_GROUP_BUTTON_OVERFLOW_POPUP = 'e-ribbon-group-button-overflow-popup';
 /** @hidden */
+var RIBBON_GROUP_BUTTON_CONTENT = 'e-ribbon-group-button-content';
+/** @hidden */
 var RIBBON_GROUP_CONTAINER = 'e-ribbon-group-container';
 /** @hidden */
 var RIBBON_OF_TAB_CONTAINER = 'e-ribbon-of-tab';
@@ -1475,6 +1719,8 @@ var RIBBON_HELP_PANE_TEMPLATE_ID = '_helppanetemplate';
 /** @hidden */
 var RIBBON_GROUP_BUTTON_ID = '_grpbtn';
 /** @hidden */
+var RIBBON_KEYTIP_ID = '_keytip';
+/** @hidden */
 var RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 var RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
@@ -1819,7 +2065,12 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
             beforeOpen: colorPickerSettings.beforeOpen,
             beforeTileRender: colorPickerSettings.beforeTileRender,
             created: colorPickerSettings.created,
-            change: colorPickerSettings.change,
+            change: function (e) {
+                colorPickerSettings.value = e.value.toString();
+                if (colorPickerSettings.change) {
+                    colorPickerSettings.change.call(_this, e);
+                }
+            },
             open: function () {
                 colorPicker.element.parentElement.classList.add(RIBBON_POPUP_OPEN);
                 if (colorPickerSettings.open) {
@@ -2942,10 +3193,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 (var i = 0; i < tabs.length; i++) {
         var tab = tabs[parseInt(i.toString(), 10)];
         for (var j = 0; j < tab.groups.length; j++) {
@@ -2954,7 +3206,7 @@ function getItem(tabs, id) {
                 var collection = group.collections[parseInt(k.toString(), 10)];
                 for (var l = 0; l < collection.items.length; l++) {
                     var 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
@@ -3270,6 +3522,9 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 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);
+                }
                 var buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
@@ -3711,27 +3966,734 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
     return RibbonGroupButton;
 }());
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 /**
- * The Ribbon Component is a structured layout to manage tools with tabs and groups.
+ * Defines the items of Ribbon.
+ */
+var RibbonGallery = /** @__PURE__ @class */ (function () {
+    function RibbonGallery(parent) {
+        this.count = 0;
+        this.isAdded = false;
+        this.galleryItemsIndex = 0;
+        this.parent = parent;
+    }
+    RibbonGallery.prototype.getModuleName = function () {
+        return 'ribbonGallery';
+    };
+    RibbonGallery.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates gallery.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGallery.prototype.createGallery = function (item, itemEle) {
+        var _this = this;
+        var gallerySettings = item.gallerySettings;
+        this.renderGalleryItems(gallerySettings, false, item.id, itemEle);
+        var 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 = function (args) {
+            var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            if (popupEle) {
+                var 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 = function (args) {
+            var popupEle = document.querySelectorAll('.e-ribbon-gallery-popup.e-popup-open');
+            var popupID;
+            var itemProp;
+            for (var i = 0; i < popupEle.length; i++) {
+                var 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;
+                }
+            }
+        };
+    };
+    RibbonGallery.prototype.renderGalleryItems = function (gallerySettings, isPopup, id, itemEle) {
+        var _this = this;
+        var galleryContainerEle;
+        var galleryEle;
+        var itemProp = getItem(this.parent.tabs, id);
+        if (itemProp && itemProp.group) {
+            itemProp.group.isCollapsible = false;
+        }
+        var galleryWrapper = this.parent.createElement('div', {
+            className: 'e-ribbon-gallery-wrapper',
+            id: id + '_galleryWrapper'
+        });
+        if (!isPopup) {
+            itemEle.appendChild(galleryWrapper);
+        }
+        var _loop_1 = function (i) {
+            var isHeightDefined = false;
+            galleryContainerEle = this_1.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);
+            }
+            var _loop_2 = function (j) {
+                galleryEle = this_1.parent.createElement('li', {
+                    className: 'e-ribbon-gallery-item',
+                    id: galleryContainerEle.id + '_gallery' + j,
+                    attrs: { 'tabindex': '0' }
+                });
+                var itemEventArgs = { name: 'beforeItemRender', item: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)] };
+                if (gallerySettings.beforeItemRender) {
+                    gallerySettings.beforeItemRender.call(this_1, itemEventArgs);
+                }
+                galleryContainerEle.appendChild(galleryEle);
+                if (gallerySettings.selectedItemIndex && gallerySettings.selectedItemIndex === this_1.count) {
+                    galleryEle.classList.add('e-ribbon-gallery-selected');
+                }
+                else {
+                    if (!gallerySettings.selectedItemIndex && this_1.count === 0) {
+                        galleryEle.classList.add('e-ribbon-gallery-selected');
+                        gallerySettings.selectedItemIndex = this_1.count;
+                    }
+                }
+                this_1.count = this_1.count + 1;
+                galleryEle.onclick = function (e) {
+                    _this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                };
+                galleryEle.onkeydown = function (e) {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        _this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                    }
+                };
+                galleryEle.onmouseover = function (e) {
+                    var 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_1.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) {
+                        var iconEle = this_1.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_1.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_1.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_1.createGalleryTemplate(galleryEle, gallerySettings, id, gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)]);
+                }
+                if (gallerySettings.popupTemplate && isPopup) {
+                    this_1.createGalleryPopupTemplate(galleryEle, gallerySettings, id, gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)]);
+                }
+                if ((!isPopup && !isHeightDefined && (gallerySettings.itemCount === this_1.count))) {
+                    galleryWrapper.appendChild(galleryContainerEle);
+                    this_1.isAdded = true;
+                    return "break";
+                }
+            };
+            for (var j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                var state_2 = _loop_2(j);
+                if (state_2 === "break")
+                    break;
+            }
+            if (this_1.isAdded && !isPopup) {
+                return "break";
+            }
+            !isPopup ? galleryWrapper.appendChild(galleryContainerEle) : itemEle.appendChild(galleryContainerEle);
+            if (isPopup && gallerySettings.groups[parseInt(i.toString(), 10)].header) {
+                var headerEle = (this_1.parent.createElement('div', {
+                    className: 'e-ribbon-gallery-header',
+                    innerHTML: gallerySettings.groups[parseInt(i.toString(), 10)].header
+                }));
+                itemEle.insertBefore(headerEle, galleryContainerEle);
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < gallerySettings.groups.length; i++) {
+            var state_1 = _loop_1(i);
+            if (state_1 === "break")
+                break;
+        }
+        this.count = 0;
+        this.isAdded = false;
+    };
+    RibbonGallery.prototype.setWrapperWidth = function (itemCount, galleryWrapper, gallerySettings, itemID) {
+        var count = 1;
+        var itemsWidth = 0;
+        var isWidthApplied = false;
+        for (var i = 0; i < gallerySettings.groups.length; i++) {
+            for (var 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) {
+                        var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                        if (galleryItemEle) {
+                            itemsWidth += galleryItemEle.offsetWidth;
+                            var itemStyles = window.getComputedStyle(galleryItemEle);
+                            if (itemStyles) {
+                                var paddingWidth = parseFloat(itemStyles.paddingLeft) + parseFloat(itemStyles.paddingRight);
+                                if (!(isNullOrUndefined(paddingWidth)))
+                                    itemsWidth += paddingWidth;
+                                var 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
+     */
+    RibbonGallery.prototype.checkAvailableHeight = function (selectedTab, activeContent) {
+        var galleryWrapperItems = activeContent.querySelectorAll('.e-ribbon-gallery-wrapper');
+        for (var n = 0; n < galleryWrapperItems.length; n++) {
+            var isHeight = false;
+            var itemsCount = 0;
+            var galleryWrapper = galleryWrapperItems[parseInt(n.toString(), 10)];
+            var galleryWrapperHeight = galleryWrapper.offsetHeight;
+            var itemID = galleryWrapper.id.replace(/_galleryWrapper/g, '');
+            var itemProp = getItem(this.parent.tabs, itemID);
+            if (itemProp) {
+                this.setWrapperWidth(itemProp.item.gallerySettings.itemCount, galleryWrapper, itemProp.item.gallerySettings, itemID);
+                for (var 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 (var j = 0; j < itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                            var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                            if (galleryItemEle) {
+                                itemsCount++;
+                                if (!isHeight) {
+                                    if (itemsCount === 1) {
+                                        var itemsValues = 0;
+                                        var itemStyles = window.getComputedStyle(galleryItemEle);
+                                        if (itemStyles) {
+                                            var paddingWidth = parseFloat(itemStyles.paddingTop) + parseFloat(itemStyles.paddingBottom);
+                                            if (!(isNullOrUndefined(paddingWidth)))
+                                                itemsValues += paddingWidth;
+                                            var 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();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+    RibbonGallery.prototype.checkCollision = function (popup, popupEle) {
+        var paddingWidth = 0;
+        var marginWidth = 0;
+        if (popupEle) {
+            var screenWidth = window.innerWidth;
+            var paddingStyles = window.getComputedStyle(popupEle);
+            if (paddingStyles) {
+                paddingWidth = parseFloat(paddingStyles.paddingLeft) + parseFloat(paddingStyles.paddingRight);
+                if (!(isNullOrUndefined(paddingWidth)))
+                    screenWidth = screenWidth - paddingWidth;
+            }
+            var popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
+            if (popup.width !== 'auto') {
+                popupContainerItems.forEach(function (ele) {
+                    ele.style.flexFlow = 'wrap';
+                });
+            }
+            var isCollideOccurs = false;
+            for (var i = 0; i < popupContainerItems.length; i++) {
+                var itemsWidth = 0;
+                for (var j = 0; j < popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item').length; j++) {
+                    var 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(function (ele) {
+                        ele.style.flexFlow = 'wrap';
+                    });
+                    break;
+                }
+            }
+            if (!isCollideOccurs) {
+                if (popup.width === 'auto') {
+                    popupContainerItems.forEach(function (ele) {
+                        ele.style.flexFlow = 'nowrap';
+                    });
+                    popupEle.style.width = 'auto';
+                }
+                else {
+                    popupEle.style.width = (popup.width).toString();
+                }
+            }
+        }
+    };
+    RibbonGallery.prototype.createPopup = function (item, buttonEle) {
+        var popupContainer = this.parent.createElement('div', {
+            className: 'e-ribbon-popup-container',
+            id: item.id + '_popupContainer'
+        });
+        this.renderGalleryItems(item.gallerySettings, true, item.id, popupContainer);
+        var gallerypopupElement = this.parent.createElement('div', {
+            className: 'e-ribbon-gallery-popup',
+            id: item.id + '_galleryPopup'
+        });
+        document.body.append(gallerypopupElement);
+        var 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
+     */
+    RibbonGallery.prototype.switchGalleryItems = function (activeLayout, itemID) {
+        var itemEle = this.parent.element.querySelector('#' + itemID + CONTAINER_ID);
+        var count = 0;
+        var itemProp = getItem(this.parent.tabs, itemID);
+        if (itemEle) {
+            var galleryWrapper = itemEle.querySelector('.e-ribbon-gallery-wrapper');
+            var galleryIcons = itemEle.querySelectorAll('.e-ribbon-gallery-icons');
+            var galleryContainer = itemEle.querySelectorAll('.e-ribbon-gallery-container');
+            if (galleryIcons.length) {
+                for (var 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 (var n = 0; n < itemProp.item.gallerySettings.groups.length; n++) {
+                    for (var 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 (var n = 0; n < itemProp.item.gallerySettings.groups.length; n++) {
+                    for (var i = 0; i < itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].items.length; i++) {
+                        count++;
+                        if (count > itemProp.item.gallerySettings.itemCount) {
+                            var 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
+     */
+    RibbonGallery.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
+        if (itemEle.closest('.e-ribbon-overflow-target')) {
+            var 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(function (ele) {
+                ele.classList.add('e-hidden');
+            });
+            var popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
+            if (popupButton)
+                popupButton.classList.add('e-hidden');
+            var itemProp = getItem(this.parent.tabs, item.id);
+            var iconCss = itemProp && itemProp.group.groupIconCss ? itemProp.group.groupIconCss : '';
+            var content = itemProp && itemProp.group.header ? itemProp.group.header : '';
+            if (!iconCss) {
+                for (var i = 0; i < item.gallerySettings.groups.length; i++) {
+                    for (var 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;
+                    }
+                }
+            }
+            var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            var popup = getComponent(popupEle, Popup);
+            var popupContainerEle_1 = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
+            var dropdown_1 = new DropDownButton({
+                iconCss: iconCss,
+                content: content,
+                target: popupContainerEle_1,
+                enableRtl: this.parent.enableRtl,
+                cssClass: 'e-ribbon-gallery-dropdown',
+                disabled: item.disabled,
+                open: function () {
+                    _this.setFoucsToFirstItem(popupContainerEle_1, true, item.id);
+                    _this.checkCollision(dropdown_1.dropDown, dropdown_1.dropDown.element);
+                },
+                beforeClose: function (args) {
+                    var isCancelled = _this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
+                    if (isCancelled) {
+                        args.cancel = true;
+                    }
+                }
+            }, buttonEle);
+            if (popup.width !== 'auto') {
+                dropdown_1.dropDown.width = formatUnit(popup.width);
+            }
+            if (popup.height !== 'auto') {
+                dropdown_1.dropDown.height = formatUnit(popup.height);
+                dropdown_1.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
+     */
+    RibbonGallery.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var 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(function (ele) {
+            ele.classList.remove('e-hidden');
+        });
+        var galleryDDBEle = document.querySelector('#' + item.id);
+        if (galleryDDBEle) {
+            var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            var dropdown = getComponent(galleryDDBEle, DropDownButton);
+            popupEle.appendChild(dropdown.target);
+            dropdown.destroy();
+            remove(galleryDDBEle);
+        }
+    };
+    RibbonGallery.prototype.setActiveState = function (galleryEle, gallerySettings, itemID, isInteracted, event) {
+        var previousItem;
+        var currentItem;
+        var itemEle = document.querySelector('#' + itemID + CONTAINER_ID);
+        var selctedGalleryItem = Array.prototype.slice.call(itemEle.querySelectorAll('.e-ribbon-gallery-selected'));
+        var popupEle = document.querySelector('#' + itemID + '_popupContainer');
+        var popupGalleryItem = Array.prototype.slice.call(popupEle.querySelectorAll('.e-ribbon-gallery-selected'));
+        if (popupGalleryItem.length) {
+            selctedGalleryItem = selctedGalleryItem.concat(popupGalleryItem);
+        }
+        for (var i = 0; i < gallerySettings.groups.length; i++) {
+            for (var 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)];
+                }
+            }
+        }
+        var galleryItem = document.querySelectorAll('#' + galleryEle.id);
+        var 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 (var i = 0; i < selctedGalleryItem.length; i++) {
+                selctedGalleryItem[parseInt(i.toString(), 10)].classList.remove('e-ribbon-gallery-selected');
+            }
+            for (var i = 0; i < galleryItem.length; i++) {
+                galleryItem[parseInt(i.toString(), 10)].classList.add('e-ribbon-gallery-selected');
+            }
+            var selectedEventArgs = { previousItem: previousItem, currentItem: currentItem, name: 'select', isInteracted: isInteracted, event: event };
+            var galleryPopupItems = document.querySelectorAll('#' + itemID + '_popupContainer .e-ribbon-gallery-item');
+            for (var 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);
+            }
+        }
+    };
+    RibbonGallery.prototype.popupEvents = function (args, gallerySettings, name, isOpen) {
+        var 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;
+    };
+    RibbonGallery.prototype.showPopup = function (popup, popupEle, args, gallerySettings, itemID) {
+        var isCancelled = this.popupEvents(args, gallerySettings, 'popupOpen', true);
+        if (isCancelled) {
+            return;
+        }
+        popup.show();
+        this.checkCollision(popup, popupEle);
+        var buttonEle = document.querySelector('#' + itemID + '_popupButton');
+        buttonEle.classList.add('e-gallery-button-active');
+        var buttonPosition = buttonEle.getBoundingClientRect();
+        var 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);
+    };
+    RibbonGallery.prototype.hidePopup = function (popup, popupEle, args, gallerySettings, itemID) {
+        var isCancelled = this.popupEvents(args, gallerySettings, 'popupClose', false);
+        if (isCancelled) {
+            return;
+        }
+        popup.hide();
+        var 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}
+     */
+    RibbonGallery.prototype.showGalleryPopup = function (id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        var popupEle = document.querySelector('#' + id + '_galleryPopup');
+        var 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}
+     */
+    RibbonGallery.prototype.hideGalleryPopup = function (id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        var popupEle = document.querySelector('#' + id + '_galleryPopup');
+        var popup = getComponent(popupEle, Popup);
+        this.hidePopup(popup, popupEle, null, itemProp.item.gallerySettings, id);
+    };
+    RibbonGallery.prototype.setFoucsToFirstItem = function (popupEle, isDropdown, itemID, popup, gallerySettings) {
+        var _this = this;
+        popupEle.querySelectorAll('.e-ribbon-gallery-item')[0].focus();
+        this.galleryItemsIndex = 0;
+        popupEle.onkeydown = function (e) {
+            _this.handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings);
+        };
+    };
+    RibbonGallery.prototype.handleGalleryPopupNavigation = function (e, popupEle, isDropdown, itemID, popup, gallerySettings) {
+        var 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);
+            }
+        }
+    };
+    RibbonGallery.prototype.createGalleryTemplate = function (galleryItemEle, gallerySettings, id, items) {
+        galleryItemEle.classList.add('e-ribbon-gallery-template');
+        var templateName = 'ribbon' + id + 'galleryTemplate';
+        this.parent['clearTemplate']([templateName]);
+        var 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']();
+    };
+    RibbonGallery.prototype.createGalleryPopupTemplate = function (galleryItemEle, gallerySettings, id, items) {
+        galleryItemEle.classList.add('e-ribbon-gallery-popup-template');
+        var templateName = 'ribbon' + id + 'galleryPopupTemplate';
+        this.parent['clearTemplate']([templateName]);
+        var 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']();
+    };
+    return RibbonGallery;
+}());
+
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The Ribbon Component is a structured layout to manage tools with tabs and groups.
  */
 var Ribbon = /** @__PURE__ @class */ (function (_super) {
     __extends(Ribbon, _super);
@@ -3758,12 +4720,17 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.initialize();
     };
     Ribbon.prototype.preRender = function () {
+        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',
@@ -3796,7 +4763,27 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
      */
     Ribbon.prototype.requiredModules = function () {
         var modules = [];
-        modules.push({ member: 'ribbonButton', args: [this] }, { member: 'ribbonDropDown', args: [this] }, { member: 'ribbonSplitButton', args: [this] }, { member: 'ribbonCheckBox', args: [this] }, { member: 'ribbonColorPicker', args: [this] }, { member: 'ribbonComboBox', args: [this] }, { member: 'ribbonGroupButton', args: [this] }, { member: 'ribbonFileMenu', args: [this] }, { member: 'ribbonBackstage', args: [this] });
+        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' });
+        var canInjectColorPickerModule = getItem(this.tabs, null, RibbonItemType.ColorPicker);
+        var 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;
     };
     Ribbon.prototype.initialize = function () {
@@ -3807,6 +4794,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         this.element.style.width = formatUnit(this.width);
         this.renderTabs();
+        if (this.ribbonContextualTabModule) {
+            this.ribbonContextualTabModule.addContextualTabs();
+        }
         if (this.ribbonFileMenuModule) {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
@@ -3816,13 +4806,18 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.createHelpPaneTemplate();
         var toolbar = this.tabObj['tbObj'];
         toolbar.refreshOverflow();
+        this.addTabOverflowKeyTip();
         createTooltip(this.element, this);
+        this.isKeytipOpen = false;
         this.wireEvents();
         this.wireKeyboardEvent();
         this.currentControlIndex = 0;
     };
     Ribbon.prototype.wireEvents = function () {
         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);
     };
     Ribbon.prototype.wireKeyboardEvent = function () {
         this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
@@ -3838,7 +4833,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
         var controlElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-control'));
         var templateElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-template'));
-        var ribbonControls = controlElements.concat(templateElements);
+        var galleryElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-gallery-item'));
+        var ribbonControls = controlElements.concat(templateElements, galleryElements);
         var comboBoxElements = activeContent.querySelectorAll('.e-combobox');
         var comboBoxEle;
         if (comboBoxElements) {
@@ -3867,7 +4863,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         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);
@@ -3909,7 +4905,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         }
         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++;
                 }
@@ -4068,6 +5064,111 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        var galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
+        if (galleryPopupEle) {
+            var popup = getComponent(galleryPopupEle, Popup);
+            popup.hide();
+        }
+        if (this.ribbonKeyTipModule && this.enableKeyTips) {
+            this.ribbonKeyTipModule.removeKeytip();
+        }
+    };
+    Ribbon.prototype.mouseEventHandler = function (e) {
+        if (this.ribbonKeyTipModule && this.enableKeyTips) {
+            this.ribbonKeyTipModule.removeKeytip();
+        }
+    };
+    Ribbon.prototype.keytipActionHandler = function (e) {
+        if (this.enableKeyTips) {
+            var isKeyTipPresent = false;
+            var keyPress = e.key;
+            if (e.altKey && e.key === 'Meta') {
+                var activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+                if (activePopup.length) {
+                    for (var i = 0; i < activePopup.length; i++) {
+                        var dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+                        dropDownBtn.toggle();
+                    }
+                    this.ribbonKeyTipModule.removeKeytip();
+                }
+                else {
+                    if (!this.isKeytipOpen) {
+                        var 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 {
+                var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+                if (keyTipItems) {
+                    for (var i = 0; i < keyTipItems.length; i++) {
+                        var 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);
+                    }
+                }
+            }
+        }
+    };
+    Ribbon.prototype.checkKeyTipPresent = function (keyTip, length) {
+        var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        for (var i = 0; i < keyTipItems.length; i++) {
+            var 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;
+            }
+        }
+    };
+    Ribbon.prototype.removeKeytip = function (keyTip) {
+        var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        for (var i = 0; i < keyTipItems.length; i++) {
+            var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (keyTipItem.innerHTML[0].toLowerCase() !== keyTip && keyTip !== '') {
+                remove(keyTipItem);
+            }
+        }
+    };
+    Ribbon.prototype.addKeyTip = function (tabIndex, keyTip, id, type) {
+        if (this.keyTipElements && this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+            var isKeyTipExist = false;
+            /* eslint-disable */
+            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)][type])) {
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)][type] = [];
+            }
+            if (Object.keys(this.keyTipElements[tabIndex][type]).length) {
+                var keytipData = this.keyTipElements[tabIndex][type];
+                for (var i = 0; i < Object.keys(this.keyTipElements[tabIndex][type]).length; i++) {
+                    if (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 */
+        }
     };
     Ribbon.prototype.renderTabs = function () {
         this.tabsInternal = this.tabs.slice();
@@ -4130,14 +5231,33 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.renderInitialTab(this.selectedTab);
     };
     Ribbon.prototype.ribbonTabSelected = function (e) {
+        e.preventFocus = true;
         this.isAddRemove = false;
         var selectedTabId = e.selectedItem.getAttribute('data-id');
         var selectedIndex = getIndex(this.tabs, (function (tab) { return (tab.id === selectedTabId); }));
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
-        var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
+        var isContextual = this.isContextualTab(selectedTabId);
+        this.updateSelectedState(selectedTabId);
+        var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
         this.setProperties({ selectedTab: selectedIndex }, true);
         this.calculateHiddenElementsWidth(selectedIndex);
+        if (this.isUpdateItems) {
+            for (var i = 0; i < this.itemsModel.length; i++) {
+                var 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) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + RIBBON_TAB_ACTIVE);
@@ -4156,6 +5276,20 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         this.trigger('tabSelected', eventArgs);
     };
+    Ribbon.prototype.updateSelectedState = function (tabID) {
+        if (this.contextualTabs.length) {
+            for (var i = 0; i < this.contextualTabs.length; i++) {
+                var isSelected = false;
+                for (var 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);
+            }
+        }
+    };
     Ribbon.prototype.checkOverflow = function (tabIndex, activeContent) {
         var tabContent = activeContent.closest('.' + TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
@@ -4205,6 +5339,17 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        this.addTabOverflowKeyTip();
+    };
+    Ribbon.prototype.addTabOverflowKeyTip = function () {
+        var 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']);
+        }
     };
     Ribbon.prototype.checkSimplifiedItemShrinking = function (tabIndex, tabContent, activeContent) {
         var tab = this.tabs[parseInt(tabIndex.toString(), 10)];
@@ -4339,7 +5484,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                             this.setItemSize(itemEle, item);
                         }
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, true);
                         }
                     }
@@ -4369,7 +5514,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         return isEmptyCollection;
     };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
-        var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
+        var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.Gallery || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
         var dropDownPopup = dropdown.dropDown;
         // popup is on right if (isGroupOF && isMenu)
         // The position is reversed if RTL is enabled.
@@ -4435,7 +5580,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                             break;
                         }
                         var 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);
@@ -4554,19 +5699,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
+        var overflowtarget;
         var itemProp = getGroup(this.tabs, groupId);
         var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
         var groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             var 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;
             var overflowBtnTarget = overflowButton.target;
             var headerEle = overflowBtnTarget.querySelector('#' + groupId + GROUPOF_BUTTON_ID + HEADER_ID);
             if (!headerEle) {
@@ -4595,7 +5743,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         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);
@@ -4628,10 +5776,16 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             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');
+            }
+        }
     };
     Ribbon.prototype.addOverflowEvents = function (item, itemEle, overflowButton) {
         switch (item.type) {
@@ -4653,6 +5807,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             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);
@@ -5331,6 +6490,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this_1.checkSmallToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             this_1.checkMediumToLarge(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             var dropdown = this_1.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow, this_1.enableRtl);
+            if (group.keyTip) {
+                var overflowDDB = group.id + OVERFLOW_ID + DROPDOWN_ID;
+                this_1.addKeyTip(tabIndex, group.keyTip, overflowDDB, 'grpoverflow');
+            }
             this_1.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].setProperties({ isCollapsed: true }, true);
             for (var j = 0; j < group.collections.length; j++) {
@@ -5343,6 +6506,25 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         this_1.handleContentSize(itemEle);
                         this_1.addOverflowEvents(item, itemEle, dropdown);
                     }
+                    var overflowDDB = document.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID);
+                    var overflowButton = getInstance(overflowDDB, DropDownButton);
+                    if (overflowButton) {
+                        var overflowtarget = overflowButton.target;
+                        if (overflowtarget) {
+                            if (this_1.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+                                if (item.type === RibbonItemType.GroupButton) {
+                                    for (var i_3 = 0; i_3 < item.groupButtonSettings.items.length; i_3++) {
+                                        if (item.groupButtonSettings.items[parseInt(i_3.toString(), 10)].keyTip) {
+                                            this_1.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i_3.toString(), 10)].keyTip, item.id + (RIBBON_GROUP_BUTTON_ID + i_3), 'grpoverflowpopup');
+                                        }
+                                    }
+                                }
+                                if (item.keyTip) {
+                                    this_1.addKeyTip(tabIndex, item.keyTip, item.id, 'grpoverflowpopup');
+                                }
+                            }
+                        }
+                    }
                 }
             }
         };
@@ -5441,16 +6623,31 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.removeOverflowDropdown(activeContent, tabContent, true, index);
         }
     };
+    Ribbon.prototype.isContextualTab = function (tabID) {
+        var isContextual = false;
+        if (this.contextualTabs.length) {
+            for (var i = 0; i < this.contextualTabs.length; i++) {
+                for (var 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;
+    };
     Ribbon.prototype.ribbonTabSelecting = function (e) {
         var _this = this;
         this.currentControlIndex = 0;
         var nextTabId = e.selectingItem.getAttribute('data-id');
         var previousTabId = e.previousItem.getAttribute('data-id');
         var nextIndex = getIndex(this.tabs, (function (tab) { return (tab.id === nextTabId); }));
+        var isContextual = this.isContextualTab(nextTabId);
         var previousIndex = getIndex(this.tabs, (function (tab) { return (tab.id === previousTabId); }));
         nextIndex = nextIndex === -1 ? this.selectedTab : nextIndex;
         var eventArgs = {
-            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex
+            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex, isContextual: isContextual
         };
         this.trigger('tabSelecting', eventArgs, function (args) {
             if (args.cancel) {
@@ -5470,22 +6667,33 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     Ribbon.prototype.createTabItems = function (tabs) {
         var _this = this;
         var tabItems = [];
-        for (var i = 0; i < tabs.length; i++) {
+        var _loop_3 = function (i) {
             var ribbonTab = tabs[parseInt(i.toString(), 10)];
-            var header = this.createElement('span', {
+            var header = this_3.createElement('span', {
                 innerHTML: ribbonTab.header,
                 id: ribbonTab.id + HEADER_ID
             });
+            var tabIndex = getIndex(this_3.tabs, (function (tab) { return (tab.id === ribbonTab.id); }));
+            if (ribbonTab.keyTip) {
+                if (!this_3.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+                    this_3.keyTipElements[parseInt(tabIndex.toString(), 10)] = {};
+                }
+                this_3.addKeyTip(tabIndex, ribbonTab.keyTip, ribbonTab.id, 'tab');
+            }
             header.onclick = function () { _this.minimize(false); };
             header.ondblclick = function () { _this.minimize(true); };
             var tab = { header: { text: header }, id: ribbonTab.id, cssClass: ribbonTab.cssClass };
-            var content = this.createElement('div', {
+            var content = this_3.createElement('div', {
                 className: tab.cssClass,
                 id: ribbonTab.id + CONTENT_ID
             });
             content.classList.add(RIBBON_TAB_ITEM);
             tab.content = content;
             tabItems.push(tab);
+        };
+        var this_3 = this;
+        for (var i = 0; i < tabs.length; i++) {
+            _loop_3(i);
         }
         return tabItems;
     };
@@ -5498,8 +6706,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         var 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);
     };
-    Ribbon.prototype.addOverflowButton = function (btnId) {
+    Ribbon.prototype.addOverflowButton = function (btnId, isGroupOF) {
         var _this = this;
         var overflowButton = this.createElement('button', {
             id: btnId
@@ -5536,6 +6746,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }, 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' });
+        }
         var isGroupOf;
         overflowButton.onkeydown = overflowButton.onclick = function () { _this.itemIndex = -1; isGroupOf = overflowButton.classList.contains('e-ribbon-overall-of-btn') ? false : true; };
         overflowTarget.onkeydown = function (e) { return (_this.upDownKeyHandler(e, overflowTarget, isGroupOf), _this); };
@@ -5696,6 +6910,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 case 'ComboBox':
                     this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
                     break;
+                case 'Gallery':
+                    this.ribbonGalleryModule.removeOverFlowEvents(item, itemEle);
+                    break;
                 case 'GroupButton':
                     this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
                     break;
@@ -5733,6 +6950,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             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 });
+        }
     };
     Ribbon.prototype.removeExpandCollapse = function () {
         var _this = this;
@@ -5835,22 +7056,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 var activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + CONTENT_ID);
                 var tabContent = activeContent.closest('.' + TAB_CONTENT);
                 if (this.activeLayout === 'Simplified') {
-                    for (var i_3 = 0; i_3 < groupList.length; i_3++) {
-                        var group = groupList[parseInt(i_3.toString(), 10)];
-                        var alignType = groupList[parseInt(i_3.toString(), 10)].orientation;
+                    for (var i_4 = 0; i_4 < groupList.length; i_4++) {
+                        var group = groupList[parseInt(i_4.toString(), 10)];
+                        var alignType = groupList[parseInt(i_4.toString(), 10)].orientation;
                         if (group.isCollapsed) {
                             group.setProperties({ isCollapsed: false }, true);
                             this.removeDropdown(group.id);
                         }
                         else {
-                            this.checkSmallToMedium(tabIndex, tab, i_3, tabContent, activeContent, true, false);
-                            this.checkMediumToLarge(tabIndex, tab, i_3, tabContent, activeContent, true, false);
+                            this.checkSmallToMedium(tabIndex, tab, i_4, tabContent, activeContent, true, false);
+                            this.checkMediumToLarge(tabIndex, tab, i_4, tabContent, activeContent, true, false);
                         }
                         var groupEle = tabContent.querySelector('#' + group.id);
                         var groupContainer = groupEle.querySelector('#' + group.id + CONTAINER_ID);
                         var shrinkColumns = groupContainer.querySelectorAll('.' + 'e-ribbon-shrink');
-                        for (var i_4 = 0; i_4 < shrinkColumns.length; i_4++) {
-                            shrinkColumns[parseInt(i_4.toString(), 10)].remove();
+                        for (var i_5 = 0; i_5 < shrinkColumns.length; i_5++) {
+                            shrinkColumns[parseInt(i_5.toString(), 10)].remove();
                         }
                         var groupHeader = groupContainer.querySelector('#' + group.id + HEADER_ID);
                         groupHeader.remove();
@@ -5896,7 +7117,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                     itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
                                     if (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)) {
                                         this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (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);
                                         }
                                     }
@@ -5909,6 +7130,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                         this.setItemSize(ele, item);
                                     }
                                 }
+                                if (item.type === RibbonItemType.Gallery) {
+                                    this.ribbonGalleryModule.switchGalleryItems(this.activeLayout, item.id);
+                                }
                             }
                         }
                         if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
@@ -5918,9 +7142,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
                 else {
                     this.element.classList.remove(RIBBON_OVERFLOW);
-                    for (var i_5 = 0; i_5 < groupList.length; i_5++) {
-                        var group = groupList[parseInt(i_5.toString(), 10)];
-                        var alignType = groupList[parseInt(i_5.toString(), 10)].orientation;
+                    for (var i_6 = 0; i_6 < groupList.length; i_6++) {
+                        var group = groupList[parseInt(i_6.toString(), 10)];
+                        var alignType = groupList[parseInt(i_6.toString(), 10)].orientation;
                         var groupContainer = tabContent.querySelector('#' + group.id + CONTAINER_ID);
                         var groupContent = groupContainer.querySelector('#' + group.id + CONTENT_ID);
                         var groupHeader = this.createElement('div', {
@@ -5992,7 +7216,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                     var 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);
@@ -6012,6 +7236,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                     (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))) {
@@ -6031,7 +7258,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.overflowDDB = null;
         }
     };
-    Ribbon.prototype.createLauncherIcon = function (groupId, groupContainer) {
+    Ribbon.prototype.createLauncherIcon = function (groupId, groupContainer, tabIndex) {
         var _this = this;
         var launcherIcon = this.createElement('div', {
             className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.launcherIconCss : RIBBON_LAUNCHER_ICON),
@@ -6046,6 +7273,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 _this.launcherIconClicked(groupId);
             }
         }, this);
+        var itemProp = getGroup(this.tabs, groupId);
+        if (itemProp.group.launcherIconKeyTip) {
+            this.addKeyTip(tabIndex, itemProp.group.launcherIconKeyTip, launcherIcon.id, 'launcher');
+        }
     };
     Ribbon.prototype.launcherIconClicked = function (id) {
         var eventArgs = { groupId: id };
@@ -6083,7 +7314,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 groupContainer.appendChild(groupHeader);
             }
             if (group.showLauncherIcon) {
-                this.createLauncherIcon(group.id, groupContainer);
+                this.createLauncherIcon(group.id, groupContainer, tabIndex);
             }
             var elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
@@ -6210,6 +7441,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             case 'GroupButton':
                 this.ribbonGroupButtonModule.createGroupButton(item, itemEle);
                 break;
+            case 'Gallery':
+                this.ribbonGalleryModule.createGallery(item, itemEle);
+                break;
         }
     };
     Ribbon.prototype.createItems = function (itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
@@ -6243,17 +7477,34 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 itemEle.classList.add(RIBBON_TOOLTIP_TARGET);
                 this.tooltipData.push({ id: itemEle.id, data: item.ribbonTooltipSettings });
             }
-            var 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 (var i_7 = 0; i_7 < item.groupButtonSettings.items.length; i_7++) {
+                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] && item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip) {
+                        this.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip, item.id + (RIBBON_GROUP_BUTTON_ID + i_7), '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);
+            var 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);
+                }
             }
             var initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
             if (initialProps && initialProps.hiddenItems && initialProps.hiddenItems.length) {
@@ -6265,7 +7516,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.createRibbonItem(item, itemEle);
             if ((this.activeLayout === 'Simplified') && ((item.displayOptions === DisplayMode.Overflow) || (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)))) {
                 this.createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer);
-                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (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);
                 }
             }
@@ -6394,15 +7645,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 var moduleName = this.getItemModuleName(item);
                                 if (moduleName !== 'template') {
                                     if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
-                                        for (var i_6 = 0; i_6 < item.groupButtonSettings.items.length; i_6++) {
-                                            var btnEle = ele.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_6);
+                                        for (var i_8 = 0; i_8 < item.groupButtonSettings.items.length; i_8++) {
+                                            var btnEle = ele.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_8);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
                                     else if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
                                         updateCommonProperty(ele, 'dropdown-btn', commonProp);
-                                        for (var i_7 = 0; i_7 < item.groupButtonSettings.items.length; i_7++) {
-                                            var btnEle = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_7);
+                                        for (var i_9 = 0; i_9 < item.groupButtonSettings.items.length; i_9++) {
+                                            var btnEle = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_9);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
@@ -6462,12 +7713,18 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                     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;
@@ -6508,18 +7765,42 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.ribbonGroupButtonModule.destroyDropDown(item);
             }
-            var _loop_3 = function (i) {
+            var _loop_4 = function (i) {
                 if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings) {
                     var groupButtonID_1 = item.id + RIBBON_GROUP_BUTTON_ID + i;
-                    var index = getIndex(this_3.tooltipData, function (e) { return e.id === groupButtonID_1; });
+                    var index = getIndex(this_4.tooltipData, function (e) { return e.id === groupButtonID_1; });
                     if (index !== -1) {
-                        this_3.tooltipData.splice(index, 1);
+                        this_4.tooltipData.splice(index, 1);
                     }
                 }
             };
-            var this_3 = this;
+            var this_4 = this;
             for (var i = 0; i < item.groupButtonSettings.items.length; i++) {
-                _loop_3(i);
+                _loop_4(i);
+            }
+        }
+        else if (moduleName === 'gallery') {
+            if (ele.closest('.e-ribbon-overflow-target')) {
+                destroyControl(ele, 'dropdown-btn');
+                var galleryPopupEle = Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '_galleryPopup'));
+                galleryPopupEle.concat(Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '-popup')));
+                for (var i = 0; i < galleryPopupEle.length; i++) {
+                    galleryPopupEle[parseInt(i.toString(), 10)].remove();
+                }
+            }
+            else {
+                var galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
+                var galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
+                if (galleryPopupBtn) {
+                    galleryPopupBtn.remove();
+                }
+                for (var i = 0; i < galleryEle.length; i++) {
+                    galleryEle[parseInt(i.toString(), 10)].remove();
+                }
+                var galleryPopupEle = document.querySelectorAll('#' + item.id + '_galleryPopup');
+                for (var i = 0; i < galleryPopupEle.length; i++) {
+                    galleryPopupEle[parseInt(i.toString(), 10)].remove();
+                }
             }
         }
         else if (moduleName !== 'template') {
@@ -6535,6 +7816,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.ribbonGroupButtonModule.destroyDropDown(item);
         }
     };
+    /**
+     * Gets the item module name.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
     Ribbon.prototype.getItemModuleName = function (item) {
         switch (item.type) {
             case 'Button':
@@ -6551,6 +7839,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 return 'combobox';
             case 'GroupButton':
                 return 'group-btn';
+            case 'Gallery':
+                return 'gallery';
             default:
                 return 'template';
         }
@@ -6590,8 +7880,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
      * @param {string} tabId - The ID of the tab to be shown.
      * @returns {void}
      */
-    Ribbon.prototype.showTab = function (tabId) {
-        this.showHideTab(tabId, false);
+    Ribbon.prototype.showTab = function (tabId, isContextual) {
+        if (isContextual === void 0) { isContextual = false; }
+        this.showHideTab(tabId, false, isContextual);
     };
     /**
      * Hides a specific tab in the ribbon.
@@ -6599,15 +7890,49 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
      * @param {string} tabId - The ID of the tab to be hidden.
      * @returns {void}
      */
-    Ribbon.prototype.hideTab = function (tabId) {
-        this.showHideTab(tabId, true);
+    Ribbon.prototype.hideTab = function (tabId, isContextual) {
+        if (isContextual === void 0) { isContextual = false; }
+        this.showHideTab(tabId, true, isContextual);
     };
-    Ribbon.prototype.showHideTab = function (tabId, value) {
+    Ribbon.prototype.showHideTab = function (tabId, value, isContextual) {
         var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
         if (index === -1) {
             return;
         }
         this.tabObj.hideTab(index, value);
+        if (isContextual) {
+            var contextualTab_1;
+            var tabEle = this.tabObj.element;
+            for (var i = 0; i < this.contextualTabs.length; i++) {
+                for (var 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_1 = this.contextualTabs[parseInt(i.toString(), 10)];
+                    }
+                }
+            }
+            if (contextualTab_1) {
+                var isTabHidden = true;
+                var _loop_5 = function (i) {
+                    var index_1 = getIndex(this_5.tabs, function (e) { return e.id === contextualTab_1.tabs[parseInt(i.toString(), 10)].id; });
+                    if (index_1 !== -1) {
+                        var toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index_1.toString(), 10)];
+                        if (!(toolbarEle.classList.contains('e-hidden'))) {
+                            isTabHidden = false;
+                        }
+                    }
+                };
+                var this_5 = this;
+                for (var i = 0; i < contextualTab_1.tabs.length; i++) {
+                    _loop_5(i);
+                }
+                if (isTabHidden) {
+                    contextualTab_1.setProperties({ visible: false }, true);
+                }
+                else {
+                    contextualTab_1.setProperties({ visible: true }, true);
+                }
+            }
+        }
     };
     /**
      * Enables a specific tab in the ribbon.
@@ -6914,8 +8239,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
         /* eslint-disable */
         if (hiddenProps && hiddenProps[key] && hiddenProps[key].length) {
-            var _loop_4 = function (i) {
-                var contentEle = this_4.tabObj.items[tabIndex].content;
+            var _loop_6 = function (i) {
+                var contentEle = this_6.tabObj.items[tabIndex].content;
                 var hiddenEle;
                 var groupEle = void 0;
                 var isGroupHidden = false;
@@ -6937,11 +8262,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                             groupEle = hiddenEle.closest('.e-ribbon-group');
                             if (groupEle.classList.contains('e-hide-group')) {
                                 isGroupHidden = true;
-                                widthDifference = this_4.checkWidthDifference(hiddenEle, groupEle);
+                                widthDifference = this_6.checkWidthDifference(hiddenEle, groupEle);
                             }
                         }
-                        this_4.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, true, tabIndex);
-                        this_4.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, true);
+                        this_6.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, true, tabIndex);
+                        this_6.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, true);
                         if (isHidden) {
                             hiddenEle.classList.add('e-hidden');
                         }
@@ -6954,12 +8279,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 groupEle.classList.remove('e-hide-group');
                                 groupEle.classList.remove('e-ribbon-emptyCollection');
                                 widthDifference = Math.abs(hiddenEle.offsetWidth - groupEle.offsetWidth);
-                                if (this_4.hiddenGroups.indexOf(groupEle.id) !== -1) {
-                                    this_4.hiddenGroups.splice(this_4.hiddenGroups.indexOf(groupEle.id), 1);
+                                if (this_6.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                    this_6.hiddenGroups.splice(this_6.hiddenGroups.indexOf(groupEle.id), 1);
                                 }
                             }
                             else {
-                                if (this_4.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                if (this_6.hiddenGroups.indexOf(groupEle.id) !== -1) {
                                     var hiddenItems = groupEle.querySelectorAll('.e-ribbon-item:not(.e-hidden)');
                                     hiddenItems.forEach(function (item) {
                                         if (item.id !== hiddenEle.id) {
@@ -6972,12 +8297,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                             item.classList.remove('e-hidden');
                                         }
                                     });
-                                    this_4.hiddenGroups.splice(this_4.hiddenGroups.indexOf(groupEle.id), 1);
+                                    this_6.hiddenGroups.splice(this_6.hiddenGroups.indexOf(groupEle.id), 1);
                                 }
                             }
                         }
-                        this_4.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, false, tabIndex);
-                        this_4.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, false);
+                        this_6.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, false, tabIndex);
+                        this_6.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, false);
                     }
                     if (isGroupHidden) {
                         groupEle.classList.add('e-hide-group');
@@ -6991,9 +8316,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
                 out_i_1 = i;
             };
-            var this_4 = this, out_i_1;
+            var this_6 = this, out_i_1;
             for (var i = 0; i < hiddenProps[key].length; i++) {
-                _loop_4(i);
+                _loop_6(i);
                 i = out_i_1;
             }
         }
@@ -7044,9 +8369,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 var overflowButton = getInstance(groupOFButton[parseInt(i.toString(), 10)], DropDownButton);
                 var overflowBtnTarget = overflowButton.target;
                 var overflowItems = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
-                for (var i_8 = 0; i_8 < overflowItems.length; i_8++) {
-                    if (overflowItems[parseInt(i_8.toString(), 10)].hasAttribute('data-medium-width')) {
-                        mediumDataItems.push(overflowItems[parseInt(i_8.toString(), 10)]);
+                for (var i_10 = 0; i_10 < overflowItems.length; i_10++) {
+                    if (overflowItems[parseInt(i_10.toString(), 10)].hasAttribute('data-medium-width')) {
+                        mediumDataItems.push(overflowItems[parseInt(i_10.toString(), 10)]);
                     }
                 }
             }
@@ -7073,10 +8398,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     if (overflowButton) {
                         var overflowEle = overflowButton.target;
                         var overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
-                        for (var i_9 = 0; i_9 < overflowItems.length; i_9++) {
-                            var previousWidth = parseInt(overflowItems[parseInt(i_9.toString(), 10)].getAttribute('data-simplified-width'), 10);
+                        for (var i_11 = 0; i_11 < overflowItems.length; i_11++) {
+                            var previousWidth = parseInt(overflowItems[parseInt(i_11.toString(), 10)].getAttribute('data-simplified-width'), 10);
                             if (previousWidth) {
-                                overflowItems[parseInt(i_9.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
+                                overflowItems[parseInt(i_11.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
                             }
                         }
                     }
@@ -7626,7 +8951,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         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) {
@@ -7746,96 +9071,111 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         //Check whether the tab items are rendered
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + itemProp.group.id);
-        var groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
-        var itemContainer = null;
-        var itemEle = null;
-        var dropdownElement;
-        var 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) {
-                    var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
-                    if (collectionEle) {
-                        collectionEle.appendChild(itemContainer);
+        if (groupEle) {
+            var groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+            var itemContainer = null;
+            var itemEle = null;
+            var dropdownElement = void 0;
+            var dropdown = void 0;
+            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) {
+                        var 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();
+                var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+                if (removeCss) {
+                    removeClass([itemContainer], removeCss);
                 }
             }
-            this.destroyFunction(itemProp.item, itemEle);
-            itemEle.remove();
-            var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
-            if (removeCss) {
-                removeClass([itemContainer], removeCss);
-            }
-        }
-        var 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 });
-            }
-            var 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);
+            var 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 });
+                }
+                var 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;
         }
     };
     Ribbon.prototype.removeItemElement = function (contentEle, item, dropdown) {
@@ -7882,6 +9222,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     Ribbon.prototype.disableItem = function (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}
+     */
+    Ribbon.prototype.getItem = function (itemId) {
+        return getItem(this.tabs, itemId).item;
+    };
     Ribbon.prototype.enableDisableItem = function (itemId, isDisabled) {
         var isUpdated = false;
         var itemProp = getItem(this.tabs, itemId);
@@ -7929,6 +9278,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.unwireEvents = function () {
         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);
     };
     Ribbon.prototype.destroy = function () {
         this.keyboardModuleRibbon.destroy();
@@ -7956,6 +9308,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         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);
@@ -8035,7 +9390,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'selectedTab':
-                    this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
+                    var tabEle = this.tabObj.element;
+                    var toolbarItem = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(newProp.selectedTab.toString(), 10)];
+                    if (!(toolbarItem.classList.contains('e-hidden') || toolbarItem.classList.contains('e-disable'))) {
+                        this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
+                    }
                     break;
                 case 'tabAnimation':
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
@@ -8043,6 +9402,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 case 'tabs':
                     this.reRenderTabs(newProp.tabs);
                     break;
+                case 'contextualTabs':
+                    for (var 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();
@@ -8086,6 +9452,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -8110,6 +9482,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Collection([], RibbonTab)
     ], Ribbon.prototype, "tabs", void 0);
+    __decorate([
+        Collection([], RibbonContextualTabSettings)
+    ], Ribbon.prototype, "contextualTabs", void 0);
     __decorate([
         Property('100%')
     ], Ribbon.prototype, "width", void 0);
@@ -8207,6 +9582,7 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
         }
         this.parent.tabObj.refreshActiveTabBorder();
         this.addFileMenuTooltip(fileMenuOptions);
+        this.addFileMenuKeytip();
     };
     RibbonFileMenu.prototype.addFileMenuTooltip = function (fileMenuOptions) {
         if (isTooltipPresent(fileMenuOptions.ribbonTooltipSettings)) {
@@ -8214,6 +9590,12 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
             this.parent.tooltipData.push({ id: this.ddbElement.id, data: fileMenuOptions.ribbonTooltipSettings });
         }
     };
+    RibbonFileMenu.prototype.addFileMenuKeytip = function () {
+        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 });
+        }
+    };
     RibbonFileMenu.prototype.ddbBeforeEvent = function (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')) {
@@ -8366,7 +9748,9 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
                     }
                 }
                 this.removeFileMenuTooltip();
+                this.removeFileMenuKeytip();
                 this.addFileMenuTooltip(fileMenuOptions);
+                this.addFileMenuKeytip();
             }
             else {
                 this.createFileMenu(fileMenuOptions);
@@ -8385,6 +9769,7 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
     };
     RibbonFileMenu.prototype.destroyDDB = function () {
         this.removeFileMenuTooltip();
+        this.removeFileMenuKeytip();
         var tabEle = this.parent.tabObj.element;
         tabEle.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.destroyMenu();
@@ -8401,6 +9786,15 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
             this.parent.tooltipData.splice(index, 1);
         }
     };
+    RibbonFileMenu.prototype.removeFileMenuKeytip = function () {
+        var _this = this;
+        if (this.parent.keyTipElements['filemenu']) {
+            var index = getIndex(this.parent.keyTipElements['filemenu'], function (e) { return e.id === _this.ddbElement.id; });
+            if (index !== -1) {
+                this.parent.keyTipElements['filemenu'].splice(index, 1);
+            }
+        }
+    };
     /**
      * Add items to FileMenu.
      *
@@ -8468,7 +9862,7 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
     return RibbonFileMenu;
 }());
 
-var __extends$18 = (undefined && undefined.__extends) || (function () {
+var __extends$22 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -8485,7 +9879,7 @@ var __extends$18 = (undefined && undefined.__extends) || (function () {
  * Defines the items of Ribbon.
  */
 var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
-    __extends$18(RibbonBackstage, _super);
+    __extends$22(RibbonBackstage, _super);
     function RibbonBackstage(parent) {
         var _this = _super.call(this) || this;
         _this.parent = parent;
@@ -8607,6 +10001,7 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
         };
         this.parent.tabObj.refreshActiveTabBorder();
         this.addBackStageMenuTooltip(backStageOptions);
+        this.addBackStageMenuKeyTip(backStageOptions);
         EventHandler.add(document, 'click', this.onClickEvent, this);
     };
     RibbonBackstage.prototype.onClickEvent = function (e) {
@@ -8624,6 +10019,24 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
             this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
         }
     };
+    RibbonBackstage.prototype.addBackStageMenuKeyTip = function (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 (var 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 });
+                }
+            }
+        }
+    };
     RibbonBackstage.prototype.checkMenuItems = function (backStageItems) {
         for (var i = 0; i < backStageItems.length; i++) {
             var item = backStageItems[parseInt(i.toString(), 10)];
@@ -8914,7 +10327,9 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 this.removeBackstageMenuTooltip();
+                this.removeBackstageMenuKeyTip();
                 this.addBackStageMenuTooltip(backStageOptions);
+                this.addBackStageMenuKeyTip(backStageOptions);
             }
             else {
                 this.createBackStage(backStageOptions);
@@ -8933,6 +10348,7 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
     };
     RibbonBackstage.prototype.destroyDDB = function () {
         this.removeBackstageMenuTooltip();
+        this.removeBackstageMenuKeyTip();
         var tabEle = this.parent.tabObj.element;
         tabEle.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.destroyMenu();
@@ -8950,6 +10366,21 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
             this.parent.tooltipData.splice(index, 1);
         }
     };
+    RibbonBackstage.prototype.removeBackstageMenuKeyTip = function () {
+        var _this = this;
+        if (this.parent.keyTipElements['backstage'] && this.parent.keyTipElements['backstage'].length) {
+            var index = getIndex(this.parent.keyTipElements['backstage'], function (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 (var i = 0; i < this.parent.keyTipElements['backstageMenu'].length; i++) {
+                this.parent.keyTipElements['backstageMenu'].splice(i, 1);
+                i--;
+            }
+        }
+    };
     /**
      * Add items to Backstage Menu.
      *
@@ -9018,6 +10449,642 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
     return RibbonBackstage;
 }(Component));
 
+/**
+ * Defines the ribbon contextual tab.
+ */
+var RibbonContextualTab = /** @__PURE__ @class */ (function () {
+    function RibbonContextualTab(parent) {
+        this.parent = parent;
+    }
+    RibbonContextualTab.prototype.getModuleName = function () {
+        return 'ribbonContextualTab';
+    };
+    RibbonContextualTab.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates Contextual tab.
+     *
+     * @returns {void}
+     * @hidden
+     */
+    RibbonContextualTab.prototype.addContextualTabs = function () {
+        var isSelected = false;
+        for (var n = 0; n < this.parent.contextualTabs.length; n++) {
+            for (var 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)]);
+                var index = this.parent.tabs.length - 1;
+                var tabEle = this.parent.tabObj.element;
+                var 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
+     */
+    RibbonContextualTab.prototype.updateContextualTabs = function (newProp, contextualTab) {
+        if (!(isNullOrUndefined(newProp.visible))) {
+            for (var 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 {
+                var tabEle = this.parent.tabObj.element;
+                for (var i = 0; i < this.parent.tabs.length; i++) {
+                    var 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) {
+            var _loop_1 = function (key) {
+                var index = parseInt(key, 10);
+                var tab = this_1.parent.tabs.filter(function (e) { return e.id === contextualTab.tabs[parseInt(index.toString(), 10)].id; })[0];
+                this_1.parent.updateTab(tab);
+            };
+            var this_1 = this;
+            for (var key in newProp.tabs) {
+                _loop_1(key);
+            }
+        }
+    };
+    return RibbonContextualTab;
+}());
+
+/**
+ * Defines the keytip of Ribbon.
+ */
+var RibbonKeyTip = /** @__PURE__ @class */ (function () {
+    function RibbonKeyTip(parent) {
+        this.isKeytipPopupOpen = false;
+        this.parent = parent;
+    }
+    RibbonKeyTip.prototype.getModuleName = function () {
+        return 'ribbonKeyTip';
+    };
+    RibbonKeyTip.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates the keytips.
+     *
+     * @param {string} key - get's the keytip type.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonKeyTip.prototype.createKeytip = function (key) {
+        if (this.parent.keyTipElements) {
+            var keytipData = void 0;
+            if (key === 'tab') {
+                for (var 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']) {
+                    var popupKeyTipData = this.parent.keyTipElements[this.parent.selectedTab]['popupitem'];
+                    for (var 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']) {
+                    var backstageKeyTipData = this.parent.keyTipElements['backstageMenu'];
+                    for (var 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 (var 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 (var 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 (var 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 (var 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');
+                        }
+                    }
+                }
+            }
+        }
+    };
+    RibbonKeyTip.prototype.calculateItemPosition = function (key, isMethod, keyTip) {
+        if (isMethod === void 0) { isMethod = false; }
+        var xOffset;
+        var yOffset;
+        var keytipData;
+        /* eslint-disable */
+        keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key];
+        if (keytipData) {
+            for (var 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) {
+                    var 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+/, '');
+                    }
+                    var 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);
+                }
+            }
+        }
+    };
+    RibbonKeyTip.prototype.createKeyTipElement = function (id, keyTip, type, xOffset, yOffset, isTab, isPopUpItem) {
+        if (xOffset === void 0) { xOffset = 'center'; }
+        if (yOffset === void 0) { yOffset = 'bottom'; }
+        if (isTab === void 0) { isTab = false; }
+        if (isPopUpItem === void 0) { isPopUpItem = false; }
+        var keyEle = document.querySelector('#' + id);
+        var isPopUpPresent = false;
+        var 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')) {
+                var 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) {
+                var keytipElement = this.parent.createElement('div', {
+                    className: RIBBON_KEYTIP,
+                    id: id + RIBBON_KEYTIP_ID
+                });
+                document.body.append(keytipElement);
+                var 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;
+            }
+        }
+    };
+    RibbonKeyTip.prototype.calculateKeyTipPosition = function (itemEle, keytipElement, type, yOffset, isTabOverflow) {
+        if (isTabOverflow === void 0) { isTabOverflow = false; }
+        var 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
+     */
+    RibbonKeyTip.prototype.keytipPress = function (keyPress, isMethod) {
+        var _this = this;
+        if (isMethod === void 0) { isMethod = false; }
+        this.isKeytipPresent = false;
+        for (var i = 0; ((i < Object.keys(this.parent.keyTipElements).length) && !this.isKeytipPresent); i++) {
+            if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
+                for (var j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) && !this.isKeytipPresent); j++) {
+                    var keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
+                    for (var k = 0; ((k < keytipData.length) && !this.isKeytipPresent); k++) {
+                        if (keyPress.toUpperCase() === keytipData[parseInt(k.toString(), 10)].keyTip) {
+                            var 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(function () {
+                                            var 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 {
+                                            var itemProp = void 0;
+                                            if ((keytipData[parseInt(k.toString(), 10)].id).includes("_popupButton")) {
+                                                var 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') {
+                                        var keyEle = document.querySelector('#' + keytipData[parseInt(k.toString(), 10)].id);
+                                        this.removeKeytip();
+                                        if (keyEle) {
+                                            var 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, '');
+                                                    var 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);
+                }
+            }
+        }
+    };
+    RibbonKeyTip.prototype.clickItems = function (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 {
+            var 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();
+                    }
+                }
+            }
+            var 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':
+                    var itemEle_1 = document.querySelector('#' + itemID);
+                    setTimeout(function () {
+                        itemEle_1.focus();
+                    }, 100);
+                    break;
+                case 'gallery':
+                    var galleryEle = document.querySelector('#' + itemID);
+                    galleryEle.click();
+                    break;
+                case 'template':
+                    var templateEle = document.querySelector('#' + itemID);
+                    templateEle.focus();
+                    break;
+                case 'group-btn':
+                    var itemElement = document.querySelector('#' + itemID);
+                    if (itemElement) {
+                        var item = getInstance(itemElement, DropDownButton);
+                        item.toggle();
+                        for (var 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;
+            }
+        }
+    };
+    RibbonKeyTip.prototype.commonItemsKeyTipPress = function (keyPress, key, isMethod) {
+        var _this = this;
+        /* eslint-disable */
+        if (this.parent.keyTipElements[key]) {
+            var isKeyPressed = false;
+            var keytipData = this.parent.keyTipElements[key];
+            var keyEle = void 0;
+            var keytipElement = void 0;
+            if (keytipData) {
+                if (key === 'backstageMenu') {
+                    for (var 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(function () {
+                            for (var i = 0; i < Object.keys(_this.parent.keyTipElements).length; i++) {
+                                if (_this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
+                                    var keytipData_1 = _this.parent.keyTipElements[parseInt(i.toString(), 10)]['tab'];
+                                    _this.createKeyTipElement((keytipData_1[0].id), keytipData_1[0].keyTip, 'tab', 'center', 'bottom', true, true);
+                                }
+                            }
+                        }, 600);
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Removes the keytip.
+     *
+     * @param {string} key - Gets the keyboard key element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonKeyTip.prototype.removeKeytip = function (key) {
+        var _this = this;
+        var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        var isKeyTipExist = false;
+        this.parent.keysPress = '';
+        var _loop_1 = function (i) {
+            var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (key === 'Escape' && this_1.parent.keyTipElements && this_1.parent.keyTipElements[this_1.parent.selectedTab]) {
+                /* eslint-disable */
+                for (var j = 0; j < Object.keys(this_1.parent.keyTipElements[this_1.parent.selectedTab]).length; j++) {
+                    var keyText = (Object.keys(this_1.parent.keyTipElements[this_1.parent.selectedTab]))[j];
+                    if (this_1.parent.keyTipElements[this_1.parent.selectedTab][keyText]) {
+                        var index = getIndex(this_1.parent.keyTipElements[this_1.parent.selectedTab][keyText], function (e) { return e.id + RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
+                        /* eslint-enable */
+                        if (index !== -1) {
+                            if ((keyText === 'item' && !(this_1.isKeytipPopupOpen)) || (keyText === 'grpoverflow' && this_1.parent.activeLayout === 'Classic')) {
+                                this_1.createKeytip('tab');
+                                key = '';
+                                isKeyTipExist = true;
+                                break;
+                            }
+                            else if (this_1.isKeytipPopupOpen) {
+                                if ((keyText === 'popupitem' && this_1.parent.activeLayout === 'Simplified') || (keyText === 'grpoverflowpopup' && this_1.parent.activeLayout === 'Classic')) {
+                                    this_1.createKeytip('item');
+                                    key = '';
+                                    isKeyTipExist = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                for (var n = 0; n < Object.keys(this_1.parent.keyTipElements).length; n++) {
+                    if (this_1.parent.keyTipElements[parseInt(n.toString(), 10)]) {
+                        var keytipData = this_1.parent.keyTipElements[parseInt(n.toString(), 10)]['tab'];
+                        for (var 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')) {
+                                    var tabOverflow = this_1.parent.tabObj.element.querySelector('.e-nav-active');
+                                    tabOverflow.click();
+                                    setTimeout(function () {
+                                        _this.createKeytip('tab');
+                                    }, 600);
+                                    key = '';
+                                    isKeyTipExist = true;
+                                    break;
+                                }
+                            }
+                        }
+                        if (isKeyTipExist) {
+                            break;
+                        }
+                    }
+                }
+                if (!isKeyTipExist && this_1.parent.keyTipElements['backstageMenu']) {
+                    var index = getIndex(this_1.parent.keyTipElements['backstageMenu'], function (e) { return e.id + RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
+                    if (index !== -1) {
+                        this_1.createKeytip('tab');
+                        key = '';
+                        isKeyTipExist = true;
+                    }
+                }
+            }
+            if (keyTipItem) {
+                remove(keyTipItem);
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < keyTipItems.length; i++) {
+            _loop_1(i);
+        }
+        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}
+     */
+    RibbonKeyTip.prototype.showKeyTips = function (keyAction) {
+        if (this.parent.enableKeyTips) {
+            if (keyAction) {
+                this.keytipPress(keyAction, true);
+            }
+            else {
+                this.createKeytip('tab');
+            }
+        }
+    };
+    /**
+     * Hides the Keytip dynamically.
+     *
+     * @returns {void}
+     */
+    RibbonKeyTip.prototype.hideKeyTips = function () {
+        this.removeKeytip();
+    };
+    return RibbonKeyTip;
+}());
+
 /**
  * Ribbon modules
  */
@@ -9025,5 +11092,5 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
 // 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.es5.js.map