@syncfusion/ej2-ribbon 21.1.35

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

@@ -0,0 +1,56 @@
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+import { Ribbon } from '../base/index';
+import { RibbonCheckBoxSettingsModel, RibbonItemModel } from '../models/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonCheckBox {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates the check box.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createCheckBox(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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
+     */
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Triggers the click action on the Checkbox.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    click(controlId: string): void;
+    /**
+     * Updates the checkbox.
+     *
+     * @param {RibbonCheckBoxSettingsModel} prop - Gets the checkbox property.
+     * @param {string} id - Gets the ID of checkbox.
+     * @returns {void}
+     */
+    updateCheckBox(prop: RibbonCheckBoxSettingsModel, id: string): void;
+}

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

@@ -0,0 +1,134 @@
+import { getComponent, merge } from '@syncfusion/ej2-base';
+import { CheckBox } from '@syncfusion/ej2-buttons';
+import { getItem, getItemElement, RIBBON_CONTROL, SPACE, RIBBON_POPUP_CONTROL } from '../base/index';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonCheckBox = /** @class */ (function () {
+    function RibbonCheckBox(parent) {
+        this.parent = parent;
+    }
+    RibbonCheckBox.prototype.getModuleName = function () {
+        return 'ribbonCheckBox';
+    };
+    RibbonCheckBox.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates the check box.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonCheckBox.prototype.createCheckBox = function (item, itemEle) {
+        var _this = this;
+        var inputEle = this.parent.createElement('input', {
+            id: item.id
+        });
+        itemEle.appendChild(inputEle);
+        var checkBoxSettings = item.checkBoxSettings;
+        new CheckBox({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            checked: checkBoxSettings.checked,
+            cssClass: (RIBBON_CONTROL + SPACE + (checkBoxSettings.cssClass ? checkBoxSettings.cssClass : '')).trim(),
+            label: checkBoxSettings.label,
+            labelPosition: checkBoxSettings.labelPosition,
+            disabled: item.disabled,
+            created: checkBoxSettings.created,
+            change: function (e) {
+                if (checkBoxSettings.change) {
+                    checkBoxSettings.change.call(_this, e);
+                }
+            }
+        }, inputEle);
+    };
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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
+     */
+    RibbonCheckBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
+        var inputEle = itemEle.querySelector('#' + item.id);
+        var checkBoxObj = getComponent(inputEle, CheckBox);
+        checkBoxObj.cssClass = checkBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL;
+        checkBoxObj.dataBind();
+        checkBoxObj.change = function (e) {
+            if (item.checkBoxSettings.change) {
+                item.checkBoxSettings.change.call(_this, e);
+            }
+            overflowButton.toggle();
+        };
+    };
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    RibbonCheckBox.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
+        var inputEle = itemEle.querySelector('#' + item.id);
+        var checkBoxObj = getComponent(inputEle, CheckBox);
+        var cssClass = checkBoxObj.cssClass.split(SPACE);
+        cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
+        checkBoxObj.cssClass = cssClass.join(SPACE);
+        checkBoxObj.dataBind();
+        checkBoxObj.change = function (e) {
+            if (item.checkBoxSettings.change) {
+                item.checkBoxSettings.change.call(_this, e);
+            }
+        };
+    };
+    /**
+     * Triggers the click action on the Checkbox.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    RibbonCheckBox.prototype.click = function (controlId) {
+        var inputEle = getItemElement(this.parent, controlId);
+        if (!inputEle) {
+            return;
+        }
+        var checkBoxObj = getComponent(inputEle, CheckBox);
+        checkBoxObj.click();
+    };
+    /**
+     * Updates the checkbox.
+     *
+     * @param {RibbonCheckBoxSettingsModel} prop - Gets the checkbox property.
+     * @param {string} id - Gets the ID of checkbox.
+     * @returns {void}
+     */
+    RibbonCheckBox.prototype.updateCheckBox = function (prop, id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        if (!itemProp) {
+            return;
+        }
+        merge(itemProp.item.checkBoxSettings, prop);
+        var inputEle = getItemElement(this.parent, id, itemProp);
+        if (!inputEle) {
+            return;
+        }
+        if (prop.cssClass) {
+            prop.cssClass = (RIBBON_CONTROL + SPACE + prop.cssClass).trim();
+        }
+        delete prop.change;
+        var checkBoxObj = getComponent(inputEle, CheckBox);
+        checkBoxObj.setProperties(prop);
+    };
+    return RibbonCheckBox;
+}());
+export { RibbonCheckBox };

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

