@syncfusion/ej2-ribbon 25.2.5 → 26.1.35

package/src/ribbon/items/ribbon-groupbutton.js

@@ -55,6 +55,10 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
                     groupButtonEle.classList.add(constants.RIBBON_GROUP_BUTTON_CONTENT);
+                    groupButtonEle.setAttribute('aria-label', groupBtnSettings.items[parseInt(i.toString(), 10)].content);
+                }
+                else {
+                    groupButtonEle.setAttribute('aria-label', 'groupbuttonitem');
                 }
                 var buttonEle = itemElement.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
@@ -173,7 +177,8 @@ var RibbonGroupButton = /** @class */ (function () {
                 for (var j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + constants.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 + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
@@ -194,10 +199,12 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
                 if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].
+                        setProperties({ selected: true }, true);
                 }
                 else {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: false }, true);
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].
+                        setProperties({ selected: false }, true);
                 }
                 var activeEleCount = 0;
                 for (var n = 0; n < grpBtnSettings.items.length; n++) {
@@ -400,6 +407,7 @@ var RibbonGroupButton = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/models/ribbon-contextual-tab-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, Event, EmitType, Property, Collection } from '@syncfusion/ej2-base';import { RibbonTab } from './ribbon-tab';import { RibbonTabModel } from './ribbon-tab-model';
+import { ChildProperty, Property, Collection } from '@syncfusion/ej2-base';import { RibbonTab } from './ribbon-tab';import { RibbonTabModel } from './ribbon-tab-model';
 
 /**
  * Interface for a class RibbonContextualTabSettings

package/src/ribbon/models/ribbon-gallery-group-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, Collection, Property } from "@syncfusion/ej2-base";import { RibbonGalleryItemModel } from "./ribbon-gallery-item-model";import { RibbonGalleryItem } from "./ribbon-gallery-item";
+import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';import { RibbonGalleryItemModel } from './ribbon-gallery-item-model';import { RibbonGalleryItem } from './ribbon-gallery-item';
 
 /**
  * Interface for a class RibbonGalleryGroup
@@ -15,28 +15,28 @@ export interface RibbonGalleryGroupModel {
 
     /**
      * Defines the header for the group items present in Ribbon Gallery popup.
-     * 
+     *
      * @default ''
      */
     header?: string;
 
     /**
      * Defines the width of the gallery items.
-     * 
+     *
      * @default 'auto'
      */
     itemWidth?: string;
 
     /**
      * Defines the height of the gallery item.
-     * 
+     *
      * @default 'auto'
      */
     itemHeight?: string;
 
     /**
      * Defines the CSS class to customize the gallery groups.
-     * 
+     *
      * @default ''
      */
     cssClass?: string;

package/src/ribbon/models/ribbon-gallery-group.d.ts

@@ -1,5 +1,5 @@
-import { ChildProperty } from "@syncfusion/ej2-base";
-import { RibbonGalleryItemModel } from "./ribbon-gallery-item-model";
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { RibbonGalleryItemModel } from './ribbon-gallery-item-model';
 /**
  * Defines the ribbon gallery group.
  */

package/src/ribbon/models/ribbon-gallery-group.js

@@ -17,8 +17,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChildProperty, Collection, Property } from "@syncfusion/ej2-base";
-import { RibbonGalleryItem } from "./ribbon-gallery-item";
+import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';
+import { RibbonGalleryItem } from './ribbon-gallery-item';
 /**
  * Defines the ribbon gallery group.
  */

package/src/ribbon/models/ribbon-gallery-item-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, Property } from "@syncfusion/ej2-base";
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
 
 /**
  * Interface for a class RibbonGalleryItem
@@ -7,14 +7,14 @@ export interface RibbonGalleryItemModel {
 
     /**
      * Defines the content for the gallery item.
-     * 
+     *
      * @default ''
      */
     content?: string;
 
     /**
      * Defines the image or icons for the gallery item.
-     * 
+     *
      * @default ''
      */
     iconCss?: string;
