@syncfusion/ej2-ribbon 21.1.35 → 21.2.3

package/dist/es6/ej2-ribbon.es5.js

@@ -1077,6 +1077,8 @@ var DROPDOWNBUTTON = 'e-dropdown-btn';
 /** @hidden */
 var DROPDOWNBUTTON_HIDE = 'e-caret-hide';
 /** @hidden */
+var RIBBON_TEMPLATE = 'e-ribbon-template';
+/** @hidden */
 var RIBBON_HELP_TEMPLATE = 'e-ribbon-help-template';
 /** @hidden */
 var RIBBON_TOOLTIP = 'e-ribbon-tooltip';
@@ -1177,6 +1179,7 @@ var RibbonButton = /** @__PURE__ @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.
@@ -1204,7 +1207,6 @@ var RibbonButton = /** @__PURE__ @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
      */
@@ -1258,6 +1260,7 @@ var RibbonButton = /** @__PURE__ @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);
@@ -1352,7 +1355,6 @@ var RibbonCheckBox = /** @__PURE__ @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
      */
@@ -1472,8 +1474,16 @@ var RibbonColorPicker = /** @__PURE__ @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.
@@ -1485,13 +1495,24 @@ var RibbonColorPicker = /** @__PURE__ @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();
+            }
         };
     };
     /**
@@ -1499,11 +1520,11 @@ var RibbonColorPicker = /** @__PURE__ @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);
@@ -1512,6 +1533,12 @@ var RibbonColorPicker = /** @__PURE__ @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);
@@ -1567,6 +1594,17 @@ var RibbonColorPicker = /** @__PURE__ @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;
 }());
 
@@ -1655,10 +1693,13 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
         var comboBoxObj = getComponent(inputEle, ComboBox);
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = function (e) {
+            var target = e.event ? e.event.target : null;
             if (item.comboBoxSettings.close) {
                 item.comboBoxSettings.close.call(_this, e);
             }
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -1666,7 +1707,6 @@ var RibbonComboBox = /** @__PURE__ @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
      */
@@ -1794,7 +1834,11 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             iconCss: dropDownSettings.iconCss,
             items: dropDownSettings.items,
             target: dropDownSettings.target,
-            beforeClose: dropDownSettings.beforeClose,
+            beforeClose: function (e) {
+                if (dropDownSettings.beforeClose) {
+                    dropDownSettings.beforeClose.call(_this, e);
+                }
+            },
             beforeItemRender: dropDownSettings.beforeItemRender,
             beforeOpen: dropDownSettings.beforeOpen,
             close: function (e) {
@@ -1822,11 +1866,20 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
         var dropdown = getComponent(dropdownElement, DropDownButton);
         dropdown.cssClass = dropdown.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         dropdown.dataBind();
+        var target;
+        dropdown.beforeClose = function (e) {
+            if (item.dropDownSettings.beforeClose) {
+                item.dropDownSettings.beforeClose.call(_this, e);
+            }
+            target = e.event ? e.event.target : null;
+        };
         dropdown.close = function (e) {
             if (item.dropDownSettings.close) {
                 item.dropDownSettings.close.call(_this, e);
             }
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -1834,7 +1887,6 @@ var RibbonDropDown = /** @__PURE__ @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
      */
@@ -1851,6 +1903,11 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
                 item.dropDownSettings.close.call(_this, e);
             }
         };
+        dropdown.beforeClose = function (e) {
+            if (item.dropDownSettings.beforeClose) {
+                item.dropDownSettings.beforeClose.call(_this, e);
+            }
+        };
     };
     /**
      * Creates Overflow DropDown.
@@ -1986,6 +2043,7 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             control.cssClass = prop.cssClass;
         }
         delete prop.close;
+        delete prop.beforeClose;
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
         }
@@ -2056,7 +2114,11 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
             iconCss: splitButtonSettings.iconCss,
             items: splitButtonSettings.items,
             target: splitButtonSettings.target,
-            beforeClose: splitButtonSettings.beforeClose,
+            beforeClose: function (e) {
+                if (splitButtonSettings.beforeClose) {
+                    splitButtonSettings.beforeClose.call(_this, e);
+                }
+            },
             beforeItemRender: splitButtonSettings.beforeItemRender,
             beforeOpen: splitButtonSettings.beforeOpen,
             close: function () {
@@ -2099,6 +2161,13 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
         var splitbutton = getComponent(splitButtonEle, SplitButton);
         splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         splitbutton.dataBind();
+        var target;
+        splitbutton.beforeClose = function (e) {
+            if (item.splitButtonSettings.beforeClose) {
+                item.splitButtonSettings.beforeClose.call(_this, e);
+            }
+            target = e.event ? e.event.target : null;
+        };
         splitbutton.click = function (e) {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
@@ -2110,7 +2179,9 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
                 item.splitButtonSettings.close.call(_this, e);
             }
             splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -2118,7 +2189,6 @@ var RibbonSplitButton = /** @__PURE__ @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
      */