@@ -0,0 +1,66 @@
+import { Ribbon } from '../base/index';
+import { RibbonItemModel, RibbonColorPickerSettingsModel } from '../models/index';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonColorPicker {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates the colorpicker.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createColorPicker(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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
+     */
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private getColorPickerObj;
+    /**
+     * Gets color value in specified type.
+     *
+     * @param {string} controlId -Gets the control ID.
+     * @param {string} value - Specify the color value.
+     * @param {string} type - Specify the type to which the specified color needs to be converted.
+     * @returns {string} - Returns string.
+     */
+    getValue(controlId: string, value?: string, type?: string): string;
+    /**
+     * To show/hide ColorPicker popup based on current state of the SplitButton.
+     *
+     * @param {string} controlId - set the id of the control.
+     * @returns {void} - Returns void.
+     */
+    toggle(controlId: string): void;
+    /**
+     * Updates the colorpicker properties.
+     *
+     * @param {RibbonColorPickerSettingsModel} prop - Gets the colorpicker property.
+     * @param {string} id - Gets the ID of colorpicker.
+     * @returns {void}
+     */
+    updateColorPicker(prop: RibbonColorPickerSettingsModel, id: string): void;
+}

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

@@ -0,0 +1,163 @@
+import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
+import { ColorPicker } from '@syncfusion/ej2-inputs';
+import { getItem, getItemElement } from '../base/index';
+import { RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE } from '../base/constant';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonColorPicker = /** @class */ (function () {
+    function RibbonColorPicker(parent) {
+        this.parent = parent;
+    }
+    RibbonColorPicker.prototype.getModuleName = function () {
+        return 'ribbonColorPicker';
+    };
+    RibbonColorPicker.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates the colorpicker.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonColorPicker.prototype.createColorPicker = function (item, itemEle) {
+        var _this = this;
+        var inputEle = this.parent.createElement('input', {
+            id: item.id
+        });
+        itemEle.appendChild(inputEle);
+        var colorPickerSettings = item.colorPickerSettings;
+        var colorPicker = new ColorPicker({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            columns: colorPickerSettings.columns,
+            cssClass: (RIBBON_CONTROL + SPACE + (colorPickerSettings.cssClass ? colorPickerSettings.cssClass : '')).trim(),
+            disabled: item.disabled,
+            enableOpacity: colorPickerSettings.enableOpacity,
+            mode: colorPickerSettings.mode,
+            modeSwitcher: colorPickerSettings.modeSwitcher,
+            noColor: colorPickerSettings.noColor,
+            presetColors: colorPickerSettings.presetColors,
+            showButtons: colorPickerSettings.showButtons,
+            value: colorPickerSettings.value,
+            beforeClose: function () {
+                colorPicker.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+                if (colorPickerSettings.beforeClose) {
+                    colorPickerSettings.beforeClose.call(_this);
+                }
+            },
+            beforeOpen: colorPickerSettings.beforeOpen,
+            beforeTileRender: colorPickerSettings.beforeTileRender,
+            created: colorPickerSettings.created,
+            change: colorPickerSettings.change,
+            open: function () {
+                colorPicker.element.parentElement.classList.add(RIBBON_POPUP_OPEN);
+                if (colorPickerSettings.open) {
+                    colorPickerSettings.open.call(_this);
+                }
+            },
+            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);
+    };
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        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'];
+        splitBtn.close = function () {
+            overflowButton.toggle();
+        };
+    };
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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 colorPickerEle = itemEle.querySelector('#' + item.id);
+        var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
+        var cssClass = colorPickerObj.cssClass.split(SPACE);
+        cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
+        colorPickerObj.setProperties({ cssClass: cssClass.join(SPACE) });
+        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;
+    };
+    RibbonColorPicker.prototype.getColorPickerObj = function (controlId) {
+        var inputEle = getItemElement(this.parent, controlId);
+        return inputEle ? getComponent(inputEle, ColorPicker) : null;
+    };
+    /**
+     * Gets color value in specified type.
+     *
+     * @param {string} controlId -Gets the control ID.
+     * @param {string} value - Specify the color value.
+     * @param {string} type - Specify the type to which the specified color needs to be converted.
+     * @returns {string} - Returns string.
+     */
+    RibbonColorPicker.prototype.getValue = function (controlId, value, type) {
+        var colorPickerObj = this.getColorPickerObj(controlId);
+        return colorPickerObj ? colorPickerObj.getValue(value, type) : '';
+    };
+    /**
+     * To show/hide ColorPicker popup based on current state of the SplitButton.
+     *
+     * @param {string} controlId - set the id of the control.
+     * @returns {void} - Returns void.
+     */
+    RibbonColorPicker.prototype.toggle = function (controlId) {
+        var colorPickerObj = this.getColorPickerObj(controlId);
+        if (!colorPickerObj) {
+            return;
+        }
+        colorPickerObj.toggle();
+    };
+    /**
+     * Updates the colorpicker properties.
+     *
+     * @param {RibbonColorPickerSettingsModel} prop - Gets the colorpicker property.
+     * @param {string} id - Gets the ID of colorpicker.
+     * @returns {void}
+     */
+    RibbonColorPicker.prototype.updateColorPicker = function (prop, id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        if (!itemProp) {
+            return;
+        }
+        merge(itemProp.item.checkBoxSettings, prop);
+        var inputEle = getItemElement(this.parent, id, itemProp);
+        if (!inputEle) {
+            return;
+        }
+        if (prop.cssClass) {
+            prop.cssClass = (RIBBON_CONTROL + SPACE + prop.cssClass).trim();
+        }
+        delete prop.beforeClose;
+        delete prop.open;
+        var colorPickerObj = getComponent(inputEle, ColorPicker);
+        colorPickerObj.setProperties(prop);
+    };
+    return RibbonColorPicker;
+}());
+export { RibbonColorPicker };

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

