@syncfusion/ej2-ribbon 23.1.38 → 23.1.43

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

@@ -166,6 +166,9 @@ __decorate$5([
 __decorate$5([
     Property(false)
 ], RibbonButtonSettings.prototype, "isPrimary", void 0);
+__decorate$5([
+    Property({})
+], RibbonButtonSettings.prototype, "htmlAttributes", void 0);
 __decorate$5([
     Event()
 ], RibbonButtonSettings.prototype, "created", void 0);
@@ -205,6 +208,9 @@ __decorate$6([
 __decorate$6([
     Property('After')
 ], RibbonCheckBoxSettings.prototype, "labelPosition", void 0);
+__decorate$6([
+    Property({})
+], RibbonCheckBoxSettings.prototype, "htmlAttributes", void 0);
 __decorate$6([
     Event()
 ], RibbonCheckBoxSettings.prototype, "created", void 0);
@@ -259,6 +265,9 @@ __decorate$7([
 __decorate$7([
     Property('#008000ff')
 ], RibbonColorPickerSettings.prototype, "value", void 0);
+__decorate$7([
+    Property({})
+], RibbonColorPickerSettings.prototype, "htmlAttributes", void 0);
 __decorate$7([
     Event()
 ], RibbonColorPickerSettings.prototype, "beforeClose", void 0);
@@ -361,6 +370,9 @@ __decorate$8([
 __decorate$8([
     Property('150px')
 ], RibbonComboBoxSettings.prototype, "width", void 0);
+__decorate$8([
+    Property({})
+], RibbonComboBoxSettings.prototype, "htmlAttributes", void 0);
 __decorate$8([
     Event()
 ], RibbonComboBoxSettings.prototype, "beforeOpen", void 0);
@@ -424,6 +436,9 @@ __decorate$9([
 __decorate$9([
     Property(false)
 ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
+__decorate$9([
+    Property({})
+], RibbonDropDownSettings.prototype, "htmlAttributes", void 0);
 __decorate$9([
     Event()
 ], RibbonDropDownSettings.prototype, "beforeClose", void 0);
@@ -484,6 +499,9 @@ __decorate$10([
 __decorate$10([
     Property('')
 ], RibbonSplitButtonSettings.prototype, "target", void 0);
+__decorate$10([
+    Property({})
+], RibbonSplitButtonSettings.prototype, "htmlAttributes", void 0);
 __decorate$10([
     Event()
 ], RibbonSplitButtonSettings.prototype, "beforeClose", void 0);
@@ -559,6 +577,9 @@ __decorate$13([
 __decorate$13([
     Property(false)
 ], RibbonGroupButtonItem.prototype, "selected", void 0);
+__decorate$13([
+    Property({})
+], RibbonGroupButtonItem.prototype, "htmlAttributes", void 0);
 __decorate$13([
     Event()
 ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);
@@ -1171,6 +1192,9 @@ class RibbonButton {
             isToggle: btnSettings.isToggle,
             created: btnSettings.created
         }, buttonEle);
+        if (btnSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+        }
         buttonEle.onclick = (e) => {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(this, e);
@@ -1318,6 +1342,7 @@ class RibbonCheckBox {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
+            htmlAttributes: checkBoxSettings.htmlAttributes,
             change: (e) => {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(this, e);
@@ -1467,6 +1492,9 @@ class RibbonColorPicker {
             },
             select: colorPickerSettings.select
         }, inputEle);
+        if (colorPickerSettings.htmlAttributes) {
+            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+        }
         const wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
         EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);
@@ -1658,6 +1686,7 @@ class RibbonComboBox {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
+            htmlAttributes: comboBoxSettings.htmlAttributes,
             close: (e) => {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(this, e);
@@ -1839,6 +1868,9 @@ class RibbonDropDown {
             open: dropDownSettings.open,
             select: dropDownSettings.select
         }).appendTo(buttonEle);
+        if (dropDownSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+        }
     }
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -2276,6 +2308,9 @@ class RibbonSplitButton {
                 }
             }
         }, buttonEle);
+        if (splitButtonSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+        }
         const dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = (e) => {
             if (e.key === 'Enter') {
@@ -2774,6 +2809,32 @@ function updateTooltipProp(element, prop) {
     const control = getComponent(element, Tooltip);
     control.setProperties(prop);
 }
+/**
+ * Sets the HTML attributes of an element
+ *
+ * @param {HTMLElement} element - The HTML element for which attributes are to be updated.
+ * @param {commonProperties} attributes - An object containing key-value pairs of attributes to be updated.
+ * @returns {void}
+ * @hidden
+ */
+function setCustomAttributes(element, attributes) {
+    for (const key in attributes) {
+        if (key === 'class') {
+            const elementClass = attributes['class'].replace(/\s+/g, ' ').trim();
+            if (elementClass) {
+                addClass([element], elementClass.split(' '));
+            }
+        }
+        else if (key === 'style') {
+            const prevStyles = element.getAttribute('style') || '';
+            const value = `${prevStyles}${attributes[`${key}`]}`;
+            element.setAttribute(`${key}`, value);
+        }
+        else {
+            element.setAttribute(key, attributes[`${key}`]);
+        }
+    }
+}
 
 /**
  * Defines the items of Ribbon.
@@ -2819,6 +2880,9 @@ class RibbonGroupButton {
                     content: item.activeSize === RibbonItemSize.Small ? '' : groupBtnSettings.items[parseInt(i.toString(), 10)].content,
                     iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left'
                 }, groupButtonEle);
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes) {
+                    setCustomAttributes(groupButtonEle, groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes);
+                }
                 const buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
@@ -5005,6 +5069,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 }
             }
         }
+        const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        this.checkOverflow(this.selectedTab, activeContent);
     }
     switchLayout() {
         this.currentControlIndex = 0;
@@ -7737,5 +7803,5 @@ class RibbonBackstage extends Component {
 // export all modules from current location
 // example: export * from './module'
 
-export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_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_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, 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, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, 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_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_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, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
+export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_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_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, 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, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, 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_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, setCustomAttributes, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
 //# sourceMappingURL=ej2-ribbon.es2015.js.map