@syncfusion/ej2-ribbon 31.1.17 → 31.1.22

package/dist/ts/ribbon/items/ribbon-button.ts

@@ -1,160 +0,0 @@
-import { getComponent, merge } from '@syncfusion/ej2-base';
-import { Button } from '@syncfusion/ej2-buttons';
-import { getItem, getItemElement, itemProps, Ribbon, RibbonItemSize, setCustomAttributes } from '../base/index';
-import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, SPACE } from '../base/constant';
-import { RibbonButtonSettingsModel, RibbonItemModel } from '../models/index';
-import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-
-/**
- * Defines the items of Ribbon.
- */
-export class RibbonButton {
-    private parent: Ribbon;
-
-    constructor(parent: Ribbon) {
-        this.parent = parent;
-    }
-    protected getModuleName(): string {
-        return 'ribbonButton';
-    }
-    protected destroy(): void {
-        this.parent = null;
-    }
-
-    /**
-     * Creates button.
-     *
-     * @param {RibbonItemModel} item - Gets the ribbon item model.
-     * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @returns {void}
-     * @hidden
-     */
-    public createButton(item: RibbonItemModel, itemEle: HTMLElement): void {
-        const buttonEle: HTMLButtonElement = this.parent.createElement('button', {
-            id: item.id
-        });
-        itemEle.appendChild(buttonEle);
-        const btnSettings: RibbonButtonSettingsModel = item.buttonSettings;
-        new Button({
-            locale: this.parent.locale,
-            enableRtl: this.parent.enableRtl,
-            enablePersistence: this.parent.enablePersistence,
-            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
-            iconCss: btnSettings.iconCss,
-            disabled: item.disabled,
-            cssClass: (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + (btnSettings.cssClass ? btnSettings.cssClass : '')).trim(),
-            content: item.activeSize === RibbonItemSize.Small ? '' : btnSettings.content,
-            isPrimary: btnSettings.isPrimary,
-            isToggle: btnSettings.isToggle,
-            created: btnSettings.created
-        }, buttonEle);
-        if (btnSettings.htmlAttributes) {
-            if (btnSettings.htmlAttributes.id) {
-                delete btnSettings.htmlAttributes.id;
-            }
-            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
-        }
-        buttonEle.onclick = (e: Event) => {
-            if (btnSettings.clicked) { btnSettings.clicked.call(this, e); }
-        };
-        if (btnSettings.content) {
-            buttonEle.setAttribute('aria-label', btnSettings.content);
-        }
-        else {
-            buttonEle.setAttribute('aria-label', 'button');
-        }
-    }
-
-    /**
-     * 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 buttonEle: HTMLElement = itemEle.querySelector('#' + item.id);
-        buttonEle.setAttribute('data-control', item.type.toString());
-        const buttonObj: Button = getComponent(buttonEle, Button);
-        buttonObj.setProperties({ cssClass: buttonObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
-        buttonEle.onclick = (e: Event) => {
-            if (item.buttonSettings.clicked) { item.buttonSettings.clicked.call(this, e); }
-            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 buttonEle: HTMLElement = itemEle.querySelector('#' + item.id);
-        const buttonObj: Button = getComponent(buttonEle, Button);
-        let cssClass: string[] = buttonObj.cssClass.split(SPACE);
-        cssClass = cssClass.filter((value: string) => value !== RIBBON_POPUP_CONTROL);
-        buttonObj.setProperties({ cssClass: cssClass.join(SPACE) });
-        buttonEle.onclick = (e: Event) => {
-            if (item.buttonSettings.clicked) { item.buttonSettings.clicked.call(this, e); }
-        };
-    }
-
-    /**
-     * Triggers the click action on the button.
-     *
-     * @param {string} controlId - Gets the control ID.
-     * @returns {void}
-     */
-    public click(controlId: string): void {
-        const buttonEle: HTMLElement = getItemElement(this.parent, controlId);
-        if (!buttonEle) { return; }
-        const buttonObj: Button = getComponent(buttonEle, Button);
-        if (!buttonObj.disabled) {
-            buttonObj.click();
-        }
-    }
-    /**
-     * Updates the button properties.
-     *
-     * @param {RibbonButtonSettingsModel} prop - Gets the button property.
-     * @param {string} id - Gets the ID of button item.
-     * @returns {void}
-     */
-    public updateButton(prop: RibbonButtonSettingsModel, id: string): void {
-        const itemProp: itemProps = getItem(this.parent.tabs, id);
-        if (!itemProp) { return; }
-        merge(itemProp.item.buttonSettings, prop);
-        const buttonEle: HTMLElement = getItemElement(this.parent, id, itemProp);
-        if (!buttonEle) { return; }
-        const buttonObj: Button = getComponent(buttonEle, Button);
-        if (prop.isToggle) { buttonEle.classList.add('e-active'); }
-        if (prop.cssClass) { prop.cssClass = (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + prop.cssClass).trim(); }
-        if (prop.content) {
-            prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
-            buttonEle.setAttribute('aria-label', prop.content);
-        }
-        delete prop.clicked;
-        buttonObj.setProperties(prop);
-    }
-    /**
-     * Updates the button size.
-     *
-     * @param {HTMLElement} element - Gets the button element.
-     * @param {RibbonItemModel} item - Gets the ribbon item.
-     * @returns {void}
-     * @hidden
-     */
-    public updateButtonSize(element: HTMLElement, item: RibbonItemModel): void {
-        const buttonObj: Button = getComponent(element, Button);
-        buttonObj.setProperties({
-            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
-            content: item.activeSize === RibbonItemSize.Small ? '' : item.buttonSettings.content
-        });
-    }
-}

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

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

