@syncfusion/ej2-ribbon 25.2.3 → 25.2.5

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

@@ -1388,7 +1388,11 @@ class RibbonButton {
             created: btnSettings.created
         }, buttonEle);
         if (btnSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, btnSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         buttonEle.onclick = (e) => {
             if (btnSettings.clicked) {
@@ -1527,6 +1531,13 @@ class RibbonCheckBox {
         });
         itemEle.appendChild(inputEle);
         const checkBoxSettings = item.checkBoxSettings;
+        let htmlAttr = {};
+        if (checkBoxSettings.htmlAttributes) {
+            htmlAttr = Object.assign({}, checkBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new CheckBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -1537,7 +1548,7 @@ class RibbonCheckBox {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
-            htmlAttributes: checkBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             change: (e) => {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(this, e);
@@ -1693,7 +1704,11 @@ class RibbonColorPicker {
             select: colorPickerSettings.select
         }, inputEle);
         if (colorPickerSettings.htmlAttributes) {
-            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, colorPickerSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(inputEle, htmlAttr);
         }
         const wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
@@ -1871,6 +1886,13 @@ class RibbonComboBox {
         });
         itemEle.appendChild(inputEle);
         const comboBoxSettings = item.comboBoxSettings;
+        let htmlAttr = {};
+        if (comboBoxSettings.htmlAttributes) {
+            htmlAttr = Object.assign({}, comboBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new ComboBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -1902,7 +1924,7 @@ class RibbonComboBox {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
-            htmlAttributes: comboBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             close: (e) => {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(this, e);
@@ -2101,7 +2123,11 @@ class RibbonDropDown {
             select: dropDownSettings.select
         }).appendTo(buttonEle);
         if (dropDownSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, dropDownSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
     }
     /**
@@ -2543,7 +2569,11 @@ class RibbonSplitButton {
             }
         }, buttonEle);
         if (splitButtonSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+            const htmlAttr = Object.assign({}, splitButtonSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         const dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = (e) => {
@@ -7096,7 +7126,11 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         for (let i = 0; i < list.length; i++) {
             const listitem = list[parseInt(i.toString(), 10)];
             if (!listitem.id) {
-                listitem.setProperties({ id: initId + key + (this.idIndex++) }, true);
+                let htmlAttrID;
+                if (type === 'item') {
+                    htmlAttrID = this.hasHtmlAtrrID(listitem);
+                }
+                listitem.setProperties({ id: htmlAttrID ? htmlAttrID : initId + key + (this.idIndex++) }, true);
             }
             switch (type) {
                 case 'tab':
@@ -7114,6 +7148,28 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         return list;
     }
+    hasHtmlAtrrID(listItem) {
+        let id = '';
+        if (listItem.buttonSettings.htmlAttributes.id) {
+            id = listItem.buttonSettings.htmlAttributes.id;
+        }
+        else if (listItem.checkBoxSettings.htmlAttributes.id) {
+            id = listItem.checkBoxSettings.htmlAttributes.id;
+        }
+        else if (listItem.colorPickerSettings.htmlAttributes.id) {
+            id = listItem.colorPickerSettings.htmlAttributes.id;
+        }
+        else if (listItem.comboBoxSettings.htmlAttributes.id) {
+            id = listItem.comboBoxSettings.htmlAttributes.id;
+        }
+        else if (listItem.dropDownSettings.htmlAttributes.id) {
+            id = listItem.dropDownSettings.htmlAttributes.id;
+        }
+        else if (listItem.splitButtonSettings.htmlAttributes.id) {
+            id = listItem.splitButtonSettings.htmlAttributes.id;
+        }
+        return id;
+    }
     updateCommonProperty(commonProp) {
         this.tabObj.setProperties(commonProp);
         if (this.ribbonFileMenuModule) {