@syncfusion/ej2-ribbon 21.1.35 → 21.1.37

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

@@ -960,6 +960,7 @@ class RibbonButton {
                 btnSettings.clicked.call(this, e);
             }
         };
+        buttonEle.setAttribute('aria-label', btnSettings.content);
     }
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -986,7 +987,6 @@ 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
      */
@@ -1039,6 +1039,7 @@ class RibbonButton {
         }
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
+            buttonEle.setAttribute('aria-label', prop.content);
         }
         delete prop.clicked;
         buttonObj.setProperties(prop);
@@ -1130,7 +1131,6 @@ 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
      */
@@ -1274,7 +1274,6 @@ 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
      */
@@ -1438,7 +1437,6 @@ 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
      */
@@ -1602,7 +1600,6 @@ class RibbonDropDown {
      *
      * @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
      */
@@ -1882,7 +1879,6 @@ class RibbonSplitButton {
      *
      * @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
      */
@@ -2006,6 +2002,7 @@ class RibbonSplitButton {
  * @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 (let i = 0; i < arr.length; i++) {
@@ -2020,6 +2017,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') {
@@ -2050,6 +2048,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 (let i = 0; i < tabs.length; i++) {
@@ -2078,6 +2077,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 (let i = 0; i < tabs.length; i++) {
@@ -2103,6 +2103,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 (let i = 0; i < tabs.length; i++) {
@@ -2122,6 +2123,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) {
     const control = getComponent(element, moduleName);
@@ -2134,6 +2136,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) {
     const control = getComponent(element, moduleName);
@@ -2146,6 +2149,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) {
     const control = getComponent(element, moduleName);
@@ -2155,9 +2159,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) {
@@ -2192,6 +2197,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;
@@ -2203,6 +2209,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) {
     const targetId = args.target.getAttribute('id');
@@ -2246,6 +2253,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) {
     const ribbonTooltip = new Tooltip({
@@ -2257,6 +2265,7 @@ function createTooltip(element, ribbon) {
     /**
      * @param {TooltipEventArgs} args - Gets the tooltip argument.
      * @returns {void}
+     * @hidden
      */
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
@@ -2267,6 +2276,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) {
     const control = getComponent(element, Tooltip);
@@ -2278,6 +2288,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) {
     const control = getComponent(element, Tooltip);
@@ -2480,7 +2491,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             //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) {
@@ -2561,8 +2574,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             const group = orderedGroups[parseInt(i.toString(), 10)];
             const groupEle = tabContent.querySelector('#' + group.id);
             const groupContainer = groupEle.querySelector('#' + group.id + CONTAINER_ID);
-            for (let j = 0; ((j < group.collections.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); j++) {
-                const collection = group.collections[parseInt(j.toString(), 10)];
+            for (let j = group.collections.length; ((j >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); j--) {
+                const collection = group.collections[parseInt((j - 1).toString(), 10)];
                 const collectionEle = groupEle.querySelector('#' + collection.id);
                 for (let k = collection.items.length; ((k >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); k--) {
                     const item = collection.items[k - 1];
@@ -2628,8 +2641,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 overflowDDB = this.overflowDDB;
                 overflowtarget = this.overflowDDB ? this.overflowDDB.target : null;
             }
-            for (let j = (group.collections.length); ((j >= 1) && flag); j--) {
-                const collection = group.collections[parseInt((j - 1).toString(), 10)];
+            for (let j = 0; ((j < group.collections.length) && flag); j++) {
+                const collection = group.collections[parseInt(j.toString(), 10)];
                 // eslint-disable-next-line max-len
                 for (let k = 0; ((k < collection.items.length) && flag && !isClear && (tabContent.offsetWidth > activeContent.offsetWidth)); k++) {
                     const item = collection.items[parseInt(k.toString(), 10)];
@@ -3430,11 +3443,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         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 = () => { this.toggleLayout(); };
         this.collapseButton.onkeydown = (e) => {
-            if (e.key === "Enter") {
+            if (e.key === 'Enter') {
                 this.toggleLayout();
             }
         };
@@ -3678,13 +3691,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const launcherIcon = this.createElement('div', {
                     className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.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.launcherIconClicked.bind(this, group.id), this);
                 EventHandler.add(launcherIcon, 'keydown', (e) => {
-                    if (e.key === "Enter") {
+                    if (e.key === 'Enter') {
                         this.launcherIconClicked(group.id);
                     }
                 }, this);
@@ -3708,7 +3721,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     for (let j = 0; j < items.length; j++) {
                         const 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);
@@ -4507,6 +4522,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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 });
@@ -4517,6 +4533,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 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 (let i = 0; i < this.tabs.length; i++) {
@@ -4654,7 +4673,7 @@ class RibbonFileMenu {
             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
         });
         const tabEle = this.parent.tabObj.element;
         const toolbarEle = tabEle.querySelector('.e-toolbar');
@@ -4745,7 +4764,7 @@ class RibbonFileMenu {
             select: this.menuSelect.bind(this)
         }, ulElem);
         EventHandler.add(ulElem, 'keydown', (e) => {
-            if (e.key === "Tab") {
+            if (e.key === 'Tab') {
                 this.fileMenuDDB.toggle();
             }
         }, this);
@@ -4754,8 +4773,10 @@ class RibbonFileMenu {
         const event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {
-            const eventArgs = { cancel: args.cancel, element: args.element, event: args.event,
-                items: args.items, parentItem: args.parentItem };
+            const eventArgs = {
+                cancel: args.cancel, element: args.element, event: args.event,
+                items: args.items, parentItem: args.parentItem
+            };
             event.call(this, eventArgs);
             args.cancel = eventArgs.cancel;
         }