@@ -2130,6 +2200,11 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
         cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
         splitbutton.cssClass = cssClass.join(SPACE);
         splitbutton.dataBind();
+        splitbutton.beforeClose = function (e) {
+            if (item.splitButtonSettings.beforeClose) {
+                item.splitButtonSettings.beforeClose.call(_this, e);
+            }
+        };
         splitbutton.click = function (e) {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
@@ -2209,6 +2284,7 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
         delete prop.open;
         delete prop.click;
         delete prop.close;
+        delete prop.beforeClose;
         control.setProperties(prop);
         if (prop.content) {
             this.setContent(itemProp.item, control);
@@ -2244,6 +2320,7 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
  * @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
  */
 function getIndex(arr, condition) {
     for (var i = 0; i < arr.length; i++) {
@@ -2258,6 +2335,7 @@ function getIndex(arr, condition) {
  *
  * @param {string | HTMLElement} template - Template property value.
  * @returns {Function} - Return template function.
+ * @hidden
  */
 function getTemplateFunction(template) {
     if (typeof template === 'string') {
@@ -2288,6 +2366,7 @@ 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
  */
 function getItem(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -2316,6 +2395,7 @@ 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
  */
 function getCollection(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -2341,6 +2421,7 @@ 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
  */
 function getGroup(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -2360,6 +2441,7 @@ function getGroup(tabs, id) {
  * @param {HTMLElement} element - Gets the element to be destroyed.
  * @param {string} moduleName - Gets the module name.
  * @returns {void}
+ * @hidden
  */
 function destroyControl(element, moduleName) {
     var control = getComponent(element, moduleName);
@@ -2372,6 +2454,7 @@ function destroyControl(element, moduleName) {
  * @param {string} moduleName - Gets the module name.
  * @param {commonProperties} commonProp - Gets the common properties to be updated.
  * @returns {void}
+ * @hidden
  */
 function updateCommonProperty(element, moduleName, commonProp) {
     var control = getComponent(element, moduleName);
@@ -2384,6 +2467,7 @@ 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
  */
 function updateControlDisabled(element, moduleName, disable) {
     var control = getComponent(element, moduleName);
@@ -2393,9 +2477,10 @@ 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
  */
 function getItemElement(parent, id, itemProp) {
     if (!itemProp) {
@@ -2430,6 +2515,7 @@ function getItemElement(parent, id, itemProp) {
 /**
  * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
  * @returns {boolean} - Gets whether the tooltip is present or not.
+ * @hidden
  */
 function isTooltipPresent(tooltip) {
     return (tooltip.content || tooltip.iconCss || tooltip.title || tooltip.id || tooltip.cssClass) ? true : false;
@@ -2441,6 +2527,7 @@ function isTooltipPresent(tooltip) {
  * @param {Tooltip} tooltip - Gets the tooltip to set the content.
  * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
  * @returns {void}
+ * @hidden
  */
 function setToolTipContent(args, tooltip, tooltipData) {
     var targetId = args.target.getAttribute('id');
@@ -2484,6 +2571,7 @@ function setToolTipContent(args, tooltip, tooltipData) {
  * @param {HTMLElement} element - Gets the element to add tooltip.
  * @param {Ribbon} ribbon - Gets the ribbon.
  * @returns {void}
+ * @hidden
  */
 function createTooltip(element, ribbon) {
     var ribbonTooltip = new Tooltip({
@@ -2495,6 +2583,7 @@ function createTooltip(element, ribbon) {
     /**
      * @param {TooltipEventArgs} args - Gets the tooltip argument.
      * @returns {void}
+     * @hidden
      */
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
@@ -2505,6 +2594,7 @@ function createTooltip(element, ribbon) {
  *
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
  * @returns {void}
+ * @hidden
  */
 function destroyTooltip(element) {
     var control = getComponent(element, Tooltip);
@@ -2516,6 +2606,7 @@ 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
  */
 function updateTooltipProp(element, prop) {
     var control = getComponent(element, Tooltip);
@@ -2691,7 +2782,7 @@ var Ribbon = /** @__PURE__ @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('.' + RIBBON_TAB_ACTIVE);
@@ -2710,9 +2801,6 @@ var Ribbon = /** @__PURE__ @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 + CONTENT_ID);
-        }
         var tabContent = activeContent.closest('.' + TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
         if (isOverFlow && !this.scrollModule) {
@@ -2735,7 +2823,9 @@ var Ribbon = /** @__PURE__ @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('.' + TAB_CONTENT));
+                this.scrollModule = new HScroll({
+                    enableRtl: this.enableRtl
+                }, this.tabObj.element.querySelector('.' + TAB_CONTENT));
             }
         }
         else if (!isOverFlow) {
@@ -2816,8 +2906,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var groupEle = tabContent.querySelector('#' + group.id);
             var groupContainer = groupEle.querySelector('#' + group.id + 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];
@@ -2884,8 +2974,8 @@ var Ribbon = /** @__PURE__ @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)];
@@ -3709,11 +3799,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.collapseButton = this.createElement('span', {
             className: RIBBON_COLLAPSE_BUTTON + SPACE + EXPAND_COLLAPSE_ICON,
             id: this.tabObj.element.id + 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();
             }
         };
@@ -3959,13 +4049,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 var launcherIcon = this_3.createElement('div', {
                     className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this_3.launcherIconCss ? this_3.launcherIconCss : RIBBON_LAUNCHER_ICON),
                     id: group.id + 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(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);
@@ -3993,7 +4083,9 @@ var Ribbon = /** @__PURE__ @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);
@@ -4137,10 +4229,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var itemEle = this.createElement('div', {
-            className: item.disabled ? DISABLED_CSS + SPACE + item.cssClass : item.cssClass,
+            className: item.cssClass ? (RIBBON_TEMPLATE + SPACE + item.cssClass) : RIBBON_TEMPLATE,
             id: item.id
         });
         if (item.disabled) {
+            itemEle.classList.add(DISABLED_CSS);
             itemEle.setAttribute('disabled', '');
         }
         itemElement.appendChild(itemEle);
@@ -4302,7 +4395,10 @@ var Ribbon = /** @__PURE__ @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) {
@@ -4807,6 +4903,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'isMinimized':
                     this.element.classList.toggle(RIBBON_MINIMIZE, this.isMinimized);
+                    this.tabObj.element.querySelector('.e-content').style.display = this.isMinimized ? 'none' : 'block';
                     break;
                 case 'locale':
                     this.updateCommonProperty({ locale: this.locale });
@@ -4817,6 +4914,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 case 'enableRtl':
                     this.element.classList.toggle(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++) {
@@ -4853,6 +4953,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
+                    this.refreshLayout();
                     break;
                 case 'fileMenu':
                     if (this.ribbonFileMenuModule) {
@@ -4958,7 +5059,7 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
             return;
         }
         this.ddbElement = this.parent.createElement('button', {
-            id: this.parent.element.id + RIBBON_FILE_MENU_ID,
+            id: this.parent.element.id + RIBBON_FILE_MENU_ID
         });
         var tabEle = this.parent.tabObj.element;
         var toolbarEle = tabEle.querySelector('.e-toolbar');
@@ -5050,7 +5151,7 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
             select: this.menuSelect.bind(this)
         }, ulElem);
         EventHandler.add(ulElem, 'keydown', function (e) {
-            if (e.key === "Tab") {
+            if (e.key === 'Tab') {
                 _this.fileMenuDDB.toggle();
             }
         }, this);
@@ -5059,8 +5160,10 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
         var event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {
-            var eventArgs = { cancel: args.cancel, element: args.element, event: args.event,
-                items: args.items, parentItem: args.parentItem };
+            var eventArgs = {
+                cancel: args.cancel, element: args.element, event: args.event,
+                items: args.items, parentItem: args.parentItem
+            };
             event.call(this, eventArgs);
             args.cancel = eventArgs.cancel;
         }
@@ -5249,5 +5352,5 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
 // export all modules from current location
 // example: export * from './module'
 
-export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_FILE_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, RibbonTooltip, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonFileMenu };
+export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_FILE_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, RibbonTooltip, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonFileMenu };
 //# sourceMappingURL=ej2-ribbon.es5.js.map