@syncfusion/ej2-ribbon 30.1.42 → 31.1.17

package/dist/ts/ribbon/items/ribbon-splitbutton.d.ts

@@ -0,0 +1,85 @@
+import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
+import { Ribbon } from '../base/index';
+import { RibbonSplitButtonSettingsModel, RibbonItemModel } from '../models/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonSplitButton {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates SplitButton.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createSplitButton(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
+     * @returns {void}
+     * @hidden
+     */
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private setContent;
+    private getSplitButtonObj;
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the SplitButton items.
+     * @param {string} text - Gets the text of the splitbutton item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    addItems(controlId: string, Items: ItemModel[], text?: string): void;
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    removeItems(controlId: string, Items: string[], isUniqueId?: boolean): void;
+    /**
+     * To open/close SplitButton popup based on current state of the SplitButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    toggle(controlId: string): void;
+    /**
+     * Updates the splitbutton.
+     *
+     * @param {RibbonSplitButtonSettingsModel} prop - Gets the splitbutton property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    updateSplitButton(prop: RibbonSplitButtonSettingsModel, id: string): void;
+    /**
+     * Updated SplitButton size
+     *
+     * @param {HTMLElement} element - Gets the splibutton element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    updateSplitButtonSize(element: HTMLElement, item: RibbonItemModel): void;
+}

package/dist/ts/ribbon/items/ribbon-splitbutton.ts

@@ -0,0 +1,257 @@
+import { EventHandler, KeyboardEventArgs, getComponent, merge } from '@syncfusion/ej2-base';
+import {  BeforeOpenCloseMenuEventArgs, ClickEventArgs, DropDownButton, ItemModel, OpenCloseMenuEventArgs, SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { Button } from '@syncfusion/ej2-buttons';
+import { getItem, Ribbon, itemProps, getItemElement, RibbonItemSize, setCustomAttributes } from '../base/index';
+import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, VERTICAL_DDB } from '../base/constant';
+import { RibbonSplitButtonSettingsModel, RibbonItemModel } from '../models/index';
+
+/**
+ * Defines the items of Ribbon.
+ */
+export class RibbonSplitButton {
+    private parent: Ribbon;
+
+    constructor(parent: Ribbon) {
+        this.parent = parent;
+    }
+    protected getModuleName(): string {
+        return 'ribbonSplitButton';
+    }
+    protected destroy(): void {
+        this.parent = null;
+    }
+    /**
+     * Creates SplitButton.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    public createSplitButton(item: RibbonItemModel, itemEle: HTMLElement): void {
+        const buttonEle: HTMLButtonElement = this.parent.createElement('button', {
+            id: item.id
+        });
+        itemEle.appendChild(buttonEle);
+        const splitButtonSettings: RibbonSplitButtonSettingsModel = item.splitButtonSettings;
+        const cssClass: string = (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + (splitButtonSettings.cssClass ?
+            splitButtonSettings.cssClass : '')).trim();
+        const splitbutton: SplitButton = new SplitButton({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
+            closeActionEvents: splitButtonSettings.closeActionEvents,
+            cssClass: cssClass + ((item.activeSize === RibbonItemSize.Large) ? (SPACE + VERTICAL_DDB) : ''),
+            disabled: item.disabled,
+            iconCss: splitButtonSettings.iconCss,
+            items: splitButtonSettings.items,
+            target: splitButtonSettings.target,
+            beforeClose: (e: BeforeOpenCloseMenuEventArgs) => {
+                if (splitButtonSettings.beforeClose) { splitButtonSettings.beforeClose.call(this, e); }
+            },
+            beforeItemRender: splitButtonSettings.beforeItemRender,
+            beforeOpen: splitButtonSettings.beforeOpen,
+            close: () => {
+                (splitbutton['wrapper'] as HTMLElement).classList.remove(RIBBON_POPUP_OPEN);
+                if (splitButtonSettings.close) {
+                    splitButtonSettings.close.call(this);
+                }
+            },
+            created: splitButtonSettings.created,
+            open: () => {
+                (splitbutton['wrapper'] as HTMLElement).classList.add(RIBBON_POPUP_OPEN);
+                if (splitButtonSettings.open) {
+                    splitButtonSettings.open.call(this);
+                }
+            },
+            select: splitButtonSettings.select,
+            click: (e: ClickEventArgs) => {
+                if (splitButtonSettings.click) { splitButtonSettings.click.call(this, e); }
+            }
+        }, buttonEle);
+        if (splitButtonSettings.htmlAttributes) {
+            if (splitButtonSettings.htmlAttributes.id) {
+                delete splitButtonSettings.htmlAttributes.id;
+            }
+            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+        }
+        const dropdownEle: HTMLElement = buttonEle.parentElement.querySelector('.e-dropdown-btn');
+        dropdownEle.onkeydown = (e: KeyboardEventArgs) => {
+            if (e.key === 'Enter') { e.stopImmediatePropagation(); (dropdownEle as HTMLElement).click(); }
+        };
+        this.setContent(item, splitbutton);
+        const wrapper: HTMLElement = splitbutton['wrapper'] as HTMLElement;
+        EventHandler.add(wrapper, 'mouseenter', () => { wrapper.classList.add(RIBBON_HOVER); }, this);
+        EventHandler.add(wrapper, 'mouseleave', () => { wrapper.classList.remove(RIBBON_HOVER); }, this);
+    }
+
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
+     * @returns {void}
+     * @hidden
+     */
+    public addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void {
+        const splitButtonEle: HTMLElement = itemEle.querySelector('#' + item.id);
+        splitButtonEle.setAttribute('data-control', item.type.toString());
+        const splitbutton: SplitButton = getComponent(splitButtonEle, SplitButton);
+        splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
+        splitbutton.dataBind();
+        const dropdownEle: HTMLElement = splitButtonEle.parentElement.querySelector('.e-dropdown-btn');
+        const ddbId: string = dropdownEle.getAttribute('id');
+        const popupEle: HTMLElement = document.querySelector('#' + ddbId + '-popup');
+        dropdownEle.onkeydown = (e: KeyboardEventArgs) => {
+            if (e.key === 'Enter') { e.stopImmediatePropagation(); (dropdownEle as HTMLElement).click(); }
+        };
+        popupEle.onkeydown = (e: KeyboardEventArgs) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                splitbutton['wrapper'].classList.remove('e-ribbon-open');
+                (popupEle.querySelector('.e-focused') as HTMLElement).click();
+            }
+        };
+        let target: HTMLElement;
+        splitbutton.beforeClose = (e: BeforeOpenCloseMenuEventArgs) => {
+            if (item.splitButtonSettings.beforeClose) { item.splitButtonSettings.beforeClose.call(this, e); }
+            target = e.event ? e.event.target as HTMLElement : null;
+        };
+        splitbutton.click = (e: ClickEventArgs) => {
+            if (item.splitButtonSettings.click) { item.splitButtonSettings.click.call(this, e); }
+            if (overflowButton.element.classList.contains('e-active')) {
+                overflowButton.toggle();
+            }
+        };
+        splitbutton.close = (e: OpenCloseMenuEventArgs) => {
+            if (item.splitButtonSettings.close) { item.splitButtonSettings.close.call(this, e); }
+            (splitbutton['wrapper'] as HTMLElement).classList.remove(RIBBON_POPUP_OPEN);
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                if (overflowButton.element.classList.contains('e-active')) {
+                    overflowButton.toggle();
+                }
+            }
+        };
+    }
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    public removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void {
+        const splitButtonEle: HTMLElement = itemEle.querySelector('#' + item.id);
+        const splitbutton: SplitButton = getComponent(splitButtonEle, SplitButton);
+        let cssClass: string[] = splitbutton.cssClass.split(SPACE);
+        cssClass = cssClass.filter((value: string) => value !== RIBBON_POPUP_CONTROL);
+        splitbutton.cssClass = cssClass.join(SPACE);
+        splitbutton.dataBind();
+        splitbutton.beforeClose = (e: BeforeOpenCloseMenuEventArgs) => {
+            if (item.splitButtonSettings.beforeClose) { item.splitButtonSettings.beforeClose.call(this, e); }
+        };
+        splitbutton.click = (e: ClickEventArgs) => {
+            if (item.splitButtonSettings.click) { item.splitButtonSettings.click.call(this, e); }
+        };
+        splitbutton.close = (e: OpenCloseMenuEventArgs) => {
+            if (item.splitButtonSettings.close) { item.splitButtonSettings.close.call(this, e); }
+            (splitbutton['wrapper'] as HTMLElement).classList.remove(RIBBON_POPUP_OPEN);
+        };
+    }
+
+    private setContent(item: RibbonItemModel, control: SplitButton): void {
+        (control['primaryBtnObj'] as Button).setProperties({ content: (item.activeSize === RibbonItemSize.Medium) ? item.splitButtonSettings.content : '' });
+        (control['secondaryBtnObj'] as DropDownButton).setProperties({ content: (item.activeSize === RibbonItemSize.Large) ? item.splitButtonSettings.content : '' });
+    }
+
+    private getSplitButtonObj(controlId: string): SplitButton {
+        const splitButtonEle: HTMLElement = getItemElement(this.parent, controlId);
+        return getComponent(splitButtonEle, SplitButton);
+    }
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the SplitButton items.
+     * @param {string} text - Gets the text of the splitbutton item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    public addItems(controlId: string, Items: ItemModel[], text?: string): void {
+        this.getSplitButtonObj(controlId).addItems(Items, text);
+    }
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    public removeItems(controlId: string, Items: string[], isUniqueId?: boolean): void {
+        this.getSplitButtonObj(controlId).removeItems(Items, isUniqueId);
+    }
+    /**
+     * To open/close SplitButton popup based on current state of the SplitButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    public toggle(controlId: string): void {
+        const splitBtnObj: SplitButton = this.getSplitButtonObj(controlId);
+        if (!splitBtnObj) { return; }
+        if (!splitBtnObj.disabled) {
+            splitBtnObj.toggle();
+        }
+    }
+    /**
+     * Updates the splitbutton.
+     *
+     * @param {RibbonSplitButtonSettingsModel} prop - Gets the splitbutton property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    public updateSplitButton(prop: RibbonSplitButtonSettingsModel, id: string): void {
+        const itemProp: itemProps = getItem(this.parent.tabs, id);
+        if (!itemProp) { return; }
+        merge(itemProp.item.splitButtonSettings, prop);
+        const btnEle: HTMLElement = getItemElement(this.parent, id, itemProp);
+        if (!btnEle) { return; }
+        const control: SplitButton = getComponent(btnEle, SplitButton);
+        if (prop.cssClass) {
+            prop.cssClass = (RIBBON_CONTROL + SPACE + ITEM_VERTICAL_CENTER + SPACE + prop.cssClass).trim();
+            prop.cssClass = itemProp.item.activeSize === RibbonItemSize.Large ?
+                (VERTICAL_DDB + SPACE + prop.cssClass).trim() : prop.cssClass;
+            control.cssClass = prop.cssClass;
+        }
+        delete prop.open;
+        delete prop.click;
+        delete prop.close;
+        delete prop.beforeClose;
+        control.setProperties(prop);
+        if (prop.content) { this.setContent(itemProp.item, control); }
+    }
+    /**
+     * Updated SplitButton size
+     *
+     * @param {HTMLElement} element - Gets the splibutton element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    public updateSplitButtonSize(element: HTMLElement, item: RibbonItemModel): void {
+        const control: SplitButton = getComponent(element, SplitButton);
+        let cssClass: string[] = control.cssClass.split(SPACE);
+        if (item.activeSize === RibbonItemSize.Large) {
+            cssClass.push(VERTICAL_DDB);
+        } else {
+            cssClass = cssClass.filter((value: string) => value !== VERTICAL_DDB);
+        }
+        control.cssClass = cssClass.join(SPACE);
+        control.setProperties({ iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left' });
+        this.setContent(item, control);
+    }
+}

package/dist/ts/ribbon/models/index.d.ts

@@ -0,0 +1,42 @@
+export * from './ribbon-tab';
+export * from './ribbon-group';
+export * from './ribbon-collection';
+export * from './ribbon-item';
+export * from './ribbon-button-settings';
+export * from './ribbon-checkbox-settings';
+export * from './ribbon-colorpicker-settings';
+export * from './ribbon-combobox-settings';
+export * from './ribbon-dropdown-settings';
+export * from './ribbon-splitbutton-settings';
+export * from './ribbon-file-menu-settings';
+export * from './ribbon-back-stage-settings';
+export * from './ribbon-back-button';
+export * from './ribbon-backstage-item';
+export * from './ribbon-tooltip';
+export * from './ribbon-group-button-settings';
+export * from './ribbon-group-button-item';
+export * from './ribbon-contextual-tab-settings';
+export * from './ribbon-gallery-group';
+export * from './ribbon-gallery-item';
+export * from './ribbon-gallery-settings';
+export * from './ribbon-gallery-settings-model';
+export * from './ribbon-gallery-item-model';
+export * from './ribbon-gallery-group-model';
+export * from './ribbon-contextual-tab-settings-model';
+export * from './ribbon-group-button-item-model';
+export * from './ribbon-group-button-settings-model';
+export * from './ribbon-tooltip-model';
+export * from './ribbon-file-menu-settings-model';
+export * from './ribbon-back-stage-settings-model';
+export * from './ribbon-back-button-model';
+export * from './ribbon-backstage-item-model';
+export * from './ribbon-tab-model';
+export * from './ribbon-group-model';
+export * from './ribbon-collection-model';
+export * from './ribbon-item-model';
+export * from './ribbon-button-settings-model';
+export * from './ribbon-checkbox-settings-model';
+export * from './ribbon-colorpicker-settings-model';
+export * from './ribbon-combobox-settings-model';
+export * from './ribbon-dropdown-settings-model';
+export * from './ribbon-splitbutton-settings-model';

package/dist/ts/ribbon/models/index.ts

@@ -0,0 +1,44 @@
+// export * from './file-menu';
+export * from './ribbon-tab';
+export * from './ribbon-group';
+export * from './ribbon-collection';
+export * from './ribbon-item';
+export * from './ribbon-button-settings';
+export * from './ribbon-checkbox-settings';
+export * from './ribbon-colorpicker-settings';
+export * from './ribbon-combobox-settings';
+export * from './ribbon-dropdown-settings';
+export * from './ribbon-splitbutton-settings';
+export * from './ribbon-file-menu-settings';
+export * from './ribbon-back-stage-settings';
+export * from './ribbon-back-button';
+export * from './ribbon-backstage-item';
+export * from './ribbon-tooltip';
+export * from './ribbon-group-button-settings';
+export * from './ribbon-group-button-item';
+export * from './ribbon-contextual-tab-settings';
+export * from './ribbon-gallery-group';
+export * from './ribbon-gallery-item';
+export * from './ribbon-gallery-settings';
+
+export * from './ribbon-gallery-settings-model';
+export * from './ribbon-gallery-item-model';
+export * from './ribbon-gallery-group-model';
+export * from './ribbon-contextual-tab-settings-model';
+export * from './ribbon-group-button-item-model';
+export * from './ribbon-group-button-settings-model';
+export * from './ribbon-tooltip-model';
+export * from './ribbon-file-menu-settings-model';
+export * from './ribbon-back-stage-settings-model';
+export * from './ribbon-back-button-model';
+export * from './ribbon-backstage-item-model';
+export * from './ribbon-tab-model';
+export * from './ribbon-group-model';
+export * from './ribbon-collection-model';
+export * from './ribbon-item-model';
+export * from './ribbon-button-settings-model';
+export * from './ribbon-checkbox-settings-model';
+export * from './ribbon-colorpicker-settings-model';
+export * from './ribbon-combobox-settings-model';
+export * from './ribbon-dropdown-settings-model';
+export * from './ribbon-splitbutton-settings-model';

package/dist/ts/ribbon/models/ribbon-back-button-model.d.ts

@@ -0,0 +1,29 @@
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class BackstageBackButton
+ */
+export interface BackstageBackButtonModel {
+
+    /**
+     * Specifies the text for backstage back button.
+     *
+     * @default ''
+     */
+    text?: string;
+
+    /**
+     * Specifies the icon css class for backstage back button.
+     *
+     * @default ''
+     */
+    iconCss?: string;
+
+    /**
+     * Specifies whether to show the backstage back button or not.
+     *
+     * @default true
+     */
+    visible?: boolean;
+
+}

