@syncfusion/ej2-ribbon 25.2.3 → 26.1.35

package/dist/es6/ej2-ribbon.es2015.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 { ChildProperty, Property, Event, Complex, Collection, getComponent, merge, EventHandler, isNullOrUndefined, closest, remove, select, compile, addClass, setValue, formatUnit, append, Component, getUniqueID, KeyboardEvents, getInstance, isUndefined, removeClass, NotifyPropertyChanges } 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 __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;
@@ -155,32 +155,32 @@ class RibbonButtonSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -200,29 +200,29 @@ class RibbonCheckBoxSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -242,62 +242,62 @@ class RibbonColorPickerSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -317,95 +317,95 @@ class RibbonComboBoxSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -425,53 +425,53 @@ class RibbonDropDownSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -491,53 +491,53 @@ class RibbonSplitButtonSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -548,23 +548,23 @@ var __decorate$11 = (undefined && undefined.__decorate) || function (decorators,
  */
 class RibbonTooltip extends ChildProperty {
 }
-__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);
 
-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;
@@ -584,32 +584,32 @@ class RibbonGroupButtonItem extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -620,17 +620,17 @@ var __decorate$12 = (undefined && undefined.__decorate) || function (decorators,
  */
 class RibbonGroupButtonSettings extends ChildProperty {
 }
-__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);
 
-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;
@@ -641,23 +641,23 @@ var __decorate$16 = (undefined && undefined.__decorate) || function (decorators,
  */
 class RibbonGalleryItem extends ChildProperty {
 }
-__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);
 
-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;
@@ -668,23 +668,23 @@ var __decorate$15 = (undefined && undefined.__decorate) || function (decorators,
  */
 class RibbonGalleryGroup extends ChildProperty {
 }
-__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);
 
-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;
@@ -695,47 +695,47 @@ var __decorate$14 = (undefined && undefined.__decorate) || function (decorators,
  */
 class RibbonGallerySettings extends ChildProperty {
 }
-__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);
 
-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;
@@ -755,62 +755,62 @@ class RibbonItem extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -830,17 +830,17 @@ class RibbonCollection extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -860,50 +860,50 @@ class RibbonGroup extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -923,23 +923,23 @@ class RibbonTab extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -959,53 +959,53 @@ class FileMenuSettings extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -1016,17 +1016,17 @@ var __decorate$19 = (undefined && undefined.__decorate) || function (decorators,
  */
 class BackstageBackButton extends ChildProperty {
 }
-__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);
 
-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;
@@ -1037,32 +1037,32 @@ var __decorate$20 = (undefined && undefined.__decorate) || function (decorators,
  */
 class BackstageItem extends ChildProperty {
 }
-__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);
 
