@syncfusion/ej2-ribbon 25.2.3 → 26.1.35

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

@@ -1,10 +1,10 @@
-import { ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, append, closest, compile, formatUnit, getComponent, getInstance, getUniqueID, isNullOrUndefined, isUndefined, merge, remove, removeClass, select } from '@syncfusion/ej2-base';
-import { HScroll, Menu, MenuAnimationSettings, MenuItem, Tab, TabAnimationSettings, Toolbar } from '@syncfusion/ej2-navigations';
-import { ComboBox, FieldSettings } from '@syncfusion/ej2-dropdowns';
-import { DropDownButton, Item, SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { Property, Event, ChildProperty, Complex, Collection, getComponent, merge, EventHandler, isNullOrUndefined, closest, remove, select, compile, addClass, formatUnit, append, setValue, getUniqueID, KeyboardEvents, getInstance, isUndefined, removeClass, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
+import { MenuItem, MenuAnimationSettings, Tab, Toolbar, HScroll, TabAnimationSettings, Menu } from '@syncfusion/ej2-navigations';
+import { FieldSettings, ComboBox } from '@syncfusion/ej2-dropdowns';
+import { Item, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import { Button, CheckBox } from '@syncfusion/ej2-buttons';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
-import { Popup, Tooltip } from '@syncfusion/ej2-popups';
+import { Tooltip, Popup } from '@syncfusion/ej2-popups';
 
 /**
  * Defines the layout types of ribbon.
@@ -135,7 +135,7 @@ var RibbonGroupButtonSelection;
     RibbonGroupButtonSelection["Multiple"] = "Multiple";
 })(RibbonGroupButtonSelection || (RibbonGroupButtonSelection = {}));
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
+var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -148,7 +148,7 @@ var __extends$5 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -158,7 +158,7 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon button item.
  */
 var RibbonButtonSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$5(RibbonButtonSettings, _super);
+    __extends(RibbonButtonSettings, _super);
     function RibbonButtonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -171,34 +171,34 @@ var RibbonButtonSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonButtonSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$5([
+    __decorate([
         Property('')
     ], RibbonButtonSettings.prototype, "content", void 0);
-    __decorate$5([
+    __decorate([
         Property('')
     ], RibbonButtonSettings.prototype, "cssClass", void 0);
-    __decorate$5([
+    __decorate([
         Property('')
     ], RibbonButtonSettings.prototype, "iconCss", void 0);
-    __decorate$5([
+    __decorate([
         Property(false)
     ], RibbonButtonSettings.prototype, "isToggle", void 0);
-    __decorate$5([
+    __decorate([
         Property(false)
     ], RibbonButtonSettings.prototype, "isPrimary", void 0);
-    __decorate$5([
+    __decorate([
         Property({})
     ], RibbonButtonSettings.prototype, "htmlAttributes", void 0);
-    __decorate$5([
+    __decorate([
         Event()
     ], RibbonButtonSettings.prototype, "created", void 0);
-    __decorate$5([
+    __decorate([
         Event()
     ], RibbonButtonSettings.prototype, "clicked", void 0);
     return RibbonButtonSettings;
 }(ChildProperty));
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
+var __extends$1 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -211,7 +211,7 @@ var __extends$6 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (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;
@@ -221,7 +221,7 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon checkbox item.
  */
 var RibbonCheckBoxSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$6(RibbonCheckBoxSettings, _super);
+    __extends$1(RibbonCheckBoxSettings, _super);
     function RibbonCheckBoxSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -234,31 +234,31 @@ var RibbonCheckBoxSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonCheckBoxSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$6([
+    __decorate$1([
         Property(false)
     ], RibbonCheckBoxSettings.prototype, "checked", void 0);
-    __decorate$6([
+    __decorate$1([
         Property('')
     ], RibbonCheckBoxSettings.prototype, "cssClass", void 0);
-    __decorate$6([
+    __decorate$1([
         Property('')
     ], RibbonCheckBoxSettings.prototype, "label", void 0);
-    __decorate$6([
+    __decorate$1([
         Property('After')
     ], RibbonCheckBoxSettings.prototype, "labelPosition", void 0);
-    __decorate$6([
+    __decorate$1([
         Property({})
     ], RibbonCheckBoxSettings.prototype, "htmlAttributes", void 0);
-    __decorate$6([
+    __decorate$1([
         Event()
     ], RibbonCheckBoxSettings.prototype, "created", void 0);
-    __decorate$6([
+    __decorate$1([
         Event()
     ], RibbonCheckBoxSettings.prototype, "change", void 0);
     return RibbonCheckBoxSettings;
 }(ChildProperty));
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
+var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -271,7 +271,7 @@ var __extends$7 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (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;
@@ -281,7 +281,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon color picker.
  */
 var RibbonColorPickerSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(RibbonColorPickerSettings, _super);
+    __extends$2(RibbonColorPickerSettings, _super);
     function RibbonColorPickerSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -294,64 +294,64 @@ var RibbonColorPickerSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonColorPickerSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$7([
+    __decorate$2([
         Property(10)
     ], RibbonColorPickerSettings.prototype, "columns", void 0);
-    __decorate$7([
+    __decorate$2([
         Property('')
     ], RibbonColorPickerSettings.prototype, "cssClass", void 0);
-    __decorate$7([
+    __decorate$2([
         Property('')
     ], RibbonColorPickerSettings.prototype, "label", void 0);
-    __decorate$7([
+    __decorate$2([
         Property(true)
     ], RibbonColorPickerSettings.prototype, "enableOpacity", void 0);
-    __decorate$7([
+    __decorate$2([
         Property('Palette')
     ], RibbonColorPickerSettings.prototype, "mode", void 0);
-    __decorate$7([
+    __decorate$2([
         Property(true)
     ], RibbonColorPickerSettings.prototype, "modeSwitcher", void 0);
-    __decorate$7([
+    __decorate$2([
         Property(false)
     ], RibbonColorPickerSettings.prototype, "noColor", void 0);
-    __decorate$7([
+    __decorate$2([
         Property(null)
     ], RibbonColorPickerSettings.prototype, "presetColors", void 0);
-    __decorate$7([
+    __decorate$2([
         Property(true)
     ], RibbonColorPickerSettings.prototype, "showButtons", void 0);
-    __decorate$7([
+    __decorate$2([
         Property('#008000ff')
     ], RibbonColorPickerSettings.prototype, "value", void 0);
-    __decorate$7([
+    __decorate$2([
         Property({})
     ], RibbonColorPickerSettings.prototype, "htmlAttributes", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "beforeClose", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "beforeOpen", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "beforeTileRender", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "created", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "change", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "open", void 0);
-    __decorate$7([
+    __decorate$2([
         Event()
     ], RibbonColorPickerSettings.prototype, "select", void 0);
     return RibbonColorPickerSettings;
 }(ChildProperty));
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
+var __extends$3 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -364,7 +364,7 @@ var __extends$8 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     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;
@@ -374,7 +374,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon combobox item.
  */
 var RibbonComboBoxSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$8(RibbonComboBoxSettings, _super);
+    __extends$3(RibbonComboBoxSettings, _super);
     function RibbonComboBoxSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -387,97 +387,97 @@ var RibbonComboBoxSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonComboBoxSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$8([
+    __decorate$3([
         Property(false)
     ], RibbonComboBoxSettings.prototype, "allowFiltering", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(true)
     ], RibbonComboBoxSettings.prototype, "autofill", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('')
     ], RibbonComboBoxSettings.prototype, "cssClass", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('')
     ], RibbonComboBoxSettings.prototype, "label", void 0);
-    __decorate$8([
+    __decorate$3([
         Property([])
     ], RibbonComboBoxSettings.prototype, "dataSource", void 0);
-    __decorate$8([
+    __decorate$3([
         Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
     ], RibbonComboBoxSettings.prototype, "fields", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('Contains')
     ], RibbonComboBoxSettings.prototype, "filterType", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "footerTemplate", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "groupTemplate", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "headerTemplate", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "index", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "itemTemplate", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('No records found')
     ], RibbonComboBoxSettings.prototype, "noRecordsTemplate", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "placeholder", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('300px')
     ], RibbonComboBoxSettings.prototype, "popupHeight", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('100%')
     ], RibbonComboBoxSettings.prototype, "popupWidth", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(true)
     ], RibbonComboBoxSettings.prototype, "showClearButton", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('None')
     ], RibbonComboBoxSettings.prototype, "sortOrder", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "text", void 0);
-    __decorate$8([
+    __decorate$3([
         Property(null)
     ], RibbonComboBoxSettings.prototype, "value", void 0);
-    __decorate$8([
+    __decorate$3([
         Property('150px')
     ], RibbonComboBoxSettings.prototype, "width", void 0);
-    __decorate$8([
+    __decorate$3([
         Property({})
     ], RibbonComboBoxSettings.prototype, "htmlAttributes", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "beforeOpen", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "change", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "close", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "created", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "filtering", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "open", void 0);
-    __decorate$8([
+    __decorate$3([
         Event()
     ], RibbonComboBoxSettings.prototype, "select", void 0);
     return RibbonComboBoxSettings;
 }(ChildProperty));
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
+var __extends$4 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -490,7 +490,7 @@ var __extends$9 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -500,7 +500,7 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon DropDownButton item.
  */
 var RibbonDropDownSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$9(RibbonDropDownSettings, _super);
+    __extends$4(RibbonDropDownSettings, _super);
     function RibbonDropDownSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -513,55 +513,55 @@ var RibbonDropDownSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonDropDownSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$9([
+    __decorate$4([
         Property('')
     ], RibbonDropDownSettings.prototype, "closeActionEvents", void 0);
-    __decorate$9([
+    __decorate$4([
         Property('')
     ], RibbonDropDownSettings.prototype, "content", void 0);
-    __decorate$9([
+    __decorate$4([
         Property('')
     ], RibbonDropDownSettings.prototype, "cssClass", void 0);
-    __decorate$9([
+    __decorate$4([
         Property('')
     ], RibbonDropDownSettings.prototype, "iconCss", void 0);
-    __decorate$9([
+    __decorate$4([
         Collection([], Item)
     ], RibbonDropDownSettings.prototype, "items", void 0);
-    __decorate$9([
+    __decorate$4([
         Property('')
     ], RibbonDropDownSettings.prototype, "target", void 0);
-    __decorate$9([
+    __decorate$4([
         Property(false)
     ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
-    __decorate$9([
+    __decorate$4([
         Property({})
     ], RibbonDropDownSettings.prototype, "htmlAttributes", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeClose", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeItemRender", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeOpen", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "close", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "created", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "open", void 0);
-    __decorate$9([
+    __decorate$4([
         Event()
     ], RibbonDropDownSettings.prototype, "select", void 0);
     return RibbonDropDownSettings;
 }(ChildProperty));
 
-var __extends$10 = (undefined && undefined.__extends) || (function () {
+var __extends$5 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -574,7 +574,7 @@ var __extends$10 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$10 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     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;
@@ -584,7 +584,7 @@ var __decorate$10 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon SplitButton item.
  */
 var RibbonSplitButtonSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$10(RibbonSplitButtonSettings, _super);
+    __extends$5(RibbonSplitButtonSettings, _super);
     function RibbonSplitButtonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -597,55 +597,55 @@ var RibbonSplitButtonSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonSplitButtonSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$10([
+    __decorate$5([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "closeActionEvents", void 0);
-    __decorate$10([
+    __decorate$5([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "content", void 0);
-    __decorate$10([
+    __decorate$5([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "cssClass", void 0);
-    __decorate$10([
+    __decorate$5([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "iconCss", void 0);
-    __decorate$10([
+    __decorate$5([
         Collection([], Item)
     ], RibbonSplitButtonSettings.prototype, "items", void 0);
-    __decorate$10([
+    __decorate$5([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "target", void 0);
-    __decorate$10([
+    __decorate$5([
         Property({})
     ], RibbonSplitButtonSettings.prototype, "htmlAttributes", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "beforeClose", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "beforeItemRender", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "beforeOpen", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "close", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "click", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "created", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "open", void 0);
-    __decorate$10([
+    __decorate$5([
         Event()
     ], RibbonSplitButtonSettings.prototype, "select", void 0);
     return RibbonSplitButtonSettings;
 }(ChildProperty));
 
-var __extends$11 = (undefined && undefined.__extends) || (function () {
+var __extends$6 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -658,7 +658,7 @@ var __extends$11 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$11 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (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;
@@ -668,29 +668,29 @@ var __decorate$11 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon tooltip.
  */
 var RibbonTooltip = /** @__PURE__ @class */ (function (_super) {
-    __extends$11(RibbonTooltip, _super);
+    __extends$6(RibbonTooltip, _super);
     function RibbonTooltip() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$11([
+    __decorate$6([
         Property('')
     ], RibbonTooltip.prototype, "cssClass", void 0);
-    __decorate$11([
+    __decorate$6([
         Property('')
     ], RibbonTooltip.prototype, "id", void 0);
-    __decorate$11([
+    __decorate$6([
         Property('')
     ], RibbonTooltip.prototype, "title", void 0);
-    __decorate$11([
+    __decorate$6([
         Property('')
     ], RibbonTooltip.prototype, "content", void 0);
-    __decorate$11([
+    __decorate$6([
         Property('')
     ], RibbonTooltip.prototype, "iconCss", void 0);
     return RibbonTooltip;
 }(ChildProperty));
 
-var __extends$13 = (undefined && undefined.__extends) || (function () {
+var __extends$7 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -703,7 +703,7 @@ var __extends$13 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$13 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (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;
@@ -713,7 +713,7 @@ var __decorate$13 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon group button settings.
  */
 var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
-    __extends$13(RibbonGroupButtonItem, _super);
+    __extends$7(RibbonGroupButtonItem, _super);
     function RibbonGroupButtonItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -726,34 +726,34 @@ var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
     RibbonGroupButtonItem.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$13([
+    __decorate$7([
         Property('')
     ], RibbonGroupButtonItem.prototype, "content", void 0);
-    __decorate$13([
+    __decorate$7([
         Property('')
     ], RibbonGroupButtonItem.prototype, "iconCss", void 0);
-    __decorate$13([
+    __decorate$7([
         Property('')
     ], RibbonGroupButtonItem.prototype, "keyTip", void 0);
-    __decorate$13([
+    __decorate$7([
         Complex({}, RibbonTooltip)
     ], RibbonGroupButtonItem.prototype, "ribbonTooltipSettings", void 0);
-    __decorate$13([
+    __decorate$7([
         Property(false)
     ], RibbonGroupButtonItem.prototype, "selected", void 0);
-    __decorate$13([
+    __decorate$7([
         Property({})
     ], RibbonGroupButtonItem.prototype, "htmlAttributes", void 0);
-    __decorate$13([
+    __decorate$7([
         Event()
     ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);
-    __decorate$13([
+    __decorate$7([
         Event()
     ], RibbonGroupButtonItem.prototype, "click", void 0);
     return RibbonGroupButtonItem;
 }(ChildProperty));
 
-var __extends$12 = (undefined && undefined.__extends) || (function () {
+var __extends$8 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -766,7 +766,7 @@ var __extends$12 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$12 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (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;
@@ -776,23 +776,23 @@ var __decorate$12 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon group button settings.
  */
 var RibbonGroupButtonSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$12(RibbonGroupButtonSettings, _super);
+    __extends$8(RibbonGroupButtonSettings, _super);
     function RibbonGroupButtonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$12([
+    __decorate$8([
         Property('')
     ], RibbonGroupButtonSettings.prototype, "header", void 0);
-    __decorate$12([
+    __decorate$8([
         Property('Single')
     ], RibbonGroupButtonSettings.prototype, "selection", void 0);
-    __decorate$12([
+    __decorate$8([
         Collection([], RibbonGroupButtonItem)
     ], RibbonGroupButtonSettings.prototype, "items", void 0);
     return RibbonGroupButtonSettings;
 }(ChildProperty));
 
-var __extends$16 = (undefined && undefined.__extends) || (function () {
+var __extends$9 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -805,7 +805,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$9 = (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;
@@ -815,29 +815,29 @@ var __decorate$16 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon gallery item.
  */
 var RibbonGalleryItem = /** @__PURE__ @class */ (function (_super) {
-    __extends$16(RibbonGalleryItem, _super);
+    __extends$9(RibbonGalleryItem, _super);
     function RibbonGalleryItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$16([
+    __decorate$9([
         Property('')
     ], RibbonGalleryItem.prototype, "content", void 0);
-    __decorate$16([
+    __decorate$9([
         Property('')
     ], RibbonGalleryItem.prototype, "iconCss", void 0);
-    __decorate$16([
+    __decorate$9([
         Property({})
     ], RibbonGalleryItem.prototype, "htmlAttributes", void 0);
-    __decorate$16([
+    __decorate$9([
         Property('')
     ], RibbonGalleryItem.prototype, "cssClass", void 0);
-    __decorate$16([
+    __decorate$9([
         Property(false)
     ], RibbonGalleryItem.prototype, "disabled", void 0);
     return RibbonGalleryItem;
 }(ChildProperty));
 
-var __extends$15 = (undefined && undefined.__extends) || (function () {
+var __extends$a = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -850,7 +850,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$a = (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;
@@ -860,29 +860,29 @@ var __decorate$15 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon gallery group.
  */
 var RibbonGalleryGroup = /** @__PURE__ @class */ (function (_super) {
-    __extends$15(RibbonGalleryGroup, _super);
+    __extends$a(RibbonGalleryGroup, _super);
     function RibbonGalleryGroup() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$15([
+    __decorate$a([
         Collection([], RibbonGalleryItem)
     ], RibbonGalleryGroup.prototype, "items", void 0);
-    __decorate$15([
+    __decorate$a([
         Property('')
     ], RibbonGalleryGroup.prototype, "header", void 0);
-    __decorate$15([
+    __decorate$a([
         Property('auto')
     ], RibbonGalleryGroup.prototype, "itemWidth", void 0);
-    __decorate$15([
+    __decorate$a([
         Property('auto')
     ], RibbonGalleryGroup.prototype, "itemHeight", void 0);
-    __decorate$15([
+    __decorate$a([
         Property('')
     ], RibbonGalleryGroup.prototype, "cssClass", void 0);
     return RibbonGalleryGroup;
 }(ChildProperty));
 
-var __extends$14 = (undefined && undefined.__extends) || (function () {
+var __extends$b = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -895,7 +895,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$b = (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;
@@ -905,53 +905,53 @@ var __decorate$14 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon gallery settings.
  */
 var RibbonGallerySettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$14(RibbonGallerySettings, _super);
+    __extends$b(RibbonGallerySettings, _super);
     function RibbonGallerySettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$14([
+    __decorate$b([
         Collection([], RibbonGalleryGroup)
     ], RibbonGallerySettings.prototype, "groups", void 0);
-    __decorate$14([
+    __decorate$b([
         Property(3)
     ], RibbonGallerySettings.prototype, "itemCount", void 0);
-    __decorate$14([
+    __decorate$b([
         Property(null)
     ], RibbonGallerySettings.prototype, "selectedItemIndex", void 0);
-    __decorate$14([
+    __decorate$b([
         Property('auto')
     ], RibbonGallerySettings.prototype, "popupHeight", void 0);
-    __decorate$14([
+    __decorate$b([
         Property('auto')
     ], RibbonGallerySettings.prototype, "popupWidth", void 0);
-    __decorate$14([
+    __decorate$b([
         Property('')
     ], RibbonGallerySettings.prototype, "template", void 0);
-    __decorate$14([
+    __decorate$b([
         Property('')
     ], RibbonGallerySettings.prototype, "popupTemplate", void 0);
-    __decorate$14([
+    __decorate$b([
         Event()
     ], RibbonGallerySettings.prototype, "popupOpen", void 0);
-    __decorate$14([
+    __decorate$b([
         Event()
     ], RibbonGallerySettings.prototype, "popupClose", void 0);
-    __decorate$14([
+    __decorate$b([
         Event()
     ], RibbonGallerySettings.prototype, "itemHover", void 0);
-    __decorate$14([
+    __decorate$b([
         Event()
     ], RibbonGallerySettings.prototype, "beforeItemRender", void 0);
-    __decorate$14([
+    __decorate$b([
         Event()
     ], RibbonGallerySettings.prototype, "beforeSelect", void 0);
-    __decorate$14([
+    __decorate$b([
         Event()
     ], RibbonGallerySettings.prototype, "select", void 0);
     return RibbonGallerySettings;
 }(ChildProperty));
 
-var __extends$4 = (undefined && undefined.__extends) || (function () {
+var __extends$c = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -964,7 +964,7 @@ var __extends$4 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (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;
@@ -974,7 +974,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon item.
  */
 var RibbonItem = /** @__PURE__ @class */ (function (_super) {
-    __extends$4(RibbonItem, _super);
+    __extends$c(RibbonItem, _super);
     function RibbonItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -987,64 +987,64 @@ var RibbonItem = /** @__PURE__ @class */ (function (_super) {
     RibbonItem.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$4([
+    __decorate$c([
         Property('')
     ], RibbonItem.prototype, "keyTip", void 0);
-    __decorate$4([
+    __decorate$c([
         Property(RibbonItemSize.Medium)
     ], RibbonItem.prototype, "activeSize", void 0);
-    __decorate$4([
+    __decorate$c([
         Property(RibbonItemSize.Small | RibbonItemSize.Medium | RibbonItemSize.Large)
     ], RibbonItem.prototype, "allowedSizes", void 0);
-    __decorate$4([
+    __decorate$c([
         Property('')
     ], RibbonItem.prototype, "id", void 0);
-    __decorate$4([
+    __decorate$c([
         Property('')
     ], RibbonItem.prototype, "cssClass", void 0);
-    __decorate$4([
+    __decorate$c([
         Property(false)
     ], RibbonItem.prototype, "disabled", void 0);
-    __decorate$4([
+    __decorate$c([
         Property('')
     ], RibbonItem.prototype, "itemTemplate", void 0);
-    __decorate$4([
+    __decorate$c([
         Property('Button')
     ], RibbonItem.prototype, "type", void 0);
-    __decorate$4([
+    __decorate$c([
         Property(DisplayMode.Auto)
     ], RibbonItem.prototype, "displayOptions", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonTooltip)
     ], RibbonItem.prototype, "ribbonTooltipSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonButtonSettings)
     ], RibbonItem.prototype, "buttonSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonDropDownSettings)
     ], RibbonItem.prototype, "dropDownSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonCheckBoxSettings)
     ], RibbonItem.prototype, "checkBoxSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonColorPickerSettings)
     ], RibbonItem.prototype, "colorPickerSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonComboBoxSettings)
     ], RibbonItem.prototype, "comboBoxSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonSplitButtonSettings)
     ], RibbonItem.prototype, "splitButtonSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonGroupButtonSettings)
     ], RibbonItem.prototype, "groupButtonSettings", void 0);
-    __decorate$4([
+    __decorate$c([
         Complex({}, RibbonGallerySettings)
     ], RibbonItem.prototype, "gallerySettings", void 0);
     return RibbonItem;
 }(ChildProperty));
 
-var __extends$3 = (undefined && undefined.__extends) || (function () {
+var __extends$d = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1057,7 +1057,7 @@ var __extends$3 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (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;
@@ -1067,7 +1067,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the items of Ribbon.
  */
 var RibbonCollection = /** @__PURE__ @class */ (function (_super) {
-    __extends$3(RibbonCollection, _super);
+    __extends$d(RibbonCollection, _super);
     function RibbonCollection() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1080,19 +1080,19 @@ var RibbonCollection = /** @__PURE__ @class */ (function (_super) {
     RibbonCollection.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$3([
+    __decorate$d([
         Property('')
     ], RibbonCollection.prototype, "id", void 0);
-    __decorate$3([
+    __decorate$d([
         Property('')
     ], RibbonCollection.prototype, "cssClass", void 0);
-    __decorate$3([
+    __decorate$d([
         Collection([], RibbonItem)
     ], RibbonCollection.prototype, "items", void 0);
     return RibbonCollection;
 }(ChildProperty));
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
+var __extends$e = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1105,7 +1105,7 @@ var __extends$2 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (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;
@@ -1115,7 +1115,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon group.
  */
 var RibbonGroup = /** @__PURE__ @class */ (function (_super) {
-    __extends$2(RibbonGroup, _super);
+    __extends$e(RibbonGroup, _super);
     function RibbonGroup() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1128,52 +1128,52 @@ var RibbonGroup = /** @__PURE__ @class */ (function (_super) {
     RibbonGroup.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "keyTip", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "launcherIconKeyTip", void 0);
-    __decorate$2([
+    __decorate$e([
         Collection([], RibbonCollection)
     ], RibbonGroup.prototype, "collections", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "cssClass", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "id", void 0);
-    __decorate$2([
+    __decorate$e([
         Property(false)
     ], RibbonGroup.prototype, "isCollapsed", void 0);
-    __decorate$2([
+    __decorate$e([
         Property(true)
     ], RibbonGroup.prototype, "isCollapsible", void 0);
-    __decorate$2([
+    __decorate$e([
         Property(false)
     ], RibbonGroup.prototype, "enableGroupOverflow", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "groupIconCss", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "header", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('Column')
     ], RibbonGroup.prototype, "orientation", void 0);
-    __decorate$2([
+    __decorate$e([
         Property('')
     ], RibbonGroup.prototype, "overflowHeader", void 0);
-    __decorate$2([
+    __decorate$e([
         Property(0)
     ], RibbonGroup.prototype, "priority", void 0);
-    __decorate$2([
+    __decorate$e([
         Property(false)
     ], RibbonGroup.prototype, "showLauncherIcon", void 0);
     return RibbonGroup;
 }(ChildProperty));
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
+var __extends$f = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1186,7 +1186,7 @@ var __extends$1 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (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;
@@ -1196,7 +1196,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon tab.
  */
 var RibbonTab = /** @__PURE__ @class */ (function (_super) {
-    __extends$1(RibbonTab, _super);
+    __extends$f(RibbonTab, _super);
     function RibbonTab() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1209,25 +1209,25 @@ var RibbonTab = /** @__PURE__ @class */ (function (_super) {
     RibbonTab.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$1([
+    __decorate$f([
         Property('')
     ], RibbonTab.prototype, "keyTip", void 0);
-    __decorate$1([
+    __decorate$f([
         Property('')
     ], RibbonTab.prototype, "id", void 0);
-    __decorate$1([
+    __decorate$f([
         Property('')
     ], RibbonTab.prototype, "cssClass", void 0);
-    __decorate$1([
+    __decorate$f([
         Collection([], RibbonGroup)
     ], RibbonTab.prototype, "groups", void 0);
-    __decorate$1([
+    __decorate$f([
         Property('')
     ], RibbonTab.prototype, "header", void 0);
     return RibbonTab;
 }(ChildProperty));
 
-var __extends$17 = (undefined && undefined.__extends) || (function () {
+var __extends$g = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1240,7 +1240,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$g = (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;
@@ -1250,7 +1250,7 @@ var __decorate$17 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon file menu settings.
  */
 var FileMenuSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$17(FileMenuSettings, _super);
+    __extends$g(FileMenuSettings, _super);
     function FileMenuSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1263,55 +1263,55 @@ var FileMenuSettings = /** @__PURE__ @class */ (function (_super) {
     FileMenuSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$17([
+    __decorate$g([
         Property('File')
     ], FileMenuSettings.prototype, "text", void 0);
-    __decorate$17([
+    __decorate$g([
         Property(false)
     ], FileMenuSettings.prototype, "visible", void 0);
-    __decorate$17([
+    __decorate$g([
         Collection([], MenuItem)
     ], FileMenuSettings.prototype, "menuItems", void 0);
-    __decorate$17([
+    __decorate$g([
         Property(false)
     ], FileMenuSettings.prototype, "showItemOnClick", void 0);
-    __decorate$17([
+    __decorate$g([
         Complex({}, MenuAnimationSettings)
     ], FileMenuSettings.prototype, "animationSettings", void 0);
-    __decorate$17([
+    __decorate$g([
         Property('')
     ], FileMenuSettings.prototype, "itemTemplate", void 0);
-    __decorate$17([
+    __decorate$g([
         Property('')
     ], FileMenuSettings.prototype, "popupTemplate", void 0);
-    __decorate$17([
+    __decorate$g([
         Complex({}, RibbonTooltip)
     ], FileMenuSettings.prototype, "ribbonTooltipSettings", void 0);
-    __decorate$17([
+    __decorate$g([
         Event()
     ], FileMenuSettings.prototype, "beforeClose", void 0);
-    __decorate$17([
+    __decorate$g([
         Event()
     ], FileMenuSettings.prototype, "beforeOpen", void 0);
-    __decorate$17([
+    __decorate$g([
         Event()
     ], FileMenuSettings.prototype, "beforeItemRender", void 0);
-    __decorate$17([
+    __decorate$g([
         Event()
     ], FileMenuSettings.prototype, "close", void 0);
-    __decorate$17([
+    __decorate$g([
         Event()
     ], FileMenuSettings.prototype, "open", void 0);
-    __decorate$17([
+    __decorate$g([
         Event()
     ], FileMenuSettings.prototype, "select", void 0);
-    __decorate$17([
+    __decorate$g([
         Property('')
     ], FileMenuSettings.prototype, "keyTip", void 0);
     return FileMenuSettings;
 }(ChildProperty));
 
-var __extends$19 = (undefined && undefined.__extends) || (function () {
+var __extends$h = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1324,7 +1324,7 @@ var __extends$19 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$19 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (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;
@@ -1334,23 +1334,23 @@ var __decorate$19 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon backstage back button.
  */
 var BackstageBackButton = /** @__PURE__ @class */ (function (_super) {
-    __extends$19(BackstageBackButton, _super);
+    __extends$h(BackstageBackButton, _super);
     function BackstageBackButton() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$19([
+    __decorate$h([
         Property('')
     ], BackstageBackButton.prototype, "text", void 0);
-    __decorate$19([
+    __decorate$h([
         Property('')
     ], BackstageBackButton.prototype, "iconCss", void 0);
-    __decorate$19([
+    __decorate$h([
         Property(true)
     ], BackstageBackButton.prototype, "visible", void 0);
     return BackstageBackButton;
 }(ChildProperty));
 
-var __extends$20 = (undefined && undefined.__extends) || (function () {
+var __extends$i = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1363,7 +1363,7 @@ var __extends$20 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$20 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (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;
@@ -1373,38 +1373,38 @@ var __decorate$20 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon backstage back button.
  */
 var BackstageItem = /** @__PURE__ @class */ (function (_super) {
-    __extends$20(BackstageItem, _super);
+    __extends$i(BackstageItem, _super);
     function BackstageItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$20([
+    __decorate$i([
         Property('')
     ], BackstageItem.prototype, "text", void 0);
-    __decorate$20([
+    __decorate$i([
         Property('')
     ], BackstageItem.prototype, "id", void 0);
-    __decorate$20([
+    __decorate$i([
         Property('')
     ], BackstageItem.prototype, "keyTip", void 0);
-    __decorate$20([
+    __decorate$i([
         Property('')
     ], BackstageItem.prototype, "content", void 0);
-    __decorate$20([
+    __decorate$i([
         Property('')
     ], BackstageItem.prototype, "iconCss", void 0);
-    __decorate$20([
+    __decorate$i([
         Property(false)
     ], BackstageItem.prototype, "separator", void 0);
-    __decorate$20([
+    __decorate$i([
         Property(false)
     ], BackstageItem.prototype, "isFooter", void 0);
-    __decorate$20([
+    __decorate$i([
         Event()
     ], BackstageItem.prototype, "backStageItemClick", void 0);
     return BackstageItem;
 }(ChildProperty));
 
-var __extends$18 = (undefined && undefined.__extends) || (function () {
+var __extends$j = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1417,7 +1417,7 @@ var __extends$18 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$18 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (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;
@@ -1427,7 +1427,7 @@ var __decorate$18 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon file menu settings.
  */
 var BackStageMenu = /** @__PURE__ @class */ (function (_super) {
-    __extends$18(BackStageMenu, _super);
+    __extends$j(BackStageMenu, _super);
     function BackStageMenu() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1440,40 +1440,40 @@ var BackStageMenu = /** @__PURE__ @class */ (function (_super) {
     BackStageMenu.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$18([
+    __decorate$j([
         Property('File')
     ], BackStageMenu.prototype, "text", void 0);
-    __decorate$18([
+    __decorate$j([
         Property('')
     ], BackStageMenu.prototype, "keyTip", void 0);
-    __decorate$18([
+    __decorate$j([
         Property(false)
     ], BackStageMenu.prototype, "visible", void 0);
-    __decorate$18([
+    __decorate$j([
         Property('auto')
     ], BackStageMenu.prototype, "height", void 0);
-    __decorate$18([
+    __decorate$j([
         Property('auto')
     ], BackStageMenu.prototype, "width", void 0);
-    __decorate$18([
+    __decorate$j([
         Property(null)
     ], BackStageMenu.prototype, "target", void 0);
-    __decorate$18([
+    __decorate$j([
         Complex({}, BackstageBackButton)
     ], BackStageMenu.prototype, "backButton", void 0);
-    __decorate$18([
+    __decorate$j([
         Collection([], BackstageItem)
     ], BackStageMenu.prototype, "items", void 0);
-    __decorate$18([
+    __decorate$j([
         Property('')
     ], BackStageMenu.prototype, "template", void 0);
-    __decorate$18([
+    __decorate$j([
         Complex({}, RibbonTooltip)
     ], BackStageMenu.prototype, "ribbonTooltipSettings", void 0);
     return BackStageMenu;
 }(ChildProperty));
 
-var __extends$21 = (undefined && undefined.__extends) || (function () {
+var __extends$k = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1486,7 +1486,7 @@ var __extends$21 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$21 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (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;
@@ -1496,7 +1496,7 @@ var __decorate$21 = (undefined && undefined.__decorate) || function (decorators,
  * Defines the ribbon contextual tab.
  */
 var RibbonContextualTabSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$21(RibbonContextualTabSettings, _super);
+    __extends$k(RibbonContextualTabSettings, _super);
     function RibbonContextualTabSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1509,20 +1509,18 @@ var RibbonContextualTabSettings = /** @__PURE__ @class */ (function (_super) {
     RibbonContextualTabSettings.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
-    __decorate$21([
+    __decorate$k([
         Property(false)
     ], RibbonContextualTabSettings.prototype, "visible", void 0);
-    __decorate$21([
+    __decorate$k([
         Property(false)
     ], RibbonContextualTabSettings.prototype, "isSelected", void 0);
-    __decorate$21([
+    __decorate$k([
         Collection([], RibbonTab)
     ], RibbonContextualTabSettings.prototype, "tabs", void 0);
     return RibbonContextualTabSettings;
 }(ChildProperty));
 
-// export * from './file-menu';
-
 /**
  * Specifies the File Manager internal ID's
  */
@@ -1725,6 +1723,17 @@ var RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 var RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
 
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -1767,14 +1776,23 @@ var RibbonButton = /** @__PURE__ @class */ (function () {
             created: btnSettings.created
         }, buttonEle);
         if (btnSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+            var htmlAttr = __assign({}, btnSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         buttonEle.onclick = function (e) {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(_this, e);
             }
         };
-        buttonEle.setAttribute('aria-label', btnSettings.content);
+        if (btnSettings.content) {
+            buttonEle.setAttribute('aria-label', btnSettings.content);
+        }
+        else {
+            buttonEle.setAttribute('aria-label', 'button');
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -1882,6 +1900,17 @@ var RibbonButton = /** @__PURE__ @class */ (function () {
     return RibbonButton;
 }());
 
+var __assign$1 = (undefined && undefined.__assign) || function () {
+    __assign$1 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -1910,6 +1939,13 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
         });
         itemEle.appendChild(inputEle);
         var checkBoxSettings = item.checkBoxSettings;
+        var htmlAttr = {};
+        if (checkBoxSettings.htmlAttributes) {
+            htmlAttr = __assign$1({}, checkBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new CheckBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -1920,7 +1956,7 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
-            htmlAttributes: checkBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             change: function (e) {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(_this, e);
@@ -2014,6 +2050,17 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
     return RibbonCheckBox;
 }());
 
+var __assign$2 = (undefined && undefined.__assign) || function () {
+    __assign$2 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$2.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2080,7 +2127,11 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
             select: colorPickerSettings.select
         }, inputEle);
         if (colorPickerSettings.htmlAttributes) {
-            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+            var htmlAttr = __assign$2({}, colorPickerSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(inputEle, htmlAttr);
         }
         var wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
@@ -2234,6 +2285,17 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
     return RibbonColorPicker;
 }());
 
+var __assign$3 = (undefined && undefined.__assign) || function () {
+    __assign$3 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$3.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2262,6 +2324,13 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
         });
         itemEle.appendChild(inputEle);
         var comboBoxSettings = item.comboBoxSettings;
+        var htmlAttr = {};
+        if (comboBoxSettings.htmlAttributes) {
+            htmlAttr = __assign$3({}, comboBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new ComboBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -2293,7 +2362,7 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
-            htmlAttributes: comboBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             close: function (e) {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(_this, e);
@@ -2436,6 +2505,17 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
     return RibbonComboBox;
 }());
 
+var __assign$4 = (undefined && undefined.__assign) || function () {
+    __assign$4 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$4.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2496,7 +2576,11 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             select: dropDownSettings.select
         }).appendTo(buttonEle);
         if (dropDownSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+            var htmlAttr = __assign$4({}, dropDownSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
     };
     /**
@@ -2874,6 +2958,17 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
     return RibbonDropDown;
 }());
 
+var __assign$5 = (undefined && undefined.__assign) || function () {
+    __assign$5 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$5.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2943,7 +3038,11 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
             }
         }, buttonEle);
         if (splitButtonSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+            var htmlAttr = __assign$5({}, splitButtonSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = function (e) {
@@ -3524,6 +3623,10 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
                     groupButtonEle.classList.add(RIBBON_GROUP_BUTTON_CONTENT);
+                    groupButtonEle.setAttribute('aria-label', groupBtnSettings.items[parseInt(i.toString(), 10)].content);
+                }
+                else {
+                    groupButtonEle.setAttribute('aria-label', 'groupbuttonitem');
                 }
                 var buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
@@ -3642,7 +3745,8 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 for (var j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
-                        grpBtnSettings.items[parseInt(j.toString(), 10)].setProperties({ selected: false }, true);
+                        grpBtnSettings.items[parseInt(j.toString(), 10)].
+                            setProperties({ selected: false }, true);
                     }
                 }
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
@@ -3663,10 +3767,12 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
                 if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].
+                        setProperties({ selected: true }, true);
                 }
                 else {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: false }, true);
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].
+                        setProperties({ selected: false }, true);
                 }
                 var activeEleCount = 0;
                 for (var n = 0; n < grpBtnSettings.items.length; n++) {
@@ -3869,6 +3975,7 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
      *
      * @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
      */
@@ -3974,7 +4081,12 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         this.count = 0;
         this.isAdded = false;
         this.galleryItemsIndex = 0;
+        this.registeredTemplate = {};
         this.parent = parent;
+        var ref = 'viewContainerRef';
+        setValue('registeredTemplate', this.registeredTemplate, this);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setValue(ref, this.parent["" + ref], this);
     }
     RibbonGallery.prototype.getModuleName = function () {
         return 'ribbonGallery';
@@ -3998,13 +4110,19 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             id: item.id + '_popupButton',
             className: 'e-ribbon-gallery-button e-icons e-drop-icon'
         });
+        buttonEle.setAttribute('aria-label', 'gallerydropdownbutton');
         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);
+                if (popupEle.classList.contains('e-popup-close')) {
+                    _this.showPopup(popup, popupEle, args, gallerySettings, item.id);
+                }
+                else {
+                    _this.hidePopup(popup, popupEle, args, gallerySettings, item.id);
+                }
             }
         };
         document.onclick = function (args) {
@@ -4060,7 +4178,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             var _loop_2 = function (j) {
                 galleryEle = this_1.parent.createElement('li', {
                     className: 'e-ribbon-gallery-item',
-                    id: galleryContainerEle.id + '_gallery' + j,
+                    id: (isPopup ? 'popup_' : '') + galleryContainerEle.id + '_gallery' + j,
                     attrs: { 'tabindex': '0' }
                 });
                 var itemEventArgs = { name: 'beforeItemRender', item: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)] };
@@ -4079,11 +4197,11 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 }
                 this_1.count = this_1.count + 1;
                 galleryEle.onclick = function (e) {
-                    _this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                    _this.setActiveState(e.currentTarget, gallerySettings, id, true, e, isPopup);
                 };
                 galleryEle.onkeydown = function (e) {
                     if (e.key === 'Enter' || e.key === ' ') {
-                        _this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                        _this.setActiveState(e.currentTarget, gallerySettings, id, true, e, isPopup);
                     }
                 };
                 galleryEle.onmouseover = function (e) {
@@ -4103,9 +4221,12 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                         galleryContainerEle.style.flexFlow = 'wrap';
                     }
                 }
-                if ((!gallerySettings.template && !gallerySettings.popupTemplate) || ((gallerySettings.template && !gallerySettings.popupTemplate) && isPopup) || ((gallerySettings.popupTemplate && !gallerySettings.template) && !isPopup)) {
+                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);
+                        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', {
@@ -4149,7 +4270,12 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             if (this_1.isAdded && !isPopup) {
                 return "break";
             }
-            !isPopup ? galleryWrapper.appendChild(galleryContainerEle) : itemEle.appendChild(galleryContainerEle);
+            if (!isPopup) {
+                galleryWrapper.appendChild(galleryContainerEle);
+            }
+            else {
+                itemEle.appendChild(galleryContainerEle);
+            }
             if (isPopup && gallerySettings.groups[parseInt(i.toString(), 10)].header) {
                 var headerEle = (this_1.parent.createElement('div', {
                     className: 'e-ribbon-gallery-header',
@@ -4166,6 +4292,14 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         }
         this.count = 0;
         this.isAdded = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.parent.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.parent.portals = this.parent.portals.concat(this['portals']);
+            this.parent['renderReactTemplates']();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this['portals'] = undefined;
+        }
     };
     RibbonGallery.prototype.setWrapperWidth = function (itemCount, galleryWrapper, gallerySettings, itemID) {
         var count = 1;
@@ -4173,74 +4307,77 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         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;
+                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++;
                 }
+                else {
+                    isWidthApplied = true;
+                    break;
+                }
+                count++;
             }
             if (isWidthApplied) {
                 break;
             }
         }
-        if (itemsWidth > 0)
+        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) {
+    RibbonGallery.prototype.checkAvailableHeight = function (activeContent) {
         var galleryWrapperItems = activeContent.querySelectorAll('.e-ribbon-gallery-wrapper');
         for (var n = 0; n < galleryWrapperItems.length; n++) {
+            var count = 0;
+            var simplifiedItemsCount = 0;
             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 galleryWrapperHeight = galleryWrapper.offsetHeight;
             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++;
+                    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) {
+                            if (this.parent.activeLayout === 'Classic') {
+                                if (galleryItemEle.classList.contains('e-hidden')) {
+                                    galleryItemEle.classList.remove('e-hidden');
+                                }
                                 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;
+                                    var itemsValues = 0;
+                                    var itemStyles = window.getComputedStyle(galleryItemEle);
+                                    if (itemStyles) {
+                                        var marginWidth = parseFloat(itemStyles.marginTop) + parseFloat(itemStyles.marginBottom);
+                                        if (!(isNullOrUndefined(marginWidth))) {
+                                            itemsValues += marginWidth;
                                         }
-                                        if (galleryWrapperHeight > (galleryItemEle.offsetHeight + itemsValues)) {
+                                    }
+                                    count++;
+                                    if (itemProp.item.gallerySettings.itemCount === count) {
+                                        count = 0;
+                                        if (galleryWrapperHeight >= (galleryItemEle.offsetHeight + itemsValues)) {
                                             galleryWrapperHeight -= (galleryItemEle.offsetHeight + itemsValues);
                                         }
                                         else {
@@ -4248,30 +4385,49 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                                             galleryItemEle.remove();
                                         }
                                     }
-                                    if (itemsCount === itemProp.item.gallerySettings.itemCount) {
-                                        itemsCount = 0;
+                                    else if (galleryWrapperHeight < (galleryItemEle.offsetHeight + itemsValues)) {
+                                        isHeight = true;
+                                        galleryItemEle.remove();
                                     }
                                 }
                                 else {
                                     galleryItemEle.remove();
                                 }
                             }
+                            else {
+                                simplifiedItemsCount++;
+                                if (simplifiedItemsCount > itemProp.item.gallerySettings.itemCount) {
+                                    galleryItemEle.classList.add('e-hidden');
+                                }
+                            }
                         }
                     }
                 }
             }
         }
     };
-    RibbonGallery.prototype.checkCollision = function (popup, popupEle) {
+    /**
+     * Checks the popup collision.
+     *
+     * @param {Popup} popup - Gets the popup.
+     * @param {HTMLElement} popupEle - Gets the popup element.
+     * @param {number} offsetValue - Gets the offset value of gallery popup button.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGallery.prototype.checkCollision = function (popup, popupEle, offsetValue) {
+        if (offsetValue === void 0) { offsetValue = 0; }
         var paddingWidth = 0;
         var marginWidth = 0;
         if (popupEle) {
-            var screenWidth = window.innerWidth;
+            var windowWidth = window.innerWidth;
+            var screenWidth = offsetValue === 0 ? windowWidth : Math.abs(windowWidth - (windowWidth - offsetValue));
             var paddingStyles = window.getComputedStyle(popupEle);
             if (paddingStyles) {
                 paddingWidth = parseFloat(paddingStyles.paddingLeft) + parseFloat(paddingStyles.paddingRight);
-                if (!(isNullOrUndefined(paddingWidth)))
+                if (!(isNullOrUndefined(paddingWidth))) {
                     screenWidth = screenWidth - paddingWidth;
+                }
             }
             var popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
             if (popup.width !== 'auto') {
@@ -4283,15 +4439,16 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             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)))
+                    var popupItemStyles = window.getComputedStyle(popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)]);
+                    if (popupItemStyles) {
+                        marginWidth = parseFloat(popupItemStyles.marginLeft) + parseFloat(popupItemStyles.marginRight);
+                        if (!(isNullOrUndefined(marginWidth))) {
                             itemsWidth += marginWidth;
+                        }
                     }
-                    itemsWidth += popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)].offsetWidth;
+                    itemsWidth += Math.round(parseFloat(popupItemStyles.width));
                     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';
+                        popupEle.style.width = ((itemsWidth + Math.abs(paddingWidth - marginWidth)) - Math.round(parseFloat(popupItemStyles.width))) + 'px';
                         isCollideOccurs = true;
                         break;
                     }
@@ -4300,6 +4457,9 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                     popupContainerItems.forEach(function (ele) {
                         ele.style.flexFlow = 'wrap';
                     });
+                    if (popup.height === 'auto') {
+                        this.setGalleryPopupHeight(popupEle, parseFloat(paddingStyles.height), parseFloat(paddingStyles.top));
+                    }
                     break;
                 }
             }
@@ -4313,9 +4473,20 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 else {
                     popupEle.style.width = (popup.width).toString();
                 }
+                if (popup.height === 'auto') {
+                    this.setGalleryPopupHeight(popupEle, parseFloat(paddingStyles.height), parseFloat(paddingStyles.top));
+                }
             }
         }
     };
+    RibbonGallery.prototype.setGalleryPopupHeight = function (popupEle, popupHeight, popupTop) {
+        if (window.innerHeight < popupHeight || window.innerHeight < Math.round(popupHeight + popupTop)) {
+            popupEle.style.height = (window.innerHeight - popupTop) + 'px';
+        }
+        else {
+            popupEle.style.height = 'auto';
+        }
+    };
     RibbonGallery.prototype.createPopup = function (item, buttonEle) {
         var popupContainer = this.parent.createElement('div', {
             className: 'e-ribbon-popup-container',
@@ -4350,15 +4521,18 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
      */
     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 (activeLayout === 'Simplified') {
+                        galleryIcons[parseInt(i.toString(), 10)].classList.add('e-hidden');
+                    }
+                    else {
+                        galleryIcons[parseInt(i.toString(), 10)].classList.remove('e-hidden');
+                    }
                 }
             }
             if (galleryContainer.length && itemProp) {
@@ -4366,24 +4540,20 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                     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 (activeLayout === 'Simplified') {
+                                    galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'nowrap';
+                                }
+                                else {
+                                    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');
-                            }
-                        }
-                    }
-                }
+            var activeContent = this.parent.tabObj.element.querySelector('#' + this.parent.tabs[this.parent.selectedTab].id + CONTENT_ID);
+            if (activeContent) {
+                this.checkAvailableHeight(activeContent);
             }
         }
     };
@@ -4392,15 +4562,14 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
      *
      * @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) {
+    RibbonGallery.prototype.addOverFlowEvents = function (item, itemEle) {
         var _this = this;
         if (itemEle.closest('.e-ribbon-overflow-target')) {
             var buttonEle = this.parent.createElement('button', {
-                id: item.id,
+                id: item.id
             });
             itemEle.appendChild(buttonEle);
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
@@ -4408,8 +4577,9 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 ele.classList.add('e-hidden');
             });
             var popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
-            if (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 : '';
@@ -4429,7 +4599,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             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({
+            var dropdown = new DropDownButton({
                 iconCss: iconCss,
                 content: content,
                 target: popupContainerEle_1,
@@ -4438,7 +4608,6 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 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);
@@ -4448,11 +4617,11 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 }
             }, buttonEle);
             if (popup.width !== 'auto') {
-                dropdown_1.dropDown.width = formatUnit(popup.width);
+                dropdown.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();
+                dropdown.dropDown.height = formatUnit(popup.height);
+                dropdown.dropDown.element.style.height = (popup.height).toString();
             }
         }
     };
@@ -4482,7 +4651,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             remove(galleryDDBEle);
         }
     };
-    RibbonGallery.prototype.setActiveState = function (galleryEle, gallerySettings, itemID, isInteracted, event) {
+    RibbonGallery.prototype.setActiveState = function (galleryEle, gallerySettings, itemID, isInteracted, event, isPopup) {
         var previousItem;
         var currentItem;
         var itemEle = document.querySelector('#' + itemID + CONTAINER_ID);
@@ -4497,12 +4666,13 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 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) {
+                if (galleryEle.id === (isPopup ? 'popup_' : '') + itemID + '_galleryContainer' + i + '_gallery' + j) {
                     currentItem = gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)];
                 }
             }
         }
-        var galleryItem = document.querySelectorAll('#' + galleryEle.id);
+        var galleryItem = document.getElementById(galleryEle.id);
+        var galleryItemPopup;
         var selectingEventArgs = { cancel: false, name: 'beforeSelect', previousItem: previousItem, currentItem: currentItem, isInteracted: isInteracted, event: event };
         if (gallerySettings.beforeSelect) {
             gallerySettings.beforeSelect.call(this, selectingEventArgs);
@@ -4514,9 +4684,16 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
             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');
+            if (!galleryItem.id.startsWith('popup_')) {
+                galleryItemPopup = document.getElementById('popup_' + galleryEle.id);
+            }
+            else if (document.getElementById(galleryItem.id.slice(6))) {
+                galleryItemPopup = document.getElementById(galleryItem.id.slice(6));
+            }
+            if (galleryItemPopup) {
+                galleryItemPopup.classList.add('e-ribbon-gallery-selected');
             }
+            galleryItem.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++) {
@@ -4553,6 +4730,9 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         var buttonEle = document.querySelector('#' + itemID + '_popupButton');
         buttonEle.classList.add('e-gallery-button-active');
         var buttonPosition = buttonEle.getBoundingClientRect();
+        if (popupEle.offsetWidth > buttonPosition.left) {
+            this.checkCollision(popup, popupEle, buttonPosition.left);
+        }
         var offsetX = Math.abs((popupEle.offsetWidth - buttonPosition.left)) + buttonEle.offsetWidth;
         popupEle.style.left = offsetX + 'px';
         popupEle.style.top = popupEle.getBoundingClientRect().top + 2 + 'px';
@@ -4634,10 +4814,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                     galleryPopupEle[this.galleryItemsIndex].focus();
                 }
             }
-            else if (e.key === 'Enter' || e.code === 'Space') {
-                galleryPopupEle[this.galleryItemsIndex].click();
-            }
-            else if (e.key === 'Escape' && !isDropdown) {
+            else if ((e.key === 'Enter' || e.code === 'Space') || (e.key === 'Escape' && !isDropdown)) {
                 this.hidePopup(popup, popupEle, e, gallerySettings, itemID);
             }
         }
@@ -4653,8 +4830,7 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         if (items.cssClass) {
             galleryItemEle.classList.add(items.cssClass);
         }
-        append(templateFunction({ items: items }, this, templateName, (id + 'galleryTemplate'), this.parent.isStringTemplate), galleryItemEle);
-        this.parent['renderReactTemplates']();
+        append(templateFunction({ items: items }, this, templateName, (id + 'galleryTemplate'), this.parent.isStringTemplate, null, null, this.parent), galleryItemEle);
     };
     RibbonGallery.prototype.createGalleryPopupTemplate = function (galleryItemEle, gallerySettings, id, items) {
         galleryItemEle.classList.add('e-ribbon-gallery-popup-template');
@@ -4667,13 +4843,12 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
         if (items.cssClass) {
             galleryItemEle.classList.add(items.cssClass);
         }
-        append(templateFunction({ items: items }, this, templateName, (id + 'galleryPopupTemplate'), this.parent.isStringTemplate), galleryItemEle);
-        this.parent['renderReactTemplates']();
+        append(templateFunction({ items: items }, this, templateName, (id + 'galleryPopupTemplate'), this.parent.isStringTemplate, null, null, this.parent), galleryItemEle);
     };
     return RibbonGallery;
 }());
 
-var __extends = (undefined && undefined.__extends) || (function () {
+var __extends$l = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -4686,7 +4861,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (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;
@@ -4696,7 +4871,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  * The Ribbon Component is a structured layout to manage tools with tabs and groups.
  */
 var Ribbon = /** @__PURE__ @class */ (function (_super) {
-    __extends(Ribbon, _super);
+    __extends$l(Ribbon, _super);
     /**
      * Constructor for creating the widget.
      *
@@ -5073,7 +5248,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.ribbonKeyTipModule.removeKeytip();
         }
     };
-    Ribbon.prototype.mouseEventHandler = function (e) {
+    Ribbon.prototype.mouseEventHandler = function () {
         if (this.ribbonKeyTipModule && this.enableKeyTips) {
             this.ribbonKeyTipModule.removeKeytip();
         }
@@ -5149,25 +5324,24 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     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 (!(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 (Object.keys(this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type]).length) {
+                var keytipData = this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type];
+                for (var i = 0; i < Object.keys(this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + 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 });
+                    this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type].
+                        push({ id: id, type: type, keyTip: keyTip });
                 }
             }
             else {
-                this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)]["" + type].push({ id: id, type: type, keyTip: keyTip });
             }
-            /* eslint-enable */
         }
     };
     Ribbon.prototype.renderTabs = function () {
@@ -5254,10 +5428,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 this.isUpdateItems = false;
             }
         }
-        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
-        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule) {
-            this.ribbonGalleryModule.checkAvailableHeight(selectedIndex, e.selectedContent.firstChild);
+        if (this.ribbonGalleryModule) {
+            this.ribbonGalleryModule.checkAvailableHeight(e.selectedContent.firstChild);
         }
+        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + RIBBON_TAB_ACTIVE);
@@ -5286,7 +5460,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         break;
                     }
                 }
-                this.contextualTabs[parseInt(i.toString(), 10)].setProperties({ isSelected: isSelected }, true);
+                this.contextualTabs[parseInt(i.toString(), 10)].
+                    setProperties({ isSelected: isSelected }, true);
             }
         }
     };
@@ -5484,7 +5659,8 @@ 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) || (item.type === RibbonItemType.Gallery)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, true);
                         }
                     }
@@ -5514,6 +5690,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         return isEmptyCollection;
     };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
+        var _this = this;
         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)
@@ -5525,6 +5702,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             if (isMenu) {
                 dropdown.beforeOpen = function () {
                     if (isLeft) {
+                        if (item.type === RibbonItemType.Gallery && _this.ribbonGalleryModule) {
+                            _this.ribbonGalleryModule.checkCollision(dropDownPopup, dropDownPopup.element);
+                        }
                         dropDownPopup.element.style.setProperty('visibility', 'hidden');
                         dropDownPopup.element.style.setProperty('display', 'block');
                         dropDownPopup.setProperties({ offsetX: -1 * dropDownPopup.element.offsetWidth });
@@ -5580,7 +5760,8 @@ 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) || (item.type === RibbonItemType.Gallery)) {
+                        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);
@@ -5625,7 +5806,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
-                    if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
+                    if (overflowtarget.childElementCount === 0 ||
+                        (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                         this.removeOverflowButton(overflowDDB);
                     }
                 }
@@ -5738,8 +5920,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     overflowBtnTarget.classList.add('e-hide-group');
                 }
             }
-            isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + RIBBON_ITEM))
-                : overflowBtnTarget.append(itemEle);
+            if (isResize) {
+                overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + RIBBON_ITEM));
+            }
+            else {
+                overflowBtnTarget.append(itemEle);
+            }
         }
         else {
             if (!this.overflowDDB) {
@@ -5751,7 +5937,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.overflowDDB.element.classList.remove(HIDE_CSS);
                 var overflowEle = this.overflowDDB.target;
-                var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                var ofTabContainer = overflowEle.querySelector('#' +
+                    this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
                 if (ofTabContainer) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + CONTAINER_ID);
                     if (!ofGroupContainer) {
@@ -5769,7 +5956,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
-                    isResize ? ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + RIBBON_ITEM)) : ofGroupContainer.append(itemEle);
+                    if (isResize) {
+                        ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + RIBBON_ITEM));
+                    }
+                    else {
+                        ofGroupContainer.append(itemEle);
+                    }
                 }
                 else {
                     this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -5809,7 +6001,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 break;
             case 'Gallery':
                 if (this.activeLayout === 'Simplified') {
-                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle, overflowButton);
+                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle);
                 }
                 break;
             case 'GroupButton':
@@ -5827,7 +6019,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var overflowtarget = this.overflowDDB.target;
         overflowtarget.append(ofTabContainer);
         var itemProp = getGroup(this.tabs, groupId);
-        var ofGroupContainer = itemProp.group.overflowHeader ? this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
+        var ofGroupContainer = itemProp.group.overflowHeader ?
+            this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
         ofGroupContainer.append(itemEle);
         ofTabContainer.append(ofGroupContainer);
         if (tabIndex === this.selectedTab) {
@@ -6185,7 +6378,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canReduceItem(item)) {
-                            item.type !== RibbonItemType.GroupButton ? setWidth(item.id) : setWidth(item.id + RIBBON_GROUP_BUTTON_ID);
+                            if (item.type !== RibbonItemType.GroupButton) {
+                                setWidth(item.id);
+                            }
+                            else {
+                                setWidth(item.id + RIBBON_GROUP_BUTTON_ID);
+                            }
                             reduceItemsToSmall(k, l, l);
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
@@ -6438,7 +6636,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.handleContentSize = function (itemEle, isRemoveOverflow) {
         var itemContainer = itemEle.closest('.' + RIBBON_GROUP_CONTENT);
-        (isRemoveOverflow ? (itemContainer.classList.add(RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT)));
+        if (isRemoveOverflow) {
+            itemContainer.classList.add(RIBBON_CONTENT_HEIGHT);
+        }
+        else {
+            itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT);
+        }
     };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
         if (itemEle) {
@@ -6647,7 +6850,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         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, isContextual: isContextual
+            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex,
+            selectedIndex: nextIndex, isContextual: isContextual
         };
         this.trigger('tabSelecting', eventArgs, function (args) {
             if (args.cancel) {
@@ -6705,9 +6909,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.element.classList.add(RIBBON_SIMPLIFIED_MODE);
         }
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        if (this.ribbonGalleryModule) {
+            this.ribbonGalleryModule.checkAvailableHeight(activeContent);
+        }
         this.checkOverflow(this.selectedTab, activeContent);
-        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule)
-            this.ribbonGalleryModule.checkAvailableHeight(this.selectedTab, activeContent);
     };
     Ribbon.prototype.addOverflowButton = function (btnId, isGroupOF) {
         var _this = this;
@@ -6765,7 +6970,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             items = currentList.getElementsByClassName('e-ribbon-item');
         }
         var control = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control');
-        var comboBoxEle = control && control.classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
+        var comboBoxEle = control && control.classList.contains('e-combobox') ?
+            items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
         var ribbonItem;
         var templateEle;
         if (comboBoxEle === null || (e.key === 'Tab') || this.itemIndex < 0) {
@@ -6822,7 +7028,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             target.setAttribute('index', this.itemIndex.toString());
         }
         var currentItemIndex = parseInt(target.getAttribute('index'), 10);
-        var itemType = "";
+        var itemType = '';
         var controlItem = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control') : null;
         if (controlItem) {
             itemType = controlItem.getAttribute('data-control');
@@ -6852,12 +7058,20 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         if (((itemType === 'SplitButton') && (e.key === 'ArrowRight' || e.key === 'ArrowLeft'))) {
             if (e.key === 'ArrowRight') {
-                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus() :
+                if (this.enableRtl) {
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+                }
+                else {
                     items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus();
+                }
             }
             if (e.key === 'ArrowLeft') {
-                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus() :
+                if (this.enableRtl) {
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus();
+                }
+                else {
                     items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+                }
             }
         }
         if (e.key === 'Enter') {
@@ -6968,7 +7182,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     Ribbon.prototype.reRenderTabs = function (tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        for (var key in tabs) {
+        for (var _i = 0, _a = Object.keys(tabs); _i < _a.length; _i++) {
+            var key = _a[_i];
             var index = parseInt(key, 10);
             var tab = tabs[parseInt(index.toString(), 10)];
             var isNewTab = false;
@@ -7013,13 +7228,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     }
                     // Check whether group is passed by the user, and if it is, then remove the old values.
                     if (tab.groups) {
-                        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-                            var group = groups_1[_i];
+                        for (var _b = 0, groups_1 = groups; _b < groups_1.length; _b++) {
+                            var group = groups_1[_b];
                             var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
-                            for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
-                                var collection = _b[_a];
-                                for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
-                                    var item = _d[_c];
+                            for (var _c = 0, _d = group.collections; _c < _d.length; _c++) {
+                                var collection = _d[_c];
+                                for (var _e = 0, _f = collection.items; _e < _f.length; _e++) {
+                                    var item = _f[_e];
                                     var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                                     if (ele) {
                                         this.destroyFunction(item, ele);
@@ -7117,7 +7332,8 @@ 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) || (item.type === RibbonItemType.Gallery)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
                                         }
                                     }
@@ -7216,7 +7432,8 @@ 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) || (item.type === RibbonItemType.Gallery)) {
+                                        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);
@@ -7241,7 +7458,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 }
                             }
                             if (group.enableGroupOverflow && overflowDDB) {
-                                if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
+                                if (overflowtarget.childElementCount === 0 ||
+                                    (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                                     this.removeOverflowButton(overflowDDB);
                                 }
                             }
@@ -7354,7 +7572,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line
         var groupIndex = initialProps[key].indexOf(groupEle.id);
         if (groupIndex !== -1) {
-            key === 'hiddenGroups' ? groupEle.classList.add('e-hidden') : groupEle.classList.add('e-disabled');
+            if (key === 'hiddenGroups') {
+                groupEle.classList.add('e-hidden');
+            }
+            else {
+                groupEle.classList.add('e-disabled');
+            }
         }
     };
     Ribbon.prototype.validateItemSize = function () {
@@ -7479,7 +7702,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             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) {
+                    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');
                     }
                 }
@@ -7516,7 +7740,8 @@ 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) || (item.type === RibbonItemType.Gallery)) {
+                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) ||
+                    (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                     this.updatePopupItems(item, itemEle, isGroupOF, true);
                 }
             }
@@ -7573,7 +7798,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         for (var i = 0; i < list.length; i++) {
             var listitem = list[parseInt(i.toString(), 10)];
             if (!listitem.id) {
-                listitem.setProperties({ id: initId + key + (this.idIndex++) }, true);
+                var htmlAttrID = void 0;
+                if (type === 'item') {
+                    htmlAttrID = this.hasHtmlAtrrID(listitem);
+                }
+                listitem.setProperties({ id: htmlAttrID ? htmlAttrID : initId + key + (this.idIndex++) }, true);
             }
             switch (type) {
                 case 'tab':
@@ -7585,12 +7814,32 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 case 'collection':
                     listitem.setProperties({ items: this.checkID(listitem.items, 'item', listitem.id) }, true);
                     break;
-                default:
-                    break;
             }
         }
         return list;
     };
+    Ribbon.prototype.hasHtmlAtrrID = function (listItem) {
+        var id = '';
+        if (listItem.buttonSettings.htmlAttributes.id) {
+            id = listItem.buttonSettings.htmlAttributes.id;
+        }
+        else if (listItem.checkBoxSettings.htmlAttributes.id) {
+            id = listItem.checkBoxSettings.htmlAttributes.id;
+        }
+        else if (listItem.colorPickerSettings.htmlAttributes.id) {
+            id = listItem.colorPickerSettings.htmlAttributes.id;
+        }
+        else if (listItem.comboBoxSettings.htmlAttributes.id) {
+            id = listItem.comboBoxSettings.htmlAttributes.id;
+        }
+        else if (listItem.dropDownSettings.htmlAttributes.id) {
+            id = listItem.dropDownSettings.htmlAttributes.id;
+        }
+        else if (listItem.splitButtonSettings.htmlAttributes.id) {
+            id = listItem.splitButtonSettings.htmlAttributes.id;
+        }
+        return id;
+    };
     Ribbon.prototype.updateCommonProperty = function (commonProp) {
         this.tabObj.setProperties(commonProp);
         if (this.ribbonFileMenuModule) {
@@ -7710,8 +7959,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) :
                                     contentEle.querySelector('#' + item.id);
                                 if (item.type === RibbonItemType.GroupButton) {
-                                    ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + RIBBON_GROUP_BUTTON_ID) :
-                                        contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                                    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);
@@ -7878,6 +8127,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
      * Shows a specific tab in the ribbon.
      *
      * @param {string} tabId - The ID of the tab to be shown.
+     * @param {boolean} isContextual - The boolean if the rendering is contextual.
      * @returns {void}
      */
     Ribbon.prototype.showTab = function (tabId, isContextual) {
@@ -7888,6 +8138,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
      * Hides a specific tab in the ribbon.
      *
      * @param {string} tabId - The ID of the tab to be hidden.
+     * @param {boolean} isContextual - The boolean if the rendering is contextual.
      * @returns {void}
      */
     Ribbon.prototype.hideTab = function (tabId, isContextual) {
@@ -7913,7 +8164,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             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; });
+                    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'))) {
@@ -8002,8 +8255,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         var item = _d[_c];
                         var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                         if (item.type === RibbonItemType.GroupButton && this.activeLayout === 'Classic') {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + RIBBON_GROUP_BUTTON_ID) :
-                                contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id +
+                                RIBBON_GROUP_BUTTON_ID) : contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
                         }
                         if (ele) {
                             this.destroyFunction(item, ele);
@@ -8101,7 +8354,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             if (this.activeLayout === RibbonLayout.Simplified) {
                 if (itemProp.group.enableGroupOverflow) {
-                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount
+                        === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                         this.removeOverflowButton(dropdown);
                     }
                 }
@@ -8174,13 +8428,23 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     overflowtarget = overflowDDB.target;
                 }
                 if (overflowtarget) {
-                    isHidden ? overflowtarget.classList.add('e-hidden') : overflowtarget.classList.remove('e-hidden');
+                    if (isHidden) {
+                        overflowtarget.classList.add('e-hidden');
+                    }
+                    else {
+                        overflowtarget.classList.remove('e-hidden');
+                    }
                 }
             }
             else if (ofTabContainer) {
                 var grpContainer = ofTabContainer.querySelector('#' + groupID + CONTAINER_ID);
                 if (grpContainer) {
-                    isHidden ? grpContainer.classList.add('e-hidden') : grpContainer.classList.remove('e-hidden');
+                    if (isHidden) {
+                        grpContainer.classList.add('e-hidden');
+                    }
+                    else {
+                        grpContainer.classList.remove('e-hidden');
+                    }
                 }
             }
         }
@@ -8218,38 +8482,35 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
             }
             if (hiddenProps) {
-                /* eslint-disable */
-                if (!hiddenProps[key]) {
-                    hiddenProps[key] = [];
+                if (!hiddenProps["" + key]) {
+                    hiddenProps["" + key] = [];
                 }
-                if (hiddenProps[key].length) {
-                    var index = hiddenProps[key].indexOf(id);
+                if (hiddenProps["" + key].length) {
+                    var index = hiddenProps["" + key].indexOf(id);
                     if (index === -1) {
-                        hiddenProps[key].push(id);
+                        hiddenProps["" + key].push(id);
                     }
                 }
                 else {
-                    hiddenProps[key].push(id);
+                    hiddenProps["" + key].push(id);
                 }
-                /* eslint-enable */
             }
         }
     };
     Ribbon.prototype.updateItemsSimplifiedWidth = function (tabIndex, key) {
         var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
-        /* eslint-disable */
-        if (hiddenProps && hiddenProps[key] && hiddenProps[key].length) {
+        if (hiddenProps && hiddenProps["" + key] && hiddenProps["" + key].length) {
             var _loop_6 = function (i) {
-                var contentEle = this_6.tabObj.items[tabIndex].content;
+                var contentEle = this_6.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
                 var hiddenEle;
                 var groupEle = void 0;
                 var isGroupHidden = false;
                 var widthDifference = 0;
                 if (key === 'hideGroup' || key === 'showGroup') {
-                    hiddenEle = contentEle.querySelector('#' + hiddenProps[key][i]);
+                    hiddenEle = contentEle.querySelector('#' + hiddenProps["" + key][parseInt(i.toString(), 10)]);
                 }
                 else {
-                    hiddenEle = contentEle.querySelector('#' + hiddenProps[key][i] + CONTAINER_ID);
+                    hiddenEle = contentEle.querySelector('#' + hiddenProps["" + key][parseInt(i.toString(), 10)] + CONTAINER_ID);
                 }
                 if (hiddenEle) {
                     if (key === 'hideGroup' || key === 'hideItem') {
@@ -8309,15 +8570,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         groupEle.classList.add('e-ribbon-emptyCollection');
                     }
                 }
-                var index = hiddenProps[key].indexOf(hiddenProps[key][i]);
+                var index = hiddenProps["" + key].indexOf(hiddenProps["" + key][parseInt(i.toString(), 10)]);
                 if (index !== -1) {
-                    hiddenProps[key].splice(index, 1);
+                    hiddenProps["" + key].splice(index, 1);
                     i--;
                 }
                 out_i_1 = i;
             };
             var this_6 = this, out_i_1;
-            for (var i = 0; i < hiddenProps[key].length; i++) {
+            for (var i = 0; i < hiddenProps["" + key].length; i++) {
                 _loop_6(i);
                 i = out_i_1;
             }
@@ -8451,7 +8712,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + groupID);
         if (groupEle) {
-            isDisabled ? groupEle.classList.add('e-disabled') : groupEle.classList.remove('e-disabled');
+            if (isDisabled) {
+                groupEle.classList.add('e-disabled');
+            }
+            else {
+                groupEle.classList.remove('e-disabled');
+            }
         }
         else {
             this.updateInitialProps(itemProp.tabIndex, groupID, 'disabledGroups', isDisabled);
@@ -8466,13 +8732,23 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     overflowtarget = overflowDDB.target;
                 }
                 if (overflowtarget) {
-                    isDisabled ? overflowtarget.classList.add('e-disabled') : overflowtarget.classList.remove('e-disabled');
+                    if (isDisabled) {
+                        overflowtarget.classList.add('e-disabled');
+                    }
+                    else {
+                        overflowtarget.classList.remove('e-disabled');
+                    }
                 }
             }
             else if (ofTabContainer) {
                 var grpContainer = ofTabContainer.querySelector('#' + groupID + CONTAINER_ID);
                 if (grpContainer) {
-                    isDisabled ? grpContainer.classList.add('e-disabled') : grpContainer.classList.remove('e-disabled');
+                    if (isDisabled) {
+                        grpContainer.classList.add('e-disabled');
+                    }
+                    else {
+                        grpContainer.classList.remove('e-disabled');
+                    }
                 }
             }
         }
@@ -8698,19 +8974,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
         }
         if (initialProps) {
-            /* eslint-disable */
-            if (!initialProps[key])
-                initialProps[key] = [];
-            var itemIndex = initialProps[key].indexOf(id);
+            if (!initialProps["" + key]) {
+                initialProps["" + key] = [];
+            }
+            var itemIndex = initialProps["" + key].indexOf(id);
             if (isInsert) {
-                if (itemIndex === -1)
-                    initialProps[key].push(id);
+                if (itemIndex === -1) {
+                    initialProps["" + key].push(id);
+                }
             }
             else {
-                if (itemIndex !== -1)
-                    initialProps[key].splice(itemIndex, 1);
-                initialProps[key].length === 0 && delete initialProps[key];
-                /* eslint-enable */
+                if (itemIndex !== -1) {
+                    initialProps["" + key].splice(itemIndex, 1);
+                }
+                if (initialProps["" + key].length === 0) {
+                    delete initialProps["" + key];
+                }
                 if (Object.keys(initialProps).length === 0) {
                     delete this.initialPropsData[parseInt(tabIndex.toString(), 10)];
                 }
@@ -8771,7 +9050,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 overflowtarget = overflowDDB.target;
             }
             if (overflowtarget) {
-                isHidden ? overflowtarget.classList.add('e-hide-group') : overflowtarget.classList.remove('e-hide-group');
+                if (isHidden) {
+                    overflowtarget.classList.add('e-hide-group');
+                }
+                else {
+                    overflowtarget.classList.remove('e-hide-group');
+                }
             }
         }
         else {
@@ -8781,7 +9065,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 if (ofTabContainer) {
                     var grpContainer = ofTabContainer.querySelector('#' + groupID + CONTAINER_ID);
                     if (grpContainer) {
-                        isHidden ? grpContainer.classList.add('e-hide-group') : grpContainer.classList.remove('e-hide-group');
+                        if (isHidden) {
+                            grpContainer.classList.add('e-hide-group');
+                        }
+                        else {
+                            grpContainer.classList.remove('e-hide-group');
+                        }
                     }
                 }
             }
@@ -8821,8 +9110,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                             var item = _d[_c];
                             var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                             if (item.type === RibbonItemType.GroupButton && this.activeLayout === 'Classic') {
-                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + RIBBON_GROUP_BUTTON_ID) :
-                                    contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id +
+                                    RIBBON_GROUP_BUTTON_ID) : contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
                             }
                             if (ele) {
                                 this.destroyFunction(item, ele);
@@ -8928,7 +9217,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             if (this.activeLayout === RibbonLayout.Simplified) {
                 if (itemProp.group.enableGroupOverflow) {
-                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount
+                        === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                         this.removeOverflowButton(dropdown);
                     }
                 }
@@ -9226,7 +9516,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
      * Gets the Ribbon item model associated with the specified item ID.
      *
      * @param {string} itemId - The unique ID of the Ribbon item.
-     * @returns {RibbonItemModel}
+     * @returns {RibbonItemModel} - Returns the Ribbon item model.
      */
     Ribbon.prototype.getItem = function (itemId) {
         return getItem(this.tabs, itemId).item;
@@ -9248,7 +9538,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
             var moduleName = this.getItemModuleName(itemProp.item);
-            isUpdated = isDisabled ? !itemEle.classList.contains(DISABLED_CSS) : itemEle.classList.contains(DISABLED_CSS);
+            isUpdated = isDisabled ? !itemEle.classList.contains(DISABLED_CSS) :
+                itemEle.classList.contains(DISABLED_CSS);
             if (moduleName !== 'template') {
                 if (isUpdated) {
                     if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
@@ -9389,13 +9680,14 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     break;
-                case 'selectedTab':
+                case '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 });
                     break;
@@ -9413,21 +9705,23 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     this.element.style.width = formatUnit(newProp.width);
                     this.refreshLayout();
                     break;
-                case 'fileMenu':
+                case 'fileMenu': {
                     if (this.ribbonFileMenuModule) {
                         this.ribbonFileMenuModule.updateFileMenu(this.fileMenu);
                     }
                     var toolbarEle = this.tabObj['tbObj'];
                     toolbarEle.refreshOverflow();
                     break;
-                case 'backStageMenu':
+                }
+                case 'backStageMenu': {
                     if (this.ribbonBackstageModule) {
                         this.ribbonBackstageModule.updateBackStageMenu(this.backStageMenu);
                     }
                     var toolbarElement = this.tabObj['tbObj'];
                     toolbarElement.refreshOverflow();
                     break;
-                case 'helpPaneTemplate':
+                }
+                case 'helpPaneTemplate': {
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
                         this.ribbonTempEle = null;
@@ -9439,95 +9733,97 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var toolbar_1 = this.tabObj['tbObj'];
                     toolbar_1.refreshOverflow();
                     break;
+                }
                 case 'hideLayoutSwitcher':
-                    this.hideLayoutSwitcher ? this.removeExpandCollapse() : this.addExpandCollapse();
+                    if (this.hideLayoutSwitcher) {
+                        this.removeExpandCollapse();
+                    }
+                    else {
+                        this.addExpandCollapse();
+                    }
                     break;
             }
         }
     };
     var Ribbon_1;
-    __decorate([
+    __decorate$l([
         Property('Classic')
     ], Ribbon.prototype, "activeLayout", void 0);
-    __decorate([
+    __decorate$l([
         Property('')
     ], Ribbon.prototype, "cssClass", void 0);
-    __decorate([
+    __decorate$l([
         Property(false)
     ], Ribbon.prototype, "enableKeyTips", void 0);
-    __decorate([
+    __decorate$l([
         Property('')
     ], Ribbon.prototype, "layoutSwitcherKeyTip", void 0);
-    __decorate([
+    __decorate$l([
         Complex({}, FileMenuSettings)
     ], Ribbon.prototype, "fileMenu", void 0);
-    __decorate([
+    __decorate$l([
         Complex({}, BackStageMenu)
     ], Ribbon.prototype, "backStageMenu", void 0);
-    __decorate([
+    __decorate$l([
         Property('')
     ], Ribbon.prototype, "launcherIconCss", void 0);
-    __decorate([
+    __decorate$l([
         Property(false)
     ], Ribbon.prototype, "isMinimized", void 0);
-    __decorate([
+    __decorate$l([
         Property('en-us')
     ], Ribbon.prototype, "locale", void 0);
-    __decorate([
+    __decorate$l([
         Property(0)
     ], Ribbon.prototype, "selectedTab", void 0);
-    __decorate([
+    __decorate$l([
         Complex({}, TabAnimationSettings)
     ], Ribbon.prototype, "tabAnimation", void 0);
-    __decorate([
+    __decorate$l([
         Collection([], RibbonTab)
     ], Ribbon.prototype, "tabs", void 0);
-    __decorate([
+    __decorate$l([
         Collection([], RibbonContextualTabSettings)
     ], Ribbon.prototype, "contextualTabs", void 0);
-    __decorate([
+    __decorate$l([
         Property('100%')
     ], Ribbon.prototype, "width", void 0);
-    __decorate([
+    __decorate$l([
         Property('')
     ], Ribbon.prototype, "helpPaneTemplate", void 0);
-    __decorate([
+    __decorate$l([
         Property(false)
     ], Ribbon.prototype, "hideLayoutSwitcher", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "tabSelecting", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "tabSelected", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "ribbonExpanding", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "ribbonCollapsing", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "launcherIconClick", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "created", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "overflowPopupOpen", void 0);
-    __decorate([
+    __decorate$l([
         Event()
     ], Ribbon.prototype, "overflowPopupClose", void 0);
-    Ribbon = Ribbon_1 = __decorate([
+    Ribbon = Ribbon_1 = __decorate$l([
         NotifyPropertyChanges
     ], Ribbon);
     return Ribbon;
 }(Component));
 
-/**
- * Ribbon modules
- */
-
 /**
  * Defines the items of Ribbon.
  */
@@ -9862,7 +10158,7 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
     return RibbonFileMenu;
 }());
 
-var __extends$22 = (undefined && undefined.__extends) || (function () {
+var __extends$m = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -9879,16 +10175,16 @@ var __extends$22 = (undefined && undefined.__extends) || (function () {
  * Defines the items of Ribbon.
  */
 var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
-    __extends$22(RibbonBackstage, _super);
+    __extends$m(RibbonBackstage, _super);
     function RibbonBackstage(parent) {
         var _this = _super.call(this) || this;
         _this.parent = parent;
         return _this;
     }
     /**
-    * @private
-    * @returns {void}
-    */
+     * @private
+     * @returns {void}
+     */
     RibbonBackstage.prototype.render = function () {
         // render code
     };
@@ -9990,6 +10286,8 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
                     if (firstMenuEle) {
                         firstMenuEle.classList.add('e-selected');
                         firstMenuEle.focus();
+                        _this.menuIndex = 0;
+                        _this.isCloseBtn = false;
                     }
                     _this.createBackStageContent(_this.menuCtrl.items[0].id, item.content);
                     break;
@@ -10054,7 +10352,8 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
         });
         var targetEle;
         if (backStageOptions.target) {
-            targetEle = backStageOptions.target instanceof HTMLElement ? backStageOptions.target : document.querySelector(backStageOptions.target);
+            targetEle = backStageOptions.target instanceof HTMLElement ? backStageOptions.target :
+                document.querySelector(backStageOptions.target);
             targetEle.appendChild(this.popupHTMLElement);
         }
         else {
@@ -10069,10 +10368,47 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
         if (this.parent.enableRtl) {
             this.updatePopupPositionOnRtl(this.parent.enableRtl);
         }
-        this.popupHTMLElement.onkeydown = function (e) { if (e.code === 'Escape') {
-            _this.hideBackstage();
-        } };
         this.hideBackstage();
+        EventHandler.add(this.popupHTMLElement, 'keyup', function (e) {
+            if (e.code === 'Escape') {
+                _this.hideBackstage();
+            }
+            _this.handleNavigation(e);
+        }, this);
+    };
+    RibbonBackstage.prototype.handleNavigation = function (e) {
+        var closeBtnEle = this.popupHTMLElement.querySelector('.e-ribbon-close-btn');
+        var menuItems = this.popupHTMLElement.querySelectorAll('.e-menu-item');
+        var arrowUp = e.key === 'ArrowUp';
+        var arrowDown = e.key === 'ArrowDown';
+        if (arrowUp || arrowDown) {
+            if ((arrowUp && this.menuIndex > 0) || (arrowDown && this.menuIndex < menuItems.length - 1 && !this.isCloseBtn)) {
+                this.menuIndex = arrowUp ? this.menuIndex - 1 : this.menuIndex + 1;
+            }
+            else {
+                if (closeBtnEle && !this.isCloseBtn) {
+                    closeBtnEle.focus();
+                    this.isCloseBtn = true;
+                }
+                else {
+                    this.menuIndex = arrowUp ? menuItems.length - 1 : 0;
+                    this.isCloseBtn = false;
+                }
+            }
+            for (var i = 0; i < menuItems.length; i++) {
+                menuItems[parseInt(i.toString(), 10)].classList.remove('e-focused');
+            }
+            if (!this.isCloseBtn) {
+                if (arrowUp && menuItems[this.menuIndex].classList.contains('e-separator')) {
+                    this.menuIndex--;
+                }
+                else if (arrowDown && menuItems[this.menuIndex].classList.contains('e-separator')) {
+                    this.menuIndex++;
+                }
+                menuItems[this.menuIndex].classList.add('e-focused');
+                menuItems[this.menuIndex].focus();
+            }
+        }
     };
     RibbonBackstage.prototype.updatePopupPositionOnRtl = function (enableRtl) {
         var popupStyle = this.popupHTMLElement.style;
@@ -10227,11 +10563,13 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
             var item = menuOptions.items[parseInt(i.toString(), 10)];
             if (item.text === args.item.text) {
                 this.contentItem = item;
+                this.menuIndex = i;
                 break;
             }
         }
         this.createBackStageContent(args.item.id, this.contentItem.content);
-        var eventArgs = { cancel: false, target: args.element, item: this.contentItem, isBackButton: this.isBackButtonClicked };
+        var eventArgs = { cancel: false, target: args.element,
+            item: this.contentItem, isBackButton: this.isBackButtonClicked };
         if (this.contentItem.backStageItemClick) {
             this.contentItem.backStageItemClick.call(this, eventArgs);
         }
@@ -10251,8 +10589,9 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
             this.backstageButton.setProperties(commonProp);
             if (this.popupEle) {
                 this.popupEle.setProperties(commonProp);
-                if (this.popupHTMLElement)
+                if (this.popupHTMLElement) {
                     this.updatePopupPositionOnRtl(commonProp.enableRtl);
+                }
                 if (this.menuCtrl) {
                     this.menuCtrl.setProperties(commonProp);
                     if (this.closeBtn) {
@@ -10285,7 +10624,7 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
                     this.popupEle.setProperties({
                         height: backStageOptions.height,
                         width: backStageOptions.width,
-                        target: backStageOptions.target || this.parent.element,
+                        target: backStageOptions.target || this.parent.element
                     });
                 }
                 if (backStageOptions.template) {
@@ -10394,10 +10733,20 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
         for (var i = 0; i < items.length; i++) {
             var item = items[parseInt(i.toString(), 10)];
             if (item.isFooter) {
-                isAfter ? this.footerMenuCtrl.insertAfter(items, target, isUniqueId) : this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
+                if (isAfter) {
+                    this.footerMenuCtrl.insertAfter(items, target, isUniqueId);
+                }
+                else {
+                    this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
+                }
             }
             else {
-                isAfter ? this.menuCtrl.insertAfter(items, target, isUniqueId) : this.menuCtrl.insertBefore(items, target, isUniqueId);
+                if (isAfter) {
+                    this.menuCtrl.insertAfter(items, target, isUniqueId);
+                }
+                else {
+                    this.menuCtrl.insertBefore(items, target, isUniqueId);
+                }
             }
         }
         var backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
@@ -10525,11 +10874,14 @@ var RibbonContextualTab = /** @__PURE__ @class */ (function () {
         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];
+                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) {
+            for (var _i = 0, _a = Object.keys(newProp.tabs); _i < _a.length; _i++) {
+                var key = _a[_i];
                 _loop_1(key);
             }
         }
@@ -10564,8 +10916,7 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
             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];
+                        keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)]["" + key];
                         this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true);
                     }
                 }
@@ -10648,15 +10999,12 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
         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];
+        var 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 */
+            for (var i = 0; i < Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)]["" + key]).length; i++) {
                 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")) {
+                    if (keytipData[parseInt(i.toString(), 10)].id.indexOf('_grpbtn') !== -1) {
                         itemID = keytipData[parseInt(i.toString(), 10)].id.replace(/_grpbtn\d+/, '');
                     }
                     var itemProp = getItem(this.parent.tabs, itemID);
@@ -10684,7 +11032,12 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                             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);
+                    if (key === 'item') {
+                        this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset);
+                    }
+                    else {
+                        this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset, false, true);
+                    }
                 }
             }
         }
@@ -10734,13 +11087,12 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                     enableRtl: this.parent.enableRtl
                 });
                 keytipPopup.show();
-                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset, (isTab && isPopUpItem));
+                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset);
                 this.parent.isKeytipOpen = true;
             }
         }
     };
-    RibbonKeyTip.prototype.calculateKeyTipPosition = function (itemEle, keytipElement, type, yOffset, isTabOverflow) {
-        if (isTabOverflow === void 0) { isTabOverflow = false; }
+    RibbonKeyTip.prototype.calculateKeyTipPosition = function (itemEle, keytipElement, type, yOffset) {
         var position = itemEle.getBoundingClientRect();
         if (type === 'backstageMenu') {
             keytipElement.style.top = position.top + ((keytipElement.offsetHeight) / 2) + 'px';
@@ -10762,6 +11114,7 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
      * Performs keytip action.
      *
      * @param {string} keyPress - Gets the keytip text.
+     * @param {boolean} isMethod - Gets the isMethod.
      * @returns {void}
      * @hidden
      */
@@ -10771,9 +11124,11 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
         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++) {
+                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 < Object.keys(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) {
@@ -10784,8 +11139,9 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                                         this.parent.tabObj.select(i);
                                         setTimeout(function () {
                                             var tabOverflow = _this.parent.tabObj.element.querySelector('.e-nav-active');
-                                            if (tabOverflow)
+                                            if (tabOverflow) {
                                                 tabOverflow.click();
+                                            }
                                             _this.createKeytip('item');
                                         }, 600);
                                     }
@@ -10800,7 +11156,7 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                                         }
                                         else {
                                             var itemProp = void 0;
-                                            if ((keytipData[parseInt(k.toString(), 10)].id).includes("_popupButton")) {
+                                            if ((keytipData[parseInt(k.toString(), 10)].id).indexOf('_popupButton') !== -1) {
                                                 var galleryID = keytipData[parseInt(k.toString(), 10)].id.replace(/_popupButton/g, '');
                                                 itemProp = getItem(this.parent.tabs, galleryID);
                                             }
@@ -10818,7 +11174,7 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                                         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")) {
+                                                if (keytipData[parseInt(k.toString(), 10)].id.indexOf('_launcher') !== -1 || keytipData[parseInt(k.toString(), 10)].id.indexOf('_sim_grp_overflow') !== -1 || keytipData[parseInt(k.toString(), 10)].id.indexOf('_overflow_dropdown') !== -1) {
                                                     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) {
@@ -10849,7 +11205,12 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
             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');
+                if (keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow') {
+                    this.createKeytip('grpoverflowpopup');
+                }
+                else {
+                    this.createKeytip('popupitem');
+                }
             }
         }
         else {
@@ -10886,21 +11247,24 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                 case 'colorpicker':
                     this.parent.ribbonColorPickerModule.toggle(itemID);
                     break;
-                case 'combobox':
+                case 'combobox': {
                     var itemEle_1 = document.querySelector('#' + itemID);
                     setTimeout(function () {
                         itemEle_1.focus();
                     }, 100);
                     break;
-                case 'gallery':
+                }
+                case 'gallery': {
                     var galleryEle = document.querySelector('#' + itemID);
                     galleryEle.click();
                     break;
-                case 'template':
+                }
+                case 'template': {
                     var templateEle = document.querySelector('#' + itemID);
                     templateEle.focus();
                     break;
-                case 'group-btn':
+                }
+                case 'group-btn': {
                     var itemElement = document.querySelector('#' + itemID);
                     if (itemElement) {
                         var item = getInstance(itemElement, DropDownButton);
@@ -10912,21 +11276,20 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
                         }
                     }
                     break;
+                }
             }
         }
     };
     RibbonKeyTip.prototype.commonItemsKeyTipPress = function (keyPress, key, isMethod) {
         var _this = this;
-        /* eslint-disable */
-        if (this.parent.keyTipElements[key]) {
+        if (this.parent.keyTipElements["" + key]) {
             var isKeyPressed = false;
-            var keytipData = this.parent.keyTipElements[key];
+            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 */
+                    for (var i = 0; i < Object.keys(this.parent.keyTipElements["" + key]).length; i++) {
                         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);
@@ -10991,34 +11354,34 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
         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');
+                    var keyText = (Object.keys(this_1.parent.keyTipElements[parseInt(this_1.parent.selectedTab.toString(), 10)]))[parseInt(j.toString(), 10)];
+                    var keyTipElement = this_1.parent.keyTipElements[parseInt(this_1.parent.selectedTab.toString(), 10)];
+                    var index = getIndex(keyTipElement["" + keyText], function (e) {
+                        return e.id +
+                            RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id;
+                    });
+                    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;
                             }
-                            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++) {
+                        for (var j = 0; j < Object.keys(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');
@@ -11055,8 +11418,9 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
             _loop_1(i);
         }
         this.isKeytipPopupOpen = false;
-        if (!isKeyTipExist)
+        if (!isKeyTipExist) {
             this.parent.isKeytipOpen = false;
+        }
     };
     /**
      * Shows the Keytip dynamically.
@@ -11085,12 +11449,5 @@ var RibbonKeyTip = /** @__PURE__ @class */ (function () {
     return RibbonKeyTip;
 }());
 
-/**
- * Ribbon modules
- */
-
-// 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, 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 };
+export { BACKSTAGE_CLOSE_ICON, BackStageMenu, BackstageBackButton, BackstageItem, COLLAPSE_BUTTON_ID, COLLECTION_ID, CONTAINER_ID, CONTENT_ID, DISABLED_CSS, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, DROPDOWN_ID, DisplayMode, EXPAND_COLLAPSE_ICON, FileMenuSettings, GROUPOF_BUTTON_ID, GROUP_ID, HEADER_ID, HIDE_CSS, HORIZONTAL_SCROLLBAR, ITEM_ID, ITEM_VERTICAL_CENTER, ItemOrientation, LAUNCHER_ID, OVERFLOW_ICON, OVERFLOW_ID, OVRLOF_BUTTON_ID, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_CONTENT, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_TEXT_MENU, RIBBON_COLLAPSE_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_COLLECTION, RIBBON_COLUMN, RIBBON_CONTENT_HEIGHT, RIBBON_CONTEXTUAL_TAB, RIBBON_CONTROL, RIBBON_EXPAND_BUTTON, RIBBON_FILE_MENU_ID, RIBBON_FILE_MENU_LIST, RIBBON_FILE_MENU_WIDTH, RIBBON_FOOTER_MENU_LIST, RIBBON_GROUP, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_CONTENT, RIBBON_GROUP_BUTTON_ID, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, RIBBON_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_GROUP_OF_BUTTON, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_HELP_PANE_TEMPLATE_WIDTH, RIBBON_HELP_TEMPLATE, RIBBON_HOVER, RIBBON_ITEM, RIBBON_KEYTIP, RIBBON_KEYTIP_ID, RIBBON_LARGE_ITEM, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON, RIBBON_LAUNCHER_ICON_ELE, RIBBON_MEDIUM_ITEM, RIBBON_MENU_LIST, RIBBON_MINIMIZE, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_OF_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OVERALL_OF_BUTTON, RIBBON_OVERFLOW, RIBBON_OVERFLOW_HEADER, RIBBON_OVERFLOW_TARGET, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, RIBBON_ROW, RIBBON_SELECTED_CONTENT, RIBBON_SIMPLIFIED_MODE, RIBBON_SINGLE_BUTTON_SELECTION, RIBBON_SMALL_ITEM, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_TEMPLATE, RIBBON_TEXT_CONTAINER, RIBBON_TOOLTIP, RIBBON_TOOLTIP_CONTAINER, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RTL_CSS, Ribbon, RibbonBackstage, RibbonButton, RibbonButtonSettings, RibbonCheckBox, RibbonCheckBoxSettings, RibbonCollection, RibbonColorPicker, RibbonColorPickerSettings, RibbonComboBox, RibbonComboBoxSettings, RibbonContextualTab, RibbonContextualTabSettings, RibbonDropDown, RibbonDropDownSettings, RibbonFileMenu, RibbonGallery, RibbonGalleryGroup, RibbonGalleryItem, RibbonGallerySettings, RibbonGroup, RibbonGroupButton, RibbonGroupButtonItem, RibbonGroupButtonSelection, RibbonGroupButtonSettings, RibbonItem, RibbonItemSize, RibbonItemType, RibbonKeyTip, RibbonLayout, RibbonSplitButton, RibbonSplitButtonSettings, RibbonTab, RibbonTooltip, SPACE, TAB_CONTENT, TAB_ID, VERTICAL_DDB, createTooltip, destroyControl, destroyTooltip, getCollection, getGroup, getIndex, getItem, getItemElement, getTemplateFunction, isTooltipPresent, setCustomAttributes, setToolTipContent, updateCommonProperty, updateControlDisabled, updateTooltipProp };
 //# sourceMappingURL=ej2-ribbon.es5.js.map