@@ -28,14 +28,14 @@ export interface RibbonGalleryItemModel {
 
     /**
      * Defines the CSS class to customize the gallery items.
-     * 
+     *
      * @default ''
      */
     cssClass?: string;
 
     /**
      * Defines whether the item is disabled or not.
-     * 
+     *
      * @default false
      */
     disabled?: boolean;

package/src/ribbon/models/ribbon-gallery-item.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty } from "@syncfusion/ej2-base";
+import { ChildProperty } from '@syncfusion/ej2-base';
 /**
  * Defines the ribbon gallery item.
  */

package/src/ribbon/models/ribbon-gallery-item.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChildProperty, Property } from "@syncfusion/ej2-base";
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
 /**
  * Defines the ribbon gallery item.
  */

package/src/ribbon/models/ribbon-gallery-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, Collection, EmitType, Property, Event } from "@syncfusion/ej2-base";import { RibbonGalleryGroupModel } from "./ribbon-gallery-group-model";import { RibbonGalleryGroup } from "./ribbon-gallery-group";import { GalleryHoverEventArgs, GalleryItemEventArgs, GalleryPopupEventArgs, GallerySelectEventArgs, GalleryBeforeSelectEventArgs } from "../base/interface";
+import { ChildProperty, Collection, EmitType, Property, Event } from '@syncfusion/ej2-base';import { RibbonGalleryGroupModel } from './ribbon-gallery-group-model';import { RibbonGalleryGroup } from './ribbon-gallery-group';import { GalleryHoverEventArgs, GalleryItemEventArgs, GalleryPopupEventArgs, GallerySelectEventArgs, GalleryBeforeSelectEventArgs } from '../base/interface';
 
 /**
  * Interface for a class RibbonGallerySettings

package/src/ribbon/models/ribbon-gallery-settings.d.ts

@@ -1,6 +1,6 @@
-import { ChildProperty, EmitType } from "@syncfusion/ej2-base";
-import { RibbonGalleryGroupModel } from "./ribbon-gallery-group-model";
-import { GalleryHoverEventArgs, GalleryItemEventArgs, GalleryPopupEventArgs, GallerySelectEventArgs, GalleryBeforeSelectEventArgs } from "../base/interface";
+import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
+import { RibbonGalleryGroupModel } from './ribbon-gallery-group-model';
+import { GalleryHoverEventArgs, GalleryItemEventArgs, GalleryPopupEventArgs, GallerySelectEventArgs, GalleryBeforeSelectEventArgs } from '../base/interface';
 /**
  * Defines the ribbon gallery settings.
  */

package/src/ribbon/models/ribbon-gallery-settings.js

@@ -17,8 +17,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChildProperty, Collection, Property, Event } from "@syncfusion/ej2-base";
-import { RibbonGalleryGroup } from "./ribbon-gallery-group";
+import { ChildProperty, Collection, Property, Event } from '@syncfusion/ej2-base';
+import { RibbonGalleryGroup } from './ribbon-gallery-group';
 /**
  * Defines the ribbon gallery settings.
  */

package/src/ribbon/modules/ribbon-backstage.d.ts