package/dist/ts/ribbon/models/ribbon-back-button.d.ts

@@ -0,0 +1,24 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon backstage back button.
+ */
+export declare class BackstageBackButton extends ChildProperty<BackstageBackButton> {
+    /**
+     * Specifies the text for backstage back button.
+     *
+     * @default ''
+     */
+    text: string;
+    /**
+     * Specifies the icon css class for backstage back button.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Specifies whether to show the backstage back button or not.
+     *
+     * @default true
+     */
+    visible: boolean;
+}

package/dist/ts/ribbon/models/ribbon-back-button.ts

@@ -0,0 +1,31 @@
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
+
+/**
+ * Defines the ribbon backstage back button.
+ */
+export class BackstageBackButton extends ChildProperty<BackstageBackButton>  {
+
+    /**
+     * Specifies the text for backstage back button.
+     *
+     * @default ''
+     */
+    @Property('')
+    public text: string;
+
+    /**
+     * Specifies the icon css class for backstage back button.
+     *
+     * @default ''
+     */
+    @Property('')
+    public iconCss: string;
+
+    /**
+     * Specifies whether to show the backstage back button or not.
+     *
+     * @default true
+     */
+    @Property(true)
+    public visible: boolean;
+}

package/dist/ts/ribbon/models/ribbon-back-stage-settings-model.d.ts

