@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

package/src/ribbon/base/ribbon.js

@@ -20,12 +20,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { addClass, append, Event, Collection, Complex, Component, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEvents } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, isUndefined, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';
 import { Tab, TabAnimationSettings, HScroll, Toolbar } from '@syncfusion/ej2-navigations';
-import { RibbonTab, FileMenuSettings, BackStageMenu } from '../models/index';
+import { RibbonTab, FileMenuSettings, BackStageMenu, RibbonContextualTabSettings } from '../models/index';
 import { DisplayMode, RibbonLayout } from './interface';
 import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';
 import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton } from '../items/index';
 import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';
 import * as constants from './constant';
+import { Popup } from '@syncfusion/ej2-popups';
 import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 /**
@@ -56,12 +57,17 @@ var Ribbon = /** @class */ (function (_super) {
         this.initialize();
     };
     Ribbon.prototype.preRender = function () {
+        this.keysPress = '';
         this.idIndex = 0;
         this.tooltipData = [];
         this.initialPropsData = {};
         this.hiddenElements = {};
+        this.keyTipElements = {};
         this.hiddenGroups = [];
+        this.itemsModel = [];
+        this.targetTabs = {};
         this.isAddRemove = false;
+        this.isUpdateItems = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
             rightarrow: 'rightarrow',
@@ -94,7 +100,27 @@ var Ribbon = /** @class */ (function (_super) {
      */
     Ribbon.prototype.requiredModules = function () {
         var modules = [];
-        modules.push({ member: 'ribbonButton', args: [this] }, { member: 'ribbonDropDown', args: [this] }, { member: 'ribbonSplitButton', args: [this] }, { member: 'ribbonCheckBox', args: [this] }, { member: 'ribbonColorPicker', args: [this] }, { member: 'ribbonComboBox', args: [this] }, { member: 'ribbonGroupButton', args: [this] }, { member: 'ribbonFileMenu', args: [this] }, { member: 'ribbonBackstage', args: [this] });
+        modules.push({ member: 'ribbonButton', args: [this], name: 'RibbonButton' }, { member: 'ribbonDropDown', args: [this], name: 'RibbonDropDown' }, { member: 'ribbonSplitButton', args: [this], name: 'RibbonSplitButton' }, { member: 'ribbonCheckBox', args: [this], name: 'RibbonCheckBox' }, { member: 'ribbonComboBox', args: [this], name: 'RibbonComboBox' }, { member: 'ribbonGroupButton', args: [this], name: 'RibbonGroupButton' });
+        var canInjectColorPickerModule = getItem(this.tabs, null, RibbonItemType.ColorPicker);
+        var canInjectGalleryModule = getItem(this.tabs, null, RibbonItemType.Gallery);
+        if (canInjectColorPickerModule) {
+            modules.push({ member: 'ribbonColorPicker', args: [this], name: 'RibbonColorPicker' });
+        }
+        if (canInjectGalleryModule) {
+            modules.push({ member: 'ribbonGallery', args: [this], name: 'RibbonGallery' });
+        }
+        if (this.backStageMenu.visible || this.backStageMenu.items.length) {
+            modules.push({ member: 'ribbonBackstage', args: [this], name: 'RibbonBackstage' });
+        }
+        if (this.fileMenu.visible || this.fileMenu.menuItems.length) {
+            modules.push({ member: 'ribbonFileMenu', args: [this], name: 'RibbonFileMenu' });
+        }
+        if (this.contextualTabs.length) {
+            modules.push({ member: 'ribbonContextualTab', args: [this], name: 'RibbonContextualTab' });
+        }
+        if (this.enableKeyTips) {
+            modules.push({ member: 'ribbonKeyTip', args: [this], name: 'RibbonKeyTip' });
+        }
         return modules;
     };
     Ribbon.prototype.initialize = function () {
@@ -105,6 +131,9 @@ var Ribbon = /** @class */ (function (_super) {
         }
         this.element.style.width = formatUnit(this.width);
         this.renderTabs();
+        if (this.ribbonContextualTabModule) {
+            this.ribbonContextualTabModule.addContextualTabs();
+        }
         if (this.ribbonFileMenuModule) {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
@@ -114,13 +143,18 @@ var Ribbon = /** @class */ (function (_super) {
         this.createHelpPaneTemplate();
         var toolbar = this.tabObj['tbObj'];
         toolbar.refreshOverflow();
+        this.addTabOverflowKeyTip();
         createTooltip(this.element, this);
+        this.isKeytipOpen = false;
         this.wireEvents();
         this.wireKeyboardEvent();
         this.currentControlIndex = 0;
     };
     Ribbon.prototype.wireEvents = function () {
         EventHandler.add(window, 'resize', this.resizeHandler, this);
+        EventHandler.add(document.body, 'keydown', this.keytipActionHandler, this);
+        EventHandler.add(document, 'mousedown', this.mouseEventHandler, this);
+        EventHandler.add(document, 'scroll', this.mouseEventHandler, this);
     };
     Ribbon.prototype.wireKeyboardEvent = function () {
         this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
@@ -136,7 +170,8 @@ var Ribbon = /** @class */ (function (_super) {
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
         var controlElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-control'));
         var templateElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-template'));
-        var ribbonControls = controlElements.concat(templateElements);
+        var galleryElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-gallery-item'));
+        var ribbonControls = controlElements.concat(templateElements, galleryElements);
         var comboBoxElements = activeContent.querySelectorAll('.e-combobox');
         var comboBoxEle;
         if (comboBoxElements) {
@@ -165,7 +200,7 @@ var Ribbon = /** @class */ (function (_super) {
         if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
             e.target.classList.contains('e-ribbon-collapse-btn') || e.target.classList.contains('e-ribbon-last-item') ||
             e.target.classList.contains('e-ribbon-first-item') || e.target.classList.contains('e-ribbon-group-of-btn') ||
-            e.target.classList.contains('e-ribbon-overall-of-btn') || e.target.classList.contains('e-ribbon-template')) {
+            e.target.classList.contains('e-ribbon-overall-of-btn') || e.target.classList.contains('e-ribbon-template') || e.target.classList.contains('e-ribbon-gallery-item')) {
             switch (e.action) {
                 case 'rightarrow':
                     this.handleNavigation(e, !this.enableRtl, ribbonControls);
@@ -207,7 +242,7 @@ var Ribbon = /** @class */ (function (_super) {
             }
         }
         if ((!enableRtl && (this.currentControlIndex > 0)) || (enableRtl && (this.currentControlIndex < ribbonControls.length - 1))) {
-            if (!e.target.classList.contains('e-combobox') && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template')) && !e.target.classList.contains('e-ribbon-last-item')) {
+            if (!e.target.classList.contains('e-combobox') && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template') || e.target.classList.contains('e-ribbon-gallery-item')) && !e.target.classList.contains('e-ribbon-last-item')) {
                 if (enableRtl) {
                     this.currentControlIndex++;
                 }
@@ -366,6 +401,111 @@ var Ribbon = /** @class */ (function (_super) {
                 }
             }
         }
+        var galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
+        if (galleryPopupEle) {
+            var popup = getComponent(galleryPopupEle, Popup);
+            popup.hide();
+        }
+        if (this.ribbonKeyTipModule && this.enableKeyTips) {
+            this.ribbonKeyTipModule.removeKeytip();
+        }
+    };
+    Ribbon.prototype.mouseEventHandler = function (e) {
+        if (this.ribbonKeyTipModule && this.enableKeyTips) {
+            this.ribbonKeyTipModule.removeKeytip();
+        }
+    };
+    Ribbon.prototype.keytipActionHandler = function (e) {
+        if (this.enableKeyTips) {
+            var isKeyTipPresent = false;
+            var keyPress = e.key;
+            if (e.altKey && e.key === 'Meta') {
+                var activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+                if (activePopup.length) {
+                    for (var i = 0; i < activePopup.length; i++) {
+                        var dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+                        dropDownBtn.toggle();
+                    }
+                    this.ribbonKeyTipModule.removeKeytip();
+                }
+                else {
+                    if (!this.isKeytipOpen) {
+                        var backstagePopup = document.querySelector('.e-ribbon-backstage-popup');
+                        if (backstagePopup && backstagePopup.classList.contains('e-popup-open')) {
+                            this.ribbonBackstageModule.hideBackstage();
+                        }
+                        this.ribbonKeyTipModule.createKeytip('tab');
+                    }
+                    else {
+                        this.ribbonKeyTipModule.removeKeytip();
+                    }
+                }
+            }
+            else if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                this.ribbonKeyTipModule.removeKeytip(e.key);
+            }
+            else {
+                var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+                if (keyTipItems) {
+                    for (var i = 0; i < keyTipItems.length; i++) {
+                        var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+                        if (keyTipItem.innerHTML.toLowerCase() === keyPress) {
+                            isKeyTipPresent = true;
+                            this.ribbonKeyTipModule.keytipPress(keyPress);
+                            break;
+                        }
+                    }
+                    if (!isKeyTipPresent) {
+                        this.checkKeyTipPresent(keyPress, this.keysPress.length);
+                    }
+                }
+            }
+        }
+    };
+    Ribbon.prototype.checkKeyTipPresent = function (keyTip, length) {
+        var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        for (var i = 0; i < keyTipItems.length; i++) {
+            var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (keyTipItem.innerHTML.length > 1 && keyTipItem.innerHTML[parseInt(length.toString(), 10)].toLowerCase() === keyTip) {
+                this.keysPress += keyTip;
+                this.ribbonKeyTipModule.keytipPress(this.keysPress);
+                this.removeKeytip(this.keysPress);
+                break;
+            }
+        }
+    };
+    Ribbon.prototype.removeKeytip = function (keyTip) {
+        var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
+        for (var i = 0; i < keyTipItems.length; i++) {
+            var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
+            if (keyTipItem.innerHTML[0].toLowerCase() !== keyTip && keyTip !== '') {
+                remove(keyTipItem);
+            }
+        }
+    };
+    Ribbon.prototype.addKeyTip = function (tabIndex, keyTip, id, type) {
+        if (this.keyTipElements && this.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+            var isKeyTipExist = false;
+            /* eslint-disable */
+            if (!(this.keyTipElements[parseInt(tabIndex.toString(), 10)][type])) {
+                this.keyTipElements[parseInt(tabIndex.toString(), 10)][type] = [];
+            }
+            if (Object.keys(this.keyTipElements[tabIndex][type]).length) {
+                var keytipData = this.keyTipElements[tabIndex][type];
+                for (var i = 0; i < Object.keys(this.keyTipElements[tabIndex][type]).length; i++) {
+                    if (keytipData[parseInt(i.toString(), 10)].id === id) {
+                        isKeyTipExist = true;
+                    }
+                }
+                if (!isKeyTipExist) {
+                    this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+                }
+            }
+            else {
+                this.keyTipElements[tabIndex][type].push({ id: id, type: type, keyTip: keyTip });
+            }
+            /* eslint-enable */
+        }
     };
     Ribbon.prototype.renderTabs = function () {
         this.tabsInternal = this.tabs.slice();
@@ -428,14 +568,33 @@ var Ribbon = /** @class */ (function (_super) {
         this.renderInitialTab(this.selectedTab);
     };
     Ribbon.prototype.ribbonTabSelected = function (e) {
+        e.preventFocus = true;
         this.isAddRemove = false;
         var selectedTabId = e.selectedItem.getAttribute('data-id');
         var selectedIndex = getIndex(this.tabs, (function (tab) { return (tab.id === selectedTabId); }));
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
-        var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
+        var isContextual = this.isContextualTab(selectedTabId);
+        this.updateSelectedState(selectedTabId);
+        var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
         this.setProperties({ selectedTab: selectedIndex }, true);
         this.calculateHiddenElementsWidth(selectedIndex);
+        if (this.isUpdateItems) {
+            for (var i = 0; i < this.itemsModel.length; i++) {
+                var item = this.itemsModel[parseInt(i.toString(), 10)];
+                if (this.selectedTab === this.targetTabs[item.id]) {
+                    this.updateItem(item);
+                    this.itemsModel.splice(i, 1);
+                    i--;
+                }
+            }
+            if (this.itemsModel.length === 0) {
+                this.isUpdateItems = false;
+            }
+        }
         this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
+        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule) {
+            this.ribbonGalleryModule.checkAvailableHeight(selectedIndex, e.selectedContent.firstChild);
+        }
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + constants.RIBBON_TAB_ACTIVE);
@@ -454,6 +613,20 @@ var Ribbon = /** @class */ (function (_super) {
         }
         this.trigger('tabSelected', eventArgs);
     };
+    Ribbon.prototype.updateSelectedState = function (tabID) {
+        if (this.contextualTabs.length) {
+            for (var i = 0; i < this.contextualTabs.length; i++) {
+                var isSelected = false;
+                for (var j = 0; j < this.contextualTabs[parseInt(i.toString(), 10)].tabs.length; j++) {
+                    if (this.contextualTabs[parseInt(i.toString(), 10)].tabs[parseInt(j.toString(), 10)].id === tabID) {
+                        isSelected = true;
+                        break;
+                    }
+                }
+                this.contextualTabs[parseInt(i.toString(), 10)].setProperties({ isSelected: isSelected }, true);
+            }
+        }
+    };
     Ribbon.prototype.checkOverflow = function (tabIndex, activeContent) {
         var tabContent = activeContent.closest('.' + constants.TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
@@ -503,6 +676,17 @@ var Ribbon = /** @class */ (function (_super) {
                 }
             }
         }
+        this.addTabOverflowKeyTip();
+    };
+    Ribbon.prototype.addTabOverflowKeyTip = function () {
+        var tabOverflow = this.tabObj.element.querySelector('#_nav');
+        if (tabOverflow) {
+            this.keyTipElements['taboverflow'] = [];
+            this.keyTipElements['taboverflow'].push({ id: tabOverflow.id, type: 'taboverflow', keyTip: '00' });
+        }
+        else {
+            delete (this.keyTipElements['taboverflow']);
+        }
     };
     Ribbon.prototype.checkSimplifiedItemShrinking = function (tabIndex, tabContent, activeContent) {
         var tab = this.tabs[parseInt(tabIndex.toString(), 10)];
@@ -637,7 +821,7 @@ var Ribbon = /** @class */ (function (_super) {
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                             this.setItemSize(itemEle, item);
                         }
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, true);
                         }
                     }
@@ -667,7 +851,7 @@ var Ribbon = /** @class */ (function (_super) {
         return isEmptyCollection;
     };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
-        var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
+        var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.Gallery || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
         var dropDownPopup = dropdown.dropDown;
         // popup is on right if (isGroupOF && isMenu)
         // The position is reversed if RTL is enabled.
@@ -733,7 +917,7 @@ var Ribbon = /** @class */ (function (_super) {
                             break;
                         }
                         var groupEle = tabContent.querySelector('#' + collection.id);
-                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, false);
                         }
                         groupEle.append(itemContainer);
@@ -852,19 +1036,22 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
+        var overflowtarget;
         var itemProp = getGroup(this.tabs, groupId);
         var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
         var groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             var overflowDDB = groupContainer.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
-                overflowButton = this.addOverflowButton(groupId + constants.GROUPOF_BUTTON_ID);
+                overflowButton = this.addOverflowButton(groupId + constants.GROUPOF_BUTTON_ID, isGroupOF);
                 overflowButton.element.classList.add(constants.RIBBON_GROUP_OF_BUTTON);
                 groupContainer.appendChild(overflowButton.element);
             }
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
+            this.addKeyTip(tabIndex, '0' + (itemProp.groupIndex + 1), overflowButton.element.id, 'grpofbtn');
+            overflowtarget = overflowButton.target;
             var overflowBtnTarget = overflowButton.target;
             var headerEle = overflowBtnTarget.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID + constants.HEADER_ID);
             if (!headerEle) {
@@ -893,7 +1080,7 @@ var Ribbon = /** @class */ (function (_super) {
         }
         else {
             if (!this.overflowDDB) {
-                this.overflowDDB = this.addOverflowButton(this.tabObj.element.id + constants.OVRLOF_BUTTON_ID);
+                this.overflowDDB = this.addOverflowButton(this.tabObj.element.id + constants.OVRLOF_BUTTON_ID, isGroupOF);
                 this.tabObj.element.insertBefore(this.overflowDDB.element, this.collapseButton);
                 this.overflowDDB.element.classList.add(constants.RIBBON_OVERALL_OF_BUTTON);
                 this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -926,10 +1113,16 @@ var Ribbon = /** @class */ (function (_super) {
                 }
             }
             overflowButton = this.overflowDDB;
+            overflowtarget = this.overflowDDB ? this.overflowDDB.target : null;
         }
         if (itemEle !== null) {
             this.addOverflowEvents(item, itemEle, overflowButton);
         }
+        if (overflowtarget) {
+            if (item.keyTip) {
+                this.addKeyTip(tabIndex, item.keyTip, item.id, 'popupitem');
+            }
+        }
     };
     Ribbon.prototype.addOverflowEvents = function (item, itemEle, overflowButton) {
         switch (item.type) {
@@ -951,6 +1144,11 @@ var Ribbon = /** @class */ (function (_super) {
             case 'ComboBox':
                 this.ribbonComboBoxModule.addOverFlowEvents(item, itemEle, overflowButton);
                 break;
+            case 'Gallery':
+                if (this.activeLayout === 'Simplified') {
+                    this.ribbonGalleryModule.addOverFlowEvents(item, itemEle, overflowButton);
+                }
+                break;
             case 'GroupButton':
                 if (this.activeLayout === 'Simplified') {
                     this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
@@ -1629,6 +1827,10 @@ var Ribbon = /** @class */ (function (_super) {
             this_1.checkSmallToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             this_1.checkMediumToLarge(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             var dropdown = this_1.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow, this_1.enableRtl);
+            if (group.keyTip) {
+                var overflowDDB = group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID;
+                this_1.addKeyTip(tabIndex, group.keyTip, overflowDDB, 'grpoverflow');
+            }
             this_1.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].setProperties({ isCollapsed: true }, true);
             for (var j = 0; j < group.collections.length; j++) {
@@ -1641,6 +1843,25 @@ var Ribbon = /** @class */ (function (_super) {
                         this_1.handleContentSize(itemEle);
                         this_1.addOverflowEvents(item, itemEle, dropdown);
                     }
+                    var overflowDDB = document.querySelector('#' + group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID);
+                    var overflowButton = getInstance(overflowDDB, DropDownButton);
+                    if (overflowButton) {
+                        var overflowtarget = overflowButton.target;
+                        if (overflowtarget) {
+                            if (this_1.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+                                if (item.type === RibbonItemType.GroupButton) {
+                                    for (var i_3 = 0; i_3 < item.groupButtonSettings.items.length; i_3++) {
+                                        if (item.groupButtonSettings.items[parseInt(i_3.toString(), 10)].keyTip) {
+                                            this_1.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i_3.toString(), 10)].keyTip, item.id + (constants.RIBBON_GROUP_BUTTON_ID + i_3), 'grpoverflowpopup');
+                                        }
+                                    }
+                                }
+                                if (item.keyTip) {
+                                    this_1.addKeyTip(tabIndex, item.keyTip, item.id, 'grpoverflowpopup');
+                                }
+                            }
+                        }
+                    }
                 }
             }
         };
@@ -1739,16 +1960,31 @@ var Ribbon = /** @class */ (function (_super) {
             this.removeOverflowDropdown(activeContent, tabContent, true, index);
         }
     };
+    Ribbon.prototype.isContextualTab = function (tabID) {
+        var isContextual = false;
+        if (this.contextualTabs.length) {
+            for (var i = 0; i < this.contextualTabs.length; i++) {
+                for (var j = 0; j < this.contextualTabs[parseInt(i.toString(), 10)].tabs.length; j++) {
+                    if (this.contextualTabs[parseInt(i.toString(), 10)].tabs[parseInt(j.toString(), 10)].id === tabID) {
+                        isContextual = true;
+                        break;
+                    }
+                }
+            }
+        }
+        return isContextual;
+    };
     Ribbon.prototype.ribbonTabSelecting = function (e) {
         var _this = this;
         this.currentControlIndex = 0;
         var nextTabId = e.selectingItem.getAttribute('data-id');
         var previousTabId = e.previousItem.getAttribute('data-id');
         var nextIndex = getIndex(this.tabs, (function (tab) { return (tab.id === nextTabId); }));
+        var isContextual = this.isContextualTab(nextTabId);
         var previousIndex = getIndex(this.tabs, (function (tab) { return (tab.id === previousTabId); }));
         nextIndex = nextIndex === -1 ? this.selectedTab : nextIndex;
         var eventArgs = {
-            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex
+            cancel: e.cancel, isInteracted: e.isInteracted, previousIndex: previousIndex, selectedIndex: nextIndex, isContextual: isContextual
         };
         this.trigger('tabSelecting', eventArgs, function (args) {
             if (args.cancel) {
@@ -1768,22 +2004,33 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.createTabItems = function (tabs) {
         var _this = this;
         var tabItems = [];
-        for (var i = 0; i < tabs.length; i++) {
+        var _loop_3 = function (i) {
             var ribbonTab = tabs[parseInt(i.toString(), 10)];
-            var header = this.createElement('span', {
+            var header = this_3.createElement('span', {
                 innerHTML: ribbonTab.header,
                 id: ribbonTab.id + constants.HEADER_ID
             });
+            var tabIndex = getIndex(this_3.tabs, (function (tab) { return (tab.id === ribbonTab.id); }));
+            if (ribbonTab.keyTip) {
+                if (!this_3.keyTipElements[parseInt(tabIndex.toString(), 10)]) {
+                    this_3.keyTipElements[parseInt(tabIndex.toString(), 10)] = {};
+                }
+                this_3.addKeyTip(tabIndex, ribbonTab.keyTip, ribbonTab.id, 'tab');
+            }
             header.onclick = function () { _this.minimize(false); };
             header.ondblclick = function () { _this.minimize(true); };
             var tab = { header: { text: header }, id: ribbonTab.id, cssClass: ribbonTab.cssClass };
-            var content = this.createElement('div', {
+            var content = this_3.createElement('div', {
                 className: tab.cssClass,
                 id: ribbonTab.id + constants.CONTENT_ID
             });
             content.classList.add(constants.RIBBON_TAB_ITEM);
             tab.content = content;
             tabItems.push(tab);
+        };
+        var this_3 = this;
+        for (var i = 0; i < tabs.length; i++) {
+            _loop_3(i);
         }
         return tabItems;
     };
@@ -1796,8 +2043,10 @@ var Ribbon = /** @class */ (function (_super) {
         }
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
         this.checkOverflow(this.selectedTab, activeContent);
+        if (this.activeLayout === 'Classic' && this.ribbonGalleryModule)
+            this.ribbonGalleryModule.checkAvailableHeight(this.selectedTab, activeContent);
     };
-    Ribbon.prototype.addOverflowButton = function (btnId) {
+    Ribbon.prototype.addOverflowButton = function (btnId, isGroupOF) {
         var _this = this;
         var overflowButton = this.createElement('button', {
             id: btnId
@@ -1834,6 +2083,10 @@ var Ribbon = /** @class */ (function (_super) {
         }, overflowButton);
         this.element.classList.add(constants.RIBBON_OVERFLOW);
         createTooltip(overflowTarget, this);
+        if (!isGroupOF) {
+            this.keyTipElements['overflowbtn'] = [];
+            this.keyTipElements['overflowbtn'].push({ id: btnId, type: 'overflowbtn', keyTip: '00' });
+        }
         var isGroupOf;
         overflowButton.onkeydown = overflowButton.onclick = function () { _this.itemIndex = -1; isGroupOf = overflowButton.classList.contains('e-ribbon-overall-of-btn') ? false : true; };
         overflowTarget.onkeydown = function (e) { return (_this.upDownKeyHandler(e, overflowTarget, isGroupOf), _this); };
@@ -1994,6 +2247,9 @@ var Ribbon = /** @class */ (function (_super) {
                 case 'ComboBox':
                     this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
                     break;
+                case 'Gallery':
+                    this.ribbonGalleryModule.removeOverFlowEvents(item, itemEle);
+                    break;
                 case 'GroupButton':
                     this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
                     break;
@@ -2031,6 +2287,10 @@ var Ribbon = /** @class */ (function (_super) {
             this.collapseButton.classList.add(constants.RIBBON_EXPAND_BUTTON);
         }
         this.tabObj.element.appendChild(this.collapseButton);
+        if (this.layoutSwitcherKeyTip) {
+            this.keyTipElements['collapse'] = [];
+            this.keyTipElements['collapse'].push({ id: this.collapseButton.id, type: 'collapse', keyTip: this.layoutSwitcherKeyTip });
+        }
     };
     Ribbon.prototype.removeExpandCollapse = function () {
         var _this = this;
@@ -2133,22 +2393,22 @@ var Ribbon = /** @class */ (function (_super) {
                 var activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.CONTENT_ID);
                 var tabContent = activeContent.closest('.' + constants.TAB_CONTENT);
                 if (this.activeLayout === 'Simplified') {
-                    for (var i_3 = 0; i_3 < groupList.length; i_3++) {
-                        var group = groupList[parseInt(i_3.toString(), 10)];
-                        var alignType = groupList[parseInt(i_3.toString(), 10)].orientation;
+                    for (var i_4 = 0; i_4 < groupList.length; i_4++) {
+                        var group = groupList[parseInt(i_4.toString(), 10)];
+                        var alignType = groupList[parseInt(i_4.toString(), 10)].orientation;
                         if (group.isCollapsed) {
                             group.setProperties({ isCollapsed: false }, true);
                             this.removeDropdown(group.id);
                         }
                         else {
-                            this.checkSmallToMedium(tabIndex, tab, i_3, tabContent, activeContent, true, false);
-                            this.checkMediumToLarge(tabIndex, tab, i_3, tabContent, activeContent, true, false);
+                            this.checkSmallToMedium(tabIndex, tab, i_4, tabContent, activeContent, true, false);
+                            this.checkMediumToLarge(tabIndex, tab, i_4, tabContent, activeContent, true, false);
                         }
                         var groupEle = tabContent.querySelector('#' + group.id);
                         var groupContainer = groupEle.querySelector('#' + group.id + constants.CONTAINER_ID);
                         var shrinkColumns = groupContainer.querySelectorAll('.' + 'e-ribbon-shrink');
-                        for (var i_4 = 0; i_4 < shrinkColumns.length; i_4++) {
-                            shrinkColumns[parseInt(i_4.toString(), 10)].remove();
+                        for (var i_5 = 0; i_5 < shrinkColumns.length; i_5++) {
+                            shrinkColumns[parseInt(i_5.toString(), 10)].remove();
                         }
                         var groupHeader = groupContainer.querySelector('#' + group.id + constants.HEADER_ID);
                         groupHeader.remove();
@@ -2194,7 +2454,7 @@ var Ribbon = /** @class */ (function (_super) {
                                     itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
                                     if (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)) {
                                         this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
                                         }
                                     }
@@ -2207,6 +2467,9 @@ var Ribbon = /** @class */ (function (_super) {
                                         this.setItemSize(ele, item);
                                     }
                                 }
+                                if (item.type === RibbonItemType.Gallery) {
+                                    this.ribbonGalleryModule.switchGalleryItems(this.activeLayout, item.id);
+                                }
                             }
                         }
                         if (!(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
@@ -2216,9 +2479,9 @@ var Ribbon = /** @class */ (function (_super) {
                 }
                 else {
                     this.element.classList.remove(constants.RIBBON_OVERFLOW);
-                    for (var i_5 = 0; i_5 < groupList.length; i_5++) {
-                        var group = groupList[parseInt(i_5.toString(), 10)];
-                        var alignType = groupList[parseInt(i_5.toString(), 10)].orientation;
+                    for (var i_6 = 0; i_6 < groupList.length; i_6++) {
+                        var group = groupList[parseInt(i_6.toString(), 10)];
+                        var alignType = groupList[parseInt(i_6.toString(), 10)].orientation;
                         var groupContainer = tabContent.querySelector('#' + group.id + constants.CONTAINER_ID);
                         var groupContent = groupContainer.querySelector('#' + group.id + constants.CONTENT_ID);
                         var groupHeader = this.createElement('div', {
@@ -2290,7 +2553,7 @@ var Ribbon = /** @class */ (function (_super) {
                                     var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
                                     if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
                                         }
                                         this.removeOverflowEvent(item, itemEle);
@@ -2310,6 +2573,9 @@ var Ribbon = /** @class */ (function (_super) {
                                     (item.allowedSizes & RibbonItemSize.Medium) ? RibbonItemSize.Medium : RibbonItemSize.Small;
                                 item.setProperties({ activeSize: itemsize }, true);
                                 this.setItemSize(ele, item);
+                                if (item.type === RibbonItemType.Gallery) {
+                                    this.ribbonGalleryModule.switchGalleryItems(this.activeLayout, item.id);
+                                }
                             }
                             if (group.enableGroupOverflow && overflowDDB) {
                                 if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
@@ -2329,7 +2595,7 @@ var Ribbon = /** @class */ (function (_super) {
             this.overflowDDB = null;
         }
     };
-    Ribbon.prototype.createLauncherIcon = function (groupId, groupContainer) {
+    Ribbon.prototype.createLauncherIcon = function (groupId, groupContainer, tabIndex) {
         var _this = this;
         var launcherIcon = this.createElement('div', {
             className: constants.RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.launcherIconCss : constants.RIBBON_LAUNCHER_ICON),
@@ -2344,6 +2610,10 @@ var Ribbon = /** @class */ (function (_super) {
                 _this.launcherIconClicked(groupId);
             }
         }, this);
+        var itemProp = getGroup(this.tabs, groupId);
+        if (itemProp.group.launcherIconKeyTip) {
+            this.addKeyTip(tabIndex, itemProp.group.launcherIconKeyTip, launcherIcon.id, 'launcher');
+        }
     };
     Ribbon.prototype.launcherIconClicked = function (id) {
         var eventArgs = { groupId: id };
@@ -2381,7 +2651,7 @@ var Ribbon = /** @class */ (function (_super) {
                 groupContainer.appendChild(groupHeader);
             }
             if (group.showLauncherIcon) {
-                this.createLauncherIcon(group.id, groupContainer);
+                this.createLauncherIcon(group.id, groupContainer, tabIndex);
             }
             var elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
@@ -2508,6 +2778,9 @@ var Ribbon = /** @class */ (function (_super) {
             case 'GroupButton':
                 this.ribbonGroupButtonModule.createGroupButton(item, itemEle);
                 break;
+            case 'Gallery':
+                this.ribbonGalleryModule.createGallery(item, itemEle);
+                break;
         }
     };
     Ribbon.prototype.createItems = function (itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
@@ -2541,17 +2814,34 @@ var Ribbon = /** @class */ (function (_super) {
                 itemEle.classList.add(constants.RIBBON_TOOLTIP_TARGET);
                 this.tooltipData.push({ id: itemEle.id, data: item.ribbonTooltipSettings });
             }
-            var size = item.activeSize;
-            if (this.activeLayout === 'Simplified') {
-                size = ((item.allowedSizes === RibbonItemSize.Large) || (item.allowedSizes & RibbonItemSize.Medium) ||
-                    (item.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                item.setProperties({ activeSize: size }, true);
+            if (item.type === RibbonItemType.GroupButton) {
+                for (var i_7 = 0; i_7 < item.groupButtonSettings.items.length; i_7++) {
+                    if (this.keyTipElements[parseInt(tabIndex.toString(), 10)] && item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip) {
+                        this.addKeyTip(tabIndex, item.groupButtonSettings.items[parseInt(i_7.toString(), 10)].keyTip, item.id + (constants.RIBBON_GROUP_BUTTON_ID + i_7), 'item');
+                    }
+                }
             }
-            if (size & RibbonItemSize.Large) {
-                itemEle.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+            if (item.keyTip) {
+                if (item.type === RibbonItemType.Gallery) {
+                    this.addKeyTip(tabIndex, item.keyTip, (item.id + '_popupButton'), 'item');
+                }
+                else {
+                    this.addKeyTip(tabIndex, item.keyTip, item.id, 'item');
+                }
             }
-            else {
-                itemEle.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+            var size = item.activeSize;
+            if (!(item.type === RibbonItemType.Gallery)) {
+                if (this.activeLayout === 'Simplified') {
+                    size = ((item.allowedSizes === RibbonItemSize.Large) || (item.allowedSizes & RibbonItemSize.Medium) ||
+                        (item.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                    item.setProperties({ activeSize: size }, true);
+                }
+                if (size & RibbonItemSize.Large) {
+                    itemEle.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+                }
+                else {
+                    itemEle.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+                }
             }
             var initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
             if (initialProps && initialProps.hiddenItems && initialProps.hiddenItems.length) {
@@ -2563,7 +2853,7 @@ var Ribbon = /** @class */ (function (_super) {
             this.createRibbonItem(item, itemEle);
             if ((this.activeLayout === 'Simplified') && ((item.displayOptions === DisplayMode.Overflow) || (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)))) {
                 this.createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer);
-                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
+                if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
                     this.updatePopupItems(item, itemEle, isGroupOF, true);
                 }
             }
@@ -2692,15 +2982,15 @@ var Ribbon = /** @class */ (function (_super) {
                                 var moduleName = this.getItemModuleName(item);
                                 if (moduleName !== 'template') {
                                     if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
-                                        for (var i_6 = 0; i_6 < item.groupButtonSettings.items.length; i_6++) {
-                                            var btnEle = ele.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i_6);
+                                        for (var i_8 = 0; i_8 < item.groupButtonSettings.items.length; i_8++) {
+                                            var btnEle = ele.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i_8);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
                                     else if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
                                         updateCommonProperty(ele, 'dropdown-btn', commonProp);
-                                        for (var i_7 = 0; i_7 < item.groupButtonSettings.items.length; i_7++) {
-                                            var btnEle = document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i_7);
+                                        for (var i_9 = 0; i_9 < item.groupButtonSettings.items.length; i_9++) {
+                                            var btnEle = document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i_9);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
@@ -2760,12 +3050,18 @@ var Ribbon = /** @class */ (function (_super) {
                                     ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id + constants.RIBBON_GROUP_BUTTON_ID) :
                                         contentEle.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID);
                                 }
+                                if (item.type === RibbonItemType.Gallery) {
+                                    ele = contentEle.querySelector('#' + item.id + constants.CONTAINER_ID);
+                                }
                             }
                         }
                         else {
                             //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
                             ele = (item.displayOptions & DisplayMode.Simplified) ?
                                 contentEle.querySelector('#' + item.id) : null;
+                            if (item.type === RibbonItemType.Gallery) {
+                                ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id + constants.CONTAINER_ID) : null;
+                            }
                             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
                             if (!ele) {
                                 ele = dropdown ? dropdown.target.querySelector('#' + item.id) : null;
@@ -2806,18 +3102,42 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 this.ribbonGroupButtonModule.destroyDropDown(item);
             }
-            var _loop_3 = function (i) {
+            var _loop_4 = function (i) {
                 if (item.groupButtonSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings) {
                     var groupButtonID_1 = item.id + constants.RIBBON_GROUP_BUTTON_ID + i;
-                    var index = getIndex(this_3.tooltipData, function (e) { return e.id === groupButtonID_1; });
+                    var index = getIndex(this_4.tooltipData, function (e) { return e.id === groupButtonID_1; });
                     if (index !== -1) {
-                        this_3.tooltipData.splice(index, 1);
+                        this_4.tooltipData.splice(index, 1);
                     }
                 }
             };
-            var this_3 = this;
+            var this_4 = this;
             for (var i = 0; i < item.groupButtonSettings.items.length; i++) {
-                _loop_3(i);
+                _loop_4(i);
+            }
+        }
+        else if (moduleName === 'gallery') {
+            if (ele.closest('.e-ribbon-overflow-target')) {
+                destroyControl(ele, 'dropdown-btn');
+                var galleryPopupEle = Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '_galleryPopup'));
+                galleryPopupEle.concat(Array.prototype.slice.call(document.querySelectorAll('#' + item.id + '-popup')));
+                for (var i = 0; i < galleryPopupEle.length; i++) {
+                    galleryPopupEle[parseInt(i.toString(), 10)].remove();
+                }
+            }
+            else {
+                var galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
+                var galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
+                if (galleryPopupBtn) {
+                    galleryPopupBtn.remove();
+                }
+                for (var i = 0; i < galleryEle.length; i++) {
+                    galleryEle[parseInt(i.toString(), 10)].remove();
+                }
+                var galleryPopupEle = document.querySelectorAll('#' + item.id + '_galleryPopup');
+                for (var i = 0; i < galleryPopupEle.length; i++) {
+                    galleryPopupEle[parseInt(i.toString(), 10)].remove();
+                }
             }
         }
         else if (moduleName !== 'template') {
@@ -2833,6 +3153,13 @@ var Ribbon = /** @class */ (function (_super) {
             this.ribbonGroupButtonModule.destroyDropDown(item);
         }
     };
+    /**
+     * Gets the item module name.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
     Ribbon.prototype.getItemModuleName = function (item) {
         switch (item.type) {
             case 'Button':
@@ -2849,6 +3176,8 @@ var Ribbon = /** @class */ (function (_super) {
                 return 'combobox';
             case 'GroupButton':
                 return 'group-btn';
+            case 'Gallery':
+                return 'gallery';
             default:
                 return 'template';
         }
@@ -2888,8 +3217,9 @@ var Ribbon = /** @class */ (function (_super) {
      * @param {string} tabId - The ID of the tab to be shown.
      * @returns {void}
      */
-    Ribbon.prototype.showTab = function (tabId) {
-        this.showHideTab(tabId, false);
+    Ribbon.prototype.showTab = function (tabId, isContextual) {
+        if (isContextual === void 0) { isContextual = false; }
+        this.showHideTab(tabId, false, isContextual);
     };
     /**
      * Hides a specific tab in the ribbon.
@@ -2897,15 +3227,49 @@ var Ribbon = /** @class */ (function (_super) {
      * @param {string} tabId - The ID of the tab to be hidden.
      * @returns {void}
      */
-    Ribbon.prototype.hideTab = function (tabId) {
-        this.showHideTab(tabId, true);
+    Ribbon.prototype.hideTab = function (tabId, isContextual) {
+        if (isContextual === void 0) { isContextual = false; }
+        this.showHideTab(tabId, true, isContextual);
     };
-    Ribbon.prototype.showHideTab = function (tabId, value) {
+    Ribbon.prototype.showHideTab = function (tabId, value, isContextual) {
         var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
         if (index === -1) {
             return;
         }
         this.tabObj.hideTab(index, value);
+        if (isContextual) {
+            var contextualTab_1;
+            var tabEle = this.tabObj.element;
+            for (var i = 0; i < this.contextualTabs.length; i++) {
+                for (var j = 0; j < this.contextualTabs[parseInt(i.toString(), 10)].tabs.length; j++) {
+                    if (tabId === this.contextualTabs[parseInt(i.toString(), 10)].tabs[parseInt(j.toString(), 10)].id) {
+                        contextualTab_1 = this.contextualTabs[parseInt(i.toString(), 10)];
+                    }
+                }
+            }
+            if (contextualTab_1) {
+                var isTabHidden = true;
+                var _loop_5 = function (i) {
+                    var index_1 = getIndex(this_5.tabs, function (e) { return e.id === contextualTab_1.tabs[parseInt(i.toString(), 10)].id; });
+                    if (index_1 !== -1) {
+                        var toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index_1.toString(), 10)];
+                        if (!(toolbarEle.classList.contains('e-hidden'))) {
+                            isTabHidden = false;
+                        }
+                    }
+                };
+                var this_5 = this;
+                for (var i = 0; i < contextualTab_1.tabs.length; i++) {
+                    _loop_5(i);
+                }
+                if (isTabHidden) {
+                    contextualTab_1.setProperties({ visible: false }, true);
+                }
+                else {
+                    contextualTab_1.setProperties({ visible: true }, true);
+                }
+            }
+        }
     };
     /**
      * Enables a specific tab in the ribbon.
@@ -3212,8 +3576,8 @@ var Ribbon = /** @class */ (function (_super) {
         var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
         /* eslint-disable */
         if (hiddenProps && hiddenProps[key] && hiddenProps[key].length) {
-            var _loop_4 = function (i) {
-                var contentEle = this_4.tabObj.items[tabIndex].content;
+            var _loop_6 = function (i) {
+                var contentEle = this_6.tabObj.items[tabIndex].content;
                 var hiddenEle;
                 var groupEle = void 0;
                 var isGroupHidden = false;
@@ -3235,11 +3599,11 @@ var Ribbon = /** @class */ (function (_super) {
                             groupEle = hiddenEle.closest('.e-ribbon-group');
                             if (groupEle.classList.contains('e-hide-group')) {
                                 isGroupHidden = true;
-                                widthDifference = this_4.checkWidthDifference(hiddenEle, groupEle);
+                                widthDifference = this_6.checkWidthDifference(hiddenEle, groupEle);
                             }
                         }
-                        this_4.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, true, tabIndex);
-                        this_4.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, true);
+                        this_6.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, true, tabIndex);
+                        this_6.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, true);
                         if (isHidden) {
                             hiddenEle.classList.add('e-hidden');
                         }
@@ -3252,12 +3616,12 @@ var Ribbon = /** @class */ (function (_super) {
                                 groupEle.classList.remove('e-hide-group');
                                 groupEle.classList.remove('e-ribbon-emptyCollection');
                                 widthDifference = Math.abs(hiddenEle.offsetWidth - groupEle.offsetWidth);
-                                if (this_4.hiddenGroups.indexOf(groupEle.id) !== -1) {
-                                    this_4.hiddenGroups.splice(this_4.hiddenGroups.indexOf(groupEle.id), 1);
+                                if (this_6.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                    this_6.hiddenGroups.splice(this_6.hiddenGroups.indexOf(groupEle.id), 1);
                                 }
                             }
                             else {
-                                if (this_4.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                if (this_6.hiddenGroups.indexOf(groupEle.id) !== -1) {
                                     var hiddenItems = groupEle.querySelectorAll('.e-ribbon-item:not(.e-hidden)');
                                     hiddenItems.forEach(function (item) {
                                         if (item.id !== hiddenEle.id) {
@@ -3270,12 +3634,12 @@ var Ribbon = /** @class */ (function (_super) {
                                             item.classList.remove('e-hidden');
                                         }
                                     });
-                                    this_4.hiddenGroups.splice(this_4.hiddenGroups.indexOf(groupEle.id), 1);
+                                    this_6.hiddenGroups.splice(this_6.hiddenGroups.indexOf(groupEle.id), 1);
                                 }
                             }
                         }
-                        this_4.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, false, tabIndex);
-                        this_4.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, false);
+                        this_6.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, false, tabIndex);
+                        this_6.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, false);
                     }
                     if (isGroupHidden) {
                         groupEle.classList.add('e-hide-group');
@@ -3289,9 +3653,9 @@ var Ribbon = /** @class */ (function (_super) {
                 }
                 out_i_1 = i;
             };
-            var this_4 = this, out_i_1;
+            var this_6 = this, out_i_1;
             for (var i = 0; i < hiddenProps[key].length; i++) {
-                _loop_4(i);
+                _loop_6(i);
                 i = out_i_1;
             }
         }
@@ -3342,9 +3706,9 @@ var Ribbon = /** @class */ (function (_super) {
                 var overflowButton = getInstance(groupOFButton[parseInt(i.toString(), 10)], DropDownButton);
                 var overflowBtnTarget = overflowButton.target;
                 var overflowItems = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
-                for (var i_8 = 0; i_8 < overflowItems.length; i_8++) {
-                    if (overflowItems[parseInt(i_8.toString(), 10)].hasAttribute('data-medium-width')) {
-                        mediumDataItems.push(overflowItems[parseInt(i_8.toString(), 10)]);
+                for (var i_10 = 0; i_10 < overflowItems.length; i_10++) {
+                    if (overflowItems[parseInt(i_10.toString(), 10)].hasAttribute('data-medium-width')) {
+                        mediumDataItems.push(overflowItems[parseInt(i_10.toString(), 10)]);
                     }
                 }
             }
@@ -3371,10 +3735,10 @@ var Ribbon = /** @class */ (function (_super) {
                     if (overflowButton) {
                         var overflowEle = overflowButton.target;
                         var overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
-                        for (var i_9 = 0; i_9 < overflowItems.length; i_9++) {
-                            var previousWidth = parseInt(overflowItems[parseInt(i_9.toString(), 10)].getAttribute('data-simplified-width'), 10);
+                        for (var i_11 = 0; i_11 < overflowItems.length; i_11++) {
+                            var previousWidth = parseInt(overflowItems[parseInt(i_11.toString(), 10)].getAttribute('data-simplified-width'), 10);
                             if (previousWidth) {
-                                overflowItems[parseInt(i_9.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
+                                overflowItems[parseInt(i_11.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
                             }
                         }
                     }
@@ -3924,7 +4288,7 @@ var Ribbon = /** @class */ (function (_super) {
         if (contentEle.innerHTML !== '') {
             // Check whether showLauncherIcon or orientation is passed by the user and sets the updated values.
             if (group.showLauncherIcon) {
-                this.createLauncherIcon(ribbongroup.id, groupContainer);
+                this.createLauncherIcon(ribbongroup.id, groupContainer, itemProp.tabIndex);
             }
             // Check whether collections or orientation is passed by the user and sets the updated values.
             if (group.collections || group.orientation) {
@@ -4044,96 +4408,111 @@ var Ribbon = /** @class */ (function (_super) {
         //Check whether the tab items are rendered
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + itemProp.group.id);
-        var groupContainer = groupEle.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
-        var itemContainer = null;
-        var itemEle = null;
-        var dropdownElement;
-        var dropdown;
-        if (contentEle.innerHTML !== '') {
-            if (this.activeLayout === RibbonLayout.Simplified) {
-                dropdownElement = itemProp.group.enableGroupOverflow ?
-                    contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID) : null;
-                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
-            }
-            if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
-                itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
-                itemEle = dropdown.target.querySelector('#' + itemId);
-                if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
-                    var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
-                    if (collectionEle) {
-                        collectionEle.appendChild(itemContainer);
+        if (groupEle) {
+            var groupContainer = groupEle.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
+            var itemContainer = null;
+            var itemEle = null;
+            var dropdownElement = void 0;
+            var dropdown = void 0;
+            if (contentEle.innerHTML !== '') {
+                if (this.activeLayout === RibbonLayout.Simplified) {
+                    dropdownElement = itemProp.group.enableGroupOverflow ?
+                        contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID) : null;
+                    dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+                }
+                if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
+                    itemEle = dropdown.target.querySelector('#' + itemId);
+                    if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
+                        var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
+                        if (collectionEle) {
+                            collectionEle.appendChild(itemContainer);
+                        }
                     }
                 }
-            }
-            else {
-                itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
-                itemEle = contentEle.querySelector('#' + itemId);
-                if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
-                    itemEle = contentEle.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID);
-                }
-                if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
-                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
-                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
-                        this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                else {
+                    itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+                    itemEle = contentEle.querySelector('#' + itemId);
+                    if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
+                        itemEle = contentEle.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID);
+                    }
+                    if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
+                        this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                        if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                            this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                        }
                     }
                 }
-            }
-            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
-            if (item.cssClass) {
-                if (itemProp.item.cssClass) {
-                    itemContainer.classList.remove(itemProp.item.cssClass);
+                // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+                if (item.cssClass) {
+                    if (itemProp.item.cssClass) {
+                        itemContainer.classList.remove(itemProp.item.cssClass);
+                    }
                 }
-            }
-            this.destroyFunction(itemProp.item, itemEle);
-            itemEle.remove();
-            var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
-            if (removeCss) {
-                removeClass([itemContainer], removeCss);
-            }
-        }
-        var ribbonItem = itemProp.item;
-        ribbonItem.setProperties(item, true);
-        this.validateItemSize();
-        if (contentEle.innerHTML !== '') {
-            if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
-                itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
-            }
-            else {
-                itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
-            }
-            // To avoid undefined items condition is added
-            if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
-                itemContainer.classList.add(constants.RIBBON_TOOLTIP_TARGET);
-                this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
-            }
-            var size = ribbonItem.activeSize;
-            if (this.activeLayout === 'Simplified') {
-                size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
-                    (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                ribbonItem.setProperties({ activeSize: size }, true);
-            }
-            if (size & RibbonItemSize.Large) {
-                itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
-            }
-            else {
-                itemContainer.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
-            }
-            this.createRibbonItem(ribbonItem, itemContainer);
-            if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
-                if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
-                    this.removeOverflowButton(dropdown);
+                this.destroyFunction(itemProp.item, itemEle);
+                itemEle.remove();
+                var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+                if (removeCss) {
+                    removeClass([itemContainer], removeCss);
                 }
             }
-            if (this.selectedTab === itemProp.tabIndex) {
-                this.refreshLayout();
-            }
-            if (item.cssClass) {
-                itemContainer.classList.add(ribbonItem.cssClass);
-            }
-            if (!(ribbonItem.disabled) && itemContainer.classList.contains(constants.DISABLED_CSS)) {
-                itemContainer.classList.remove(constants.DISABLED_CSS);
+            var ribbonItem = itemProp.item;
+            ribbonItem.setProperties(item, true);
+            this.validateItemSize();
+            if (contentEle.innerHTML !== '') {
+                if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
+                    itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+                }
+                else {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
+                }
+                // To avoid undefined items condition is added
+                if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
+                    itemContainer.classList.add(constants.RIBBON_TOOLTIP_TARGET);
+                    this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
+                }
+                var size = ribbonItem.activeSize;
+                if (this.activeLayout === 'Simplified') {
+                    size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
+                        (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                    ribbonItem.setProperties({ activeSize: size }, true);
+                }
+                if (size & RibbonItemSize.Large) {
+                    itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+                }
+                else {
+                    if (size & RibbonItemSize.Medium) {
+                        itemContainer.classList.add(constants.RIBBON_MEDIUM_ITEM);
+                    }
+                    else {
+                        itemContainer.classList.add(constants.RIBBON_SMALL_ITEM);
+                    }
+                }
+                this.createRibbonItem(ribbonItem, itemContainer);
+                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                    if (dropdown.target.childElementCount === 0 ||
+                        (dropdown.target.childElementCount === 1 &&
+                            this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                        this.removeOverflowButton(dropdown);
+                    }
+                }
+                if (this.selectedTab === itemProp.tabIndex) {
+                    this.refreshLayout();
+                }
+                if (item.cssClass) {
+                    itemContainer.classList.add(ribbonItem.cssClass);
+                }
+                if (!(ribbonItem.disabled) && itemContainer.classList.contains(constants.DISABLED_CSS)) {
+                    itemContainer.classList.remove(constants.DISABLED_CSS);
+                }
+                this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
             }
-            this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
+        }
+        else {
+            this.isUpdateItems = true;
+            this.itemsModel.push(item);
+            this.targetTabs[item.id] = itemProp.tabIndex;
         }
     };
     Ribbon.prototype.removeItemElement = function (contentEle, item, dropdown) {
@@ -4180,6 +4559,15 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.disableItem = function (itemId) {
         this.enableDisableItem(itemId, true);
     };
+    /**
+     * Gets the Ribbon item model associated with the specified item ID.
+     *
+     * @param {string} itemId - The unique ID of the Ribbon item.
+     * @returns {RibbonItemModel}
+     */
+    Ribbon.prototype.getItem = function (itemId) {
+        return getItem(this.tabs, itemId).item;
+    };
     Ribbon.prototype.enableDisableItem = function (itemId, isDisabled) {
         var isUpdated = false;
         var itemProp = getItem(this.tabs, itemId);
@@ -4227,6 +4615,9 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.unwireEvents = function () {
         EventHandler.remove(window, 'resize', this.resizeHandler);
+        EventHandler.remove(document.body, 'keydown', this.keytipActionHandler);
+        EventHandler.remove(document, 'mousedown', this.mouseEventHandler);
+        EventHandler.remove(document, 'scroll', this.mouseEventHandler);
     };
     Ribbon.prototype.destroy = function () {
         this.keyboardModuleRibbon.destroy();
@@ -4254,6 +4645,9 @@ var Ribbon = /** @class */ (function (_super) {
         this.initialPropsData = {};
         this.hiddenGroups = [];
         this.hiddenElements = {};
+        this.keyTipElements = {};
+        this.itemsModel = [];
+        this.targetTabs = {};
         remove(this.element.querySelector('#' + this.element.id + constants.TAB_ID));
         this.element.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(constants.RIBBON_HELP_PANE_TEMPLATE_WIDTH);
@@ -4333,7 +4727,11 @@ var Ribbon = /** @class */ (function (_super) {
                     }
                     break;
                 case 'selectedTab':
-                    this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
+                    var tabEle = this.tabObj.element;
+                    var toolbarItem = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(newProp.selectedTab.toString(), 10)];
+                    if (!(toolbarItem.classList.contains('e-hidden') || toolbarItem.classList.contains('e-disable'))) {
+                        this.tabObj.setProperties({ selectedItem: newProp.selectedTab });
+                    }
                     break;
                 case 'tabAnimation':
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
@@ -4341,6 +4739,13 @@ var Ribbon = /** @class */ (function (_super) {
                 case 'tabs':
                     this.reRenderTabs(newProp.tabs);
                     break;
+                case 'contextualTabs':
+                    for (var i = 0; i < this.contextualTabs.length; i++) {
+                        if (newProp.contextualTabs[parseInt(i.toString(), 10)]) {
+                            this.ribbonContextualTabModule.updateContextualTabs(newProp.contextualTabs[parseInt(i.toString(), 10)], this.contextualTabs[parseInt(i.toString(), 10)]);
+                        }
+                    }
+                    break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
                     this.refreshLayout();
@@ -4384,6 +4789,12 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], Ribbon.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Ribbon.prototype, "enableKeyTips", void 0);
+    __decorate([
+        Property('')
+    ], Ribbon.prototype, "layoutSwitcherKeyTip", void 0);
     __decorate([
         Complex({}, FileMenuSettings)
     ], Ribbon.prototype, "fileMenu", void 0);
@@ -4408,6 +4819,9 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Collection([], RibbonTab)
     ], Ribbon.prototype, "tabs", void 0);
+    __decorate([
+        Collection([], RibbonContextualTabSettings)
+    ], Ribbon.prototype, "contextualTabs", void 0);
     __decorate([
         Property('100%')
     ], Ribbon.prototype, "width", void 0);