@@ -20,11 +20,13 @@ export declare class RibbonBackstage extends Component<HTMLElement> {
     private contentItem;
     private backstageTempEle;
     private itemsWrapperEle;
+    private menuIndex;
+    private isCloseBtn;
     constructor(parent: Ribbon);
     /**
-    * @private
-    * @returns {void}
-    */
+     * @private
+     * @returns {void}
+     */
     protected render(): void;
     /**
      * @private
@@ -54,6 +56,7 @@ export declare class RibbonBackstage extends Component<HTMLElement> {
     private addBackStageMenuKeyTip;
     private checkMenuItems;
     private createBackStagePopup;
+    private handleNavigation;
     private updatePopupPositionOnRtl;
     private createBackstageMenu;
     private cloneMenuItem;

package/src/ribbon/modules/ribbon-backstage.js

@@ -29,9 +29,9 @@ var RibbonBackstage = /** @class */ (function (_super) {
         return _this;
     }
     /**
-    * @private
-    * @returns {void}
-    */
+     * @private
+     * @returns {void}
+     */
     RibbonBackstage.prototype.render = function () {
         // render code
     };
@@ -133,6 +133,8 @@ var RibbonBackstage = /** @class */ (function (_super) {
                     if (firstMenuEle) {
                         firstMenuEle.classList.add('e-selected');
                         firstMenuEle.focus();
+                        _this.menuIndex = 0;
+                        _this.isCloseBtn = false;
                     }
                     _this.createBackStageContent(_this.menuCtrl.items[0].id, item.content);
                     break;
@@ -197,7 +199,8 @@ var RibbonBackstage = /** @class */ (function (_super) {
         });
         var targetEle;
         if (backStageOptions.target) {
-            targetEle = backStageOptions.target instanceof HTMLElement ? backStageOptions.target : document.querySelector(backStageOptions.target);
+            targetEle = backStageOptions.target instanceof HTMLElement ? backStageOptions.target :
+                document.querySelector(backStageOptions.target);
             targetEle.appendChild(this.popupHTMLElement);
         }
         else {
@@ -212,10 +215,47 @@ var RibbonBackstage = /** @class */ (function (_super) {
         if (this.parent.enableRtl) {
             this.updatePopupPositionOnRtl(this.parent.enableRtl);
         }
-        this.popupHTMLElement.onkeydown = function (e) { if (e.code === 'Escape') {
-            _this.hideBackstage();
-        } };
         this.hideBackstage();
+        EventHandler.add(this.popupHTMLElement, 'keyup', function (e) {
+            if (e.code === 'Escape') {
+                _this.hideBackstage();
+            }
+            _this.handleNavigation(e);
+        }, this);
+    };
+    RibbonBackstage.prototype.handleNavigation = function (e) {
+        var closeBtnEle = this.popupHTMLElement.querySelector('.e-ribbon-close-btn');
+        var menuItems = this.popupHTMLElement.querySelectorAll('.e-menu-item');
+        var arrowUp = e.key === 'ArrowUp';
+        var arrowDown = e.key === 'ArrowDown';
+        if (arrowUp || arrowDown) {
+            if ((arrowUp && this.menuIndex > 0) || (arrowDown && this.menuIndex < menuItems.length - 1 && !this.isCloseBtn)) {
+                this.menuIndex = arrowUp ? this.menuIndex - 1 : this.menuIndex + 1;
+            }
+            else {
+                if (closeBtnEle && !this.isCloseBtn) {
+                    closeBtnEle.focus();
+                    this.isCloseBtn = true;
+                }
+                else {
+                    this.menuIndex = arrowUp ? menuItems.length - 1 : 0;
+                    this.isCloseBtn = false;
+                }
+            }
+            for (var i = 0; i < menuItems.length; i++) {
+                menuItems[parseInt(i.toString(), 10)].classList.remove('e-focused');
+            }
+            if (!this.isCloseBtn) {
+                if (arrowUp && menuItems[this.menuIndex].classList.contains('e-separator')) {
+                    this.menuIndex--;
+                }
+                else if (arrowDown && menuItems[this.menuIndex].classList.contains('e-separator')) {
+                    this.menuIndex++;
+                }
+                menuItems[this.menuIndex].classList.add('e-focused');
+                menuItems[this.menuIndex].focus();
+            }
+        }
     };
     RibbonBackstage.prototype.updatePopupPositionOnRtl = function (enableRtl) {
         var popupStyle = this.popupHTMLElement.style;
@@ -370,11 +410,13 @@ var RibbonBackstage = /** @class */ (function (_super) {
             var item = menuOptions.items[parseInt(i.toString(), 10)];
             if (item.text === args.item.text) {
                 this.contentItem = item;
+                this.menuIndex = i;
                 break;
             }
         }
         this.createBackStageContent(args.item.id, this.contentItem.content);
-        var eventArgs = { cancel: false, target: args.element, item: this.contentItem, isBackButton: this.isBackButtonClicked };
+        var eventArgs = { cancel: false, target: args.element,
+            item: this.contentItem, isBackButton: this.isBackButtonClicked };
         if (this.contentItem.backStageItemClick) {
             this.contentItem.backStageItemClick.call(this, eventArgs);
         }
@@ -394,8 +436,9 @@ var RibbonBackstage = /** @class */ (function (_super) {
             this.backstageButton.setProperties(commonProp);
             if (this.popupEle) {
                 this.popupEle.setProperties(commonProp);
-                if (this.popupHTMLElement)
+                if (this.popupHTMLElement) {
                     this.updatePopupPositionOnRtl(commonProp.enableRtl);
+                }
                 if (this.menuCtrl) {
                     this.menuCtrl.setProperties(commonProp);
                     if (this.closeBtn) {
@@ -428,7 +471,7 @@ var RibbonBackstage = /** @class */ (function (_super) {
                     this.popupEle.setProperties({
                         height: backStageOptions.height,
                         width: backStageOptions.width,
-                        target: backStageOptions.target || this.parent.element,
+                        target: backStageOptions.target || this.parent.element
                     });
                 }
                 if (backStageOptions.template) {
@@ -537,10 +580,20 @@ var RibbonBackstage = /** @class */ (function (_super) {
         for (var i = 0; i < items.length; i++) {
             var item = items[parseInt(i.toString(), 10)];
             if (item.isFooter) {
-                isAfter ? this.footerMenuCtrl.insertAfter(items, target, isUniqueId) : this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
+                if (isAfter) {
+                    this.footerMenuCtrl.insertAfter(items, target, isUniqueId);
+                }
+                else {
+                    this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
+                }
             }
             else {
-                isAfter ? this.menuCtrl.insertAfter(items, target, isUniqueId) : this.menuCtrl.insertBefore(items, target, isUniqueId);
+                if (isAfter) {
+                    this.menuCtrl.insertAfter(items, target, isUniqueId);
+                }
+                else {
+                    this.menuCtrl.insertBefore(items, target, isUniqueId);
+                }
             }
         }
         var backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);

package/src/ribbon/modules/ribbon-contextualtab.js

@@ -76,11 +76,14 @@ var RibbonContextualTab = /** @class */ (function () {
         if (newProp.tabs) {
             var _loop_1 = function (key) {
                 var index = parseInt(key, 10);
-                var tab = this_1.parent.tabs.filter(function (e) { return e.id === contextualTab.tabs[parseInt(index.toString(), 10)].id; })[0];
+                var tab = this_1.parent.tabs.filter(function (e) {
+                    return e.id === contextualTab.tabs[parseInt(index.toString(), 10)].id;
+                })[0];
                 this_1.parent.updateTab(tab);
             };
             var this_1 = this;
-            for (var key in newProp.tabs) {
+            for (var _i = 0, _a = Object.keys(newProp.tabs); _i < _a.length; _i++) {
+                var key = _a[_i];
                 _loop_1(key);
             }
         }

package/src/ribbon/modules/ribbon-keytip.d.ts

@@ -24,6 +24,7 @@ export declare class RibbonKeyTip {
      * Performs keytip action.
      *
      * @param {string} keyPress - Gets the keytip text.
+     * @param {boolean} isMethod - Gets the isMethod.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/modules/ribbon-keytip.js

@@ -31,8 +31,7 @@ var RibbonKeyTip = /** @class */ (function () {
             if (key === 'tab') {
                 for (var i = 0; i < this.parent.tabs.length; i++) {
                     if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
-                        // eslint-disable-next-line
-                        keytipData = this.parent.keyTipElements[i][key];
+                        keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)]["" + key];
                         this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true);
                     }
                 }
@@ -115,15 +114,12 @@ var RibbonKeyTip = /** @class */ (function () {
         if (isMethod === void 0) { isMethod = false; }
         var xOffset;
         var yOffset;
-        var keytipData;
-        /* eslint-disable */
-        keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key];
+        var keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)]["" + key];
         if (keytipData) {
-            for (var i = 0; i < Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)][key]).length; i++) {
-                /* eslint-enable */
+            for (var i = 0; i < Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)]["" + key]).length; i++) {
                 if ((isMethod && (keytipData[parseInt(i.toString(), 10)].keyTip === keyTip)) || !isMethod) {
                     var itemID = keytipData[parseInt(i.toString(), 10)].id;
-                    if (keytipData[parseInt(i.toString(), 10)].id.includes("_grpbtn")) {
+                    if (keytipData[parseInt(i.toString(), 10)].id.indexOf('_grpbtn') !== -1) {
                         itemID = keytipData[parseInt(i.toString(), 10)].id.replace(/_grpbtn\d+/, '');
                     }
                     var itemProp = getItem(this.parent.tabs, itemID);
@@ -151,7 +147,12 @@ var RibbonKeyTip = /** @class */ (function () {
                             yOffset = 'bottom';
                         }
                     }
-                    key === 'item' ? this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset) : this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset, false, true);
+                    if (key === 'item') {
+                        this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset);
+                    }
+                    else {
+                        this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, key, xOffset, yOffset, false, true);
+                    }
                 }
             }
         }
@@ -201,13 +202,12 @@ var RibbonKeyTip = /** @class */ (function () {
                     enableRtl: this.parent.enableRtl
                 });
                 keytipPopup.show();
-                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset, (isTab && isPopUpItem));
+                this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset);
                 this.parent.isKeytipOpen = true;
             }
         }
     };
-    RibbonKeyTip.prototype.calculateKeyTipPosition = function (itemEle, keytipElement, type, yOffset, isTabOverflow) {
-        if (isTabOverflow === void 0) { isTabOverflow = false; }
+    RibbonKeyTip.prototype.calculateKeyTipPosition = function (itemEle, keytipElement, type, yOffset) {
         var position = itemEle.getBoundingClientRect();
         if (type === 'backstageMenu') {
             keytipElement.style.top = position.top + ((keytipElement.offsetHeight) / 2) + 'px';
@@ -229,6 +229,7 @@ var RibbonKeyTip = /** @class */ (function () {
      * Performs keytip action.
      *
      * @param {string} keyPress - Gets the keytip text.
+     * @param {boolean} isMethod - Gets the isMethod.
      * @returns {void}
      * @hidden
      */
@@ -238,9 +239,11 @@ var RibbonKeyTip = /** @class */ (function () {
         this.isKeytipPresent = false;
         for (var i = 0; ((i < Object.keys(this.parent.keyTipElements).length) && !this.isKeytipPresent); i++) {
             if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
-                for (var j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) && !this.isKeytipPresent); j++) {
-                    var keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
-                    for (var k = 0; ((k < keytipData.length) && !this.isKeytipPresent); k++) {
+                for (var j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) &&
+                    !this.isKeytipPresent); j++) {
+                    var keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.
+                        keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
+                    for (var k = 0; ((k < Object.keys(keytipData).length) && !this.isKeytipPresent); k++) {
                         if (keyPress.toUpperCase() === keytipData[parseInt(k.toString(), 10)].keyTip) {
                             var keyTipElement = document.querySelector('#' + keytipData[parseInt(k.toString(), 10)].id + constants.RIBBON_KEYTIP_ID);
                             if (keyTipElement || isMethod) {
@@ -251,8 +254,9 @@ var RibbonKeyTip = /** @class */ (function () {
                                         this.parent.tabObj.select(i);
                                         setTimeout(function () {
                                             var tabOverflow = _this.parent.tabObj.element.querySelector('.e-nav-active');
-                                            if (tabOverflow)
+                                            if (tabOverflow) {
                                                 tabOverflow.click();
+                                            }
                                             _this.createKeytip('item');
                                         }, 600);
                                     }
@@ -267,7 +271,7 @@ var RibbonKeyTip = /** @class */ (function () {
                                         }
                                         else {
                                             var itemProp = void 0;
-                                            if ((keytipData[parseInt(k.toString(), 10)].id).includes("_popupButton")) {
+                                            if ((keytipData[parseInt(k.toString(), 10)].id).indexOf('_popupButton') !== -1) {
                                                 var galleryID = keytipData[parseInt(k.toString(), 10)].id.replace(/_popupButton/g, '');
                                                 itemProp = getItem(this.parent.tabs, galleryID);
                                             }
@@ -285,7 +289,7 @@ var RibbonKeyTip = /** @class */ (function () {
                                         if (keyEle) {
                                             var groupID = keytipData[parseInt(k.toString(), 10)].id;
                                             if (isMethod) {
-                                                if (keytipData[parseInt(k.toString(), 10)].id.includes("_launcher") || keytipData[parseInt(k.toString(), 10)].id.includes("_sim_grp_overflow") || keytipData[parseInt(k.toString(), 10)].id.includes("_overflow_dropdown")) {
+                                                if (keytipData[parseInt(k.toString(), 10)].id.indexOf('_launcher') !== -1 || keytipData[parseInt(k.toString(), 10)].id.indexOf('_sim_grp_overflow') !== -1 || keytipData[parseInt(k.toString(), 10)].id.indexOf('_overflow_dropdown') !== -1) {
                                                     groupID = keytipData[parseInt(k.toString(), 10)].id.replace(/_launcher|_sim_grp_overflow|_overflow_dropdown/g, '');
                                                     var itemProp = getGroup(this.parent.tabs, groupID);
                                                     if (itemProp.tabIndex === this.parent.selectedTab) {
@@ -316,7 +320,12 @@ var RibbonKeyTip = /** @class */ (function () {
             keyEle.click();
             if (!(keytipData[parseInt(k.toString(), 10)].type === 'launcher')) {
                 this.isKeytipPopupOpen = true;
-                keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow' ? this.createKeytip('grpoverflowpopup') : this.createKeytip('popupitem');
+                if (keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow') {
+                    this.createKeytip('grpoverflowpopup');
+                }
+                else {
+                    this.createKeytip('popupitem');
+                }
             }
         }
         else {
@@ -353,21 +362,24 @@ var RibbonKeyTip = /** @class */ (function () {
                 case 'colorpicker':
                     this.parent.ribbonColorPickerModule.toggle(itemID);
                     break;
-                case 'combobox':
+                case 'combobox': {
                     var itemEle_1 = document.querySelector('#' + itemID);
                     setTimeout(function () {
                         itemEle_1.focus();
                     }, 100);
                     break;
-                case 'gallery':
+                }
+                case 'gallery': {
                     var galleryEle = document.querySelector('#' + itemID);
                     galleryEle.click();
                     break;
-                case 'template':
+                }
+                case 'template': {
                     var templateEle = document.querySelector('#' + itemID);
                     templateEle.focus();
                     break;
-                case 'group-btn':
+                }
+                case 'group-btn': {
                     var itemElement = document.querySelector('#' + itemID);
                     if (itemElement) {
                         var item = getInstance(itemElement, DropDownButton);
@@ -379,21 +391,20 @@ var RibbonKeyTip = /** @class */ (function () {
                         }
                     }
                     break;
+                }
             }
         }
     };
     RibbonKeyTip.prototype.commonItemsKeyTipPress = function (keyPress, key, isMethod) {
         var _this = this;
-        /* eslint-disable */
-        if (this.parent.keyTipElements[key]) {
+        if (this.parent.keyTipElements["" + key]) {
             var isKeyPressed = false;
-            var keytipData = this.parent.keyTipElements[key];
+            var keytipData = this.parent.keyTipElements["" + key];
             var keyEle = void 0;
             var keytipElement = void 0;
             if (keytipData) {
                 if (key === 'backstageMenu') {
-                    for (var i = 0; i < Object.keys(this.parent.keyTipElements[key]).length; i++) {
-                        /* eslint-enable */
+                    for (var i = 0; i < Object.keys(this.parent.keyTipElements["" + key]).length; i++) {
                         if (keytipData[parseInt(i.toString(), 10)].keyTip === keyPress.toUpperCase()) {
                             keyEle = document.querySelector('#' + keytipData[parseInt(i.toString(), 10)].id);
                             keytipElement = document.querySelector('#' + keyEle.id + constants.RIBBON_KEYTIP_ID);
@@ -458,34 +469,34 @@ var RibbonKeyTip = /** @class */ (function () {
         var _loop_1 = function (i) {
             var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
             if (key === 'Escape' && this_1.parent.keyTipElements && this_1.parent.keyTipElements[this_1.parent.selectedTab]) {
-                /* eslint-disable */
                 for (var j = 0; j < Object.keys(this_1.parent.keyTipElements[this_1.parent.selectedTab]).length; j++) {
-                    var keyText = (Object.keys(this_1.parent.keyTipElements[this_1.parent.selectedTab]))[j];
-                    if (this_1.parent.keyTipElements[this_1.parent.selectedTab][keyText]) {
-                        var index = getIndex(this_1.parent.keyTipElements[this_1.parent.selectedTab][keyText], function (e) { return e.id + constants.RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
-                        /* eslint-enable */
-                        if (index !== -1) {
-                            if ((keyText === 'item' && !(this_1.isKeytipPopupOpen)) || (keyText === 'grpoverflow' && this_1.parent.activeLayout === 'Classic')) {
-                                this_1.createKeytip('tab');
+                    var keyText = (Object.keys(this_1.parent.keyTipElements[parseInt(this_1.parent.selectedTab.toString(), 10)]))[parseInt(j.toString(), 10)];
+                    var keyTipElement = this_1.parent.keyTipElements[parseInt(this_1.parent.selectedTab.toString(), 10)];
+                    var index = getIndex(keyTipElement["" + keyText], function (e) {
+                        return e.id +
+                            constants.RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id;
+                    });
+                    if (index !== -1) {
+                        if ((keyText === 'item' && !(this_1.isKeytipPopupOpen)) || (keyText === 'grpoverflow' && this_1.parent.activeLayout === 'Classic')) {
+                            this_1.createKeytip('tab');
+                            key = '';
+                            isKeyTipExist = true;
+                            break;
+                        }
+                        else if (this_1.isKeytipPopupOpen) {
+                            if ((keyText === 'popupitem' && this_1.parent.activeLayout === 'Simplified') || (keyText === 'grpoverflowpopup' && this_1.parent.activeLayout === 'Classic')) {
+                                this_1.createKeytip('item');
                                 key = '';
                                 isKeyTipExist = true;
                                 break;
                             }
-                            else if (this_1.isKeytipPopupOpen) {
-                                if ((keyText === 'popupitem' && this_1.parent.activeLayout === 'Simplified') || (keyText === 'grpoverflowpopup' && this_1.parent.activeLayout === 'Classic')) {
-                                    this_1.createKeytip('item');
-                                    key = '';
-                                    isKeyTipExist = true;
-                                    break;
-                                }
-                            }
                         }
                     }
                 }
                 for (var n = 0; n < Object.keys(this_1.parent.keyTipElements).length; n++) {
                     if (this_1.parent.keyTipElements[parseInt(n.toString(), 10)]) {
                         var keytipData = this_1.parent.keyTipElements[parseInt(n.toString(), 10)]['tab'];
-                        for (var j = 0; j < keytipData.length; j++) {
+                        for (var j = 0; j < Object.keys(keytipData).length; j++) {
                             if (keyTipItem.id === keytipData[0].id + constants.RIBBON_KEYTIP_ID) {
                                 if (document.querySelector('#' + keytipData[0].id + constants.HEADER_ID).closest('.e-toolbar-pop')) {
                                     var tabOverflow = this_1.parent.tabObj.element.querySelector('.e-nav-active');
@@ -522,8 +533,9 @@ var RibbonKeyTip = /** @class */ (function () {
             _loop_1(i);
         }
         this.isKeytipPopupOpen = false;
-        if (!isKeyTipExist)
+        if (!isKeyTipExist) {
             this.parent.isKeytipOpen = false;
+        }
     };
     /**
      * Shows the Keytip dynamically.