all files / modules/ ribbon-keytip.js

99.71% Statements 342/343
90.1% Branches 273/303
100% Functions 23/23
99.7% Lines 335/336
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540   60× 60×   8338×   32×   78× 78× 78× 40× 88× 80× 80×     40×   40×   40×   40×     38× 14×       33×       30×           27× 27× 22×     22× 11× 11×       27×               30× 30× 30× 30× 30× 30× 76× 76× 76×   76× 76× 14×           62× 12×         76× 65×     11×           223× 223× 223× 223× 223× 223× 223× 223× 84×   223× 222× 69×   222×   222×     218× 11× 11×       223× 186× 184×         184× 184×                 184× 184× 184×       184× 184×     175× 163×     184×   177×     66× 66× 66× 66× 102× 82×   140×   140× 208× 53× 53× 53× 53× 53× 25×           24×       28× 21×     20× 20×     19×   20× 20×                                   20× 20×         27×             20× 20×               20× 20×                                                 20× 20× 20× 20× 20× 20× 20× 20×             17×         20× 11× 11× 11× 11× 11×                     104× 104× 104× 104× 104× 177× 177× 11× 26× 26× 26× 36×     26×           11× 25× 20× 20× 20×         20×       11×       177× 177×     104× 104× 177×   104× 104× 98×     12× 12× 11×                  
define(["require", "exports", "../base/utils", "../base/index", "../base/constant", "@syncfusion/ej2-popups", "@syncfusion/ej2-base", "@syncfusion/ej2-splitbuttons"], function (require, exports, utils_1, index_1, constants, ej2_popups_1, ej2_base_1, ej2_splitbuttons_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var RibbonKeyTip = (function () {
        function RibbonKeyTip(parent) {
            this.isKeytipPopupOpen = false;
            this.parent = parent;
        }
        RibbonKeyTip.prototype.getModuleName = function () {
            return 'ribbonKeyTip';
        };
        RibbonKeyTip.prototype.destroy = function () {
            this.parent = null;
        };
        RibbonKeyTip.prototype.createKeytip = function (key) {
            Eif (this.parent.keyTipElements) {
                var keytipData = void 0;
                if (key === 'tab') {
                    for (var i = 0; i < this.parent.tabs.length; i++) {
                        if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
                            keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)]["" + key];
                            this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'tab', 'center', 'bottom', true);
                        }
                    }
                    if (this.parent.keyTipElements['filemenu']) {
                        keytipData = this.parent.keyTipElements['filemenu'];
                        this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'filemenu');
                    }
                    if (this.parent.keyTipElements['backstage']) {
                        keytipData = this.parent.keyTipElements['backstage'];
                        this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'backstage');
                    }
                    if (this.parent.keyTipElements['collapse']) {
                        keytipData = this.parent.keyTipElements['collapse'];
                        this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'collapse');
                    }
                    if (this.parent.keyTipElements['taboverflow']) {
                        keytipData = this.parent.keyTipElements['taboverflow'];
                        this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'taboverflow');
                    }
                }
                else if (key === 'popupitem') {
                    Eif (this.parent.keyTipElements[this.parent.selectedTab]['popupitem']) {
                        var popupKeyTipData = this.parent.keyTipElements[this.parent.selectedTab]['popupitem'];
                        for (var i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['popupitem']).length; i++) {
                            this.createKeyTipElement((popupKeyTipData[parseInt(i.toString(), 10)].id), popupKeyTipData[parseInt(i.toString(), 10)].keyTip, 'popupitem', 'left', 'top', false, true);
                        }
                    }
                }
                else if (key === 'backstageMenu') {
                    Eif (this.parent.keyTipElements['backstageMenu']) {
                        var backstageKeyTipData = this.parent.keyTipElements['backstageMenu'];
                        for (var i = 0; i < Object.keys(this.parent.keyTipElements['backstageMenu']).length; i++) {
                            this.createKeyTipElement((backstageKeyTipData[parseInt(i.toString(), 10)].id), backstageKeyTipData[parseInt(i.toString(), 10)].keyTip, 'backstageMenu', 'left', 'center');
                        }
                    }
                }
                else if (key === 'grpoverflowpopup' && this.parent.activeLayout === 'Classic') {
                    Eif (this.parent.keyTipElements[this.parent.selectedTab]['grpoverflowpopup']) {
                        this.calculateItemPosition(key);
                    }
                    if (this.parent.keyTipElements[this.parent.selectedTab]['launcher']) {
                        for (var i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['launcher']).length; i++) {
                            keytipData = this.parent.keyTipElements[this.parent.selectedTab]['launcher'];
                            this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'launcher', 'center', 'bottom', false, true);
                        }
                    }
                }
                else {
                    this.calculateItemPosition(key);
                    if (this.parent.activeLayout === 'Classic') {
                        if (this.parent.keyTipElements[this.parent.selectedTab]['launcher']) {
                            for (var i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['launcher']).length; i++) {
                                keytipData = this.parent.keyTipElements[this.parent.selectedTab]['launcher'];
                                this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'launcher');
                            }
                        }
                        if (this.parent.keyTipElements[this.parent.selectedTab]['grpoverflow']) {
                            for (var i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['grpoverflow']).length; i++) {
                                keytipData = this.parent.keyTipElements[this.parent.selectedTab]['grpoverflow'];
                                this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'grpoverflow');
                            }
                        }
                    }
                    if (this.parent.activeLayout === 'Simplified') {
                        if (this.parent.keyTipElements['overflowbtn']) {
                            keytipData = this.parent.keyTipElements['overflowbtn'];
                            this.createKeyTipElement((keytipData[0].id), keytipData[0].keyTip, 'overflowbtn');
                        }
                        if (this.parent.keyTipElements[this.parent.selectedTab]['grpofbtn']) {
                            for (var i = 0; i < Object.keys(this.parent.keyTipElements[this.parent.selectedTab]['grpofbtn']).length; i++) {
                                keytipData = this.parent.keyTipElements[this.parent.selectedTab]['grpofbtn'];
                                this.createKeyTipElement((keytipData[parseInt(i.toString(), 10)].id), keytipData[parseInt(i.toString(), 10)].keyTip, 'grpofbtn');
                            }
                        }
                    }
                }
            }
        };
        RibbonKeyTip.prototype.calculateItemPosition = function (key, isMethod, keyTip) {
            Eif (isMethod === void 0) { isMethod = false; }
            var xOffset;
            var yOffset;
            var keytipData = this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)]["" + key];
            Eif (keytipData) {
                for (var i = 0; i < Object.keys(this.parent.keyTipElements[parseInt(this.parent.selectedTab.toString(), 10)]["" + key]).length; i++) {
                    Eif ((isMethod && (keytipData[parseInt(i.toString(), 10)].keyTip === keyTip)) || !isMethod) {
                        var itemID = keytipData[parseInt(i.toString(), 10)].id;
                        if (keytipData[parseInt(i.toString(), 10)].id.indexOf('_grpbtn') !== -1) {
                            itemID = keytipData[parseInt(i.toString(), 10)].id.replace(/_grpbtn\d+/, '');
                        }
                        var itemProp = utils_1.getItem(this.parent.tabs, itemID);
                        if (itemProp && itemProp.group.orientation === 'Column' && itemProp.collection.items.length > 1 && this.parent.activeLayout !== 'Simplified') {
                            if (itemProp.itemIndex === 0) {
                                xOffset = 'center';
                                yOffset = 'top';
                            }
                            else if (itemProp.itemIndex === 1) {
                                xOffset = 'center';
                                yOffset = 'center';
                            }
                            else {
                                xOffset = 'center';
                                yOffset = 'bottom';
                            }
                        }
                        else if (itemProp && itemProp.group.orientation === 'Row' && itemProp.group.collections.length > 1 && this.parent.activeLayout !== 'Simplified') {
                            if (itemProp.collectionIndex === 0) {
                                xOffset = 'center';
                                yOffset = 'top';
                            }
                            else {
                                xOffset = 'center';
                                yOffset = 'bottom';
                            }
                        }
                        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);
                        }
                    }
                }
            }
        };
        RibbonKeyTip.prototype.createKeyTipElement = function (id, keyTip, type, xOffset, yOffset, isTab, isPopUpItem) {
            if (xOffset === void 0) { xOffset = 'center'; }
            if (yOffset === void 0) { yOffset = 'bottom'; }
            if (isTab === void 0) { isTab = false; }
            if (isPopUpItem === void 0) { isPopUpItem = false; }
            var keyEle = document.querySelector('#' + id);
            var isPopUpPresent = false;
            var splitBtnID;
            if (isTab) {
                keyEle = document.querySelector('#' + id + constants.HEADER_ID);
            }
            if (keyEle) {
                if (keyEle.closest('.e-ribbon-group-overflow-ddb')) {
                    isPopUpPresent = true;
                }
                if ((isTab && isPopUpItem) && keyEle.closest('.e-toolbar-pop')) {
                    isPopUpPresent = true;
                }
                if (keyEle.closest('.e-split-btn-wrapper')) {
                    var splitBtn = keyEle.closest('.e-split-btn-wrapper');
                    splitBtnID = splitBtn.closest('.e-ribbon-item').id;
                }
                else {
                    if (keyEle.closest('.e-colorpicker-wrapper')) {
                        keyEle = keyEle.closest('.e-colorpicker-wrapper');
                        splitBtnID = keyEle.closest('.e-ribbon-item').id;
                    }
                }
            }
            if ((keyEle && keyEle.offsetParent) || (isTab && isPopUpItem)) {
                if ((isPopUpItem && isPopUpPresent) || !isPopUpItem) {
                    var keytipElement = this.parent.createElement('div', {
                        className: constants.RIBBON_KEYTIP,
                        id: id + constants.RIBBON_KEYTIP_ID,
                        attrs: { role: 'dialog', 'aria-label': 'ribbon-keytip' }
                    });
                    document.body.append(keytipElement);
                    var keytipPopup = new ej2_popups_1.Popup(keytipElement, {
                        relateTo: '#' + (isTab ? id + constants.HEADER_ID : splitBtnID ? splitBtnID : id),
                        content: keyTip,
                        collision: { X: 'fit', Y: 'flip' },
                        targetType: 'relative',
                        position: { X: xOffset, Y: yOffset },
                        enableRtl: this.parent.enableRtl,
                        actionOnScroll: 'hide'
                    });
                    keytipPopup.show();
                    this.calculateKeyTipPosition(keyEle, keytipElement, type, yOffset);
                    this.parent.isKeytipOpen = true;
                }
            }
        };
        RibbonKeyTip.prototype.calculateKeyTipPosition = function (itemEle, keytipElement, type, yOffset) {
            var position = itemEle.getBoundingClientRect();
            if (type === 'backstageMenu') {
                keytipElement.style.top = position.top + ((keytipElement.offsetHeight) / 2) + 'px';
                keytipElement.style.left = position.left + (itemEle.offsetWidth / 5) + 'px';
            }
            else {
                if (type !== 'popupitem') {
                    keytipElement.style.left = position.left + (position.width - keytipElement.offsetWidth) / 2 + 'px';
                }
            }
            if (type === 'filemenu' || type === 'backstage') {
                keytipElement.style.top = position.top + ((itemEle.offsetHeight - (itemEle.offsetHeight / 3)) + (keytipElement.offsetHeight / 6)) + 'px';
            }
            else if ((type === 'item' && yOffset === 'top')) {
                keytipElement.style.top = (position.top - (itemEle.offsetHeight) / 2) + 'px';
            }
        };
        RibbonKeyTip.prototype.keytipPress = function (keyPress, isMethod) {
            var _this = this;
            if (isMethod === void 0) { isMethod = false; }
            this.isKeytipPresent = false;
            for (var i = 0; ((i < Object.keys(this.parent.keyTipElements).length) && !this.isKeytipPresent); i++) {
                if (this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
                    for (var j = 0; ((j < Object.keys(this.parent.keyTipElements[parseInt(i.toString(), 10)]).length) &&
                        !this.isKeytipPresent); j++) {
                        var keytipData = this.parent.keyTipElements[parseInt(i.toString(), 10)][Object.
                            keys(this.parent.keyTipElements[parseInt(i.toString(), 10)])[parseInt(j.toString(), 10)]];
                        for (var k = 0; ((k < 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);
                                Eif (keyTipElement || isMethod) {
                                    this.isKeytipPresent = true;
                                    this.removeKeytip();
                                    if (keytipData[parseInt(k.toString(), 10)].type === 'tab') {
                                        if (i !== this.parent.selectedTab) {
                                            this.parent.tabObj.select(i);
                                            setTimeout(function () {
                                                var tabOverflow = _this.parent.tabObj.element.querySelector('.e-nav-active');
                                                Iif (tabOverflow) {
                                                    tabOverflow.click();
                                                }
                                                _this.createKeytip('item');
                                            }, 600);
                                        }
                                        else {
                                            this.createKeytip('item');
                                        }
                                    }
                                    else {
                                        if (keytipData[parseInt(k.toString(), 10)].type === 'item' || keytipData[parseInt(k.toString(), 10)].type === 'grpoverflowpopup' || keytipData[parseInt(k.toString(), 10)].type === 'popupitem') {
                                            if (document.getElementById(keytipData[parseInt(k.toString(), 10)].id) && document.getElementById(keytipData[parseInt(k.toString(), 10)].id).classList.contains('e-ribbon-group-button')) {
                                                document.getElementById(keytipData[parseInt(k.toString(), 10)].id).click();
                                            }
                                            else {
                                                var itemProp = void 0;
                                                if ((keytipData[parseInt(k.toString(), 10)].id).indexOf('_popupButton') !== -1) {
                                                    var galleryID = keytipData[parseInt(k.toString(), 10)].id.replace(/_popupButton/g, '');
                                                    itemProp = utils_1.getItem(this.parent.tabs, galleryID);
                                                }
                                                else {
                                                    itemProp = utils_1.getItem(this.parent.tabs, keytipData[parseInt(k.toString(), 10)].id);
                                                }
                                                Eif (!isMethod || (isMethod && itemProp.tabIndex === this.parent.selectedTab)) {
                                                    this.clickItems(itemProp, keytipData, k, false, isMethod);
                                                }
                                            }
                                        }
                                        else Eif (keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow' || keytipData[parseInt(k.toString(), 10)].type === 'grpofbtn' || keytipData[parseInt(k.toString(), 10)].type === 'launcher') {
                                            var keyEle = document.querySelector('#' + keytipData[parseInt(k.toString(), 10)].id);
                                            this.removeKeytip();
                                            Eif (keyEle) {
                                                var groupID = keytipData[parseInt(k.toString(), 10)].id;
                                                if (isMethod) {
                                                    Eif (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 = utils_1.getGroup(this.parent.tabs, groupID);
                                                        Eif (itemProp.tabIndex === this.parent.selectedTab) {
                                                            this.clickItems(itemProp, keytipData, k, true, isMethod, keyEle);
                                                        }
                                                    }
                                                }
                                                else {
                                                    this.clickItems(null, keytipData, k, true, isMethod, keyEle);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                else {
                    Eif (this.parent.keyTipElements) {
                        this.commonItemsKeyTipPress(keyPress, Object.keys(this.parent.keyTipElements)[parseInt(i.toString(), 10)], isMethod);
                    }
                }
            }
        };
        RibbonKeyTip.prototype.clickItems = function (itemProp, keytipData, k, isGroupItems, isMethod, keyEle) {
            if (isGroupItems) {
                keyEle.click();
                if (!(keytipData[parseInt(k.toString(), 10)].type === 'launcher')) {
                    this.isKeytipPopupOpen = true;
                    if (keytipData[parseInt(k.toString(), 10)].type === 'grpoverflow') {
                        this.createKeytip('grpoverflowpopup');
                    }
                    else {
                        this.createKeytip('popupitem');
                    }
                }
            }
            else {
                var itemID = keytipData[parseInt(k.toString(), 10)].id;
                if (document.querySelector('#' + itemID) && isMethod) {
                    if (this.parent.activeLayout === 'Simplified') {
                        if (document.querySelector('#' + itemID).closest('#' + itemProp.group.id + '_sim_grp_overflow-popup') && document.querySelector('#' + itemID).closest('#' + itemProp.group.id + '_sim_grp_overflow-popup').classList.contains('e-popup-close')) {
                            document.querySelector('#' + itemProp.group.id + '_sim_grp_overflow').click();
                        }
                        else Eif (document.querySelector('#' + itemID).closest('#' + this.parent.tabObj.element.id + constants.OVRLOF_BUTTON_ID + '-popup') && document.querySelector('#' + itemID).closest('#' + this.parent.tabObj.element.id + constants.OVRLOF_BUTTON_ID + '-popup').classList.contains('e-popup-close')) {
                            document.querySelector('#' + this.parent.tabObj.element.id + constants.OVRLOF_BUTTON_ID).click();
                        }
                    }
                    else {
                        if (document.querySelector('#' + itemID).closest('#' + itemProp.group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID + '-popup') && document.querySelector('#' + itemID).closest('#' + itemProp.group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID + '-popup').classList.contains('e-popup-close')) {
                            document.querySelector('#' + itemProp.group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID).click();
                        }
                    }
                }
                var itemType = this.parent.getItemModuleName(itemProp.item);
                switch (itemType) {
                    case 'btn':
                        this.parent.ribbonButtonModule.click(itemID);
                        break;
                    case 'dropdown-btn':
                        this.parent.ribbonDropDownModule.toggle(itemID);
                        break;
                    case 'split-btn':
                        this.parent.ribbonSplitButtonModule.toggle(itemID);
                        break;
                    case 'checkbox':
                        this.parent.ribbonCheckBoxModule.click(itemID);
                        break;
                    case 'colorpicker':
                        this.parent.ribbonColorPickerModule.toggle(itemID);
                        break;
                    case 'combobox': {
                        var itemEle_1 = document.querySelector('#' + itemID);
                        Eif (this.isInteractableElement(itemEle_1)) {
                            setTimeout(function () {
                                itemEle_1.focus();
                            }, 100);
                        }
                        break;
                    }
                    case 'gallery': {
                        var galleryEle = document.querySelector('#' + itemID);
                        Eif (this.isInteractableElement(galleryEle)) {
                            galleryEle.click();
                        }
                        break;
                    }
                    case 'template': {
                        var templateEle = document.querySelector('#' + itemID);
                        Eif (this.isInteractableElement(templateEle)) {
                            templateEle.focus();
                        }
                        break;
                    }
                    case 'group-btn': {
                        var itemElement = document.querySelector('#' + itemID);
                        Eif (this.isInteractableElement(itemElement)) {
                            var item = ej2_base_1.getInstance(itemElement, ej2_splitbuttons_1.DropDownButton);
                            item.toggle();
                            for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
                                Eif (itemProp.item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip) {
                                    this.createKeyTipElement(itemID + (constants.RIBBON_GROUP_BUTTON_ID + i), itemProp.item.groupButtonSettings.items[parseInt(i.toString(), 10)].keyTip, 'item');
                                }
                            }
                        }
                        break;
                    }
                }
            }
        };
        RibbonKeyTip.prototype.isInteractableElement = function (element) {
            return element && !element.closest('.e-ribbon-item').classList.contains('e-disabled');
        };
        RibbonKeyTip.prototype.commonItemsKeyTipPress = function (keyPress, key, isMethod) {
            var _this = this;
            Eif (this.parent.keyTipElements["" + key]) {
                var isKeyPressed = false;
                var keytipData = this.parent.keyTipElements["" + key];
                var keyEle = void 0;
                var keytipElement = void 0;
                Eif (keytipData) {
                    if (key === 'backstageMenu') {
                        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);
                                Eif (keytipElement || isMethod) {
                                    isKeyPressed = true;
                                    if (isMethod && document.querySelector('.e-ribbon-backstage-popup').classList.contains('e-popup-close')) {
                                        this.parent.tabObj.element.querySelector('.e-ribbon-backstage').click();
                                    }
                                    break;
                                }
                            }
                        }
                    }
                    else {
                        if (keytipData[0] && keytipData[0].keyTip === keyPress.toUpperCase()) {
                            keyEle = document.querySelector('#' + keytipData[0].id);
                            keytipElement = document.querySelector('#' + keytipData[0].id + constants.RIBBON_KEYTIP_ID);
                            Eif (keytipElement || isMethod) {
                                isKeyPressed = true;
                            }
                        }
                    }
                }
                if (isKeyPressed) {
                    this.removeKeytip();
                    this.isKeytipPresent = true;
                    Eif (keyEle) {
                        keyEle.click();
                        if (key === 'backstage') {
                            this.createKeytip('backstageMenu');
                        }
                        else if (key === 'overflowbtn') {
                            this.isKeytipPopupOpen = true;
                            this.createKeytip('popupitem');
                        }
                        else if (key === 'taboverflow') {
                            setTimeout(function () {
                                for (var i = 0; i < Object.keys(_this.parent.keyTipElements).length; i++) {
                                    if (_this.parent.keyTipElements[parseInt(i.toString(), 10)]) {
                                        var keytipData_1 = _this.parent.keyTipElements[parseInt(i.toString(), 10)]['tab'];
                                        _this.createKeyTipElement((keytipData_1[0].id), keytipData_1[0].keyTip, 'tab', 'center', 'bottom', true, true);
                                    }
                                }
                            }, 600);
                        }
                    }
                }
            }
        };
        RibbonKeyTip.prototype.removeKeytip = function (key) {
            var _this = this;
            var keyTipItems = document.querySelectorAll('.e-ribbon-keytip');
            var isKeyTipExist = false;
            this.parent.keysPress = '';
            var _loop_1 = function (i) {
                var keyTipItem = keyTipItems[parseInt(i.toString(), 10)];
                if (key === 'Escape' && this_1.parent.keyTipElements && this_1.parent.keyTipElements[this_1.parent.selectedTab]) {
                    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[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 = index_1.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;
                                }
                            }
                        }
                    }
                    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 < 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');
                                        tabOverflow.click();
                                        setTimeout(function () {
                                            _this.createKeytip('tab');
                                        }, 600);
                                        key = '';
                                        isKeyTipExist = true;
                                        break;
                                    }
                                }
                            }
                            if (isKeyTipExist) {
                                break;
                            }
                        }
                    }
                    if (!isKeyTipExist && this_1.parent.keyTipElements['backstageMenu']) {
                        var index = index_1.getIndex(this_1.parent.keyTipElements['backstageMenu'], function (e) { return e.id + constants.RIBBON_KEYTIP_ID === keyTipItems[parseInt(i.toString(), 10)].id; });
                        Eif (index !== -1) {
                            this_1.createKeytip('tab');
                            key = '';
                            isKeyTipExist = true;
                        }
                    }
                }
                Eif (keyTipItem) {
                    ej2_base_1.remove(keyTipItem);
                }
            };
            var this_1 = this;
            for (var i = 0; i < keyTipItems.length; i++) {
                _loop_1(i);
            }
            this.isKeytipPopupOpen = false;
            if (!isKeyTipExist) {
                this.parent.isKeytipOpen = false;
            }
        };
        RibbonKeyTip.prototype.showKeyTips = function (keyAction) {
            Eif (this.parent.enableKeyTips) {
                if (keyAction) {
                    this.keytipPress(keyAction, true);
                }
                else {
                    this.createKeytip('tab');
                }
            }
        };
        RibbonKeyTip.prototype.hideKeyTips = function () {
            this.removeKeytip();
        };
        return RibbonKeyTip;
    }());
    exports.RibbonKeyTip = RibbonKeyTip;
});