all files / modules/ ribbon-backstage.js

99.14% Statements 344/347
89.78% Branches 167/186
91.11% Functions 41/45
99.12% Lines 339/342
11 statements, 6 functions, 9 branches Ignored     
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 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579  1× 1× 1× 1× 1× 1×   1× 1× 1× 1×     1×   1× 1× 1× 1× 36× 36× 36×   1×   1×   1×     1×   1× 8719×   1× 18× 15×   18×   1× 18× 18× 2×   16×     16× 16× 16× 16×         16×     16× 16× 3×     13× 13× 13× 44× 44× 6×     38×     13× 13×   13× 3×   13× 13×   13× 3×     16× 14× 14× 14× 14× 14× 2×   14× 15× 15× 14× 14× 14× 14× 14× 14×   14× 14×     1×       16× 16× 16× 16×   1× 20× 20× 8×     12×     1× 23× 1× 1×     1× 23× 5× 5×   5×   23× 17× 14×   17× 52× 15×         1× 16× 44× 44× 9× 9×       1× 16× 16×       16× 16× 1×   1×     15×   16×           16× 1×   16× 16× 7× 1×   7×     1× 7× 7× 7× 7× 7× 6× 2×     4× 2× 2×     2× 2×     6× 12×   6× 4×     4×     4× 4×       1× 2× 2× 1× 1×     1× 1×     1× 19× 19× 19× 14×       14×   19× 15×       15×         15× 15× 2× 2× 2×     19× 19× 14×       14×   19× 19× 4×     4×     15×     15×   19× 15×                 4×                 1× 18× 18× 54× 54× 9×     45×               18×   1× 6× 6× 27× 27× 18×     9×               6×   1× 20× 20× 20× 11×           9× 9×   20× 20× 20× 16×   20× 20×   1× 5× 5× 5×       5× 5× 5× 5× 5×   1× 6× 8× 8× 6× 6× 6×     6× 6×   6× 2×   6× 1×     1× 1× 1× 1× 1× 1× 1×   1× 1× 1× 1×     1× 1×         1× 9× 8× 7× 7×     7×   7× 7×           7× 2× 2× 2×   2×     5× 3×       5× 2×         3× 3× 3× 4× 4× 1×     3×     3× 2×   3× 1×       7× 7× 7× 7×     1×     1× 1×   9×   1× 16× 14× 14×     1× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16×   1× 23× 23× 23× 1× 1×     1× 23× 23× 5× 5× 5×     23× 5× 15× 15×       1× 4× 4× 4× 2× 1×     1×       2× 1×     1×       4× 4× 4× 28× 28× 126× 126× 28× 28×       4×   1× 4× 4× 4× 4×   1× 14×   1× 32× 3×   32×   1×   1×    
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/index", "../base/utils", "../base/constant", "@syncfusion/ej2-buttons", "@syncfusion/ej2-popups"], function (require, exports, ej2_base_1, ej2_navigations_1, index_1, utils_1, constants, ej2_buttons_1, ej2_popups_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var RibbonBackstage = (function (_super) {
        __extends(RibbonBackstage, _super);
        function RibbonBackstage(parent) {
            var _this = _super.call(this) || this;
            _this.parent = parent;
            return _this;
        }
        RibbonBackstage.prototype.render = function () {
        };
        RibbonBackstage.prototype.preRender = function () {
        };
        RibbonBackstage.prototype.getPersistData = function () {
            return '';
        };
        RibbonBackstage.prototype.onPropertyChanged = function () {
        };
        RibbonBackstage.prototype.getModuleName = function () {
            return 'ribbonBackstage';
        };
        RibbonBackstage.prototype.destroy = function () {
            if (this.backstageButton) {
                this.destroyDDB();
            }
            this.parent = null;
        };
        RibbonBackstage.prototype.createBackStage = function (backStageOptions) {
            var _this = this;
            if (!backStageOptions.visible) {
                return;
            }
            this.backstageButtonEle = this.parent.createElement('button', {
                id: this.parent.element.id + constants.RIBBON_BACKSTAGE_MENU_ID
            });
            var tabEle = this.parent.tabObj.element;
            var toolbarEle = tabEle.querySelector('.e-toolbar');
            tabEle.insertBefore(this.backstageButtonEle, toolbarEle);
            this.backstageButton = new ej2_buttons_1.Button({
                content: backStageOptions.text,
                enableRtl: this.parent.enableRtl,
                cssClass: constants.RIBBON_BACKSTAGE,
                created: function () {
                    tabEle.style.setProperty(constants.RIBBON_FILE_MENU_WIDTH, _this.backstageButtonEle.offsetWidth + 'px');
                }
            }, this.backstageButtonEle);
            this.createBackStagePopup(backStageOptions);
            if (this.parent.backStageMenu.template) {
                this.createBackStageTemplate(this.parent.backStageMenu.template);
            }
            else {
                var footerItemCount = 0;
                var itemCount = 0;
                for (var i = 0; i < backStageOptions.items.length; i++) {
                    var item = backStageOptions.items[parseInt(i.toString(), 10)];
                    if (item.isFooter) {
                        footerItemCount++;
                    }
                    else {
                        itemCount++;
                    }
                }
                Eif (itemCount > 0) {
                    this.createBackstageMenu(backStageOptions, false);
                }
                if (footerItemCount > 0) {
                    this.createBackstageMenu(backStageOptions, true);
                }
                Eif (this.menuCtrl) {
                    this.checkMenuItems(this.menuCtrl.items);
                }
                if (this.footerMenuCtrl) {
                    this.checkMenuItems(this.footerMenuCtrl.items);
                }
            }
            this.backstageButtonEle.onclick = function (e) {
                e.stopPropagation();
                _this.showBackstage();
                _this.popupHTMLElement.classList.add(constants.RIBBON_BACKSTAGE_OPEN);
                var menuItem = _this.menuWrapper.querySelector('.e-menu-item.e-selected');
                if (menuItem) {
                    menuItem.classList.remove('e-selected');
                }
                for (var i = 0; i < backStageOptions.items.length; i++) {
                    var item = backStageOptions.items[parseInt(i.toString(), 10)];
                    if (!item.isFooter && _this.menuCtrl.items[0].text === item.text) {
                        var firstMenuEle = _this.popupHTMLElement.querySelector('#' + _this.menuCtrl.items[0].id);
                        Eif (firstMenuEle) {
                            firstMenuEle.classList.add('e-selected');
                            firstMenuEle.focus();
                            _this.menuIndex = 0;
                            _this.isCloseBtn = false;
                        }
                        _this.createBackStageContent(_this.menuCtrl.items[0].id, item.content);
                        break;
                    }
                    else {
                        continue;
                    }
                }
            };
            this.parent.tabObj.refreshActiveTabBorder();
            this.addBackStageMenuTooltip(backStageOptions);
            this.addBackStageMenuKeyTip(backStageOptions);
            ej2_base_1.EventHandler.add(document, 'click', this.onClickEvent, this);
        };
        RibbonBackstage.prototype.onClickEvent = function (e) {
            var targetEle = e.target;
            if (this.popupHTMLElement.contains(targetEle)) {
                return;
            }
            else {
                this.hideBackstage();
            }
        };
        RibbonBackstage.prototype.addBackStageMenuTooltip = function (backStageOptions) {
            if (utils_1.isTooltipPresent(backStageOptions.ribbonTooltipSettings)) {
                this.backstageButtonEle.classList.add(constants.RIBBON_TOOLTIP_TARGET);
                this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
            }
        };
        RibbonBackstage.prototype.addBackStageMenuKeyTip = function (backStageOptions) {
            if (backStageOptions.keyTip) {
                Eif (!(this.parent.keyTipElements['backstage'])) {
                    this.parent.keyTipElements['backstage'] = [];
                }
                this.parent.keyTipElements['backstage'].push({ id: this.backstageButtonEle.id, type: 'backstage', keyTip: backStageOptions.keyTip });
            }
            if (backStageOptions.items && backStageOptions.items.length) {
                if (!(this.parent.keyTipElements['backstageMenu'])) {
                    this.parent.keyTipElements['backstageMenu'] = [];
                }
                for (var i = 0; i < backStageOptions.items.length; i++) {
                    if (backStageOptions.items[parseInt(i.toString(), 10)].keyTip) {
                        this.parent.keyTipElements['backstageMenu'].push({ id: backStageOptions.items[parseInt(i.toString(), 10)].id, type: 'backstageMenu', keyTip: backStageOptions.items[parseInt(i.toString(), 10)].keyTip });
                    }
                }
            }
        };
        RibbonBackstage.prototype.checkMenuItems = function (backStageItems) {
            for (var i = 0; i < backStageItems.length; i++) {
                var item = backStageItems[parseInt(i.toString(), 10)];
                if (!item.iconCss) {
                    var menuItemEle = this.popupHTMLElement.querySelector('#' + item.id);
                    menuItemEle.classList.add(constants.RIBBON_BACKSTAGE_TEXT_MENU);
                }
            }
        };
        RibbonBackstage.prototype.createBackStagePopup = function (backStageOptions) {
            var _this = this;
            this.popupHTMLElement = this.parent.createElement('div', {
                id: this.parent.element.id + constants.RIBBON_BACKSTAGE_POPUP_ID,
                className: constants.RIBBON_BACKSTAGE_POPUP
            });
            var targetEle;
            if (backStageOptions.target) {
                targetEle = backStageOptions.target instanceof HTMLElement ? backStageOptions.target :
                    document.querySelector(backStageOptions.target);
                targetEle.appendChild(this.popupHTMLElement);
            }
            else {
                this.parent.element.appendChild(this.popupHTMLElement);
            }
            this.popupEle = new ej2_popups_1.Popup(this.popupHTMLElement, {
                height: backStageOptions.height,
                width: backStageOptions.width,
                relateTo: backStageOptions.target || this.parent.element,
                enableRtl: this.parent.enableRtl
            });
            if (this.parent.enableRtl) {
                this.updatePopupPositionOnRtl(this.parent.enableRtl);
            }
            this.hideBackstage();
            ej2_base_1.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) {
                    Iif (arrowUp && menuItems[this.menuIndex].classList.contains('e-separator')) {
                        this.menuIndex--;
                    }
                    else Iif (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;
            if (enableRtl) {
                popupStyle.right = popupStyle.left;
                popupStyle.left = 'unset';
            }
            else {
                popupStyle.left = popupStyle.right;
                popupStyle.right = 'unset';
            }
        };
        RibbonBackstage.prototype.createBackstageMenu = function (menuOptions, isFooter) {
            var _this = this;
            var wrapperEle = this.popupHTMLElement.querySelector('#' + this.parent.element.id + '_wrapper');
            if (!wrapperEle) {
                this.menuWrapper = this.parent.createElement('div', {
                    id: this.parent.element.id + '_wrapper',
                    className: constants.RIBBON_BACKSTAGE_MENU_WRAPPER
                });
                this.popupHTMLElement.appendChild(this.menuWrapper);
            }
            if (menuOptions.backButton.visible && !isFooter) {
                var closeBtnEle = this.parent.createElement('button', {
                    id: this.parent.element.id + '_close',
                    className: 'e-ribbon-close-btn'
                });
                this.closeBtn = new ej2_buttons_1.Button({
                    content: menuOptions.backButton.text,
                    iconCss: menuOptions.backButton.iconCss ? menuOptions.backButton.iconCss : constants.BACKSTAGE_CLOSE_ICON,
                    enableRtl: this.parent.enableRtl
                }, closeBtnEle);
                this.menuWrapper.append(closeBtnEle);
                closeBtnEle.onclick = function () {
                    _this.popupHTMLElement.classList.remove(constants.RIBBON_BACKSTAGE_OPEN);
                    _this.hideBackstage();
                    _this.isBackButtonClicked = true;
                };
            }
            var itemsWrapperEle = this.popupHTMLElement.querySelector('#' + this.parent.element.id + '_itemswrapper');
            if (!itemsWrapperEle) {
                this.itemsWrapperEle = this.parent.createElement('div', {
                    id: this.parent.element.id + '_itemswrapper',
                    className: constants.RIBBON_BACKSTAGE_ITEMS_WRAPPER
                });
                this.menuWrapper.append(this.itemsWrapperEle);
            }
            var ulFooterElem;
            if (isFooter) {
                ulFooterElem = this.parent.createElement('ul', {
                    id: this.parent.element.id + constants.RIBBON_FOOTER_MENU_LIST
                });
                this.itemsWrapperEle.appendChild(ulFooterElem);
            }
            else {
                this.ulMenuElem = this.parent.createElement('ul', {
                    id: this.parent.element.id + constants.RIBBON_MENU_LIST
                });
                this.itemsWrapperEle.appendChild(this.ulMenuElem);
            }
            if (!isFooter) {
                this.menuCtrl = new ej2_navigations_1.Menu({
                    orientation: 'Vertical',
                    enableRtl: this.parent.enableRtl,
                    cssClass: constants.RIBBON_BACKSTAGE_MENU,
                    items: this.cloneMenuItem(menuOptions.items),
                    select: this.menuSelect.bind(this, menuOptions)
                }, this.ulMenuElem);
            }
            else {
                this.footerMenuCtrl = new ej2_navigations_1.Menu({
                    orientation: 'Vertical',
                    enableRtl: this.parent.enableRtl,
                    cssClass: constants.RIBBON_BACKSTAGE_MENU,
                    items: this.cloneFooterMenuItem(menuOptions.items),
                    select: this.menuSelect.bind(this, menuOptions)
                }, ulFooterElem);
            }
        };
        RibbonBackstage.prototype.cloneMenuItem = function (items) {
            var itemsList = [];
            for (var i = 0; i < items.length; i++) {
                var item = items[parseInt(i.toString(), 10)];
                if (item.isFooter) {
                    continue;
                }
                else {
                    itemsList.push({
                        id: item.id,
                        iconCss: item.iconCss,
                        separator: item.separator,
                        text: item.text
                    });
                }
            }
            return itemsList;
        };
        RibbonBackstage.prototype.cloneFooterMenuItem = function (items) {
            var itemsList = [];
            for (var i = 0; i < items.length; i++) {
                var item = items[parseInt(i.toString(), 10)];
                if (!item.isFooter) {
                    continue;
                }
                else {
                    itemsList.push({
                        id: item.id,
                        iconCss: item.iconCss,
                        separator: item.separator,
                        text: item.text
                    });
                }
            }
            return itemsList;
        };
        RibbonBackstage.prototype.createBackStageContent = function (itemId, content) {
            var templateName = 'backstageContent';
            this.clearTemplate([templateName]);
            if (!this.backstageContentEle) {
                this.backstageContentEle = this.parent.createElement('div', {
                    id: itemId + constants.CONTENT_ID,
                    className: constants.RIBBON_BACKSTAGE_CONTENT
                });
            }
            else {
                this.backstageContentEle.innerHTML = '';
                this.backstageContentEle.id = itemId + constants.CONTENT_ID;
            }
            var templateFunction = utils_1.getTemplateFunction(content);
            ej2_base_1.append(templateFunction({}, this, templateName, 'backstageContent', this.parent.isStringTemplate), this.backstageContentEle);
            if (content) {
                this.popupHTMLElement.append(this.backstageContentEle);
            }
            this.renderReactTemplates();
            return templateFunction;
        };
        RibbonBackstage.prototype.createBackStageTemplate = function (template) {
            var templateName = 'backstageTemplate';
            this.clearTemplate([templateName]);
            this.backstageTempEle = this.parent.createElement('div', {
                id: this.parent.element.id + constants.RIBBON_BACKSTAGE_MENU_ID + '_template',
                className: constants.RIBBON_BACKSTAGE_TEMPLATE
            });
            var templateFunction = utils_1.getTemplateFunction(template);
            ej2_base_1.append(templateFunction({}, this, templateName, 'backstageTemplate', this.parent.isStringTemplate), this.backstageTempEle);
            this.popupHTMLElement.append(this.backstageTempEle);
            this.renderReactTemplates();
            return templateFunction;
        };
        RibbonBackstage.prototype.menuSelect = function (menuOptions, args) {
            for (var i = 0; i < menuOptions.items.length; i++) {
                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 };
            if (this.contentItem.backStageItemClick) {
                this.contentItem.backStageItemClick.call(this, eventArgs);
            }
            if (eventArgs.cancel) {
                return;
            }
        };
        RibbonBackstage.prototype.setCommonProperties = function (commonProp) {
            Eif (this.backstageButton) {
                this.backstageButton.setProperties(commonProp);
                Eif (this.popupEle) {
                    this.popupEle.setProperties(commonProp);
                    Eif (this.popupHTMLElement) {
                        this.updatePopupPositionOnRtl(commonProp.enableRtl);
                    }
                    Eif (this.menuCtrl) {
                        this.menuCtrl.setProperties(commonProp);
                        Eif (this.closeBtn) {
                            this.closeBtn.setProperties(commonProp);
                        }
                    }
                    Eif (this.footerMenuCtrl) {
                        this.footerMenuCtrl.setProperties(commonProp);
                    }
                }
            }
        };
        RibbonBackstage.prototype.updateBackStageMenu = function (backStageOptions) {
            if (backStageOptions.visible) {
                if (this.backstageButton) {
                    Eif (backStageOptions.text) {
                        this.backstageButton.setProperties({
                            content: backStageOptions.text
                        });
                        this.parent.tabObj.element.style.setProperty(constants.RIBBON_FILE_MENU_WIDTH, this.backstageButtonEle.offsetWidth + 'px');
                    }
                    Eif (this.popupEle) {
                        this.popupEle.setProperties({
                            height: backStageOptions.height,
                            width: backStageOptions.width,
                            target: backStageOptions.target || this.parent.element
                        });
                    }
                    if (backStageOptions.template) {
                        Eif (this.backstageTempEle) {
                            ej2_base_1.remove(this.backstageTempEle);
                            this.backstageTempEle = null;
                        }
                        this.createBackStageTemplate(backStageOptions.template);
                    }
                    else {
                        if (this.menuCtrl) {
                            this.menuCtrl.setProperties({
                                items: this.cloneMenuItem(backStageOptions.items)
                            });
                        }
                        if (this.footerMenuCtrl) {
                            this.footerMenuCtrl.setProperties({
                                items: this.cloneFooterMenuItem(backStageOptions.items)
                            });
                        }
                        else {
                            var footerItemCount = 0;
                            var itemCount = 0;
                            for (var i = 0; i < backStageOptions.items.length; i++) {
                                var item = backStageOptions.items[parseInt(i.toString(), 10)];
                                if (item.isFooter) {
                                    footerItemCount++;
                                }
                                else {
                                    itemCount++;
                                }
                            }
                            if (itemCount > 0) {
                                this.createBackstageMenu(backStageOptions, false);
                            }
                            if (footerItemCount > 0) {
                                this.createBackstageMenu(backStageOptions, true);
                            }
                        }
                    }
                    this.removeBackstageMenuTooltip();
                    this.removeBackstageMenuKeyTip();
                    this.addBackStageMenuTooltip(backStageOptions);
                    this.addBackStageMenuKeyTip(backStageOptions);
                }
                else {
                    this.createBackStage(backStageOptions);
                }
            }
            else Eif (this.backstageButton) {
                this.destroyDDB();
            }
            this.parent.tabObj.refreshActiveTabBorder();
        };
        RibbonBackstage.prototype.destroyMenu = function () {
            if (this.menuCtrl) {
                this.menuCtrl.destroy();
                this.menuCtrl = null;
            }
        };
        RibbonBackstage.prototype.destroyDDB = function () {
            this.removeBackstageMenuTooltip();
            this.removeBackstageMenuKeyTip();
            var tabEle = this.parent.tabObj.element;
            tabEle.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
            this.destroyMenu();
            this.backstageButton.destroy();
            this.backstageButton = null;
            ej2_base_1.remove(this.backstageButtonEle);
            this.backstageButtonEle = null;
            ej2_base_1.EventHandler.remove(document, 'click', this.onClickEvent);
        };
        RibbonBackstage.prototype.removeBackstageMenuTooltip = function () {
            var _this = this;
            var index = index_1.getIndex(this.parent.tooltipData, function (e) { return e.id === _this.backstageButtonEle.id; });
            if (index !== -1) {
                this.backstageButtonEle.classList.remove(constants.RIBBON_TOOLTIP_TARGET);
                this.parent.tooltipData.splice(index, 1);
            }
        };
        RibbonBackstage.prototype.removeBackstageMenuKeyTip = function () {
            var _this = this;
            if (this.parent.keyTipElements['backstage'] && this.parent.keyTipElements['backstage'].length) {
                var index = index_1.getIndex(this.parent.keyTipElements['backstage'], function (e) { return e.id === _this.backstageButtonEle.id; });
                Eif (index !== -1) {
                    this.parent.keyTipElements['backstage'].splice(index, 1);
                }
            }
            if (this.parent.keyTipElements['backstageMenu'] && this.parent.keyTipElements['backstageMenu'].length) {
                for (var i = 0; i < this.parent.keyTipElements['backstageMenu'].length; i++) {
                    this.parent.keyTipElements['backstageMenu'].splice(i, 1);
                    i--;
                }
            }
        };
        RibbonBackstage.prototype.addBackstageItems = function (items, target, isAfter, isUniqueId) {
            for (var i = 0; i < items.length; i++) {
                var item = items[parseInt(i.toString(), 10)];
                if (item.isFooter) {
                    if (isAfter) {
                        this.footerMenuCtrl.insertAfter(items, target, isUniqueId);
                    }
                    else {
                        this.footerMenuCtrl.insertBefore(items, target, isUniqueId);
                    }
                }
                else {
                    if (isAfter) {
                        this.menuCtrl.insertAfter(items, target, isUniqueId);
                    }
                    else {
                        this.menuCtrl.insertBefore(items, target, isUniqueId);
                    }
                }
            }
            var backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
            var backStageOptions = this.parent.backStageMenu;
            for (var i = 0; i < backStageOptions.items.length; i++) {
                var item = backStageOptions.items[parseInt(i.toString(), 10)];
                for (var i_1 = 0; i_1 < backstageItems.length; i_1++) {
                    var item1 = backstageItems[parseInt(i_1.toString(), 10)];
                    if (item.text === item1.text) {
                        item1.content = item.content;
                        break;
                    }
                }
            }
            this.parent.backStageMenu.setProperties({ items: backstageItems }, true);
        };
        RibbonBackstage.prototype.removeBackstageItems = function (items, isUniqueId) {
            this.menuCtrl.removeItems(items, isUniqueId);
            this.footerMenuCtrl.removeItems(items, isUniqueId);
            var backstageItems = [].concat(this.menuCtrl.items, this.footerMenuCtrl.items);
            this.parent.backStageMenu.setProperties({ items: backstageItems }, true);
        };
        RibbonBackstage.prototype.showBackstage = function () {
            this.popupEle.show();
        };
        RibbonBackstage.prototype.hideBackstage = function () {
            if (this.popupEle.element.classList.contains(constants.RIBBON_BACKSTAGE_OPEN)) {
                this.popupEle.element.classList.remove(constants.RIBBON_BACKSTAGE_OPEN);
            }
            this.popupEle.hide();
        };
        return RibbonBackstage;
    }(ej2_base_1.Component));
    exports.RibbonBackstage = RibbonBackstage;
});