@syncfusion/ej2-ribbon 31.1.17 → 31.2.2

package/dist/ts/ribbon/modules/ribbon-backstage.ts

@@ -1,620 +0,0 @@
-import { remove, append, Component, EventHandler, KeyboardEventArgs } from '@syncfusion/ej2-base';
-import { Menu, MenuEventArgs } from '@syncfusion/ej2-navigations';
-import { BackStageMenu, BackStageMenuModel, BackstageItemClickArgs, BackstageItemModel } from '../models/index';
-import { commonProperties, getIndex, Ribbon, ribbonTooltipData } from '../base/index';
-import { getTemplateFunction, isTooltipPresent } from '../base/utils';
-import * as constants from '../base/constant';
-import { Button } from '@syncfusion/ej2-buttons';
-import { Popup } from '@syncfusion/ej2-popups';
-
-/**
- * Defines the items of Ribbon.
- */
-export class RibbonBackstage extends Component<HTMLElement> {
-    private parent: Ribbon;
-    private backstageButton: Button;
-    private popupEle: Popup;
-    private menuCtrl: Menu;
-    private footerMenuCtrl: Menu;
-    private backstageButtonEle: HTMLButtonElement;
-    private closeBtn: Button;
-    private popupHTMLElement: HTMLElement;
-    private backstageContentEle: HTMLElement;
-    private ulMenuElem: HTMLUListElement;
-    private isBackButtonClicked: boolean;
-    private menuWrapper: HTMLElement;
-    private contentItem: BackstageItemModel;
-    private backstageTempEle: HTMLElement;
-    private itemsWrapperEle: HTMLElement;
-    private menuIndex: number;
-    private isCloseBtn: boolean;
-
-    constructor(parent: Ribbon) {
-        super();
-        this.parent = parent;
-    }
-
-    /**
-     * @private
-     * @returns {void}
-     */
-    protected render(): void {
-        // render code
-    }
-
-    /**
-     * @private
-     * @returns {void}
-     */
-    protected preRender(): void {
-        // pre render code
-    }
-
-    protected getPersistData(): string {
-        return '';
-    }
-
-    /**
-     * This method is abstract member of the Component<HTMLElement>.
-     *
-     * @private
-     * @returns {void}
-     */
-    protected onPropertyChanged(): void {
-        // onProperty changes code
-    }
-
-    protected getModuleName(): string {
-        return 'ribbonBackstage';
-    }
-
-    protected destroy(): void {
-        if (this.backstageButton) {
-            this.destroyDDB();
-        }
-        this.parent = null;
-    }
-
-    /**
-     * Creates Backstage Menu
-     *
-     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage.
-     * @returns {void}
-     * @hidden
-     */
-    public createBackStage(backStageOptions: BackStageMenuModel): void {
-        if (!backStageOptions.visible) {
-            return;
-        }
-        this.backstageButtonEle = this.parent.createElement('button', {
-            id: this.parent.element.id + constants.RIBBON_BACKSTAGE_MENU_ID
-        });
-        const tabEle: HTMLElement = this.parent.tabObj.element;
-        const toolbarEle: HTMLElement = tabEle.querySelector('.e-toolbar');
-        tabEle.insertBefore(this.backstageButtonEle, toolbarEle);
-        this.backstageButton = new Button({
-            content: backStageOptions.text,
-            enableRtl: this.parent.enableRtl,
-            cssClass: constants.RIBBON_BACKSTAGE,
-            created: () => {
-                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 {
-            let footerItemCount: number = 0;
-            let itemCount: number = 0;
-            for (let i: number = 0; i < backStageOptions.items.length; i++) {
-                const item: BackstageItemModel = 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); }
-            if (this.menuCtrl) { this.checkMenuItems(this.menuCtrl.items); }
-            if (this.footerMenuCtrl) { this.checkMenuItems(this.footerMenuCtrl.items); }
-        }
-        this.backstageButtonEle.onclick = (e: MouseEvent): void => {
-            e.stopPropagation();
-            this.showBackstage();
-            this.popupHTMLElement.classList.add(constants.RIBBON_BACKSTAGE_OPEN);
-            const menuItem: HTMLElement = this.menuWrapper.querySelector('.e-menu-item.e-selected');
-            if (menuItem) { menuItem.classList.remove('e-selected'); }
-            for (let i: number = 0; i < backStageOptions.items.length; i++) {
-                const item: BackstageItemModel = backStageOptions.items[parseInt(i.toString(), 10)];
-                if (!item.isFooter && this.menuCtrl.items[0].text === item.text) {
-                    const firstMenuEle: HTMLElement = this.popupHTMLElement.querySelector('#' + this.menuCtrl.items[0].id);
-                    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;
-                }
-                else { continue; }
-            }
-        };
-        this.parent.tabObj.refreshActiveTabBorder();
-        this.addBackStageMenuTooltip(backStageOptions);
-        this.addBackStageMenuKeyTip(backStageOptions);
-        EventHandler.add(document, 'click', this.onClickEvent, this);
-    }
-
-    private onClickEvent(e: MouseEvent): void {
-        const targetEle: HTMLElement = e.target as HTMLElement;
-        if (this.popupHTMLElement.contains(targetEle)) { return; }
-        else { this.hideBackstage(); }
-    }
-
-    private addBackStageMenuTooltip(backStageOptions: BackStageMenuModel): void {
-        if (isTooltipPresent(backStageOptions.ribbonTooltipSettings)) {
-            this.backstageButtonEle.classList.add(constants.RIBBON_TOOLTIP_TARGET);
-            this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
-        }
-    }
-
-    private addBackStageMenuKeyTip(backStageOptions: BackStageMenuModel): void {
-        if (backStageOptions.keyTip) {
-            if (!((this.parent.keyTipElements as {[key: string]: object})['backstage'])) {
-                (this.parent.keyTipElements as {[key: string]: object})['backstage'] = [];
-            }
-            ((this.parent.keyTipElements as {[key: string]: object})['backstage'] as object[]).push({ id: this.backstageButtonEle.id, type: 'backstage', keyTip: backStageOptions.keyTip});
-        }
-        if (backStageOptions.items && backStageOptions.items.length) {
-            if (!((this.parent.keyTipElements as {[key: string]: object})['backstageMenu'])) {
-                (this.parent.keyTipElements as {[key: string]: object})['backstageMenu'] = [];
-            }
-            for (let i: number = 0; i < backStageOptions.items.length; i++) {
-                if (backStageOptions.items[parseInt(i.toString(), 10)].keyTip) {
-                    ((this.parent.keyTipElements as {[key: string]: object})['backstageMenu'] as object[]).push({ id: backStageOptions.items[parseInt(i.toString(), 10)].id, type: 'backstageMenu', keyTip: backStageOptions.items[parseInt(i.toString(), 10)].keyTip});
-                }
-            }
-        }
-    }
-
-    private checkMenuItems(backStageItems: BackstageItemModel[]): void {
-        for (let i: number = 0; i < backStageItems.length; i++) {
-            const item: BackstageItemModel = backStageItems[parseInt(i.toString(), 10)];
-            if (!item.iconCss) {
-                const menuItemEle: HTMLElement = this.popupHTMLElement.querySelector('#' + item.id);
-                menuItemEle.classList.add(constants.RIBBON_BACKSTAGE_TEXT_MENU);
-            }
-        }
-    }
-
-    private createBackStagePopup(backStageOptions: BackStageMenuModel): void {
-        this.popupHTMLElement = this.parent.createElement('div', {
-            id: this.parent.element.id + constants.RIBBON_BACKSTAGE_POPUP_ID,
-            className: constants.RIBBON_BACKSTAGE_POPUP
-        });
-        let targetEle: HTMLElement;
-        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 Popup(this.popupHTMLElement as HTMLElement, {
-            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();
-        EventHandler.add(this.popupHTMLElement, 'keyup', (e: KeyboardEventArgs) => {
-            if (e.code === 'Escape') { this.hideBackstage(); }
-            this.handleNavigation(e);
-        }, this);
-    }
-
-    private handleNavigation(e: KeyboardEventArgs): void {
-        const closeBtnEle: HTMLElement = this.popupHTMLElement.querySelector('.e-ribbon-close-btn');
-        const menuItems: NodeListOf<Element> = this.popupHTMLElement.querySelectorAll('.e-menu-item');
-        const arrowUp: boolean = e.key === 'ArrowUp';
-        const arrowDown: boolean = e.key === 'ArrowDown';
-        if (arrowUp || arrowDown) {
-            if ((arrowUp && this.menuIndex > 0) || (arrowDown && this.menuIndex < menuItems.length - 1 && !this.isCloseBtn)) {
-                this.menuIndex = arrowUp ? this.menuIndex - 1 : this.menuIndex + 1;
-            } else {
-                if (closeBtnEle && !this.isCloseBtn) {
-                    closeBtnEle.focus();
-                    this.isCloseBtn = true;
-                } else {
-                    this.menuIndex = arrowUp ? menuItems.length - 1 : 0;
-                    this.isCloseBtn = false;
-                }
-            }
-            for (let i: number = 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] as HTMLElement).focus();
-            }
-        }
-    }
-
-    private updatePopupPositionOnRtl (enableRtl: boolean): void {
-        const popupStyle: CSSStyleDeclaration = this.popupHTMLElement.style;
-        if (enableRtl) {
-            popupStyle.right = popupStyle.left;
-            popupStyle.left = 'unset';
-        }
-        else {
-            popupStyle.left = popupStyle.right;
-            popupStyle.right = 'unset';
-        }
-    }
-
-    private createBackstageMenu(menuOptions: BackStageMenuModel, isFooter: boolean): void {
-        const wrapperEle: HTMLElement = 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) {
-            const closeBtnEle: HTMLButtonElement = this.parent.createElement('button', {
-                id: this.parent.element.id + '_close',
-                className: 'e-ribbon-close-btn'
-            });
-            this.closeBtn = new 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 = (): void => {
-                this.popupHTMLElement.classList.remove(constants.RIBBON_BACKSTAGE_OPEN);
-                this.hideBackstage();
-                this.isBackButtonClicked = true;
-            };
-        }
-        const itemsWrapperEle: HTMLElement = 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);
-        }
-        let ulFooterElem: HTMLUListElement;
-        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 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 Menu({
-                orientation: 'Vertical',
-                enableRtl: this.parent.enableRtl,
-                cssClass: constants.RIBBON_BACKSTAGE_MENU,
-                items: this.cloneFooterMenuItem(menuOptions.items),
-                select: this.menuSelect.bind(this, menuOptions)
-            }, ulFooterElem);
-        }
-    }
-
-    private cloneMenuItem(items: BackstageItemModel[]): BackstageItemModel[] {
-        const itemsList: BackstageItemModel[] = [];
-        for (let i: number = 0; i < items.length; i++) {
-            const item: BackstageItemModel = 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;
-    }
-
-    private cloneFooterMenuItem(items: BackstageItemModel[]): BackstageItemModel[] {
-        const itemsList: BackstageItemModel[] = [];
-        for (let i: number = 0; i < items.length; i++) {
-            const item: BackstageItemModel = 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;
-    }
-
-    private createBackStageContent(itemId: string | Object, content: string | Function): string | Function {
-        const templateName: string = '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;
-        }
-        const templateFunction: Function = getTemplateFunction(content);
-        append(templateFunction({}, this, templateName, 'backstageContent', this.parent.isStringTemplate), this.backstageContentEle);
-        if (content) {
-            this.popupHTMLElement.append(this.backstageContentEle);
-        }
-        this.renderReactTemplates();
-        return templateFunction;
-    }
-
-    private createBackStageTemplate(template: string | Function): string | Function {
-        const templateName: string = '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
-        });
-        const templateFunction: Function = getTemplateFunction(template);
-        append(templateFunction({}, this, templateName, 'backstageTemplate', this.parent.isStringTemplate), this.backstageTempEle);
-        this.popupHTMLElement.append(this.backstageTempEle);
-        this.renderReactTemplates();
-        return templateFunction;
-    }
-
-    private menuSelect(menuOptions: BackStageMenuModel, args: MenuEventArgs): void {
-        for (let i: number = 0; i < menuOptions.items.length; i++) {
-            const item: BackstageItemModel = menuOptions.items[parseInt(i.toString(), 10)];
-            if (item.text === args.item.text) {
-                this.contentItem = item;
-                this.menuIndex = i;
-                break;
-            }
-        }
-        this.createBackStageContent(args.item.id, this.contentItem.content);
-        const eventArgs: BackstageItemClickArgs = { 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; }
-    }
-
-    /**
-     * setRtl
-     *
-     * @param {commonProperties} commonProp - Get the common property of ribbon.
-     * @returns {void}
-     * @hidden
-     */
-    public setCommonProperties(commonProp: commonProperties): void {
-        if (this.backstageButton) {
-            this.backstageButton.setProperties(commonProp);
-            if (this.popupEle) {
-                this.popupEle.setProperties(commonProp);
-                if (this.popupHTMLElement) { this.updatePopupPositionOnRtl(commonProp.enableRtl); }
-                if (this.menuCtrl) {
-                    this.menuCtrl.setProperties(commonProp);
-                    if (this.closeBtn) {
-                        this.closeBtn.setProperties(commonProp);
-                    }
-                }
-                if (this.footerMenuCtrl) {
-                    this.footerMenuCtrl.setProperties(commonProp);
-                }
-            }
-        }
-    }
-
-    /**
-     * Update Backstage menu
-     *
-     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage menu.
-     * @returns {void}
-     * @hidden
-     */
-    public updateBackStageMenu(backStageOptions: BackStageMenuModel): void {
-        if (backStageOptions.visible) {
-            if (this.backstageButton) {
-                if (backStageOptions.text) {
-                    this.backstageButton.setProperties({
-                        content: backStageOptions.text
-                    });
-                    this.parent.tabObj.element.style.setProperty(constants.RIBBON_FILE_MENU_WIDTH, this.backstageButtonEle.offsetWidth + 'px');
-                }
-                if (this.popupEle) {
-                    this.popupEle.setProperties({
-                        height: backStageOptions.height,
-                        width: backStageOptions.width,
-                        target: backStageOptions.target || this.parent.element
-                    });
-                }
-                if (backStageOptions.template) {
-                    if (this.backstageTempEle) {
-                        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 {
-                        let footerItemCount: number = 0;
-                        let itemCount: number = 0;
-                        for (let i: number = 0; i < backStageOptions.items.length; i++) {
-                            const item: BackstageItemModel = 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 if (this.backstageButton) {
-            this.destroyDDB();
-        }
-        this.parent.tabObj.refreshActiveTabBorder();
-    }
-
-    private destroyMenu(): void {
-        if (this.menuCtrl) {
-            this.menuCtrl.destroy();
-            this.menuCtrl = null;
-        }
-    }
-
-    private destroyDDB(): void {
-        this.removeBackstageMenuTooltip();
-        this.removeBackstageMenuKeyTip();
-        const tabEle: HTMLElement = this.parent.tabObj.element;
-        tabEle.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
-        this.destroyMenu();
-        this.backstageButton.destroy();
-        this.backstageButton = null;
-        remove(this.backstageButtonEle);
-        this.backstageButtonEle = null;
-        EventHandler.remove(document, 'click', this.onClickEvent);
-    }
-
-    private removeBackstageMenuTooltip(): void {
-        const index: number = getIndex(this.parent.tooltipData, (e: ribbonTooltipData) => { return e.id === this.backstageButtonEle.id; });
-        if (index !== -1) {
-            this.backstageButtonEle.classList.remove(constants.RIBBON_TOOLTIP_TARGET);
-            this.parent.tooltipData.splice(index, 1);
-        }
-    }
-    private removeBackstageMenuKeyTip(): void {
-        if ((this.parent.keyTipElements as {[key: string]: object})['backstage'] && ((this.parent.keyTipElements as {[key: string]: object})['backstage'] as object[]).length) {
-            const index: number = getIndex((this.parent.keyTipElements as {[key: string]: object})['backstage'] as {id : string}[], (e: {id: string }) => { return e.id === this.backstageButtonEle.id; });
-            if (index !== -1) {
-                ((this.parent.keyTipElements as {[key: string]: object})['backstage'] as object[]).splice(index, 1);
-            }
-        }
-        if ((this.parent.keyTipElements as {[key: string]: object})['backstageMenu'] && ((this.parent.keyTipElements as {[key: string]: object})['backstageMenu'] as object[]).length) {
-            for (let i: number = 0; i < ((this.parent.keyTipElements as {[key: string]: object})['backstageMenu'] as object[]).length; i++) {
-                ((this.parent.keyTipElements as {[key: string]: object})['backstageMenu'] as object[]).splice(i, 1);
-                i--;
-            }
-        }
-    }
-
-    /**
-     * Add items to Backstage Menu.
-     *
-     * @param {BackstageItemModel[]} items - Gets the items to be added.
-     * @param {string} target - Gets the target item to add the items.
-     * @param {boolean} isAfter - Gets the boolean value to add the items after or before the target item.
-     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
-     * @returns {void}
-     */
-    public addBackstageItems(items: BackstageItemModel[], target: string, isAfter: boolean, isUniqueId?: boolean): void {
-        for (let i: number = 0; i < items.length; i++) {
-            const item: BackstageItemModel = 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); }
-            }
-        }
-        const backstageItems: BackStageMenuModel[] = ([] as BackStageMenuModel[]).concat(this.menuCtrl.items, this.footerMenuCtrl.items);
-        const backStageOptions: BackStageMenuModel = this.parent.backStageMenu;
-        for (let i: number = 0; i < backStageOptions.items.length; i++) {
-            const item: BackstageItemModel = backStageOptions.items[parseInt(i.toString(), 10)];
-            for (let i: number = 0; i < backstageItems.length; i++) {
-                const item1: BackstageItemModel = backstageItems[parseInt(i.toString(), 10)];
-                if (item.text === item1.text) {
-                    item1.content = item.content;
-                    break;
-                }
-            }
-        }
-        (this.parent.backStageMenu as BackStageMenu).setProperties({ items: backstageItems }, true);
-    }
-
-    /**
-     * Remove items from Backstage Menu.
-     *
-     * @param {string[]} items - Gets the items to be removed.
-     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
-     * @returns {void}
-     */
-    public removeBackstageItems(items: string[], isUniqueId?: boolean): void {
-        this.menuCtrl.removeItems(items, isUniqueId);
-        this.footerMenuCtrl.removeItems(items, isUniqueId);
-        const backstageItems: BackStageMenuModel[] = ([] as BackStageMenuModel[]).concat(this.menuCtrl.items, this.footerMenuCtrl.items);
-        (this.parent.backStageMenu as BackStageMenu).setProperties({ items: backstageItems }, true);
-    }
-
-    /**
-     * Renders the backstage dynamically.
-     *
-     * @returns {void}
-     */
-    public showBackstage(): void {
-        this.popupEle.show();
-    }
-
-    /**
-     * Hides the backstage dynamically.
-     *
-     * @returns {void}
-     */
-    public hideBackstage(): void {
-        if (this.popupEle.element.classList.contains(constants.RIBBON_BACKSTAGE_OPEN)) {
-            this.popupEle.element.classList.remove(constants.RIBBON_BACKSTAGE_OPEN);
-        }
-        this.popupEle.hide();
-    }
-}

package/dist/ts/ribbon/modules/ribbon-contextualtab.d.ts

@@ -1,27 +0,0 @@
-import { Ribbon } from '../base/ribbon';
-import { RibbonContextualTabSettingsModel } from '../models/ribbon-contextual-tab-settings-model';
-/**
- * Defines the ribbon contextual tab.
- */
-export declare class RibbonContextualTab {
-    private parent;
-    constructor(parent: Ribbon);
-    protected getModuleName(): string;
-    protected destroy(): void;
-    /**
-     * Creates Contextual tab.
-     *
-     * @returns {void}
-     * @hidden
-     */
-    addContextualTabs(): void;
-    /**
-     * Updates Contextual tab.
-     *
-     * @param {RibbonContextualTabSettingsModel} newProp - Specifies new properties.
-     * @param {RibbonContextualTabSettingsModel} contextualTab - Gets the property of contextual tab.
-     * @returns {void}
-     * @hidden
-     */
-    updateContextualTabs(newProp: RibbonContextualTabSettingsModel, contextualTab: RibbonContextualTabSettingsModel): void;
-}