-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;
@@ -1082,38 +1082,38 @@ class BackStageMenu extends ChildProperty {
         super.setProperties(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);
 
-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;
@@ -1133,18 +1133,16 @@ class RibbonContextualTabSettings extends ChildProperty {
         super.setProperties(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);
 
-// export * from './file-menu';
-
 /**
  * Specifies the File Manager internal ID's
  */
@@ -1388,14 +1386,23 @@ class RibbonButton {
             created: btnSettings.created
         }, buttonEle);
         if (btnSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, btnSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         buttonEle.onclick = (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.
@@ -1527,6 +1534,13 @@ class RibbonCheckBox {
         });
         itemEle.appendChild(inputEle);
         const checkBoxSettings = item.checkBoxSettings;
+        let htmlAttr = {};
+        if (checkBoxSettings.htmlAttributes) {
+            htmlAttr = Object.assign({}, checkBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new CheckBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -1537,7 +1551,7 @@ class RibbonCheckBox {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
-            htmlAttributes: checkBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             change: (e) => {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(this, e);
@@ -1693,7 +1707,11 @@ class RibbonColorPicker {
             select: colorPickerSettings.select
         }, inputEle);
         if (colorPickerSettings.htmlAttributes) {
-            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, colorPickerSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(inputEle, htmlAttr);
         }
         const wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
@@ -1717,7 +1735,7 @@ class RibbonColorPicker {
      * @hidden
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
-        let colorPickerSettings = item.colorPickerSettings;
+        const colorPickerSettings = item.colorPickerSettings;
         if (colorPickerSettings.label && this.parent.activeLayout === 'Simplified') {
             const label = this.parent.createElement('div', {
                 className: 'e-ribbon-colorpicker-label',
@@ -1755,7 +1773,7 @@ class RibbonColorPicker {
      * @hidden
      */
     removeOverFlowEvents(item, itemEle) {
-        let colorPickerSettings = item.colorPickerSettings;
+        const colorPickerSettings = item.colorPickerSettings;
         if (colorPickerSettings.label) {
             const label = itemEle.querySelector('#' + item.id + '_label');
             if (label) {
@@ -1871,6 +1889,13 @@ class RibbonComboBox {
         });
         itemEle.appendChild(inputEle);
         const comboBoxSettings = item.comboBoxSettings;
+        let htmlAttr = {};
+        if (comboBoxSettings.htmlAttributes) {
+            htmlAttr = Object.assign({}, comboBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new ComboBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -1902,7 +1927,7 @@ class RibbonComboBox {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
-            htmlAttributes: comboBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             close: (e) => {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(this, e);
@@ -2101,7 +2126,11 @@ class RibbonDropDown {
             select: dropDownSettings.select
         }).appendTo(buttonEle);
         if (dropDownSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, dropDownSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
     }
     /**
@@ -2543,7 +2572,11 @@ class RibbonSplitButton {
             }
         }, buttonEle);
         if (splitButtonSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, splitButtonSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         const dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = (e) => {
@@ -3120,6 +3153,10 @@ class RibbonGroupButton {
                 }
                 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');
                 }
                 const buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
@@ -3238,7 +3275,8 @@ class RibbonGroupButton {
                 for (let j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
-                        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');
@@ -3259,10 +3297,12 @@ class RibbonGroupButton {
                 }
                 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);
                 }
                 let activeEleCount = 0;
                 for (let n = 0; n < grpBtnSettings.items.length; n++) {
@@ -3464,6 +3504,7 @@ class RibbonGroupButton {
      *
      * @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
      */
@@ -3567,7 +3608,12 @@ class RibbonGallery {
         this.count = 0;
         this.isAdded = false;
         this.galleryItemsIndex = 0;
+        this.registeredTemplate = {};
         this.parent = parent;
+        const ref = 'viewContainerRef';
+        setValue('registeredTemplate', this.registeredTemplate, this);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setValue(ref, this.parent[`${ref}`], this);
     }
     getModuleName() {
         return 'ribbonGallery';
@@ -3590,21 +3636,27 @@ class RibbonGallery {
             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 = (args) => {
-            let popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            const popupEle = document.querySelector('#' + item.id + '_galleryPopup');
             if (popupEle) {
-                let popup = getComponent(popupEle, Popup);
-                popupEle.classList.contains('e-popup-close') ? this.showPopup(popup, popupEle, args, gallerySettings, item.id) : this.hidePopup(popup, popupEle, args, gallerySettings, item.id);
+                const popup = getComponent(popupEle, Popup);
+                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 = (args) => {
-            let popupEle = document.querySelectorAll('.e-ribbon-gallery-popup.e-popup-open');
+            const popupEle = document.querySelectorAll('.e-ribbon-gallery-popup.e-popup-open');
             let popupID;
             let itemProp;
             for (let i = 0; i < popupEle.length; i++) {
-                let popup = getComponent(popupEle[parseInt(i.toString(), 10)], Popup);
+                const popup = getComponent(popupEle[parseInt(i.toString(), 10)], Popup);
                 if (args.target.classList.contains('e-ribbon-gallery-button')) {
                     popupID = (popupEle[parseInt(i.toString(), 10)].id).replace(/_galleryPopup/g, '');
                     if ((args.target.id).replace(/_popupButton/g, '') !== popupID) {
@@ -3629,7 +3681,7 @@ class RibbonGallery {
         if (itemProp && itemProp.group) {
             itemProp.group.isCollapsible = false;
         }
-        let galleryWrapper = this.parent.createElement('div', {
+        const galleryWrapper = this.parent.createElement('div', {
             className: 'e-ribbon-gallery-wrapper',
             id: id + '_galleryWrapper'
         });
@@ -3651,7 +3703,7 @@ class RibbonGallery {
             for (let j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
                 galleryEle = this.parent.createElement('li', {
                     className: 'e-ribbon-gallery-item',
-                    id: galleryContainerEle.id + '_gallery' + j,
+                    id: (isPopup ? 'popup_' : '') + galleryContainerEle.id + '_gallery' + j,
                     attrs: { 'tabindex': '0' }
                 });
                 const itemEventArgs = { name: 'beforeItemRender', item: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)] };
@@ -3670,11 +3722,11 @@ class RibbonGallery {
                 }
                 this.count = this.count + 1;
                 galleryEle.onclick = (e) => {
-                    this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                    this.setActiveState(e.currentTarget, gallerySettings, id, true, e, isPopup);
                 };
                 galleryEle.onkeydown = (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 = (e) => {
@@ -3694,9 +3746,12 @@ class RibbonGallery {
                         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) {
                         const iconEle = this.parent.createElement('span', {
@@ -3735,9 +3790,14 @@ class RibbonGallery {
             if (this.isAdded && !isPopup) {
                 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) {
-                let headerEle = (this.parent.createElement('div', {
+                const headerEle = (this.parent.createElement('div', {
                     className: 'e-ribbon-gallery-header',
                     innerHTML: gallerySettings.groups[parseInt(i.toString(), 10)].header
                 }));
@@ -3746,6 +3806,14 @@ class RibbonGallery {
         }
         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;
+        }
     }
     setWrapperWidth(itemCount, galleryWrapper, gallerySettings, itemID) {
         let count = 1;
@@ -3753,74 +3821,77 @@ class RibbonGallery {
         let isWidthApplied = false;
         for (let i = 0; i < gallerySettings.groups.length; i++) {
             for (let j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
-                if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
-                    if (itemCount >= count) {
-                        let galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
-                        if (galleryItemEle) {
-                            itemsWidth += galleryItemEle.offsetWidth;
-                            let itemStyles = window.getComputedStyle(galleryItemEle);
-                            if (itemStyles) {
-                                let paddingWidth = parseFloat(itemStyles.paddingLeft) + parseFloat(itemStyles.paddingRight);
-                                if (!(isNullOrUndefined(paddingWidth)))
-                                    itemsWidth += paddingWidth;
-                                let marginWidth = parseFloat(itemStyles.marginLeft) + parseFloat(itemStyles.marginRight);
-                                if (!(isNullOrUndefined(marginWidth)))
-                                    itemsWidth += marginWidth;
+                if (itemCount >= count) {
+                    const galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                    if (galleryItemEle) {
+                        itemsWidth += galleryItemEle.offsetWidth;
+                        const itemStyles = window.getComputedStyle(galleryItemEle);
+                        if (itemStyles) {
+                            const paddingWidth = parseFloat(itemStyles.paddingLeft) + parseFloat(itemStyles.paddingRight);
+                            if (!(isNullOrUndefined(paddingWidth))) {
+                                itemsWidth += paddingWidth;
+                            }
+                            const 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
      */
-    checkAvailableHeight(selectedTab, activeContent) {
-        let galleryWrapperItems = activeContent.querySelectorAll('.e-ribbon-gallery-wrapper');
+    checkAvailableHeight(activeContent) {
+        const galleryWrapperItems = activeContent.querySelectorAll('.e-ribbon-gallery-wrapper');
         for (let n = 0; n < galleryWrapperItems.length; n++) {
+            let count = 0;
+            let simplifiedItemsCount = 0;
             let isHeight = false;
-            let itemsCount = 0;
-            let galleryWrapper = galleryWrapperItems[parseInt(n.toString(), 10)];
+            const galleryWrapper = galleryWrapperItems[parseInt(n.toString(), 10)];
+            const itemID = galleryWrapper.id.replace(/_galleryWrapper/g, '');
             let galleryWrapperHeight = galleryWrapper.offsetHeight;
-            let itemID = galleryWrapper.id.replace(/_galleryWrapper/g, '');
             const itemProp = getItem(this.parent.tabs, itemID);
             if (itemProp) {
                 this.setWrapperWidth(itemProp.item.gallerySettings.itemCount, galleryWrapper, itemProp.item.gallerySettings, itemID);
                 for (let i = 0; i < itemProp.item.gallerySettings.groups.length; i++) {
-                    if (itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
-                        for (let j = 0; j < itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
-                            let galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
-                            if (galleryItemEle) {
-                                itemsCount++;
+                    for (let j = 0; j < itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                        const 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) {
-                                        let itemsValues = 0;
-                                        let itemStyles = window.getComputedStyle(galleryItemEle);
-                                        if (itemStyles) {
-                                            let paddingWidth = parseFloat(itemStyles.paddingTop) + parseFloat(itemStyles.paddingBottom);
-                                            if (!(isNullOrUndefined(paddingWidth)))
-                                                itemsValues += paddingWidth;
-                                            let marginWidth = parseFloat(itemStyles.marginTop) + parseFloat(itemStyles.marginBottom);
-                                            if (!(isNullOrUndefined(marginWidth)))
-                                                itemsValues += marginWidth;
+                                    let itemsValues = 0;
+                                    const itemStyles = window.getComputedStyle(galleryItemEle);
+                                    if (itemStyles) {
+                                        const 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 {
@@ -3828,32 +3899,50 @@ class RibbonGallery {
                                             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');
+                                }
+                            }
                         }
                     }
                 }
             }
         }
     }
-    checkCollision(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
+     */
+    checkCollision(popup, popupEle, offsetValue = 0) {
         let paddingWidth = 0;
         let marginWidth = 0;
         if (popupEle) {
-            let screenWidth = window.innerWidth;
-            let paddingStyles = window.getComputedStyle(popupEle);
+            const windowWidth = window.innerWidth;
+            let screenWidth = offsetValue === 0 ? windowWidth : Math.abs(windowWidth - (windowWidth - offsetValue));
+            const paddingStyles = window.getComputedStyle(popupEle);
             if (paddingStyles) {
                 paddingWidth = parseFloat(paddingStyles.paddingLeft) + parseFloat(paddingStyles.paddingRight);
-                if (!(isNullOrUndefined(paddingWidth)))
+                if (!(isNullOrUndefined(paddingWidth))) {
                     screenWidth = screenWidth - paddingWidth;
+                }
             }
-            let popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
+            const popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
             if (popup.width !== 'auto') {
                 popupContainerItems.forEach((ele) => {
                     ele.style.flexFlow = 'wrap';
@@ -3863,15 +3952,16 @@ class RibbonGallery {
             for (let i = 0; i < popupContainerItems.length; i++) {
                 let itemsWidth = 0;
                 for (let j = 0; j < popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item').length; j++) {
-                    let marginStyles = window.getComputedStyle(popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)]);
-                    if (marginStyles) {
-                        marginWidth = parseFloat(marginStyles.marginLeft) + parseFloat(marginStyles.marginRight);
-                        if (!(isNullOrUndefined(marginWidth)))
+                    const 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;
                     }
@@ -3880,6 +3970,9 @@ class RibbonGallery {
                     popupContainerItems.forEach((ele) => {
                         ele.style.flexFlow = 'wrap';
                     });
+                    if (popup.height === 'auto') {
+                        this.setGalleryPopupHeight(popupEle, parseFloat(paddingStyles.height), parseFloat(paddingStyles.top));
+                    }
                     break;
                 }
             }
@@ -3893,11 +3986,22 @@ class RibbonGallery {
                 else {
                     popupEle.style.width = (popup.width).toString();
                 }
+                if (popup.height === 'auto') {
+                    this.setGalleryPopupHeight(popupEle, parseFloat(paddingStyles.height), parseFloat(paddingStyles.top));
+                }
             }
         }
     }
+    setGalleryPopupHeight(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';
+        }
+    }
     createPopup(item, buttonEle) {
-        let popupContainer = this.parent.createElement('div', {
+        const popupContainer = this.parent.createElement('div', {
             className: 'e-ribbon-popup-container',
             id: item.id + '_popupContainer'
         });
@@ -3929,16 +4033,19 @@ class RibbonGallery {
      * @hidden
      */
     switchGalleryItems(activeLayout, itemID) {
-        let itemEle = this.parent.element.querySelector('#' + itemID + CONTAINER_ID);
-        let count = 0;
+        const itemEle = this.parent.element.querySelector('#' + itemID + CONTAINER_ID);
         const itemProp = getItem(this.parent.tabs, itemID);
         if (itemEle) {
-            let galleryWrapper = itemEle.querySelector('.e-ribbon-gallery-wrapper');
-            let galleryIcons = itemEle.querySelectorAll('.e-ribbon-gallery-icons');
-            let galleryContainer = itemEle.querySelectorAll('.e-ribbon-gallery-container');
+            const galleryIcons = itemEle.querySelectorAll('.e-ribbon-gallery-icons');
+            const galleryContainer = itemEle.querySelectorAll('.e-ribbon-gallery-container');
             if (galleryIcons.length) {
                 for (let i = 0; i < galleryIcons.length; i++) {
-                    activeLayout === 'Simplified' ? galleryIcons[parseInt(i.toString(), 10)].classList.add('e-hidden') : galleryIcons[parseInt(i.toString(), 10)].classList.remove('e-hidden');
+                    if (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) {
@@ -3946,24 +4053,20 @@ class RibbonGallery {
                     for (let i = 0; i < galleryContainer.length; i++) {
                         if (itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].itemHeight && itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].itemHeight !== 'auto') {
                             if (itemID + '_galleryContainer' + n === galleryContainer[parseInt(i.toString(), 10)].id) {
-                                activeLayout === 'Simplified' ? galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'nowrap' : galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'wrap';
+                                if (activeLayout === 'Simplified') {
+                                    galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'nowrap';
+                                }
+                                else {
+                                    galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'wrap';
+                                }
                             }
                         }
                     }
                 }
             }
-            if (galleryWrapper) {
-                for (let n = 0; n < itemProp.item.gallerySettings.groups.length; n++) {
-                    for (let i = 0; i < itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].items.length; i++) {
-                        count++;
-                        if (count > itemProp.item.gallerySettings.itemCount) {
-                            let galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + n + '_gallery' + i);
-                            if (galleryItemEle) {
-                                activeLayout === 'Simplified' ? galleryItemEle.classList.add('e-hidden') : galleryItemEle.classList.remove('e-hidden');
-                            }
-                        }
-                    }
-                }
+            const activeContent = this.parent.tabObj.element.querySelector('#' + this.parent.tabs[this.parent.selectedTab].id + CONTENT_ID);
+            if (activeContent) {
+                this.checkAvailableHeight(activeContent);
             }
         }
     }
@@ -3972,26 +4075,26 @@ class RibbonGallery {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */
-    addOverFlowEvents(item, itemEle, overflowButton) {
+    addOverFlowEvents(item, itemEle) {
         if (itemEle.closest('.e-ribbon-overflow-target')) {
             const buttonEle = this.parent.createElement('button', {
-                id: item.id,
+                id: item.id
             });
             itemEle.appendChild(buttonEle);
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
             itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach((ele) => {
                 ele.classList.add('e-hidden');
             });
-            let popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
-            if (popupButton)
+            const popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
+            if (popupButton) {
                 popupButton.classList.add('e-hidden');
+            }
             const itemProp = getItem(this.parent.tabs, item.id);
             let iconCss = itemProp && itemProp.group.groupIconCss ? itemProp.group.groupIconCss : '';
-            let content = itemProp && itemProp.group.header ? itemProp.group.header : '';
+            const content = itemProp && itemProp.group.header ? itemProp.group.header : '';
             if (!iconCss) {
                 for (let i = 0; i < item.gallerySettings.groups.length; i++) {
                     for (let j = 0; j < item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
@@ -4005,9 +4108,9 @@ class RibbonGallery {
                     }
                 }
             }
-            let popupEle = document.querySelector('#' + item.id + '_galleryPopup');
-            let popup = getComponent(popupEle, Popup);
-            let popupContainerEle = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
+            const popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            const popup = getComponent(popupEle, Popup);
+            const popupContainerEle = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
             const dropdown = new DropDownButton({
                 iconCss: iconCss,
                 content: content,
@@ -4017,7 +4120,6 @@ class RibbonGallery {
                 disabled: item.disabled,
                 open: () => {
                     this.setFoucsToFirstItem(popupContainerEle, true, item.id);
-                    this.checkCollision(dropdown.dropDown, dropdown.dropDown.element);
                 },
                 beforeClose: (args) => {
                     const isCancelled = this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
@@ -4044,7 +4146,7 @@ class RibbonGallery {
      * @hidden
      */
     removeOverFlowEvents(item, itemEle) {
-        let popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
+        const popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
         if (popupButton) {
             popupButton.classList.remove('e-hidden');
         }
@@ -4054,20 +4156,20 @@ class RibbonGallery {
         });
         const galleryDDBEle = document.querySelector('#' + item.id);
         if (galleryDDBEle) {
-            let popupEle = document.querySelector('#' + item.id + '_galleryPopup');
+            const popupEle = document.querySelector('#' + item.id + '_galleryPopup');
             const dropdown = getComponent(galleryDDBEle, DropDownButton);
             popupEle.appendChild(dropdown.target);
             dropdown.destroy();
             remove(galleryDDBEle);
         }
     }
-    setActiveState(galleryEle, gallerySettings, itemID, isInteracted, event) {
+    setActiveState(galleryEle, gallerySettings, itemID, isInteracted, event, isPopup) {
         let previousItem;
         let currentItem;
-        let itemEle = document.querySelector('#' + itemID + CONTAINER_ID);
+        const itemEle = document.querySelector('#' + itemID + CONTAINER_ID);
         let selctedGalleryItem = Array.prototype.slice.call(itemEle.querySelectorAll('.e-ribbon-gallery-selected'));
-        let popupEle = document.querySelector('#' + itemID + '_popupContainer');
-        let popupGalleryItem = Array.prototype.slice.call(popupEle.querySelectorAll('.e-ribbon-gallery-selected'));
+        const popupEle = document.querySelector('#' + itemID + '_popupContainer');
+        const popupGalleryItem = Array.prototype.slice.call(popupEle.querySelectorAll('.e-ribbon-gallery-selected'));
         if (popupGalleryItem.length) {
             selctedGalleryItem = selctedGalleryItem.concat(popupGalleryItem);
         }
@@ -4076,12 +4178,13 @@ class RibbonGallery {
                 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)];
                 }
             }
         }
-        let galleryItem = document.querySelectorAll('#' + galleryEle.id);
+        const galleryItem = document.getElementById(galleryEle.id);
+        let galleryItemPopup;
         const selectingEventArgs = { cancel: false, name: 'beforeSelect', previousItem: previousItem, currentItem: currentItem, isInteracted: isInteracted, event: event };
         if (gallerySettings.beforeSelect) {
             gallerySettings.beforeSelect.call(this, selectingEventArgs);
@@ -4093,11 +4196,18 @@ class RibbonGallery {
             for (let i = 0; i < selctedGalleryItem.length; i++) {
                 selctedGalleryItem[parseInt(i.toString(), 10)].classList.remove('e-ribbon-gallery-selected');
             }
-            for (let i = 0; i < galleryItem.length; i++) {
-                galleryItem[parseInt(i.toString(), 10)].classList.add('e-ribbon-gallery-selected');
+            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');
             const selectedEventArgs = { previousItem: previousItem, currentItem: currentItem, name: 'select', isInteracted: isInteracted, event: event };
-            let galleryPopupItems = document.querySelectorAll('#' + itemID + '_popupContainer .e-ribbon-gallery-item');
+            const galleryPopupItems = document.querySelectorAll('#' + itemID + '_popupContainer .e-ribbon-gallery-item');
             for (let i = 0; i < galleryPopupItems.length; i++) {
                 if (galleryPopupItems[parseInt(i.toString(), 10)].id === galleryEle.id) {
                     gallerySettings.selectedItemIndex = i;
@@ -4132,6 +4242,9 @@ class RibbonGallery {
         const buttonEle = document.querySelector('#' + itemID + '_popupButton');
         buttonEle.classList.add('e-gallery-button-active');
         const buttonPosition = buttonEle.getBoundingClientRect();
+        if (popupEle.offsetWidth > buttonPosition.left) {
+            this.checkCollision(popup, popupEle, buttonPosition.left);
+        }
         const offsetX = Math.abs((popupEle.offsetWidth - buttonPosition.left)) + buttonEle.offsetWidth;
         popupEle.style.left = offsetX + 'px';
         popupEle.style.top = popupEle.getBoundingClientRect().top + 2 + 'px';
@@ -4154,8 +4267,8 @@ class RibbonGallery {
      */
     showGalleryPopup(id) {
         const itemProp = getItem(this.parent.tabs, id);
-        let popupEle = document.querySelector('#' + id + '_galleryPopup');
-        let popup = getComponent(popupEle, Popup);
+        const popupEle = document.querySelector('#' + id + '_galleryPopup');
+        const popup = getComponent(popupEle, Popup);
         this.showPopup(popup, popupEle, null, itemProp.item.gallerySettings, id);
     }
     /**
@@ -4166,8 +4279,8 @@ class RibbonGallery {
      */
     hideGalleryPopup(id) {
         const itemProp = getItem(this.parent.tabs, id);
-        let popupEle = document.querySelector('#' + id + '_galleryPopup');
-        let popup = getComponent(popupEle, Popup);
+        const popupEle = document.querySelector('#' + id + '_galleryPopup');
+        const popup = getComponent(popupEle, Popup);
         this.hidePopup(popup, popupEle, null, itemProp.item.gallerySettings, id);
     }
     setFoucsToFirstItem(popupEle, isDropdown, itemID, popup, gallerySettings) {
@@ -4178,7 +4291,7 @@ class RibbonGallery {
         };
     }
     handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings) {
-        let galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
+        const galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
         if (galleryPopupEle) {
             if (e.key === 'Home') {
                 this.galleryItemsIndex = 0;
@@ -4212,10 +4325,7 @@ class RibbonGallery {
                     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);
             }
         }
@@ -4231,8 +4341,7 @@ class RibbonGallery {
         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);
     }
     createGalleryPopupTemplate(galleryItemEle, gallerySettings, id, items) {
         galleryItemEle.classList.add('e-ribbon-gallery-popup-template');
@@ -4245,12 +4354,11 @@ class RibbonGallery {
         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);
     }
 }
 
-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;
@@ -4625,16 +4733,16 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
             }
         }
-        let galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
+        const galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
         if (galleryPopupEle) {
-            let popup = getComponent(galleryPopupEle, Popup);
+            const popup = getComponent(galleryPopupEle, Popup);
             popup.hide();
         }
         if (this.ribbonKeyTipModule && this.enableKeyTips) {
             this.ribbonKeyTipModule.removeKeytip();
         }
     }
-    mouseEventHandler(e) {
+    mouseEventHandler() {
         if (this.ribbonKeyTipModule && this.enableKeyTips) {
             this.ribbonKeyTipModule.removeKeytip();
         }
@@ -4710,25 +4818,24 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     addKeyTip(tabIndex, keyTip, id, type) {
         if (this.keyTipElements && this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
             let isKeyTipExist = false;
-            /* eslint-disable */
-            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)][type])) {
-                this.keyTipElements[parseInt(tabIndex.toString(), 10)][type] = [];
+            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)][`${type}`])) {
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)][`${type}`] = [];
             }
-            if (Object.keys(this.keyTipElements[tabIndex][type]).length) {
-                let keytipData = this.keyTipElements[tabIndex][type];
-                for (let i = 0; i < Object.keys(this.keyTipElements[tabIndex][type]).length; i++) {
+            if (Object.keys(this.keyTipElements[parseInt(tabIndex.toString(), 10)][`${type}`]).length) {
+                const keytipData = this.keyTipElements[parseInt(tabIndex.toString(), 10)][`${type}`];
+                for (let 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 */
         }
     }
     renderTabs() {
@@ -4796,7 +4903,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const selectedTabId = e.selectedItem.getAttribute('data-id');
         let selectedIndex = getIndex(this.tabs, ((tab) => (tab.id === selectedTabId)));
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
-        let isContextual = this.isContextualTab(selectedTabId);
+        const isContextual = this.isContextualTab(selectedTabId);
         this.updateSelectedState(selectedTabId);
         const eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
         this.setProperties({ selectedTab: selectedIndex }, true);
@@ -4814,10 +4921,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 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) {
             const overflowTarget = this.overflowDDB.target;
             const ofTabContainer = overflowTarget.querySelector('.' + RIBBON_TAB_ACTIVE);
@@ -4846,7 +4953,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         break;
                     }
                 }
-                this.contextualTabs[parseInt(i.toString(), 10)].setProperties({ isSelected: isSelected }, true);
+                this.contextualTabs[parseInt(i.toString(), 10)].
+                    setProperties({ isSelected: isSelected }, true);
             }
         }
     }
@@ -5044,7 +5152,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                             this.setItemSize(itemEle, item);
                         }
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (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);
                         }
                     }
@@ -5053,7 +5162,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
-            let itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+            const itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
             if (itemsLength && !group.enableGroupOverflow) {
                 isEmptyCollection = this.checkEmptyCollection(itemsLength);
                 if (isEmptyCollection) {
@@ -5085,6 +5194,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (isMenu) {
                 dropdown.beforeOpen = () => {
                     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 });
@@ -5139,7 +5251,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                             break;
                         }
                         const groupEle = tabContent.querySelector('#' + collection.id);
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (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);
@@ -5171,7 +5284,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         const groupElement = tabContent.querySelector('#' + group.id);
                         const itemEle = groupElement.querySelector('.' + RIBBON_ITEM);
                         if (groupElement.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
-                            let itemsLength = groupElement.querySelectorAll('.' + RIBBON_ITEM);
+                            const itemsLength = groupElement.querySelectorAll('.' + RIBBON_ITEM);
                             if (itemsLength) {
                                 isEmptyCollection = this.checkEmptyCollection(itemsLength);
                                 if (!isEmptyCollection) {
@@ -5184,7 +5297,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             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);
                     }
                 }
@@ -5218,7 +5332,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (overflowDDB) {
                 const overflowButton = getInstance(overflowDDB, DropDownButton);
                 const overflowBtnTarget = overflowButton.target;
-                let itemEle = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
+                const itemEle = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
                 let isHidden = true;
                 for (let i = 0; i < itemEle.length; i++) {
                     if (!(itemEle[parseInt(i.toString(), 10)].classList.contains('e-hidden'))) {
@@ -5239,7 +5353,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     for (let k = 0; k < ofTabContainer.children.length; k++) {
                         isItemHidden = true;
                         const overflowTab = ofTabContainer.children[parseInt(k.toString(), 10)];
-                        let groupTabContainer = overflowTab.querySelectorAll('.e-ribbon-item');
+                        const groupTabContainer = overflowTab.querySelectorAll('.e-ribbon-item');
                         for (let n = 0; n < groupTabContainer.length; n++) {
                             if (!(groupTabContainer[parseInt(n.toString(), 10)].classList.contains('e-hidden'))) {
                                 isItemHidden = false;
@@ -5275,7 +5389,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.addKeyTip(tabIndex, '0' + (itemProp.groupIndex + 1), overflowButton.element.id, 'grpofbtn');
             overflowtarget = overflowButton.target;
             const overflowBtnTarget = overflowButton.target;
-            let headerEle = overflowBtnTarget.querySelector('#' + groupId + GROUPOF_BUTTON_ID + HEADER_ID);
+            const headerEle = overflowBtnTarget.querySelector('#' + groupId + GROUPOF_BUTTON_ID + HEADER_ID);
             if (!headerEle) {
                 if (itemProp.group.overflowHeader) {
                     const groupHeader = this.createElement('div', {
@@ -5297,8 +5411,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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) {
@@ -5310,7 +5428,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             else {
                 this.overflowDDB.element.classList.remove(HIDE_CSS);
                 const overflowEle = this.overflowDDB.target;
-                const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                const ofTabContainer = overflowEle.querySelector('#' +
+                    this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
                 if (ofTabContainer) {
                     let ofGroupContainer = overflowEle.querySelector('#' + groupId + CONTAINER_ID);
                     if (!ofGroupContainer) {
@@ -5328,7 +5447,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                         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);
@@ -5368,7 +5492,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 break;
             case 'Gallery':
                 if (this.activeLayout === 'Simplified') {
-                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle, overflowButton);
+                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle);
                 }
                 break;
             case 'GroupButton':
@@ -5386,13 +5510,14 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const overflowtarget = this.overflowDDB.target;
         overflowtarget.append(ofTabContainer);
         const itemProp = getGroup(this.tabs, groupId);
-        let ofGroupContainer = itemProp.group.overflowHeader ? this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
+        const ofGroupContainer = itemProp.group.overflowHeader ?
+            this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
         ofGroupContainer.append(itemEle);
         ofTabContainer.append(ofGroupContainer);
         if (tabIndex === this.selectedTab) {
             ofTabContainer.classList.add(RIBBON_TAB_ACTIVE);
         }
-        let groupEle = document.querySelector('#' + groupId);
+        const groupEle = document.querySelector('#' + groupId);
         if (groupEle) {
             if (groupEle.classList.contains('e-disabled')) {
                 ofGroupContainer.classList.add('e-disabled');
@@ -5738,7 +5863,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                         const 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;
@@ -5989,7 +6119,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     }
     handleContentSize(itemEle, isRemoveOverflow) {
         const 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);
+        }
     }
     setItemSize(itemEle, item) {
         if (itemEle) {
@@ -6179,11 +6314,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const nextTabId = e.selectingItem.getAttribute('data-id');
         const previousTabId = e.previousItem.getAttribute('data-id');
         let nextIndex = getIndex(this.tabs, ((tab) => (tab.id === nextTabId)));
-        let isContextual = this.isContextualTab(nextTabId);
+        const isContextual = this.isContextualTab(nextTabId);
         const previousIndex = getIndex(this.tabs, ((tab) => (tab.id === previousTabId)));
         nextIndex = nextIndex === -1 ? this.selectedTab : nextIndex;
         const eventArgs = {
-            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex, isContextual: isContextual
+            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex,
+            selectedIndex: nextIndex, isContextual: isContextual
         };
         this.trigger('tabSelecting', eventArgs, (args) => {
             if (args.cancel) {
@@ -6236,9 +6372,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.element.classList.add(RIBBON_SIMPLIFIED_MODE);
         }
         const 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);
     }
     addOverflowButton(btnId, isGroupOF) {
         const overflowButton = this.createElement('button', {
@@ -6295,7 +6432,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             items = currentList.getElementsByClassName('e-ribbon-item');
         }
         const control = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control');
-        const comboBoxEle = control && control.classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
+        const comboBoxEle = control && control.classList.contains('e-combobox') ?
+            items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
         let ribbonItem;
         let templateEle;
         if (comboBoxEle === null || (e.key === 'Tab') || this.itemIndex < 0) {
@@ -6352,7 +6490,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             target.setAttribute('index', this.itemIndex.toString());
         }
         const currentItemIndex = parseInt(target.getAttribute('index'), 10);
-        let itemType = "";
+        let itemType = '';
         const controlItem = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control') : null;
         if (controlItem) {
             itemType = controlItem.getAttribute('data-control');
@@ -6382,12 +6520,20 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         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') {
@@ -6496,11 +6642,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     reRenderTabs(tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        for (const key in tabs) {
+        for (const key of Object.keys(tabs)) {
             const index = parseInt(key, 10);
             const tab = tabs[parseInt(index.toString(), 10)];
             let isNewTab = false;
-            for (var j = 0; j < (this.tabObj.items.length); j++) {
+            for (let j = 0; j < (this.tabObj.items.length); j++) {
                 if (this.tabs[parseInt(index.toString(), 10)].id === this.tabObj.items[parseInt(j.toString(), 10)].id) {
                     isNewTab = true;
                     break;
@@ -6642,7 +6788,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
                                     if (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)) {
                                         this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (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);
                                         }
                                     }
@@ -6741,7 +6888,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     let itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
                                     if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (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);
@@ -6766,7 +6914,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 }
                             }
                             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);
                                 }
                             }
@@ -6878,7 +7027,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         // eslint-disable-next-line
         let 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');
+            }
         }
     }
     validateItemSize() {
@@ -7002,7 +7156,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             if (item.type === RibbonItemType.GroupButton) {
                 for (let i = 0; i < item.groupButtonSettings.items.length; i++) {
-                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] && item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip) {
+                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] &&
+                        item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip) {
                         this.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip, item.id + (RIBBON_GROUP_BUTTON_ID + i), 'item');
                     }
                 }
@@ -7039,7 +7194,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.createRibbonItem(item, itemEle);
             if ((this.activeLayout === 'Simplified') && ((item.displayOptions === DisplayMode.Overflow) || (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)))) {
                 this.createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer);
-                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (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);
                 }
             }
@@ -7096,7 +7252,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         for (let i = 0; i < list.length; i++) {
             const listitem = list[parseInt(i.toString(), 10)];
             if (!listitem.id) {
-                listitem.setProperties({ id: initId + key + (this.idIndex++) }, true);
+                let htmlAttrID;
+                if (type === 'item') {
+                    htmlAttrID = this.hasHtmlAtrrID(listitem);
+                }
+                listitem.setProperties({ id: htmlAttrID ? htmlAttrID : initId + key + (this.idIndex++) }, true);
             }
             switch (type) {
                 case 'tab':
@@ -7108,12 +7268,32 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 case 'collection':
                     listitem.setProperties({ items: this.checkID(listitem.items, 'item', listitem.id) }, true);
                     break;
-                default:
-                    break;
             }
         }
         return list;
     }
+    hasHtmlAtrrID(listItem) {
+        let 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;
+    }
     updateCommonProperty(commonProp) {
         this.tabObj.setProperties(commonProp);
         if (this.ribbonFileMenuModule) {
@@ -7227,8 +7407,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 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);
@@ -7295,22 +7475,22 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         else if (moduleName === 'gallery') {
             if (ele.closest('.e-ribbon-overflow-target')) {
                 destroyControl(ele, 'dropdown-btn');
-                let galleryPopupEle = Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '_galleryPopup'));
+                const galleryPopupEle = Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '_galleryPopup'));
                 galleryPopupEle.concat(Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '-popup')));
                 for (let i = 0; i < galleryPopupEle.length; i++) {
                     galleryPopupEle[parseInt(i.toString(), 10)].remove();
                 }
             }
             else {
-                let galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
-                let galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
+                const galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
+                const galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
                 if (galleryPopupBtn) {
                     galleryPopupBtn.remove();
                 }
                 for (let i = 0; i < galleryEle.length; i++) {
                     galleryEle[parseInt(i.toString(), 10)].remove();
                 }
-                let galleryPopupEle = document.querySelectorAll('#' + item.id + '_galleryPopup');
+                const galleryPopupEle = document.querySelectorAll('#' + item.id + '_galleryPopup');
                 for (let i = 0; i < galleryPopupEle.length; i++) {
                     galleryPopupEle[parseInt(i.toString(), 10)].remove();
                 }
@@ -7391,6 +7571,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
      * 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}
      */
     showTab(tabId, isContextual = false) {
@@ -7400,6 +7581,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
      * 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}
      */
     hideTab(tabId, isContextual = false) {
@@ -7424,7 +7606,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (contextualTab) {
                 let isTabHidden = true;
                 for (let i = 0; i < contextualTab.tabs.length; i++) {
-                    const index = getIndex(this.tabs, (e) => { return e.id === contextualTab.tabs[parseInt(i.toString(), 10)].id; });
+                    const index = getIndex(this.tabs, (e) => {
+                        return e.id === contextualTab.tabs[parseInt(i.toString(), 10)].id;
+                    });
                     if (index !== -1) {
                         const toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index.toString(), 10)];
                         if (!(toolbarEle.classList.contains('e-hidden'))) {
@@ -7506,8 +7690,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     for (const item of collection.items) {
                         let ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                         if (item.type === RibbonItemType.GroupButton && this.activeLayout === 'Classic') {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + RIBBON_GROUP_BUTTON_ID) :
-                                contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                            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);
@@ -7603,7 +7787,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             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);
                     }
                 }
@@ -7676,13 +7861,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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) {
                 const 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');
+                    }
                 }
             }
         }
@@ -7720,38 +7915,35 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 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) {
-                    let index = hiddenProps[key].indexOf(id);
+                if (hiddenProps[`${key}`].length) {
+                    const 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 */
             }
         }
     }
     updateItemsSimplifiedWidth(tabIndex, key) {
-        let hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
-        /* eslint-disable */
-        if (hiddenProps && hiddenProps[key] && hiddenProps[key].length) {
-            for (let i = 0; i < hiddenProps[key].length; i++) {
-                const contentEle = this.tabObj.items[tabIndex].content;
+        const hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
+        if (hiddenProps && hiddenProps[`${key}`] && hiddenProps[`${key}`].length) {
+            for (let i = 0; i < hiddenProps[`${key}`].length; i++) {
+                const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
                 let hiddenEle;
                 let groupEle;
                 let isGroupHidden = false;
                 let 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') {
@@ -7787,7 +7979,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                             }
                             else {
                                 if (this.hiddenGroups.indexOf(groupEle.id) !== -1) {
-                                    let hiddenItems = groupEle.querySelectorAll('.e-ribbon-item:not(.e-hidden)');
+                                    const hiddenItems = groupEle.querySelectorAll('.e-ribbon-item:not(.e-hidden)');
                                     hiddenItems.forEach((item) => {
                                         if (item.id !== hiddenEle.id) {
                                             item.classList.add('e-hidden');
@@ -7811,12 +8003,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         groupEle.classList.add('e-ribbon-emptyCollection');
                     }
                 }
-                let index = hiddenProps[key].indexOf(hiddenProps[key][i]);
+                const index = hiddenProps[`${key}`].indexOf(hiddenProps[`${key}`][parseInt(i.toString(), 10)]);
                 if (index !== -1) {
-                    hiddenProps[key].splice(index, 1);
+                    hiddenProps[`${key}`].splice(index, 1);
                     i--;
                 }
-                /* eslint-enable */
             }
         }
     }
@@ -7838,7 +8029,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     }
     calculateHiddenElementsWidth(tabIndex) {
         if (tabIndex === this.selectedTab && this.activeLayout === 'Simplified') {
-            let hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
+            const hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
             if (hiddenProps) {
                 for (let i = 0; i < Object.keys(hiddenProps).length; i++) {
                     this.updateItemsSimplifiedWidth(tabIndex, Object.keys(hiddenProps)[parseInt(i.toString(), 10)]);
@@ -7849,23 +8040,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     calculateMediumDataWidth(hiddenWidth, tabIndex, isHidden) {
         if (this.selectedTab === tabIndex && this.activeLayout === 'Simplified') {
             const activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + CONTENT_ID);
-            let mediumDataItems = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-item'));
+            const mediumDataItems = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-item'));
             if (this.overflowDDB) {
                 const overflowEle = this.overflowDDB.target;
-                let overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
-                let selectedOFTab = document.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                const overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
+                const selectedOFTab = document.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
                 for (let i = 0; i < overflowItems.length; i++) {
-                    let ofTab = overflowItems[parseInt(i.toString(), 10)].closest('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                    const ofTab = overflowItems[parseInt(i.toString(), 10)].closest('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
                     if (selectedOFTab && ofTab && selectedOFTab.id === ofTab.id && overflowItems[parseInt(i.toString(), 10)].hasAttribute('data-medium-width')) {
                         mediumDataItems.push(overflowItems[parseInt(i.toString(), 10)]);
                     }
                 }
             }
-            let groupOFButton = activeContent.querySelectorAll('.e-ribbon-group-of-btn');
+            const groupOFButton = activeContent.querySelectorAll('.e-ribbon-group-of-btn');
             for (let i = 0; i < groupOFButton.length; i++) {
-                let overflowButton = getInstance(groupOFButton[parseInt(i.toString(), 10)], DropDownButton);
+                const overflowButton = getInstance(groupOFButton[parseInt(i.toString(), 10)], DropDownButton);
                 const overflowBtnTarget = overflowButton.target;
-                let overflowItems = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
+                const overflowItems = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
                 for (let i = 0; i < overflowItems.length; i++) {
                     if (overflowItems[parseInt(i.toString(), 10)].hasAttribute('data-medium-width')) {
                         mediumDataItems.push(overflowItems[parseInt(i.toString(), 10)]);
@@ -7874,7 +8065,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             for (let i = 0; i < mediumDataItems.length; i++) {
                 if (mediumDataItems[parseInt(i.toString(), 10)].hasAttribute('data-medium-width')) {
-                    let previousWidth = parseInt(mediumDataItems[parseInt(i.toString(), 10)].getAttribute('data-medium-width'), 10);
+                    const previousWidth = parseInt(mediumDataItems[parseInt(i.toString(), 10)].getAttribute('data-medium-width'), 10);
                     mediumDataItems[parseInt(i.toString(), 10)].setAttribute('data-medium-width', isHidden ? (previousWidth - hiddenWidth).toString() : (previousWidth + hiddenWidth).toString());
                 }
             }
@@ -7886,7 +8077,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             for (let i = 0; i < groupList.length; i++) {
                 const group = groupList[parseInt(i.toString(), 10)];
                 if (group.enableGroupOverflow) {
-                    let groupContainer = document.querySelector('#' + group.id);
+                    const groupContainer = document.querySelector('#' + group.id);
                     let overflowButton;
                     const overflowDDB = groupContainer.querySelector('#' + group.id + GROUPOF_BUTTON_ID);
                     if (overflowDDB) {
@@ -7894,9 +8085,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     }
                     if (overflowButton) {
                         const overflowEle = overflowButton.target;
-                        let overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
+                        const overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
                         for (let i = 0; i < overflowItems.length; i++) {
-                            let previousWidth = parseInt(overflowItems[parseInt(i.toString(), 10)].getAttribute('data-simplified-width'), 10);
+                            const previousWidth = parseInt(overflowItems[parseInt(i.toString(), 10)].getAttribute('data-simplified-width'), 10);
                             if (previousWidth) {
                                 overflowItems[parseInt(i.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
                             }
@@ -7906,13 +8097,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
         if (this.overflowDDB) {
-            let selectedOFTab = document.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+            const selectedOFTab = document.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
             const overflowEle = this.overflowDDB.target;
-            let overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
+            const overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
             for (let i = 0; i < overflowItems.length; i++) {
-                let ofTab = overflowItems[parseInt(i.toString(), 10)].closest('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                const ofTab = overflowItems[parseInt(i.toString(), 10)].closest('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
                 if (selectedOFTab && ofTab && selectedOFTab.id === ofTab.id) {
-                    let previousWidth = parseInt(overflowItems[parseInt(i.toString(), 10)].getAttribute('data-simplified-width'), 10);
+                    const previousWidth = parseInt(overflowItems[parseInt(i.toString(), 10)].getAttribute('data-simplified-width'), 10);
                     if (previousWidth) {
                         overflowItems[parseInt(i.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
                     }
@@ -7948,7 +8139,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const contentEle = this.tabObj.items[itemProp.tabIndex].content;
         const 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);
@@ -7963,13 +8159,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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) {
                 const 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');
+                    }
                 }
             }
         }
@@ -8194,19 +8400,22 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
         }
         if (initialProps) {
-            /* eslint-disable */
-            if (!initialProps[key])
-                initialProps[key] = [];
-            const itemIndex = initialProps[key].indexOf(id);
+            if (!initialProps[`${key}`]) {
+                initialProps[`${key}`] = [];
+            }
+            const 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)];
                 }
@@ -8232,7 +8441,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         else {
                             itemEle = getItemElement(this, item.id);
                         }
-                        let itemContainer = itemEle ? itemEle.closest('.e-ribbon-item') : null;
+                        const itemContainer = itemEle ? itemEle.closest('.e-ribbon-item') : null;
                         if (!(itemContainer.classList.contains('e-hidden'))) {
                             isItemsHidden = false;
                             break;
@@ -8250,7 +8459,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.checkOverflowItems(isHidden, contentEle, group.enableGroupOverflow, tabIndex, group.id);
         }
         if (this.activeLayout === 'Simplified' && !group.enableGroupOverflow) {
-            let itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+            const itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
             if (itemsLength) {
                 isEmptyCollection = this.checkEmptyCollection(itemsLength);
                 groupEle.classList[isEmptyCollection ? 'add' : 'remove']('e-ribbon-emptyCollection');
@@ -8267,7 +8476,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 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 {
@@ -8277,7 +8491,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 if (ofTabContainer) {
                     const 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');
+                        }
                     }
                 }
             }
@@ -8314,8 +8533,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         for (const item of collection.items) {
                             let ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
                             if (item.type === RibbonItemType.GroupButton && this.activeLayout === 'Classic') {
-                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + RIBBON_GROUP_BUTTON_ID) :
-                                    contentEle.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID);
+                                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);
@@ -8419,7 +8638,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             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);
                     }
                 }
@@ -8716,7 +8936,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
      * 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.
      */
     getItem(itemId) {
         return getItem(this.tabs, itemId).item;
@@ -8738,7 +8958,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (ele) {
             const itemEle = closest(ele, '.e-ribbon-item');
             const 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') {
@@ -8876,13 +9097,14 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                     }
                     break;
-                case 'selectedTab':
+                case 'selectedTab': {
                     const tabEle = this.tabObj.element;
                     const toolbarItem = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(newProp.selectedTab.toString(), 10)];
                     if (!(toolbarItem.classList.contains('e-hidden') || toolbarItem.classList.contains('e-disable'))) {
                         this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
                     }
                     break;
+                }
                 case 'tabAnimation':
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
                     break;
@@ -8900,21 +9122,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     this.element.style.width = formatUnit(newProp.width);
                     this.refreshLayout();
                     break;
-                case 'fileMenu':
+                case 'fileMenu': {
                     if (this.ribbonFileMenuModule) {
                         this.ribbonFileMenuModule.updateFileMenu(this.fileMenu);
                     }
                     const toolbarEle = this.tabObj['tbObj'];
                     toolbarEle.refreshOverflow();
                     break;
-                case 'backStageMenu':
+                }
+                case 'backStageMenu': {
                     if (this.ribbonBackstageModule) {
                         this.ribbonBackstageModule.updateBackStageMenu(this.backStageMenu);
                     }
                     const toolbarElement = this.tabObj['tbObj'];
                     toolbarElement.refreshOverflow();
                     break;
-                case 'helpPaneTemplate':
+                }
+                case 'helpPaneTemplate': {
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
                         this.ribbonTempEle = null;
@@ -8926,93 +9150,95 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const toolbar = this.tabObj['tbObj'];
                     toolbar.refreshOverflow();
                     break;
+                }
                 case 'hideLayoutSwitcher':
-                    this.hideLayoutSwitcher ? this.removeExpandCollapse() : this.addExpandCollapse();
+                    if (this.hideLayoutSwitcher) {
+                        this.removeExpandCollapse();
+                    }
+                    else {
+                        this.addExpandCollapse();
+                    }
                     break;
             }
         }
     }
 };
-__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);
 
-/**
- * Ribbon modules
- */
-
 /**
  * Defines the items of Ribbon.
  */
@@ -9351,9 +9577,9 @@ class RibbonBackstage extends Component {
         this.parent = parent;
     }
     /**
-    * @private
-    * @returns {void}
-    */
+     * @private
+     * @returns {void}
+     */
     render() {
         // render code
     }
@@ -9454,6 +9680,8 @@ class RibbonBackstage extends Component {
                     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;
@@ -9517,7 +9745,8 @@ class RibbonBackstage extends Component {
         });
         let 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 {
@@ -9532,10 +9761,47 @@ class RibbonBackstage extends Component {
         if (this.parent.enableRtl) {
             this.updatePopupPositionOnRtl(this.parent.enableRtl);
         }
-        this.popupHTMLElement.onkeydown = (e) => { if (e.code === 'Escape') {
-            this.hideBackstage();
-        } };
         this.hideBackstage();
+        EventHandler.add(this.popupHTMLElement, 'keyup', (e) => {
+            if (e.code === 'Escape') {
+                this.hideBackstage();
+            }
+            this.handleNavigation(e);
+        }, this);
+    }
+    handleNavigation(e) {
+        const closeBtnEle = this.popupHTMLElement.querySelector('.e-ribbon-close-btn');
+        const menuItems = this.popupHTMLElement.querySelectorAll('.e-menu-item');
+        const arrowUp = e.key === 'ArrowUp';
+        const 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 (let 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();
+            }
+        }
     }
     updatePopupPositionOnRtl(enableRtl) {
         const popupStyle = this.popupHTMLElement.style;
@@ -9689,11 +9955,13 @@ class RibbonBackstage extends Component {
             const 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);
-        const eventArgs = { cancel: false, target: args.element, item: this.contentItem, isBackButton: this.isBackButtonClicked };
+        const eventArgs = { cancel: false, target: args.element,
+            item: this.contentItem, isBackButton: this.isBackButtonClicked };
         if (this.contentItem.backStageItemClick) {
             this.contentItem.backStageItemClick.call(this, eventArgs);
         }
@@ -9713,8 +9981,9 @@ class RibbonBackstage extends Component {
             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) {
@@ -9747,7 +10016,7 @@ class RibbonBackstage extends Component {
                     this.popupEle.setProperties({
                         height: backStageOptions.height,
                         width: backStageOptions.width,
-                        target: backStageOptions.target || this.parent.element,
+                        target: backStageOptions.target || this.parent.element
                     });
                 }
                 if (backStageOptions.template) {
@@ -9854,10 +10123,20 @@ class RibbonBackstage extends Component {
         for (let i = 0; i < items.length; i++) {
             const item = items[parseInt(i.toString(), 10)];
             if (item.isFooter) {
-                isAfter ? this.footerMenuCtrl.insertAfter(items, target, isUniqueId) : this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
+                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);
+                }
             }
         }
         const backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
@@ -9982,8 +10261,8 @@ class RibbonContextualTab {
             }
         }
         if (newProp.tabs) {
-            for (const key in newProp.tabs) {
-                let index = parseInt(key, 10);
+            for (const key of Object.keys(newProp.tabs)) {
+                const index = parseInt(key, 10);
                 const tab = this.parent.tabs.filter((e) => e.id === contextualTab.tabs[parseInt(index.toString(), 10)].id)[0];
                 this.parent.updateTab(tab);
             }
@@ -10018,8 +10297,7 @@ class RibbonKeyTip {
             if (key === 'tab') {
                 for (let i = 0; i < this.parent.tabs.length; i++) {
                     if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
-                        // eslint-disable-next-line
-                        keytipData = this.parent.keyTipElements[i][key];
+                        keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][`${key}`];
                         this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true);
                     }
                 }
@@ -10101,15 +10379,12 @@ class RibbonKeyTip {
     calculateItemPosition(key, isMethod = false, keyTip) {
         let xOffset;
         let yOffset;
-        let keytipData;
-        /* eslint-disable */
-        keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key];
+        const keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][`${key}`];
         if (keytipData) {
-            for (let i = 0; i < Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key]).length; i++) {
-                /* eslint-enable */
+            for (let 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) {
                     let 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+/, '');
                     }
                     const itemProp = getItem(this.parent.tabs, itemID);
@@ -10137,7 +10412,12 @@ class RibbonKeyTip {
                             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);
+                    }
                 }
             }
         }
@@ -10157,7 +10437,7 @@ class RibbonKeyTip {
                 isPopUpPresent = true;
             }
             if (keyEle.closest('.e-split-btn-wrapper')) {
-                let splitBtn = keyEle.closest('.e-split-btn-wrapper');
+                const splitBtn = keyEle.closest('.e-split-btn-wrapper');
                 splitBtnID = splitBtn.closest('.e-ribbon-item').id;
             }
             else {
@@ -10183,12 +10463,12 @@ class RibbonKeyTip {
                     enableRtl: this.parent.enableRtl
                 });
                 keytipPopup.show();
-                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset, (isTab && isPopUpItem));
+                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset);
                 this.parent.isKeytipOpen = true;
             }
         }
     }
-    calculateKeyTipPosition(itemEle, keytipElement, type, yOffset, isTabOverflow = false) {
+    calculateKeyTipPosition(itemEle, keytipElement, type, yOffset) {
         const position = itemEle.getBoundingClientRect();
         if (type === 'backstageMenu') {
             keytipElement.style.top = position.top + ((keytipElement.offsetHeight) / 2) + 'px';
@@ -10210,6 +10490,7 @@ class RibbonKeyTip {
      * Performs keytip action.
      *
      * @param {string} keyPress - Gets the keytip text.
+     * @param {boolean} isMethod - Gets the isMethod.
      * @returns {void}
      * @hidden
      */
@@ -10217,9 +10498,11 @@ class RibbonKeyTip {
         this.isKeytipPresent = false;
         for (let i = 0; ((i < Object.keys(this.parent.keyTipElements).length) && !this.isKeytipPresent); i++) {
             if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
-                for (let j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) && !this.isKeytipPresent); j++) {
-                    let keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
-                    for (let k = 0; ((k < keytipData.length) && !this.isKeytipPresent); k++) {
+                for (let j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) &&
+                    !this.isKeytipPresent); j++) {
+                    const keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.
+                        keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
+                    for (let k = 0; ((k < Object.keys(keytipData).length) && !this.isKeytipPresent); k++) {
                         if (keyPress.toUpperCase() === keytipData[parseInt(k.toString(), 10)].keyTip) {
                             const keyTipElement = document.querySelector('#' + keytipData[parseInt(k.toString(), 10)].id + RIBBON_KEYTIP_ID);
                             if (keyTipElement || isMethod) {
@@ -10230,8 +10513,9 @@ class RibbonKeyTip {
                                         this.parent.tabObj.select(i);
                                         setTimeout(() => {
                                             const tabOverflow = this.parent.tabObj.element.querySelector('.e-nav-active');
-                                            if (tabOverflow)
+                                            if (tabOverflow) {
                                                 tabOverflow.click();
+                                            }
                                             this.createKeytip('item');
                                         }, 600);
                                     }
@@ -10246,7 +10530,7 @@ class RibbonKeyTip {
                                         }
                                         else {
                                             let itemProp;
-                                            if ((keytipData[parseInt(k.toString(), 10)].id).includes("_popupButton")) {
+                                            if ((keytipData[parseInt(k.toString(), 10)].id).indexOf('_popupButton') !== -1) {
                                                 const galleryID = keytipData[parseInt(k.toString(), 10)].id.replace(/_popupButton/g, '');
                                                 itemProp = getItem(this.parent.tabs, galleryID);
                                             }
@@ -10264,7 +10548,7 @@ class RibbonKeyTip {
                                         if (keyEle) {
                                             let groupID = keytipData[parseInt(k.toString(), 10)].id;
                                             if (isMethod) {
-                                                if (keytipData[parseInt(k.toString(), 10)].id.includes("_launcher") || keytipData[parseInt(k.toString(), 10)].id.includes("_sim_grp_overflow") || keytipData[parseInt(k.toString(), 10)].id.includes("_overflow_dropdown")) {
+                                                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, '');
                                                     const itemProp = getGroup(this.parent.tabs, groupID);
                                                     if (itemProp.tabIndex === this.parent.selectedTab) {
@@ -10295,11 +10579,16 @@ class RibbonKeyTip {
             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 {
-            let itemID = keytipData[parseInt(k.toString(), 10)].id;
+            const itemID = keytipData[parseInt(k.toString(), 10)].id;
             if (document.querySelector('#' + itemID) && isMethod) {
                 if (this.parent.activeLayout === 'Simplified') {
                     if (document.querySelector('#' + itemID).closest('#' + itemProp.group.id + '_sim_grp_overflow-popup') && document.querySelector('#' + itemID).closest('#' + itemProp.group.id + '_sim_grp_overflow-popup').classList.contains('e-popup-close')) {
@@ -10332,21 +10621,24 @@ class RibbonKeyTip {
                 case 'colorpicker':
                     this.parent.ribbonColorPickerModule.toggle(itemID);
                     break;
-                case 'combobox':
+                case 'combobox': {
                     const itemEle = document.querySelector('#' + itemID);
                     setTimeout(() => {
                         itemEle.focus();
                     }, 100);
                     break;
-                case 'gallery':
+                }
+                case 'gallery': {
                     const galleryEle = document.querySelector('#' + itemID);
                     galleryEle.click();
                     break;
-                case 'template':
+                }
+                case 'template': {
                     const templateEle = document.querySelector('#' + itemID);
                     templateEle.focus();
                     break;
-                case 'group-btn':
+                }
+                case 'group-btn': {
                     const itemElement = document.querySelector('#' + itemID);
                     if (itemElement) {
                         const item = getInstance(itemElement, DropDownButton);
@@ -10358,20 +10650,19 @@ class RibbonKeyTip {
                         }
                     }
                     break;
+                }
             }
         }
     }
     commonItemsKeyTipPress(keyPress, key, isMethod) {
-        /* eslint-disable */
-        if (this.parent.keyTipElements[key]) {
+        if (this.parent.keyTipElements[`${key}`]) {
             let isKeyPressed = false;
-            let keytipData = this.parent.keyTipElements[key];
+            const keytipData = this.parent.keyTipElements[`${key}`];
             let keyEle;
             let keytipElement;
             if (keytipData) {
                 if (key === 'backstageMenu') {
-                    for (let i = 0; i < Object.keys(this.parent.keyTipElements[key]).length; i++) {
-                        /* eslint-enable */
+                    for (let 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);
@@ -10411,7 +10702,7 @@ class RibbonKeyTip {
                         setTimeout(() => {
                             for (let i = 0; i < Object.keys(this.parent.keyTipElements).length; i++) {
                                 if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
-                                    let keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)]['tab'];
+                                    const keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)]['tab'];
                                     this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true, true);
                                 }
                             }
@@ -10435,34 +10726,34 @@ class RibbonKeyTip {
         for (let i = 0; i < keyTipItems.length; i++) {
             const keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
             if (key === 'Escape' && this.parent.keyTipElements && this.parent.keyTipElements[this.parent.selectedTab]) {
-                /* eslint-disable */
                 for (let j = 0; j < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]).length; j++) {
-                    let keyText = (Object.keys(this.parent.keyTipElements[this.parent.selectedTab]))[j];
-                    if (this.parent.keyTipElements[this.parent.selectedTab][keyText]) {
-                        const index = getIndex(this.parent.keyTipElements[this.parent.selectedTab][keyText], (e) => { return e.id + RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
-                        /* eslint-enable */
-                        if (index !== -1) {
-                            if ((keyText === 'item' && !(this.isKeytipPopupOpen)) || (keyText === 'grpoverflow' && this.parent.activeLayout === 'Classic')) {
-                                this.createKeytip('tab');
+                    const keyText = (Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)]))[parseInt(j.toString(), 10)];
+                    const keyTipElement = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)];
+                    const index = getIndex(keyTipElement[`${keyText}`], (e) => {
+                        return e.id +
+                            RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id;
+                    });
+                    if (index !== -1) {
+                        if ((keyText === 'item' && !(this.isKeytipPopupOpen)) || (keyText === 'grpoverflow' && this.parent.activeLayout === 'Classic')) {
+                            this.createKeytip('tab');
+                            key = '';
+                            isKeyTipExist = true;
+                            break;
+                        }
+                        else if (this.isKeytipPopupOpen) {
+                            if ((keyText === 'popupitem' && this.parent.activeLayout === 'Simplified') || (keyText === 'grpoverflowpopup' && this.parent.activeLayout === 'Classic')) {
+                                this.createKeytip('item');
                                 key = '';
                                 isKeyTipExist = true;
                                 break;
                             }
-                            else if (this.isKeytipPopupOpen) {
-                                if ((keyText === 'popupitem' && this.parent.activeLayout === 'Simplified') || (keyText === 'grpoverflowpopup' && this.parent.activeLayout === 'Classic')) {
-                                    this.createKeytip('item');
-                                    key = '';
-                                    isKeyTipExist = true;
-                                    break;
-                                }
-                            }
                         }
                     }
                 }
                 for (let n = 0; n < Object.keys(this.parent.keyTipElements).length; n++) {
                     if (this.parent.keyTipElements[parseInt(n.toString(), 10)]) {
-                        let keytipData = this.parent.keyTipElements[parseInt(n.toString(), 10)]['tab'];
-                        for (let j = 0; j < keytipData.length; j++) {
+                        const keytipData = this.parent.keyTipElements[parseInt(n.toString(), 10)]['tab'];
+                        for (let 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')) {
                                     const tabOverflow = this.parent.tabObj.element.querySelector('.e-nav-active');
@@ -10495,8 +10786,9 @@ class RibbonKeyTip {
             }
         }
         this.isKeytipPopupOpen = false;
-        if (!isKeyTipExist)
+        if (!isKeyTipExist) {
             this.parent.isKeytipOpen = false;
+        }
     }
     /**
      * Shows the Keytip dynamically.
@@ -10524,12 +10816,5 @@ class 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.es2015.js.map