@@ -0,0 +1,83 @@
+import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { BackstageBackButton } from './ribbon-back-button';import { BackstageBackButtonModel } from './ribbon-back-button-model';import { BackstageItem } from './ribbon-backstage-item';import { BackstageItemModel } from './ribbon-backstage-item-model';import { RibbonTooltipModel } from './ribbon-tooltip-model';import { RibbonTooltip } from './ribbon-tooltip';
+
+/**
+ * Interface for a class BackStageMenu
+ */
+export interface BackStageMenuModel {
+
+    /**
+     * Defines the text content of backstage menu button.
+     *
+     * @default 'File'
+     */
+    text?: string;
+
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
+    /**
+     * Defines whether to show the backstage menu button.
+     *
+     * @default false
+     */
+    visible?: boolean;
+
+    /**
+     * Defines the height of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    height?: string;
+
+    /**
+     * Defines the width of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    width?: string;
+
+    /**
+     * Defines the selector that points to the element in which backstage will be positioned.
+     *
+     * @default null
+     */
+    target?: string | HTMLElement;
+
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default {}
+     */
+    backButton?: BackstageBackButtonModel;
+
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default []
+     * @aspType List<BackstageItem>
+     */
+    items?: BackstageItemModel[];
+
+    /**
+     * Defines the template for Backstage content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Specifies the tooltip settings for the file menu button.
+     *
+     * @default {}
+     */
+    ribbonTooltipSettings?: RibbonTooltipModel;
+
+}

