@syncfusion/ej2-ribbon 21.1.35 → 21.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.1.35
+*  version : 21.2.3
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@0.25.0",
+  "_id": "@syncfusion/ej2-ribbon@21.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-Jvszp1M5UlmZ6eU3vdHZNnbMV6Cz58hLLsV9H3bOo/x6ZDnMXwStNO3uoiYpxPdSHBsUYJmTkmbx11w7PwhzWw==",
+  "_integrity": "sha512-gWwlbD+kTmoNDnyq+liFGtG0dXmxD7B5M/OMAWv8wXSJZWlzmdrVUIa8fSL80eQSFzyzU/fU8z0pjyXVu8VSXA==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -18,13 +18,10 @@
   },
   "_requiredBy": [
     "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-ribbon",
-    "/@syncfusion/ej2-react-ribbon",
-    "/@syncfusion/ej2-vue-ribbon"
+    "/@syncfusion/ej2"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-0.25.0.tgz",
-  "_shasum": "6cc9e0a4bb1042e4132ea627aa8e38ba6db0f5ce",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.1.37.tgz",
+  "_shasum": "724d27c29aa2886be6969a2149fc3c97645677e2",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -35,13 +32,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.35",
-    "@syncfusion/ej2-buttons": "~21.1.35",
-    "@syncfusion/ej2-dropdowns": "~21.1.35",
-    "@syncfusion/ej2-lists": "~21.1.35",
-    "@syncfusion/ej2-navigations": "~21.1.35",
-    "@syncfusion/ej2-popups": "~21.1.35",
-    "@syncfusion/ej2-splitbuttons": "~21.1.35"
+    "@syncfusion/ej2-base": "~21.2.3",
+    "@syncfusion/ej2-buttons": "~21.2.3",
+    "@syncfusion/ej2-dropdowns": "~21.2.3",
+    "@syncfusion/ej2-lists": "~21.2.3",
+    "@syncfusion/ej2-navigations": "~21.2.3",
+    "@syncfusion/ej2-popups": "~21.2.3",
+    "@syncfusion/ej2-splitbuttons": "~21.2.3"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +59,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "21.1.35",
+  "version": "21.2.3",
   "sideEffects": false
 }

package/src/ribbon/base/constant.d.ts

@@ -96,6 +96,8 @@ export declare const DROPDOWNBUTTON: string;
 /** @hidden */
 export declare const DROPDOWNBUTTON_HIDE: string;
 /** @hidden */
+export declare const RIBBON_TEMPLATE: string;
+/** @hidden */
 export declare const RIBBON_HELP_TEMPLATE: string;
 /** @hidden */
 export declare const RIBBON_TOOLTIP: string;

package/src/ribbon/base/constant.js

@@ -96,6 +96,8 @@ export var DROPDOWNBUTTON = 'e-dropdown-btn';
 /** @hidden */
 export var DROPDOWNBUTTON_HIDE = 'e-caret-hide';
 /** @hidden */
+export var RIBBON_TEMPLATE = 'e-ribbon-template';
+/** @hidden */
 export var RIBBON_HELP_TEMPLATE = 'e-ribbon-help-template';
 /** @hidden */
 export var RIBBON_TOOLTIP = 'e-ribbon-tooltip';

package/src/ribbon/base/ribbon-model.d.ts

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, EJ2Control, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/ribbon/base/ribbon.js

