@syncfusion/ej2-ribbon 24.2.3 → 25.1.35

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

@@ -0,0 +1,95 @@
+import { ChildProperty, EmitType } from "@syncfusion/ej2-base";
+import { RibbonGalleryGroupModel } from "./ribbon-gallery-group-model";
+import { GalleryHoverEventArgs, GalleryItemEventArgs, GalleryPopupEventArgs, GallerySelectEventArgs, GalleryBeforeSelectEventArgs } from "../base/interface";
+/**
+ * Defines the ribbon gallery settings.
+ */
+export declare class RibbonGallerySettings extends ChildProperty<RibbonGallerySettings> {
+    /**
+     * Defines the properties for collection of gallery items in the Ribbon.
+     *
+     * @default []
+     * @aspType List<RibbonGalleryGroup>
+     */
+    groups: RibbonGalleryGroupModel[];
+    /**
+     * Defines the number of items to be displayed in the Ribbon Gallery.
+     *
+     * @default 3
+     */
+    itemCount: number;
+    /**
+     * Defines the index of current selected gallery item.
+     *
+     * @default null
+     */
+    selectedItemIndex: number;
+    /**
+     * Defines the height of the ribbon gallery popup.
+     *
+     * @default 'auto'
+     */
+    popupHeight: string;
+    /**
+     * Defines the width of the ribbon gallery popup.
+     *
+     * @default 'auto'
+     */
+    popupWidth: string;
+    /**
+     * Defines the template for gallery items contents. The current gallery item model passed as context to build the content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Defines the template for gallery items in popup. The current gallery item model passed as context to build the content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    popupTemplate: string | Function;
+    /**
+     * Event triggers when the gallery popup opens.
+     *
+     * @event popupOpen
+     */
+    popupOpen: EmitType<GalleryPopupEventArgs>;
+    /**
+     * Event triggers when the gallery popup closes.
+     *
+     * @event popupClose
+     */
+    popupClose: EmitType<GalleryPopupEventArgs>;
+    /**
+     * Event triggers when a user hovers over a gallery item.
+     *
+     * @event itemHover
+     */
+    itemHover: EmitType<GalleryHoverEventArgs>;
+    /**
+     * Event triggers before rendering each gallery item.
+     *
+     * @event beforeItemRender
+     */
+    beforeItemRender: EmitType<GalleryItemEventArgs>;
+    /**
+     * Event triggers before the gallery items selects.
+     *
+     * @event beforeSelect
+     */
+    beforeSelect: EmitType<GalleryBeforeSelectEventArgs>;
+    /**
+     * Event triggers when the gallery items selects.
+     *
+     * @event select
+     */
+    select: EmitType<GallerySelectEventArgs>;
+}

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

@@ -0,0 +1,71 @@
+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 __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChildProperty, Collection, Property, Event } from "@syncfusion/ej2-base";
+import { RibbonGalleryGroup } from "./ribbon-gallery-group";
+/**
+ * Defines the ribbon gallery settings.
+ */
+var RibbonGallerySettings = /** @class */ (function (_super) {
+    __extends(RibbonGallerySettings, _super);
+    function RibbonGallerySettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Collection([], RibbonGalleryGroup)
+    ], RibbonGallerySettings.prototype, "groups", void 0);
+    __decorate([
+        Property(3)
+    ], RibbonGallerySettings.prototype, "itemCount", void 0);
+    __decorate([
+        Property(null)
+    ], RibbonGallerySettings.prototype, "selectedItemIndex", void 0);
+    __decorate([
+        Property('auto')
+    ], RibbonGallerySettings.prototype, "popupHeight", void 0);
+    __decorate([
+        Property('auto')
+    ], RibbonGallerySettings.prototype, "popupWidth", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGallerySettings.prototype, "template", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGallerySettings.prototype, "popupTemplate", void 0);
+    __decorate([
+        Event()
+    ], RibbonGallerySettings.prototype, "popupOpen", void 0);
+    __decorate([
+        Event()
+    ], RibbonGallerySettings.prototype, "popupClose", void 0);
+    __decorate([
+        Event()
+    ], RibbonGallerySettings.prototype, "itemHover", void 0);
+    __decorate([
+        Event()
+    ], RibbonGallerySettings.prototype, "beforeItemRender", void 0);
+    __decorate([
+        Event()
+    ], RibbonGallerySettings.prototype, "beforeSelect", void 0);
+    __decorate([
+        Event()
+    ], RibbonGallerySettings.prototype, "select", void 0);
+    return RibbonGallerySettings;
+}(ChildProperty));
+export { RibbonGallerySettings };