package/dist/ts/ribbon/models/ribbon-back-stage-settings.d.ts

@@ -0,0 +1,81 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { BackstageBackButtonModel } from './ribbon-back-button-model';
+import { BackstageItemModel } from './ribbon-backstage-item-model';
+import { RibbonTooltipModel } from './ribbon-tooltip-model';
+/**
+ * Defines the ribbon file menu settings.
+ */
+export declare class BackStageMenu extends ChildProperty<BackStageMenu> {
+    /**
+     * Defines the text content of backstage menu button.
+     *
+     * @default 'File'
+     */
+    text: string;
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
+    /**
+     * Defines whether to show the backstage menu button.
+     *
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * Defines the height of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    height: string;
+    /**
+     * Defines the width of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    width: string;
+    /**
+     * Defines the selector that points to the element in which backstage will be positioned.
+     *
+     * @default null
+     */
+    target: string | HTMLElement;
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default {}
+     */
+    backButton: BackstageBackButtonModel;
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default []
+     * @aspType List<BackstageItem>
+     */
+    items: BackstageItemModel[];
+    /**
+     * Defines the template for Backstage content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Specifies the tooltip settings for the file menu button.
+     *
+     * @default {}
+     */
+    ribbonTooltipSettings: RibbonTooltipModel;
+    /**
+     * @param {Object} prop - Gets the property of Backstage Menu.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}