@@ -0,0 +1,78 @@
+import { FieldSettingsModel } from '@syncfusion/ej2-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+import { RibbonComboBoxSettingsModel, RibbonItemModel } from '../models/index';
+import { Ribbon } from '../base/index';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonComboBox {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates the combobox.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createComboBox(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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
+     */
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private getComboBoxObj;
+    /**
+     * To filter the data from given data source by using query
+     *
+     * @param  {string } controlId - set the id of the control in which methods needs to be called.
+     * @param  {Object[] } dataSource - Set the data source to filter.
+     * @param  {Query} query - Specify the query to filter the data.
+     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @returns {void}
+     */
+    filter(controlId: string, dataSource: {
+        [key: string]: Object;
+    }[] | string[] | number[] | boolean[], query?: Query, fields?: FieldSettingsModel): void;
+    /**
+     * To open/close DropDownButton popup based on current state of the combobox.
+     *
+     * @param {string} controlId - Gets the id of the control.
+     * @returns {void}
+     */
+    hidePopup(controlId: string): void;
+    /**
+     * To open/close DropDownButton popup based on current state of the combobox.
+     *
+     * @param {string} controlId - Gets the id of the control.
+     * @returns {void}
+     */
+    showPopup(controlId: string): void;
+    /**
+     * Updates the combobox properties.
+     *
+     * @param {RibbonComboBoxSettingsModel} prop - Gets the combobox property.
+     * @param {string} id - Gets the ID of combobox.
+     * @returns {void}
+     */
+    updateComboBox(prop: RibbonComboBoxSettingsModel, id: string): void;
+}

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

@@ -0,0 +1,185 @@
+import { getComponent, merge } from '@syncfusion/ej2-base';
+import { ComboBox } from '@syncfusion/ej2-dropdowns';
+import { getItem, getItemElement, RIBBON_CONTROL, SPACE, RIBBON_POPUP_CONTROL } from '../base/index';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonComboBox = /** @class */ (function () {
+    function RibbonComboBox(parent) {
+        this.parent = parent;
+    }
+    RibbonComboBox.prototype.getModuleName = function () {
+        return 'ribbonComboBox';
+    };
+    RibbonComboBox.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates the combobox.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonComboBox.prototype.createComboBox = function (item, itemEle) {
+        var _this = this;
+        var inputEle = this.parent.createElement('input', {
+            id: item.id
+        });
+        itemEle.appendChild(inputEle);
+        var comboBoxSettings = item.comboBoxSettings;
+        new ComboBox({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            allowCustom: false,
+            floatLabelType: 'Never',
+            ignoreAccent: true,
+            ignoreCase: true,
+            allowFiltering: comboBoxSettings.allowFiltering,
+            autofill: comboBoxSettings.autofill,
+            cssClass: (RIBBON_CONTROL + SPACE + (comboBoxSettings.cssClass ? comboBoxSettings.cssClass : '')).trim(),
+            dataSource: comboBoxSettings.dataSource,
+            enabled: !item.disabled,
+            fields: comboBoxSettings.fields,
+            filterType: comboBoxSettings.filterType,
+            footerTemplate: comboBoxSettings.footerTemplate,
+            groupTemplate: comboBoxSettings.groupTemplate,
+            headerTemplate: comboBoxSettings.headerTemplate,
+            index: comboBoxSettings.index,
+            itemTemplate: comboBoxSettings.itemTemplate,
+            noRecordsTemplate: comboBoxSettings.noRecordsTemplate,
+            placeholder: comboBoxSettings.placeholder,
+            popupHeight: comboBoxSettings.popupHeight,
+            popupWidth: comboBoxSettings.popupWidth,
+            showClearButton: comboBoxSettings.showClearButton,
+            sortOrder: comboBoxSettings.sortOrder,
+            text: comboBoxSettings.text,
+            value: comboBoxSettings.value,
+            width: comboBoxSettings.width,
+            beforeOpen: comboBoxSettings.beforeOpen,
+            open: comboBoxSettings.open,
+            close: function (e) {
+                if (comboBoxSettings.close) {
+                    comboBoxSettings.close.call(_this, e);
+                }
+            },
+            filtering: comboBoxSettings.filtering,
+            change: comboBoxSettings.change,
+            select: comboBoxSettings.select,
+            created: comboBoxSettings.created
+        }, inputEle);
+    };
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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
+     */
+    RibbonComboBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
+        var inputEle = itemEle.querySelector('#' + item.id);
+        var comboBoxObj = getComponent(inputEle, ComboBox);
+        comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
+        comboBoxObj.close = function (e) {
+            if (item.comboBoxSettings.close) {
+                item.comboBoxSettings.close.call(_this, e);
+            }
+            overflowButton.toggle();
+        };
+    };
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    RibbonComboBox.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
+        var inputEle = itemEle.querySelector('#' + item.id);
+        var comboBoxObj = getComponent(inputEle, ComboBox);
+        var cssClass = comboBoxObj.cssClass.split(SPACE);
+        cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
+        comboBoxObj.setProperties({ cssClass: cssClass.join(SPACE) });
+        comboBoxObj.close = function (e) {
+            if (item.comboBoxSettings.close) {
+                item.comboBoxSettings.close.call(_this, e);
+            }
+        };
+    };
+    RibbonComboBox.prototype.getComboBoxObj = function (controlId) {
+        var inputEle = getItemElement(this.parent, controlId);
+        return inputEle ? getComponent(inputEle, ComboBox) : null;
+    };
+    /**
+     * To filter the data from given data source by using query
+     *
+     * @param  {string } controlId - set the id of the control in which methods needs to be called.
+     * @param  {Object[] } dataSource - Set the data source to filter.
+     * @param  {Query} query - Specify the query to filter the data.
+     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @returns {void}
+     */
+    RibbonComboBox.prototype.filter = function (controlId, dataSource, query, fields) {
+        this.getComboBoxObj(controlId).filter(dataSource, query, fields);
+    };
+    /**
+     * To open/close DropDownButton popup based on current state of the combobox.
+     *
+     * @param {string} controlId - Gets the id of the control.
+     * @returns {void}
+     */
+    RibbonComboBox.prototype.hidePopup = function (controlId) {
+        var comboBoxObj = this.getComboBoxObj(controlId);
+        if (!comboBoxObj) {
+            return;
+        }
+        comboBoxObj.hidePopup();
+    };
+    /**
+     * To open/close DropDownButton popup based on current state of the combobox.
+     *
+     * @param {string} controlId - Gets the id of the control.
+     * @returns {void}
+     */
+    RibbonComboBox.prototype.showPopup = function (controlId) {
+        var comboBoxObj = this.getComboBoxObj(controlId);
+        if (!comboBoxObj) {
+            return;
+        }
+        comboBoxObj.showPopup();
+    };
+    /**
+     * Updates the combobox properties.
+     *
+     * @param {RibbonComboBoxSettingsModel} prop - Gets the combobox property.
+     * @param {string} id - Gets the ID of combobox.
+     * @returns {void}
+     */
+    RibbonComboBox.prototype.updateComboBox = function (prop, id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        if (!itemProp) {
+            return;
+        }
+        merge(itemProp.item.comboBoxSettings, prop);
+        var inputEle = getItemElement(this.parent, id, itemProp);
+        if (!inputEle) {
+            return;
+        }
+        if (prop.cssClass) {
+            prop.cssClass = (RIBBON_CONTROL + SPACE + prop.cssClass).trim();
+        }
+        delete prop.close;
+        var comboBoxObj = getComponent(inputEle, ComboBox);
+        comboBoxObj.setProperties(prop);
+    };
+    return RibbonComboBox;
+}());
+export { RibbonComboBox };