@@ -1,130 +0,0 @@
-import { getComponent, merge } from '@syncfusion/ej2-base';
-import { ChangeEventArgs, CheckBox } from '@syncfusion/ej2-buttons';
-import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { itemProps, Ribbon, getItem, getItemElement, RIBBON_CONTROL, SPACE, RIBBON_POPUP_CONTROL } from '../base/index';
-import { RibbonCheckBoxSettingsModel, RibbonItemModel } from '../models/index';
-
-/**
- * Defines the items of Ribbon.
- */
-export class RibbonCheckBox {
-    private parent: Ribbon;
-
-    constructor(parent: Ribbon) {
-        this.parent = parent;
-    }
-    protected getModuleName(): string {
-        return 'ribbonCheckBox';
-    }
-    protected destroy(): void {
-        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
-     */
-    public createCheckBox(item: RibbonItemModel, itemEle: HTMLElement): void {
-        const inputEle: HTMLInputElement = this.parent.createElement('input', {
-            id: item.id
-        });
-        itemEle.appendChild(inputEle);
-        const checkBoxSettings: RibbonCheckBoxSettingsModel = item.checkBoxSettings;
-        if (checkBoxSettings.htmlAttributes) {
-            if (checkBoxSettings.htmlAttributes.id) {
-                delete checkBoxSettings.htmlAttributes.id;
-            }
-        }
-        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,
-            htmlAttributes: checkBoxSettings.htmlAttributes,
-            change: (e: ChangeEventArgs) => {
-                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
-     */
-    public addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void {
-        const inputEle: HTMLElement = itemEle.querySelector('#' + item.id);
-        inputEle.setAttribute('data-control', item.type.toString());
-        const checkBoxObj: CheckBox = getComponent(inputEle, CheckBox);
-        checkBoxObj.cssClass = checkBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL;
-        checkBoxObj.dataBind();
-        checkBoxObj.change = (e: ChangeEventArgs) => {
-            if (item.checkBoxSettings.change) { item.checkBoxSettings.change.call(this, e); }
-            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 inputEle: HTMLElement = itemEle.querySelector('#' + item.id);
-        const checkBoxObj: CheckBox = getComponent(inputEle, CheckBox);
-        let cssClass: string[] = checkBoxObj.cssClass.split(SPACE);
-        cssClass = cssClass.filter((value: string) => value !== RIBBON_POPUP_CONTROL);
-        checkBoxObj.cssClass = cssClass.join(SPACE);
-        checkBoxObj.dataBind();
-        checkBoxObj.change = (e: ChangeEventArgs) => {
-            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}
-     */
-    public click(controlId: string): void {
-        const inputEle: HTMLElement = getItemElement(this.parent, controlId);
-        if (!inputEle) { return; }
-        const checkBoxObj: CheckBox = getComponent(inputEle, CheckBox);
-        if (!checkBoxObj.disabled) {
-            checkBoxObj.click();
-        }
-    }
-    /**
-     * Updates the checkbox.
-     *
-     * @param {RibbonCheckBoxSettingsModel} prop - Gets the checkbox property.
-     * @param {string} id - Gets the ID of checkbox.
-     * @returns {void}
-     */
-    public updateCheckBox(prop: RibbonCheckBoxSettingsModel, id: string): void {
-        const itemProp: itemProps = getItem(this.parent.tabs, id);
-        if (!itemProp) { return; }
-        merge(itemProp.item.checkBoxSettings, 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.change;
-        const checkBoxObj: CheckBox = getComponent(inputEle, CheckBox);
-        checkBoxObj.setProperties(prop);
-    }
-}

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

@@ -1,72 +0,0 @@
-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;
-    private toggleWrapperHover;
-    /**
-     * 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 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;
-    /**
-     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
-     * @returns {void}
-     * @hidden
-     */
-    unwireColorPickerEvents(element: HTMLElement): void;
-}

package/dist/ts/ribbon/items/ribbon-colorpicker.ts

@@ -1,228 +0,0 @@
-import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
-import { ColorPicker } from '@syncfusion/ej2-inputs';
-import { itemProps, Ribbon, getItem, getItemElement, setCustomAttributes } from '../base/index';
-import { RibbonItemModel, RibbonColorPickerSettingsModel } from '../models/index';
-import { RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE } from '../base/constant';
-import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
-import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
-
-/**
- * Defines the items of Ribbon.
- */
-export class RibbonColorPicker {
-    private parent: Ribbon;
-
-    constructor(parent: Ribbon) {
-        this.parent = parent;
-    }
-    protected getModuleName(): string {
-        return 'ribbonColorPicker';
-    }
-    protected destroy(): void {
-        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
-     */
-    public createColorPicker(item: RibbonItemModel, itemEle: HTMLElement): void {
-        const inputEle: HTMLInputElement = this.parent.createElement('input', {
-            id: item.id
-        });
-        itemEle.appendChild(inputEle);
-        const colorPickerSettings: RibbonColorPickerSettingsModel = item.colorPickerSettings;
-        const colorPicker: 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: () => {
-                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: (e: ChangeEventArgs) => {
-                colorPickerSettings.value = e.value.toString();
-                if (colorPickerSettings.change) {
-                    colorPickerSettings.change.call(this, e);
-                }
-            },
-            open: () => {
-                colorPicker.element.parentElement.classList.add(RIBBON_POPUP_OPEN);
-                if (colorPickerSettings.open) {
-                    colorPickerSettings.open.call(this);
-                }
-            },
-            select: colorPickerSettings.select
-        }, inputEle);
-        if (colorPickerSettings.htmlAttributes) {
-            if (colorPickerSettings.htmlAttributes.id) {
-                delete colorPickerSettings.htmlAttributes.id;
-            }
-            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
-        }
-        const wrapper: HTMLElement = 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);
-    }
-
-    private toggleWrapperHover(wrapper: HTMLElement, isAdd: boolean): void {
-        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.
-     *
-     * @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 colorPickerSettings: RibbonColorPickerSettingsModel = item.colorPickerSettings;
-        if (colorPickerSettings.label && this.parent.activeLayout === 'Simplified') {
-            const label: HTMLElement = this.parent.createElement('div', {
-                className: 'e-ribbon-colorpicker-label',
-                id: item.id + '_label',
-                innerHTML: colorPickerSettings.label
-            });
-            itemEle.insertBefore(label, itemEle.firstChild);
-        }
-        const colorPickerEle: HTMLElement = itemEle.querySelector('#' + item.id);
-        colorPickerEle.setAttribute('data-control', item.type.toString());
-        const colorPickerObj: ColorPicker = 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.
-        const splitBtn: SplitButton = (colorPickerObj['splitBtn'] as SplitButton);
-        let target: HTMLElement;
-        colorPickerObj.beforeClose = (e: BeforeOpenCloseMenuEventArgs) => {
-            target = e.event ? e.event.target as HTMLElement : null;
-            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
-            if (item.colorPickerSettings.beforeClose) {
-                item.colorPickerSettings.beforeClose.call(this);
-            }
-        };
-        splitBtn.close = () => {
-            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 colorPickerSettings: RibbonColorPickerSettingsModel = item.colorPickerSettings;
-        if (colorPickerSettings.label) {
-            const label: HTMLElement = itemEle.querySelector('#' + item.id + '_label');
-            if (label) {
-                label.remove();
-            }
-        }
-        const colorPickerEle: HTMLElement = itemEle.querySelector('#' + item.id);
-        const colorPickerObj: ColorPicker = getComponent(colorPickerEle, ColorPicker);
-        let cssClass: string[] = colorPickerObj.cssClass.split(SPACE);
-        cssClass = cssClass.filter((value: string) => value !== RIBBON_POPUP_CONTROL);
-        colorPickerObj.setProperties({ cssClass: cssClass.join(SPACE) });
-        const splitBtn: SplitButton = (colorPickerObj['splitBtn'] as SplitButton);
-        //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 = () => {
-            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
-            if (item.colorPickerSettings.beforeClose) {
-                item.colorPickerSettings.beforeClose.call(this);
-            }
-        };
-    }
-
-    private getColorPickerObj(controlId: string): ColorPicker {
-        const inputEle: HTMLElement = 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.
-     */
-    public getValue(controlId: string, value?: string, type?: string): string {
-        const colorPickerObj: ColorPicker = 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.
-     */
-    public toggle(controlId: string): void {
-        const colorPickerObj: ColorPicker = this.getColorPickerObj(controlId);
-        if (!colorPickerObj) { return; }
-        if (!colorPickerObj.disabled) {
-            colorPickerObj.toggle();
-        }
-    }
-    /**
-     * Updates the colorpicker properties.
-     *
-     * @param {RibbonColorPickerSettingsModel} prop - Gets the colorpicker property.
-     * @param {string} id - Gets the ID of colorpicker.
-     * @returns {void}
-     */
-    public updateColorPicker(prop: RibbonColorPickerSettingsModel, id: string): void {
-        const itemProp: itemProps = getItem(this.parent.tabs, id);
-        if (!itemProp) { return; }
-        merge(itemProp.item.checkBoxSettings, 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.beforeClose;
-        delete prop.open;
-        const colorPickerObj: ColorPicker = getComponent(inputEle, ColorPicker);
-        colorPickerObj.setProperties(prop);
-    }
-
-    /**
-     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
-     * @returns {void}
-     * @hidden
-     */
-    public unwireColorPickerEvents(element: HTMLElement): void {
-        const colorPickerObj: ColorPicker = getComponent(element, ColorPicker);
-        const wrapper: HTMLElement = colorPickerObj.element.parentElement;
-        EventHandler.remove(wrapper, 'mouseenter', this.toggleWrapperHover);
-        EventHandler.remove(wrapper, 'mouseleave', this.toggleWrapperHover);
-    }
-}