package/src/ribbon/models/ribbon-group-button-item-model.d.ts

@@ -19,6 +19,13 @@ export interface RibbonGroupButtonItemModel {
      */
     iconCss?: string;
 
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
     /**
      * Specifies the tooltip settings for the group button items.
      *

package/src/ribbon/models/ribbon-group-button-item.d.ts

@@ -17,6 +17,12 @@ export declare class RibbonGroupButtonItem extends ChildProperty<RibbonGroupButt
      * @default ''
      */
     iconCss: string;
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
     /**
      * Specifies the tooltip settings for the group button items.
      *

package/src/ribbon/models/ribbon-group-button-item.js

@@ -42,6 +42,9 @@ var RibbonGroupButtonItem = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], RibbonGroupButtonItem.prototype, "iconCss", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGroupButtonItem.prototype, "keyTip", void 0);
     __decorate([
         Complex({}, RibbonTooltip)
     ], RibbonGroupButtonItem.prototype, "ribbonTooltipSettings", void 0);

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

@@ -5,6 +5,20 @@ import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';impor
  */
 export interface RibbonGroupModel {
 
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
+    /**
+     * Specifies the keytip content for launcher icon.
+     *
+     * @default ''
+     */
+    launcherIconKeyTip?: string;
+
     /**
      * Defines the list of ribbon collections.
      *

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

@@ -5,6 +5,18 @@ import { ItemOrientation } from '../base/interface';
  * Defines the ribbon group.
  */
 export declare class RibbonGroup extends ChildProperty<RibbonGroup> {
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
+    /**
+     * Specifies the keytip content for launcher icon.
+     *
+     * @default ''
+     */
+    launcherIconKeyTip: string;
     /**
      * Defines the list of ribbon collections.
      *

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

@@ -36,6 +36,12 @@ var RibbonGroup = /** @class */ (function (_super) {
     RibbonGroup.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
+    __decorate([
+        Property('')
+    ], RibbonGroup.prototype, "keyTip", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGroup.prototype, "launcherIconKeyTip", void 0);
     __decorate([
         Collection([], RibbonCollection)
     ], RibbonGroup.prototype, "collections", void 0);

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

@@ -1,10 +1,17 @@
-import { ChildProperty, Complex, Property } from '@syncfusion/ej2-base';import { RibbonItemType, RibbonItemSize, DisplayMode } from '../base/interface';import { RibbonButtonSettings } from './ribbon-button-settings';import { RibbonButtonSettingsModel } from './ribbon-button-settings-model';import { RibbonCheckBoxSettings } from './ribbon-checkbox-settings';import { RibbonCheckBoxSettingsModel } from './ribbon-checkbox-settings-model';import { RibbonColorPickerSettings } from './ribbon-colorpicker-settings';import { RibbonColorPickerSettingsModel } from './ribbon-colorpicker-settings-model';import { RibbonComboBoxSettings } from './ribbon-combobox-settings';import { RibbonComboBoxSettingsModel } from './ribbon-combobox-settings-model';import { RibbonDropDownSettings } from './ribbon-dropdown-settings';import { RibbonDropDownSettingsModel } from './ribbon-dropdown-settings-model';import { RibbonSplitButtonSettings } from './ribbon-splitbutton-settings';import { RibbonSplitButtonSettingsModel } from './ribbon-splitbutton-settings-model';import { RibbonTooltip } from './ribbon-tooltip';import { RibbonTooltipModel } from './ribbon-tooltip-model';import { RibbonGroupButtonSettingsModel } from './ribbon-group-button-settings-model';import { RibbonGroupButtonSettings } from './ribbon-group-button-settings';
+import { ChildProperty, Complex, Property } from '@syncfusion/ej2-base';import { RibbonItemType, RibbonItemSize, DisplayMode } from '../base/interface';import { RibbonButtonSettings } from './ribbon-button-settings';import { RibbonButtonSettingsModel } from './ribbon-button-settings-model';import { RibbonCheckBoxSettings } from './ribbon-checkbox-settings';import { RibbonCheckBoxSettingsModel } from './ribbon-checkbox-settings-model';import { RibbonColorPickerSettings } from './ribbon-colorpicker-settings';import { RibbonColorPickerSettingsModel } from './ribbon-colorpicker-settings-model';import { RibbonComboBoxSettings } from './ribbon-combobox-settings';import { RibbonComboBoxSettingsModel } from './ribbon-combobox-settings-model';import { RibbonDropDownSettings } from './ribbon-dropdown-settings';import { RibbonDropDownSettingsModel } from './ribbon-dropdown-settings-model';import { RibbonSplitButtonSettings } from './ribbon-splitbutton-settings';import { RibbonSplitButtonSettingsModel } from './ribbon-splitbutton-settings-model';import { RibbonTooltip } from './ribbon-tooltip';import { RibbonTooltipModel } from './ribbon-tooltip-model';import { RibbonGroupButtonSettingsModel } from './ribbon-group-button-settings-model';import { RibbonGroupButtonSettings } from './ribbon-group-button-settings';import { RibbonGallerySettingsModel } from './ribbon-gallery-settings-model';import { RibbonGallerySettings } from './ribbon-gallery-settings';
 
 /**
  * Interface for a class RibbonItem
  */
 export interface RibbonItemModel {
 
+    /**
+     * Defines the key tip text to be accessed for specified Ribbon item.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
     /**
      * Defines the active size of the ribbon item.
      *
@@ -127,4 +134,11 @@ export interface RibbonItemModel {
      */
     groupButtonSettings?: RibbonGroupButtonSettingsModel;
 
+    /**
+     * Defines the properties of the gallery view in Ribbon.
+     *
+     * @default {}
+     */
+    gallerySettings?: RibbonGallerySettingsModel;
+
 }

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

@@ -8,10 +8,17 @@ import { RibbonDropDownSettingsModel } from './ribbon-dropdown-settings-model';
 import { RibbonSplitButtonSettingsModel } from './ribbon-splitbutton-settings-model';
 import { RibbonTooltipModel } from './ribbon-tooltip-model';
 import { RibbonGroupButtonSettingsModel } from './ribbon-group-button-settings-model';
+import { RibbonGallerySettingsModel } from './ribbon-gallery-settings-model';
 /**
  * Defines the ribbon item.
  */
 export declare class RibbonItem extends ChildProperty<RibbonItem> {
+    /**
+     * Defines the key tip text to be accessed for specified Ribbon item.
+     *
+     * @default ''
+     */
+    keyTip: string;
     /**
      * Defines the active size of the ribbon item.
      *
@@ -118,6 +125,12 @@ export declare class RibbonItem extends ChildProperty<RibbonItem> {
      * @default {}
      */
     groupButtonSettings: RibbonGroupButtonSettingsModel;
+    /**
+     * Defines the properties of the gallery view in Ribbon.
+     *
+     * @default {}
+     */
+    gallerySettings: RibbonGallerySettingsModel;
     /**
      * @param {Object} prop - Gets the property of item.
      * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.

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

@@ -27,6 +27,7 @@ import { RibbonDropDownSettings } from './ribbon-dropdown-settings';
 import { RibbonSplitButtonSettings } from './ribbon-splitbutton-settings';
 import { RibbonTooltip } from './ribbon-tooltip';
 import { RibbonGroupButtonSettings } from './ribbon-group-button-settings';
+import { RibbonGallerySettings } from './ribbon-gallery-settings';
 /**
  * Defines the ribbon item.
  */
@@ -44,6 +45,9 @@ var RibbonItem = /** @class */ (function (_super) {
     RibbonItem.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
+    __decorate([
+        Property('')
+    ], RibbonItem.prototype, "keyTip", void 0);
     __decorate([
         Property(RibbonItemSize.Medium)
     ], RibbonItem.prototype, "activeSize", void 0);
@@ -92,6 +96,9 @@ var RibbonItem = /** @class */ (function (_super) {
     __decorate([
         Complex({}, RibbonGroupButtonSettings)
     ], RibbonItem.prototype, "groupButtonSettings", void 0);
+    __decorate([
+        Complex({}, RibbonGallerySettings)
+    ], RibbonItem.prototype, "gallerySettings", void 0);
     return RibbonItem;
 }(ChildProperty));
 export { RibbonItem };

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

@@ -5,6 +5,13 @@ import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';impor
  */
 export interface RibbonTabModel {
 
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
     /**
      * Defines a unique identifier for the tab.
      *

package/src/ribbon/models/ribbon-tab.d.ts

@@ -4,6 +4,12 @@ import { RibbonGroupModel } from './ribbon-group-model';
  * Defines the ribbon tab.
  */
 export declare class RibbonTab extends ChildProperty<RibbonTab> {
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
     /**
      * Defines a unique identifier for the tab.
      *

package/src/ribbon/models/ribbon-tab.js

@@ -36,6 +36,9 @@ var RibbonTab = /** @class */ (function (_super) {
     RibbonTab.prototype.setProperties = function (prop, muteOnChange) {
         _super.prototype.setProperties.call(this, prop, muteOnChange);
     };
+    __decorate([
+        Property('')
+    ], RibbonTab.prototype, "keyTip", void 0);
     __decorate([
         Property('')
     ], RibbonTab.prototype, "id", void 0);

package/src/ribbon/modules/index.d.ts

@@ -1,2 +1,4 @@
 export * from './ribbon-filemenu';
 export * from './ribbon-backstage';
+export * from './ribbon-contextualtab';
+export * from './ribbon-keytip';

package/src/ribbon/modules/index.js

@@ -1,2 +1,4 @@
 export * from './ribbon-filemenu';
 export * from './ribbon-backstage';
+export * from './ribbon-contextualtab';
+export * from './ribbon-keytip';

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

@@ -51,6 +51,7 @@ export declare class RibbonBackstage extends Component<HTMLElement> {
     createBackStage(backStageOptions: BackStageMenuModel): void;
     private onClickEvent;
     private addBackStageMenuTooltip;
+    private addBackStageMenuKeyTip;
     private checkMenuItems;
     private createBackStagePopup;
     private updatePopupPositionOnRtl;
@@ -79,6 +80,7 @@ export declare class RibbonBackstage extends Component<HTMLElement> {
     private destroyMenu;
     private destroyDDB;
     private removeBackstageMenuTooltip;
+    private removeBackstageMenuKeyTip;
     /**
      * Add items to Backstage Menu.
      *

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

@@ -144,6 +144,7 @@ var RibbonBackstage = /** @class */ (function (_super) {
         };
         this.parent.tabObj.refreshActiveTabBorder();
         this.addBackStageMenuTooltip(backStageOptions);
+        this.addBackStageMenuKeyTip(backStageOptions);
         EventHandler.add(document, 'click', this.onClickEvent, this);
     };
     RibbonBackstage.prototype.onClickEvent = function (e) {
@@ -161,6 +162,24 @@ var RibbonBackstage = /** @class */ (function (_super) {
             this.parent.tooltipData.push({ id: this.backstageButtonEle.id, data: backStageOptions.ribbonTooltipSettings });
         }
     };
+    RibbonBackstage.prototype.addBackStageMenuKeyTip = function (backStageOptions) {
+        if (backStageOptions.keyTip) {
+            if (!(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)];
@@ -451,7 +470,9 @@ var RibbonBackstage = /** @class */ (function (_super) {
                     }
                 }
                 this.removeBackstageMenuTooltip();
+                this.removeBackstageMenuKeyTip();
                 this.addBackStageMenuTooltip(backStageOptions);
+                this.addBackStageMenuKeyTip(backStageOptions);
             }
             else {
                 this.createBackStage(backStageOptions);
@@ -470,6 +491,7 @@ var RibbonBackstage = /** @class */ (function (_super) {
     };
     RibbonBackstage.prototype.destroyDDB = function () {
         this.removeBackstageMenuTooltip();
+        this.removeBackstageMenuKeyTip();
         var tabEle = this.parent.tabObj.element;
         tabEle.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
         this.destroyMenu();
@@ -487,6 +509,21 @@ var RibbonBackstage = /** @class */ (function (_super) {
             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 = getIndex(this.parent.keyTipElements['backstage'], function (e) { return e.id === _this.backstageButtonEle.id; });
+            if (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--;
+            }
+        }
+    };
     /**
      * Add items to Backstage Menu.
      *

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

@@ -0,0 +1,27 @@
+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;
+}

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

@@ -0,0 +1,90 @@
+import * as constants from '../base/constant';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon contextual tab.
+ */
+var RibbonContextualTab = /** @class */ (function () {
+    function RibbonContextualTab(parent) {
+        this.parent = parent;
+    }
+    RibbonContextualTab.prototype.getModuleName = function () {
+        return 'ribbonContextualTab';
+    };
+    RibbonContextualTab.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates Contextual tab.
+     *
+     * @returns {void}
+     * @hidden
+     */
+    RibbonContextualTab.prototype.addContextualTabs = function () {
+        var isSelected = false;
+        for (var n = 0; n < this.parent.contextualTabs.length; n++) {
+            for (var i = 0; i < this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs.length; i++) {
+                this.parent.addTab(this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs[parseInt(i.toString(), 10)]);
+                var index = this.parent.tabs.length - 1;
+                var tabEle = this.parent.tabObj.element;
+                var toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(index.toString(), 10)];
+                toolbarEle.classList.add(constants.RIBBON_CONTEXTUAL_TAB);
+                toolbarEle.classList.add('e-hidden');
+                if (this.parent.contextualTabs[parseInt(n.toString(), 10)].visible) {
+                    this.parent.showTab(this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs[parseInt(i.toString(), 10)].id, true);
+                    if (this.parent.contextualTabs[parseInt(n.toString(), 10)].isSelected && !isSelected) {
+                        this.parent.selectTab(this.parent.contextualTabs[parseInt(n.toString(), 10)].tabs[0].id);
+                        isSelected = true;
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Updates Contextual tab.
+     *
+     * @param {RibbonContextualTabSettingsModel} newProp - Specifies new properties.
+     * @param {RibbonContextualTabSettingsModel} contextualTab - Gets the property of contextual tab.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonContextualTab.prototype.updateContextualTabs = function (newProp, contextualTab) {
+        if (!(isNullOrUndefined(newProp.visible))) {
+            for (var i = 0; i < contextualTab.tabs.length; i++) {
+                if (newProp.visible) {
+                    this.parent.showTab(contextualTab.tabs[parseInt(i.toString(), 10)].id, true);
+                }
+                else {
+                    this.parent.hideTab(contextualTab.tabs[parseInt(i.toString(), 10)].id, true);
+                }
+            }
+        }
+        if (!(isNullOrUndefined(newProp.isSelected))) {
+            if (newProp.isSelected && contextualTab.visible) {
+                this.parent.selectTab(contextualTab.tabs[0].id);
+            }
+            else {
+                var tabEle = this.parent.tabObj.element;
+                for (var i = 0; i < this.parent.tabs.length; i++) {
+                    var toolbarEle = tabEle.querySelectorAll('.e-toolbar-item')[parseInt(i.toString(), 10)];
+                    if (!(toolbarEle.classList.contains('e-hidden') || toolbarEle.classList.contains('e-disable'))) {
+                        this.parent.selectTab(this.parent.tabs[parseInt(i.toString(), 10)].id);
+                        break;
+                    }
+                }
+            }
+        }
+        if (newProp.tabs) {
+            var _loop_1 = function (key) {
+                var index = parseInt(key, 10);
+                var tab = this_1.parent.tabs.filter(function (e) { return e.id === contextualTab.tabs[parseInt(index.toString(), 10)].id; })[0];
+                this_1.parent.updateTab(tab);
+            };
+            var this_1 = this;
+            for (var key in newProp.tabs) {
+                _loop_1(key);
+            }
+        }
+    };
+    return RibbonContextualTab;
+}());
+export { RibbonContextualTab };

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

@@ -21,6 +21,7 @@ export declare class RibbonFileMenu {
      */
     createFileMenu(fileMenuOptions: FileMenuSettingsModel): void;
     private addFileMenuTooltip;
+    private addFileMenuKeytip;
     private ddbBeforeEvent;
     private ddbAfterEvent;
     private cloneMenuItem;
@@ -48,6 +49,7 @@ export declare class RibbonFileMenu {
     private destroyMenu;
     private destroyDDB;
     private removeFileMenuTooltip;
+    private removeFileMenuKeytip;
     /**
      * Add items to FileMenu.
      *