@syncfusion/ej2-ribbon 30.1.42 → 31.1.17

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

@@ -0,0 +1,77 @@
+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.
+     * @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/dist/ts/ribbon/items/ribbon-combobox.ts

@@ -0,0 +1,201 @@
+import { getComponent, merge } from '@syncfusion/ej2-base';
+import { ComboBox, FieldSettingsModel, PopupEventArgs } from '@syncfusion/ej2-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+import { RibbonComboBoxSettingsModel, RibbonItemModel } from '../models/index';
+import { itemProps, getItem, Ribbon, getItemElement, RIBBON_CONTROL, SPACE, RIBBON_POPUP_CONTROL } from '../base/index';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+
+/**
+ * Defines the items of Ribbon.
+ */
+export class RibbonComboBox {
+    private parent: Ribbon;
+
+    constructor(parent: Ribbon) {
+        this.parent = parent;
+    }
+    protected getModuleName(): string {
+        return 'ribbonComboBox';
+    }
+    protected destroy(): void {
+        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
+     */
+    public createComboBox(item: RibbonItemModel, itemEle: HTMLElement): void {
+        const inputEle: HTMLInputElement = this.parent.createElement('input', {
+            id: item.id
+        });
+        itemEle.appendChild(inputEle);
+        const comboBoxSettings: RibbonComboBoxSettingsModel = item.comboBoxSettings;
+        if (comboBoxSettings.htmlAttributes) {
+            if (comboBoxSettings.htmlAttributes.id) {
+                delete comboBoxSettings.htmlAttributes.id;
+            }
+        }
+        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 as string | Function,
+            groupTemplate: comboBoxSettings.groupTemplate as string | Function,
+            headerTemplate: comboBoxSettings.headerTemplate as string | Function,
+            index: comboBoxSettings.index,
+            itemTemplate: comboBoxSettings.itemTemplate as string | Function,
+            noRecordsTemplate: comboBoxSettings.noRecordsTemplate as string | Function,
+            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,
+            htmlAttributes: comboBoxSettings.htmlAttributes,
+            close: (e: PopupEventArgs) => {
+                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
+     */
+    public addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void {
+        const comboBoxSettings: RibbonComboBoxSettingsModel = item.comboBoxSettings;
+        if (comboBoxSettings.label && this.parent.activeLayout === 'Simplified') {
+            const label: HTMLElement = this.parent.createElement('div', {
+                className: 'e-ribbon-combobox-label',
+                id: item.id + '_label',
+                innerHTML: comboBoxSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
+        const inputEle: HTMLElement = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
+        const comboBoxObj: ComboBox = getComponent(inputEle, ComboBox);
+        comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
+        comboBoxObj.close = (e: PopupEventArgs) => {
+            const target: HTMLElement = (e.event as MouseEvent) ? (e.event as MouseEvent).target as HTMLElement : null;
+            if (item.comboBoxSettings.close) { item.comboBoxSettings.close.call(this, e); }
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                if (overflowButton.element.classList.contains('e-active')) {
+                    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.
+     * @returns {void}
+     * @hidden
+     */
+    public removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void {
+        const comboBoxSettings: RibbonComboBoxSettingsModel = item.comboBoxSettings;
+        if (comboBoxSettings.label) {
+            const label: HTMLElement = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
+        const inputEle: HTMLElement = itemEle.querySelector('#' + item.id);
+        const comboBoxObj: ComboBox = getComponent(inputEle, ComboBox);
+        let cssClass: string[] = comboBoxObj.cssClass.split(SPACE);
+        cssClass = cssClass.filter((value: string) => value !== RIBBON_POPUP_CONTROL);
+        comboBoxObj.setProperties({ cssClass: cssClass.join(SPACE) });
+        comboBoxObj.close = (e: PopupEventArgs) => {
+            if (item.comboBoxSettings.close) { item.comboBoxSettings.close.call(this, e); }
+        };
+    }
+    private getComboBoxObj(controlId: string): ComboBox {
+        const inputEle: HTMLElement = 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}
+     */
+    public filter(
+        controlId: string,
+        dataSource: { [key: string]: Object }[] | string[] | number[] | boolean[],
+        query?: Query, fields?: FieldSettingsModel): void {
+        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}
+     */
+    public hidePopup(controlId: string): void {
+        const comboBoxObj: ComboBox = 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}
+     */
+    public showPopup(controlId: string): void {
+        const comboBoxObj: ComboBox = 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}
+     */
+    public updateComboBox(prop: RibbonComboBoxSettingsModel, id: string): void {
+        const itemProp: itemProps = getItem(this.parent.tabs, id);
+        if (!itemProp) { return; }
+        merge(itemProp.item.comboBoxSettings, prop);
+        const inputEle: HTMLElement = getItemElement(this.parent, id, itemProp);
+        if (!inputEle) { return; }
+        if (prop.cssClass) { prop.cssClass = (RIBBON_CONTROL + SPACE + prop.cssClass).trim(); }
+        delete prop.close;
+        const comboBoxObj: ComboBox = getComponent(inputEle, ComboBox);
+        comboBoxObj.setProperties(prop);
+    }
+}

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

@@ -0,0 +1,128 @@
+import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
+import { Ribbon, itemProps } from '../base/index';
+import { RibbonDropDownSettingsModel, RibbonItemModel } from '../models/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonDropDown {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    private itemIndex;
+    private enableRtl;
+    /**
+     * Creates DropDown.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createDropDown(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.
+     * @returns {void}
+     * @hidden
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Creates Overflow DropDown.
+     *
+     * @param {string} id - Gets the ID of the dropdown item.
+     * @param {string} name - Gets the name of the dropdown item.
+     * @param {string} iconCss - Gets the icon of the dropdown item.
+     * @param {HTMLElement} groupEle - Gets the overflow group element.
+     * @param {HTMLElement} overflowEle - Gets the overflow element.
+     * @returns {void}
+     * @hidden
+     */
+    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.
+     *
+     * @param {HTMLElement} dropdownElement - Gets the ribbon DropDown element.
+     * @returns {void}
+     * @hidden
+     */
+    removeOverFlowDropDown(dropdownElement: HTMLElement): void;
+    /**
+     * Gets DropDown item element.
+     *
+     * @param {HTMLElement} dropdownElement - Gets the ribbon DropDown element.
+     * @param {string} id - Gets the ID of ribbon DropDown element.
+     * @returns {HTMLElement} - Returns the DropDown item element.
+     * @hidden
+     */
+    getDDBItemElement(dropdownElement: HTMLElement, id: string): HTMLElement;
+    /**
+     * Gets Overflow DropDown Popup.
+     *
+     * @param {itemProps} itemProp - Gets the property of ribbon item.
+     * @param {HTMLElement} contentEle - Gets the content element.
+     * @returns {HTMLElement} - Returns the Overflow DropDown Popup.
+     * @hidden
+     */
+    getOverflowDropDownPopup(itemProp: itemProps, contentEle: HTMLElement): HTMLElement;
+    private getDropDownObj;
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the DropDown items.
+     * @param {string} text - Gets the text of the dropdown item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    addItems(controlId: string, Items: ItemModel[], text?: string): void;
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    removeItems(controlId: string, Items: string[], isUniqueId?: boolean): void;
+    /**
+     * To open/close DropDownButton popup based on current state of the DropDownButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    toggle(controlId: string): void;
+    /**
+     * Updates the dropdown.
+     *
+     * @param {RibbonDropDownSettingsModel} prop - Gets the dropdown property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    updateDropDown(prop: RibbonDropDownSettingsModel, id: string): void;
+    /**
+     * Updated DropDown size
+     *
+     * @param {HTMLElement} element - Gets the dropdown element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    updateDropDownSize(element: HTMLElement, item: RibbonItemModel): void;
+}