@@ -177,7 +177,7 @@ var Ribbon = /** @class */ (function (_super) {
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
         this.setProperties({ selectedTab: selectedIndex }, true);
-        this.checkOverflow(selectedIndex, e.selectedContent);
+        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + constants.RIBBON_TAB_ACTIVE);
@@ -196,9 +196,6 @@ var Ribbon = /** @class */ (function (_super) {
         this.trigger('tabSelected', eventArgs);
     };
     Ribbon.prototype.checkOverflow = function (tabIndex, activeContent) {
-        if (!activeContent) {
-            activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.CONTENT_ID);
-        }
         var tabContent = activeContent.closest('.' + constants.TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
         if (isOverFlow && !this.scrollModule) {
@@ -221,7 +218,9 @@ var Ribbon = /** @class */ (function (_super) {
             }
             //Adds Scroll if the tabwidth is less the content width even after adding overflow dropdown.
             if ((tabContent.offsetWidth < activeContent.offsetWidth) && (!this.scrollModule)) {
-                this.scrollModule = new HScroll({}, this.tabObj.element.querySelector('.' + constants.TAB_CONTENT));
+                this.scrollModule = new HScroll({
+                    enableRtl: this.enableRtl
+                }, this.tabObj.element.querySelector('.' + constants.TAB_CONTENT));
             }
         }
         else if (!isOverFlow) {
@@ -302,8 +301,8 @@ var Ribbon = /** @class */ (function (_super) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var groupEle = tabContent.querySelector('#' + group.id);
             var groupContainer = groupEle.querySelector('#' + group.id + constants.CONTAINER_ID);
-            for (var j = 0; ((j < group.collections.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); j++) {
-                var collection = group.collections[parseInt(j.toString(), 10)];
+            for (var j = group.collections.length; ((j >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); j--) {
+                var collection = group.collections[parseInt((j - 1).toString(), 10)];
                 var collectionEle = groupEle.querySelector('#' + collection.id);
                 for (var k = collection.items.length; ((k >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); k--) {
                     var item = collection.items[k - 1];
@@ -370,8 +369,8 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowDDB = this.overflowDDB;
                 overflowtarget = this.overflowDDB ? this.overflowDDB.target : null;
             }
-            for (var j = (group.collections.length); ((j >= 1) && flag); j--) {
-                var collection = group.collections[parseInt((j - 1).toString(), 10)];
+            for (var j = 0; ((j < group.collections.length) && flag); j++) {
+                var collection = group.collections[parseInt(j.toString(), 10)];
                 // eslint-disable-next-line max-len
                 for (var k = 0; ((k < collection.items.length) && flag && !isClear && (tabContent.offsetWidth > activeContent.offsetWidth)); k++) {
                     var item = collection.items[parseInt(k.toString(), 10)];
@@ -1195,11 +1194,11 @@ var Ribbon = /** @class */ (function (_super) {
         this.collapseButton = this.createElement('span', {
             className: constants.RIBBON_COLLAPSE_BUTTON + constants.SPACE + constants.EXPAND_COLLAPSE_ICON,
             id: this.tabObj.element.id + constants.COLLAPSE_BUTTON_ID,
-            attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher' }
+            attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher', 'role': 'button' }
         });
         this.collapseButton.onclick = function () { _this.toggleLayout(); };
         this.collapseButton.onkeydown = function (e) {
-            if (e.key === "Enter") {
+            if (e.key === 'Enter') {
                 _this.toggleLayout();
             }
         };
@@ -1445,13 +1444,13 @@ var Ribbon = /** @class */ (function (_super) {
                 var launcherIcon = this_3.createElement('div', {
                     className: constants.RIBBON_LAUNCHER_ICON_ELE + ' ' + (this_3.launcherIconCss ? this_3.launcherIconCss : constants.RIBBON_LAUNCHER_ICON),
                     id: group.id + constants.LAUNCHER_ID,
-                    attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Launcher Icon' }
+                    attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Launcher Icon', 'role': 'button' }
                 });
                 groupContainer.appendChild(launcherIcon);
                 groupContainer.classList.add(constants.RIBBON_LAUNCHER);
                 EventHandler.add(launcherIcon, 'click', this_3.launcherIconClicked.bind(this_3, group.id), this_3);
                 EventHandler.add(launcherIcon, 'keydown', function (e) {
-                    if (e.key === "Enter") {
+                    if (e.key === 'Enter') {
                         _this.launcherIconClicked(group.id);
                     }
                 }, this_3);
@@ -1479,7 +1478,9 @@ var Ribbon = /** @class */ (function (_super) {
                     for (var j = 0; j < items.length; j++) {
                         var ribbonitem = items[parseInt(j.toString(), 10)];
                         if (!ribbonitem.allowedSizes || (ribbonitem.allowedSizes === 0)) {
-                            ribbonitem.setProperties({ allowedSizes: (RibbonItemSize.Small | RibbonItemSize.Medium | RibbonItemSize.Large) }, true);
+                            ribbonitem.setProperties({
+                                allowedSizes: (RibbonItemSize.Small | RibbonItemSize.Medium | RibbonItemSize.Large)
+                            }, true);
                         }
                         if ((ribbonitem.type === 'ColorPicker') && (ribbonitem.allowedSizes !== RibbonItemSize.Small)) {
                             ribbonitem.setProperties({ allowedSizes: RibbonItemSize.Small }, true);
@@ -1623,10 +1624,11 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var itemEle = this.createElement('div', {
-            className: item.disabled ? constants.DISABLED_CSS + constants.SPACE + item.cssClass : item.cssClass,
+            className: item.cssClass ? (constants.RIBBON_TEMPLATE + constants.SPACE + item.cssClass) : constants.RIBBON_TEMPLATE,
             id: item.id
         });
         if (item.disabled) {
+            itemEle.classList.add(constants.DISABLED_CSS);
             itemEle.setAttribute('disabled', '');
         }
         itemElement.appendChild(itemEle);
@@ -1788,7 +1790,10 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.destroyFunction = function (item, ele) {
         var moduleName = this.getItemModuleName(item);
-        if (moduleName !== 'template') {
+        if (moduleName === 'colorpicker') {
+            this.ribbonColorPickerModule.unwireColorPickerEvents(ele);
+        }
+        else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
         if (item.ribbonTooltipSettings) {
@@ -2293,6 +2298,7 @@ var Ribbon = /** @class */ (function (_super) {
                     break;
                 case 'isMinimized':
                     this.element.classList.toggle(constants.RIBBON_MINIMIZE, this.isMinimized);
+                    this.tabObj.element.querySelector('.e-content').style.display = this.isMinimized ? 'none' : 'block';
                     break;
                 case 'locale':
                     this.updateCommonProperty({ locale: this.locale });
@@ -2303,6 +2309,9 @@ var Ribbon = /** @class */ (function (_super) {
                 case 'enableRtl':
                     this.element.classList.toggle(constants.RTL_CSS, this.enableRtl);
                     this.updateCommonProperty({ enableRtl: newProp.enableRtl });
+                    if (this.scrollModule) {
+                        this.scrollModule.setProperties({ enableRtl: newProp.enableRtl });
+                    }
                     break;
                 case 'launcherIconCss':
                     for (var i = 0; i < this.tabs.length; i++) {
@@ -2339,6 +2348,7 @@ var Ribbon = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
+                    this.refreshLayout();
                     break;
                 case 'fileMenu':
                     if (this.ribbonFileMenuModule) {

package/src/ribbon/base/utils.d.ts

@@ -8,6 +8,7 @@ import { Ribbon } from './ribbon';
  * @param {Array} arr - Gets the array to find index.
  * @param {boolean} condition - Defines whether index matches with the value.
  * @returns {number} - Gets the index value.
+ * @hidden
  */
 export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index: number) => boolean): number;
 /**
@@ -15,6 +16,7 @@ export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index:
  *
  * @param {string | HTMLElement} template - Template property value.
  * @returns {Function} - Return template function.
+ * @hidden
  */
 export declare function getTemplateFunction(template: string | HTMLElement): Function;
 /**
@@ -23,6 +25,7 @@ export declare function getTemplateFunction(template: string | HTMLElement): Fun
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon item.
+ * @hidden
  */
 export declare function getItem(tabs: RibbonTabModel[], id: string): itemProps;
 /**
@@ -31,6 +34,7 @@ export declare function getItem(tabs: RibbonTabModel[], id: string): itemProps;
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon collection.
+ * @hidden
  */
 export declare function getCollection(tabs: RibbonTabModel[], id: string): itemProps;
 /**
@@ -39,12 +43,14 @@ export declare function getCollection(tabs: RibbonTabModel[], id: string): itemP
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon group.
+ * @hidden
  */
 export declare function getGroup(tabs: RibbonTabModel[], id: string): itemProps;
 /**
  * @param {HTMLElement} element - Gets the element to be destroyed.
  * @param {string} moduleName - Gets the module name.
  * @returns {void}
+ * @hidden
  */
 export declare function destroyControl(element: HTMLElement, moduleName: string): void;
 /**
@@ -54,6 +60,7 @@ export declare function destroyControl(element: HTMLElement, moduleName: string)
  * @param {string} moduleName - Gets the module name.
  * @param {commonProperties} commonProp - Gets the common properties to be updated.
  * @returns {void}
+ * @hidden
  */
 export declare function updateCommonProperty(element: HTMLElement, moduleName: string, commonProp: commonProperties): void;
 /**
@@ -63,20 +70,23 @@ export declare function updateCommonProperty(element: HTMLElement, moduleName: s
  * @param {string} moduleName - Gets the module name.
  * @param {boolean} disable - Defines whether the control to be disabled or not.
  * @returns {void}
+ * @hidden
  */
 export declare function updateControlDisabled(element: HTMLElement, moduleName: string, disable: boolean): void;
 /**
  * Gets the ribbon item element.
  *
  * @param {Ribbon} parent - Gets the parent element.
- * @param {itemProps} itemProp - Gets the ribbon item.
  * @param {string} id - Gets the ID of the item.
+ * @param {itemProps} itemProp - Gets the ribbon item.
  * @returns {HTMLElement} - Gets the ribbon item element.
+ * @hidden
  */
 export declare function getItemElement(parent: Ribbon, id: string, itemProp?: itemProps): HTMLElement;
 /**
  * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
  * @returns {boolean} - Gets whether the tooltip is present or not.
+ * @hidden
  */
 export declare function isTooltipPresent(tooltip: RibbonTooltipModel): boolean;
 /**
@@ -86,6 +96,7 @@ export declare function isTooltipPresent(tooltip: RibbonTooltipModel): boolean;
  * @param {Tooltip} tooltip - Gets the tooltip to set the content.
  * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
  * @returns {void}
+ * @hidden
  */
 export declare function setToolTipContent(args: TooltipEventArgs, tooltip: Tooltip, tooltipData: ribbonTooltipData[]): void;
 /**
@@ -94,6 +105,7 @@ export declare function setToolTipContent(args: TooltipEventArgs, tooltip: Toolt
  * @param {HTMLElement} element - Gets the element to add tooltip.
  * @param {Ribbon} ribbon - Gets the ribbon.
  * @returns {void}
+ * @hidden
  */
 export declare function createTooltip(element: HTMLElement, ribbon: Ribbon): void;
 /**
@@ -101,6 +113,7 @@ export declare function createTooltip(element: HTMLElement, ribbon: Ribbon): voi
  *
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
  * @returns {void}
+ * @hidden
  */
 export declare function destroyTooltip(element: HTMLElement): void;
 /**
@@ -109,5 +122,6 @@ export declare function destroyTooltip(element: HTMLElement): void;
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be Updated.
  * @param {commonProperties} prop - Gets the property to be updated.
  * @returns {void}
+ * @hidden
  */
 export declare function updateTooltipProp(element: HTMLElement, prop: commonProperties): void;

package/src/ribbon/base/utils.js

@@ -9,6 +9,7 @@ import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
  * @param {Array} arr - Gets the array to find index.
  * @param {boolean} condition - Defines whether index matches with the value.
  * @returns {number} - Gets the index value.
+ * @hidden
  */
 export function getIndex(arr, condition) {
     for (var i = 0; i < arr.length; i++) {
@@ -23,6 +24,7 @@ export function getIndex(arr, condition) {
  *
  * @param {string | HTMLElement} template - Template property value.
  * @returns {Function} - Return template function.
+ * @hidden
  */
 export function getTemplateFunction(template) {
     if (typeof template === 'string') {
@@ -53,6 +55,7 @@ export function getTemplateFunction(template) {
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon item.
+ * @hidden
  */
 export function getItem(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -81,6 +84,7 @@ export function getItem(tabs, id) {
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon collection.
+ * @hidden
  */
 export function getCollection(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -106,6 +110,7 @@ export function getCollection(tabs, id) {
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon group.
+ * @hidden
  */
 export function getGroup(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -125,6 +130,7 @@ export function getGroup(tabs, id) {
  * @param {HTMLElement} element - Gets the element to be destroyed.
  * @param {string} moduleName - Gets the module name.
  * @returns {void}
+ * @hidden
  */
 export function destroyControl(element, moduleName) {
     var control = getComponent(element, moduleName);
@@ -137,6 +143,7 @@ export function destroyControl(element, moduleName) {
  * @param {string} moduleName - Gets the module name.
  * @param {commonProperties} commonProp - Gets the common properties to be updated.
  * @returns {void}
+ * @hidden
  */
 export function updateCommonProperty(element, moduleName, commonProp) {
     var control = getComponent(element, moduleName);
@@ -149,6 +156,7 @@ export function updateCommonProperty(element, moduleName, commonProp) {
  * @param {string} moduleName - Gets the module name.
  * @param {boolean} disable - Defines whether the control to be disabled or not.
  * @returns {void}
+ * @hidden
  */
 export function updateControlDisabled(element, moduleName, disable) {
     var control = getComponent(element, moduleName);
@@ -158,9 +166,10 @@ export function updateControlDisabled(element, moduleName, disable) {
  * Gets the ribbon item element.
  *
  * @param {Ribbon} parent - Gets the parent element.
- * @param {itemProps} itemProp - Gets the ribbon item.
  * @param {string} id - Gets the ID of the item.
+ * @param {itemProps} itemProp - Gets the ribbon item.
  * @returns {HTMLElement} - Gets the ribbon item element.
+ * @hidden
  */
 export function getItemElement(parent, id, itemProp) {
     if (!itemProp) {
@@ -195,6 +204,7 @@ export function getItemElement(parent, id, itemProp) {
 /**
  * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
  * @returns {boolean} - Gets whether the tooltip is present or not.
+ * @hidden
  */
 export function isTooltipPresent(tooltip) {
     return (tooltip.content || tooltip.iconCss || tooltip.title || tooltip.id || tooltip.cssClass) ? true : false;
@@ -206,6 +216,7 @@ export function isTooltipPresent(tooltip) {
  * @param {Tooltip} tooltip - Gets the tooltip to set the content.
  * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
  * @returns {void}
+ * @hidden
  */
 export function setToolTipContent(args, tooltip, tooltipData) {
     var targetId = args.target.getAttribute('id');
@@ -249,6 +260,7 @@ export function setToolTipContent(args, tooltip, tooltipData) {
  * @param {HTMLElement} element - Gets the element to add tooltip.
  * @param {Ribbon} ribbon - Gets the ribbon.
  * @returns {void}
+ * @hidden
  */
 export function createTooltip(element, ribbon) {
     var ribbonTooltip = new Tooltip({
@@ -260,6 +272,7 @@ export function createTooltip(element, ribbon) {
     /**
      * @param {TooltipEventArgs} args - Gets the tooltip argument.
      * @returns {void}
+     * @hidden
      */
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
@@ -270,6 +283,7 @@ export function createTooltip(element, ribbon) {
  *
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
  * @returns {void}
+ * @hidden
  */
 export function destroyTooltip(element) {
     var control = getComponent(element, Tooltip);
@@ -281,6 +295,7 @@ export function destroyTooltip(element) {
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be Updated.
  * @param {commonProperties} prop - Gets the property to be updated.
  * @returns {void}
+ * @hidden
  */
 export function updateTooltipProp(element, prop) {
     var control = getComponent(element, Tooltip);

package/src/ribbon/items/ribbon-button.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonButton {
      *
      * @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
      */

package/src/ribbon/items/ribbon-button.js

@@ -48,6 +48,7 @@ var RibbonButton = /** @class */ (function () {
                 btnSettings.clicked.call(_this, e);
             }
         };
+        buttonEle.setAttribute('aria-label', btnSettings.content);
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -75,7 +76,6 @@ var RibbonButton = /** @class */ (function () {
      *
      * @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
      */
@@ -129,6 +129,7 @@ var RibbonButton = /** @class */ (function () {
         }
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
+            buttonEle.setAttribute('aria-label', prop.content);
         }
         delete prop.clicked;
         buttonObj.setProperties(prop);

package/src/ribbon/items/ribbon-checkbox.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonCheckBox {
      *
      * @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
      */

package/src/ribbon/items/ribbon-checkbox.js

@@ -73,7 +73,6 @@ var RibbonCheckBox = /** @class */ (function () {
      *
      * @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
      */

package/src/ribbon/items/ribbon-colorpicker.d.ts

@@ -18,6 +18,7 @@ export declare class RibbonColorPicker {
      * @hidden
      */
     createColorPicker(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private toggleWrapperHover;
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
      *
@@ -33,7 +34,6 @@ export declare class RibbonColorPicker {
      *
      * @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
      */
@@ -63,4 +63,10 @@ export declare class RibbonColorPicker {
      * @returns {void}
      */
     updateColorPicker(prop: RibbonColorPickerSettingsModel, id: string): void;
+    /**
+     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
+     * @returns {void}
+     * @hidden
+     */
+    unwireColorPickerEvents(element: HTMLElement): void;
 }

package/src/ribbon/items/ribbon-colorpicker.js

@@ -63,8 +63,16 @@ var RibbonColorPicker = /** @class */ (function () {
             select: colorPickerSettings.select
         }, inputEle);
         var wrapper = colorPicker.element.parentElement;
-        EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
-        EventHandler.add(wrapper, 'mouseleave', function () { wrapper.classList.remove(RIBBON_HOVER); }, this);
+        EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
+        EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);
+    };
+    RibbonColorPicker.prototype.toggleWrapperHover = function (wrapper, isAdd) {
+        if (isAdd) {
+            wrapper.classList.add(RIBBON_HOVER);
+        }
+        else {
+            wrapper.classList.remove(RIBBON_HOVER);
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -76,13 +84,24 @@ var RibbonColorPicker = /** @class */ (function () {
      * @hidden
      */
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         colorPickerObj.setProperties({ cssClass: colorPickerObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         var splitBtn = colorPickerObj['splitBtn'];
+        var target;
+        colorPickerObj.beforeClose = function (e) {
+            target = e.event ? e.event.target : null;
+            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+            if (item.colorPickerSettings.beforeClose) {
+                item.colorPickerSettings.beforeClose.call(_this);
+            }
+        };
         splitBtn.close = function () {
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -90,11 +109,11 @@ var RibbonColorPicker = /** @class */ (function () {
      *
      * @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
      */
     RibbonColorPicker.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         var cssClass = colorPickerObj.cssClass.split(SPACE);
@@ -103,6 +122,12 @@ var RibbonColorPicker = /** @class */ (function () {
         var splitBtn = colorPickerObj['splitBtn'];
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         splitBtn.close = null;
+        colorPickerObj.beforeClose = function (e) {
+            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+            if (item.colorPickerSettings.beforeClose) {
+                item.colorPickerSettings.beforeClose.call(_this);
+            }
+        };
     };
     RibbonColorPicker.prototype.getColorPickerObj = function (controlId) {
         var inputEle = getItemElement(this.parent, controlId);
@@ -158,6 +183,17 @@ var RibbonColorPicker = /** @class */ (function () {
         var colorPickerObj = getComponent(inputEle, ColorPicker);
         colorPickerObj.setProperties(prop);
     };
+    /**
+     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonColorPicker.prototype.unwireColorPickerEvents = function (element) {
+        var colorPickerObj = getComponent(element, ColorPicker);
+        var wrapper = colorPickerObj.element.parentElement;
+        EventHandler.remove(wrapper, 'mouseenter', this.toggleWrapperHover);
+        EventHandler.remove(wrapper, 'mouseleave', this.toggleWrapperHover);
+    };
     return RibbonColorPicker;
 }());
 export { RibbonColorPicker };

package/src/ribbon/items/ribbon-combobox.d.ts

@@ -35,7 +35,6 @@ export declare class RibbonComboBox {
      *
      * @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
      */