@syncfusion/ej2-ribbon 21.1.37 → 22.1.34

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

@@ -14,11 +14,11 @@ export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index:
 /**
  * Gets template content based on the template property value.
  *
- * @param {string | HTMLElement} template - Template property value.
+ * @param {string | HTMLElement| Function} template - Template property value.
  * @returns {Function} - Return template function.
  * @hidden
  */
-export declare function getTemplateFunction(template: string | HTMLElement): Function;
+export declare function getTemplateFunction(template: string | HTMLElement | Function): Function;
 /**
  * Gets the ribbon item
  *

package/src/ribbon/base/utils.js

@@ -22,7 +22,7 @@ export function getIndex(arr, condition) {
 /**
  * Gets template content based on the template property value.
  *
- * @param {string | HTMLElement} template - Template property value.
+ * @param {string | HTMLElement| Function} template - Template property value.
  * @returns {Function} - Return template function.
  * @hidden
  */
@@ -183,16 +183,21 @@ export function getItemElement(parent, id, itemProp) {
         return null;
     }
     if (parent.activeLayout === RibbonLayout.Classic) {
-        contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
-            : contentEle;
-        return contentEle.querySelector('#' + id);
+        if (itemProp.item.displayOptions & DisplayMode.Classic) {
+            contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
+                : contentEle;
+            return contentEle.querySelector('#' + id);
+        }
+        else {
+            return null;
+        }
     }
     else {
-        //Checks for Simplified and Auto options (Auto = simplified + popup)
+        //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
         var ele = (itemProp.item.displayOptions & DisplayMode.Simplified) ?
             contentEle.querySelector('#' + itemProp.item.id) : null;
         // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-        if (!ele && (DisplayMode.Simplified !== DisplayMode.None)) {
+        if (!ele) {
             var dropdown = itemProp.group.enableGroupOverflow ?
                 getComponent(contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID), DropDownButton)
                 : parent.overflowDDB;

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

@@ -62,6 +62,7 @@ var RibbonButton = /** @class */ (function () {
     RibbonButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var buttonEle = itemEle.querySelector('#' + item.id);
+        buttonEle.setAttribute('data-control', item.type.toString());
         var buttonObj = getComponent(buttonEle, Button);
         buttonObj.setProperties({ cssClass: buttonObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         buttonEle.onclick = function (e) {

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

@@ -58,6 +58,7 @@ var RibbonCheckBox = /** @class */ (function () {
     RibbonCheckBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         var checkBoxObj = getComponent(inputEle, CheckBox);
         checkBoxObj.cssClass = checkBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         checkBoxObj.dataBind();

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.
      *
@@ -62,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,25 @@ var RibbonColorPicker = /** @class */ (function () {
      * @hidden
      */
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
+        colorPickerEle.setAttribute('data-control', item.type.toString());
         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();
+            }
         };
     };
     /**
@@ -94,6 +114,7 @@ var RibbonColorPicker = /** @class */ (function () {
      * @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);
@@ -102,6 +123,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);
@@ -157,6 +184,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.js

@@ -83,13 +83,17 @@ var RibbonComboBox = /** @class */ (function () {
     RibbonComboBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         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();
+            }
         };
     };
     /**

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

@@ -9,6 +9,8 @@ export declare class RibbonDropDown {
     constructor(parent: Ribbon);
     protected getModuleName(): string;
     protected destroy(): void;
+    private itemIndex;
+    private enableRtl;
     /**
      * Creates DropDown.
      *
@@ -48,7 +50,11 @@ export declare class RibbonDropDown {
      * @returns {void}
      * @hidden
      */
-    createOverFlowDropDown(id: string, name: string, iconCss: string, groupEle: HTMLElement, overflowEle: HTMLElement): DropDownButton;
+    createOverFlowDropDown(id: string, name: string, iconCss: string, groupEle: HTMLElement, overflowEle: HTMLElement, enableRtl?: boolean): DropDownButton;
+    private keyActionHandler;
+    private handleNavigation;
+    private focusLauncherIcon;
+    private updateItemIndex;
     /**
      * Removes Overflow DropDown.
      *

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

@@ -45,7 +45,11 @@ var RibbonDropDown = /** @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) {
@@ -70,14 +74,24 @@ var RibbonDropDown = /** @class */ (function () {
     RibbonDropDown.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var dropdownElement = itemEle.querySelector('#' + item.id);
+        dropdownElement.setAttribute('data-control', item.type.toString());
         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();
+            }
         };
     };
     /**
@@ -101,6 +115,11 @@ var RibbonDropDown = /** @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.
@@ -113,10 +132,13 @@ var RibbonDropDown = /** @class */ (function () {
      * @returns {void}
      * @hidden
      */
-    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle) {
+    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle, enableRtl) {
+        var _this = this;
+        this.enableRtl = enableRtl;
         var buttonEle = this.parent.createElement('button', {
             id: id + OVERFLOW_ID + DROPDOWN_ID
         });
+        groupEle.setAttribute('tabindex', '0');
         overflowEle.appendChild(buttonEle);
         var dropdown = new DropDownButton({
             iconCss: iconCss,
@@ -132,8 +154,155 @@ var RibbonDropDown = /** @class */ (function () {
             }
         }, buttonEle);
         createTooltip(groupEle, this.parent);
+        buttonEle.onclick = buttonEle.onkeydown = function () { _this.itemIndex = 0; };
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        groupEle.onkeydown = function (e) { _this.keyActionHandler(e, groupEle), _this; };
         return dropdown;
     };
+    RibbonDropDown.prototype.keyActionHandler = function (e, target) {
+        var items = target.querySelectorAll('.e-control');
+        var comboBoxElements = target.querySelectorAll('.e-combobox');
+        var comboBoxEle;
+        if (comboBoxElements) {
+            for (var i = 0; i < comboBoxElements.length; i++) {
+                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+                }
+            }
+        }
+        if (comboBoxEle) {
+            for (var i = 0; i < items.length; i++) {
+                if (items[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
+                    if (items[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                        this.itemIndex = i;
+                    }
+                }
+            }
+        }
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+            e.target.classList.contains('e-ribbon-last-item') || e.target.classList.contains('e-ribbon-first-item')) {
+            if (e.key === 'ArrowRight' || (!e.shiftKey && e.key === 'Tab')) {
+                this.handleNavigation(e, !this.enableRtl, items);
+            }
+            if (e.key === 'ArrowLeft' || (e.shiftKey && e.key === 'Tab')) {
+                this.handleNavigation(e, this.enableRtl, items);
+            }
+        }
+    };
+    RibbonDropDown.prototype.handleNavigation = function (e, enableRtl, items) {
+        if (!(items[0].classList.contains('e-ribbon-first-item'))) {
+            items[0].classList.add('e-ribbon-first-item');
+        }
+        if (!(items[items.length - 1].classList.contains('e-ribbon-last-item'))) {
+            items[items.length - 1].classList.add('e-ribbon-last-item');
+        }
+        if (enableRtl) {
+            if (this.itemIndex === 0 && items[parseInt(this.itemIndex.toString(), 10)].classList.contains('e-ribbon-first-item')) {
+                this.updateItemIndex(e, items, true);
+            }
+            if (!e.target.classList.contains('e-combobox') && !e.target.classList.contains('e-ribbon-last-item') &&
+                !e.target.classList.contains('e-ribbon-group-container') && (e.target.classList.contains('e-ribbon-first-item')
+                || this.itemIndex !== 0) && e.target.classList.contains('e-control')) {
+                this.itemIndex++;
+                this.updateItemIndex(e, items, true);
+            }
+            if (e.target.classList.contains('e-ribbon-last-item')) {
+                var launcherIcon = false;
+                launcherIcon = this.focusLauncherIcon(e, items);
+                if (!launcherIcon) {
+                    this.itemIndex = 0;
+                    this.updateItemIndex(e, items, true);
+                }
+            }
+            if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+                this.itemIndex = 0;
+                this.updateItemIndex(e, items, true);
+            }
+        }
+        else {
+            if (!e.target.classList.contains('e-combobox') && this.itemIndex !== 0) {
+                this.itemIndex--;
+                this.updateItemIndex(e, items, false);
+            }
+            if (e.target.classList.contains('e-ribbon-first-item')) {
+                var launcherIcon = false;
+                launcherIcon = this.focusLauncherIcon(e, items);
+                if (!launcherIcon) {
+                    this.itemIndex = items.length - 1;
+                    this.updateItemIndex(e, items, false);
+                }
+            }
+            if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+                this.itemIndex = items.length - 1;
+                this.updateItemIndex(e, items, false);
+            }
+        }
+        if (e.target.classList.contains('e-combobox') && (e.key === 'Tab')) {
+            if (enableRtl) {
+                if (this.itemIndex < items.length - 1) {
+                    this.itemIndex++;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+            }
+        }
+    };
+    RibbonDropDown.prototype.focusLauncherIcon = function (e, items) {
+        var groupContainer = items[parseInt(this.itemIndex.toString(), 10)].closest('.e-ribbon-group-container');
+        var launcherIconEle;
+        if (groupContainer) {
+            launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+        }
+        if (launcherIconEle) {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+            }
+            groupContainer.querySelector('.e-ribbon-launcher-icon').focus();
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    RibbonDropDown.prototype.updateItemIndex = function (e, items, enableRtl) {
+        var ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+            if (enableRtl) {
+                if (this.itemIndex < items.length - 1) {
+                    this.itemIndex++;
+                }
+                else {
+                    var launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = 0;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+                else {
+                    var launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = items.length - 1;
+                }
+            }
+            ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        }
+        if (e.key === 'Tab') {
+            e.preventDefault();
+        }
+        items[parseInt(this.itemIndex.toString(), 10)].focus();
+    };
     /**
      * Removes Overflow DropDown.
      *
@@ -236,6 +405,7 @@ var RibbonDropDown = /** @class */ (function () {
             control.cssClass = prop.cssClass;
         }
         delete prop.close;
+        delete prop.beforeClose;
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
         }

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

@@ -43,7 +43,11 @@ var RibbonSplitButton = /** @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 () {
@@ -66,6 +70,13 @@ var RibbonSplitButton = /** @class */ (function () {
                 }
             }
         }, buttonEle);
+        var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
+        dropdownEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
         this.setContent(item, splitbutton);
         var wrapper = splitbutton['wrapper'];
         EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
@@ -83,9 +94,33 @@ var RibbonSplitButton = /** @class */ (function () {
     RibbonSplitButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var splitButtonEle = itemEle.querySelector('#' + item.id);
+        splitButtonEle.setAttribute('data-control', item.type.toString());
         var splitbutton = getComponent(splitButtonEle, SplitButton);
         splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         splitbutton.dataBind();
+        var dropdownEle = splitButtonEle.parentElement.querySelector('.e-dropdown-btn');
+        var ddbId = dropdownEle.getAttribute('id');
+        var popupEle = document.querySelector('#' + ddbId + '-popup');
+        dropdownEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
+        popupEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                splitbutton['wrapper'].classList.remove('e-ribbon-open');
+                popupEle.querySelector('.e-focused').click();
+            }
+        };
+        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);
@@ -97,7 +132,9 @@ var RibbonSplitButton = /** @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();
+            }
         };
     };
     /**
@@ -116,6 +153,11 @@ var RibbonSplitButton = /** @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);
@@ -195,6 +237,7 @@ var RibbonSplitButton = /** @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);

package/src/ribbon/models/ribbon-combobox-settings-model.d.ts

@@ -82,22 +82,25 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for the footer container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    footerTemplate?: string;
+    footerTemplate?: string | Function;
 
     /**
      * Specifies the template content for the group headers present in the popup list.
      *
      * @default null
+     * @aspType string
      */
-    groupTemplate?: string;
+    groupTemplate?: string | Function;
 
     /**
      * Specifies the template content for the header container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * Specifies the index of the selected item in the combobox.
@@ -110,15 +113,17 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for each list item present in the popup.
      *
      * @default null
+     * @aspType string
      */
-    itemTemplate?: string;
+    itemTemplate?: string | Function;
 
     /**
      * Specifies the template content for the popup list of combobox when no data is available.
      *
      * @default 'No records found'
+     * @aspType string
      */
-    noRecordsTemplate?: string;
+    noRecordsTemplate?: string | Function;
 
     /**
      * Specifies a short hint that describes the expected value of the combobox.

package/src/ribbon/models/ribbon-combobox-settings.d.ts

@@ -78,20 +78,23 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for the footer container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    footerTemplate: string;
+    footerTemplate: string | Function;
     /**
      * Specifies the template content for the group headers present in the popup list.
      *
      * @default null
+     * @aspType string
      */
-    groupTemplate: string;
+    groupTemplate: string | Function;
     /**
      * Specifies the template content for the header container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * Specifies the index of the selected item in the combobox.
      *
@@ -102,14 +105,16 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for each list item present in the popup.
      *
      * @default null
+     * @aspType string
      */
-    itemTemplate: string;
+    itemTemplate: string | Function;
     /**
      * Specifies the template content for the popup list of combobox when no data is available.
      *
      * @default 'No records found'
+     * @aspType string
      */
-    noRecordsTemplate: string;
+    noRecordsTemplate: string | Function;
     /**
      * Specifies a short hint that describes the expected value of the combobox.
      *

package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts

@@ -46,13 +46,15 @@ export interface FileMenuSettingsModel {
      * Specifies the template for file menu item.
      *
      * @default ''
+     * @aspType string
      */
-    itemTemplate?: string;
+    itemTemplate?: string | Function;
 
     /**
      * Specifies the custom content for the file menu popup.
      *
      * @default ''
+     * @aspType string
      */
     popupTemplate?: string | HTMLElement;
 

package/src/ribbon/models/ribbon-file-menu-settings.d.ts

@@ -40,12 +40,14 @@ export declare class FileMenuSettings extends ChildProperty<FileMenuSettings> {
      * Specifies the template for file menu item.
      *
      * @default ''
+     * @aspType string
      */
-    itemTemplate: string;
+    itemTemplate: string | Function;
     /**
      * Specifies the custom content for the file menu popup.
      *
      * @default ''
+     * @aspType string
      */
     popupTemplate: string | HTMLElement;
     /**