@syncfusion/ej2-filemanager 31.1.17 → 31.1.21

package/dist/ts/file-manager/actions/toolbar.ts

@@ -1,609 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Toolbar as BaseToolbar, ItemModel, ClickEventArgs, MenuEventArgs, DisplayMode } from '@syncfusion/ej2-navigations';
-import { select, isNullOrUndefined as isNOU, closest, selectAll } from '@syncfusion/ej2-base';
-import { createDialog } from '../pop-up/dialog';
-import * as events from '../base/constant';
-import * as CLS from '../base/classes';
-import { IFileManager, NotifyArgs, ToolbarClickEventArgs, ToolbarCreateEventArgs } from '../base/interface';
-import { refresh, getPathObject, getLocaleText, getCssClass, sortbyClickHandler } from '../common/utility';
-import { createDeniedDialog, updateLayout } from '../common/utility';
-import { GetDetails } from '../common/operations';
-import { DropDownButton, ItemModel as SplitButtonItemModel } from '@syncfusion/ej2-splitbuttons';
-import { cutFiles, copyFiles, pasteHandler, hasEditAccess } from '../common/index';
-import { doDownload, createNewFolder, uploadItem } from '../common/index';
-import { ToolbarItem, ToolbarItemModel } from '../models';
-
-/**
- * Toolbar module
- */
-export class Toolbar {
-
-    /* Internal variables */
-    private parent: IFileManager;
-    private items: ItemModel[];
-    private buttonObj: DropDownButton;
-    private layoutBtnObj: DropDownButton;
-    private default: string[] = ['Delete', 'Rename', 'Download', 'Cut', 'Copy', 'Paste'];
-    private single: string[] = ['Delete', 'Rename', 'Download', 'Cut', 'Copy'];
-    private multiple: string[] = ['Delete', 'Download', 'Cut', 'Copy', 'Refresh'];
-    private selection: string[] = ['NewFolder', 'Upload', 'SortBy', 'Refresh'];
-
-    /* public variable */
-    public toolbarObj: BaseToolbar;
-
-    /**
-     * Constructor for the Toolbar module
-     *
-     * @hidden
-     * @param {IFileManager} parent - specifies the parent element.
-     * @private
-     */
-    constructor(parent?: IFileManager) {
-        this.parent = parent;
-        this.render();
-        this.addEventListener();
-    }
-
-    private render(): void {
-        this.items = this.toolbarItemData(this.getItems(this.parent.toolbarSettings.items.map((item: string) => item.trim())));
-        const eventArgs: ToolbarCreateEventArgs = { items: this.items };
-        this.parent.trigger('toolbarCreate', eventArgs, (toolbarCreateArgs: ToolbarCreateEventArgs) => {
-            this.items = toolbarCreateArgs.items;
-            this.toolbarObj = new BaseToolbar({
-                items: this.items,
-                created: this.toolbarCreateHandler.bind(this),
-                overflowMode: 'Popup',
-                clicked: this.onClicked.bind(this),
-                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
-                enableRtl: this.parent.enableRtl
-            });
-            this.toolbarObj.isStringTemplate = true;
-            this.toolbarObj.root = this.parent.root ? this.parent.root : this.parent;
-            this.toolbarObj.appendTo('#' + this.parent.element.id + CLS.TOOLBAR_ID);
-        });
-    }
-
-    public getItemIndex(item: string): number {
-        const itemId: string = this.getId(item);
-        for (let i: number = 0; i < this.items.length; i++) {
-            if (this.items[i as number].id === itemId) {
-                return i;
-            }
-        }
-        return -1;
-    }
-
-    private getItems(items: string[]): string[] {
-        let currItems: string[] = items.slice();
-        if (this.parent.isDevice && this.parent.allowMultiSelection) { currItems.push('SelectAll'); }
-        if (this.parent.toolbarItems.length > 0) {
-            currItems = this.parent.toolbarItems.map((item: ToolbarItem) => item.name);
-        }
-        return currItems;
-    }
-    /* istanbul ignore next */
-    private onClicked(args: ClickEventArgs): void {
-        if (isNOU(args.item) || !args.item.id) { return; }
-        const tool: string = args.item.id.substr((this.parent.element.id + '_tb_').length);
-        let details: Object[];
-        if (tool === 'refresh' || tool === 'newfolder' || tool === 'upload') {
-            details = [getPathObject(this.parent)];
-            this.parent.itemData = details;
-        } else {
-            this.parent.notify(events.selectedData, {});
-            details = this.parent.itemData;
-        }
-        const eventArgs: ToolbarClickEventArgs = { cancel: false, fileDetails: details, item: args.item };
-        this.parent.trigger('toolbarClick', eventArgs, (toolbarClickArgs: ToolbarClickEventArgs) => {
-            let sItems: string[];
-            let target: Element;
-            if (!toolbarClickArgs.cancel) {
-                switch (tool) {
-                case 'sortby':
-                    target = closest((args.originalEvent.target as Element), '.' + CLS.TB_ITEM);
-                    if (target && target.classList.contains('e-toolbar-popup')) {
-                        args.cancel = true;
-                    }
-                    break;
-                case 'newfolder':
-                    createNewFolder(this.parent);
-                    break;
-                case 'cut':
-                    cutFiles(this.parent);
-                    break;
-                case 'copy':
-                    copyFiles(this.parent);
-                    break;
-                case 'delete':
-                    for (let i: number = 0; i < details.length; i++) {
-                        if (!hasEditAccess(details[i as number])) {
-                            createDeniedDialog(this.parent, details[i as number], events.permissionEdit);
-                            return;
-                        }
-                    }
-                    createDialog(this.parent, 'Delete');
-                    break;
-                case 'details':
-                    this.parent.notify(events.detailsInit, {});
-                    sItems = this.parent.selectedItems;
-                    if (this.parent.activeModule === 'navigationpane') {
-                        sItems = [];
-                    }
-                    GetDetails(this.parent, sItems, this.parent.path, 'details');
-                    break;
-                case 'paste':
-                    this.parent.folderPath = '';
-                    pasteHandler(this.parent);
-                    break;
-                case 'refresh':
-                    refresh(this.parent);
-                    break;
-                case 'download':
-                    doDownload(this.parent);
-                    break;
-                case 'rename':
-                    if (!hasEditAccess(details[0])) {
-                        createDeniedDialog(this.parent, details[0], events.permissionEdit);
-                    } else {
-                        this.parent.notify(events.renameInit, {});
-                        createDialog(this.parent, 'Rename');
-                    }
-                    break;
-                case 'upload':
-                    uploadItem(this.parent);
-                    break;
-                case 'selectall':
-                    this.parent.notify(events.selectAllInit, {});
-                    break;
-                case 'selection':
-                    this.parent.notify(events.clearAllInit, {});
-                    break;
-                }
-            }
-        });
-    }
-
-    private toolbarCreateHandler(): void {
-        if (!isNOU(select('#' + this.getId('SortBy'), this.parent.element))) {
-            const items: SplitButtonItemModel[] = [
-                { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'),
-                    iconCss: this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : '' },
-                { id: this.getPupupId('size'), text: getLocaleText(this.parent, 'Size'),
-                    iconCss: this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '' },
-                { id: this.getPupupId('date'), text: getLocaleText(this.parent, 'DateModified'),
-                    iconCss: this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '' },
-                { separator: true },
-                { id: this.getPupupId('ascending'), text: getLocaleText(this.parent, 'Ascending'),
-                    iconCss: this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '' },
-                { id: this.getPupupId('descending'), text: getLocaleText(this.parent, 'Descending'),
-                    iconCss: this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : ''  },
-                { id: this.getPupupId('none'), text: getLocaleText(this.parent, 'None'),
-                    iconCss: this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : ''  }
-            ];
-            this.buttonObj = new DropDownButton({
-                items: items, cssClass: getCssClass(this.parent, CLS.ROOT_POPUP),
-                select: sortbyClickHandler.bind(this, this.parent as IFileManager),
-                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
-                enableRtl: this.parent.enableRtl, iconCss: CLS.ICON_SHORTBY
-            });
-            this.buttonObj.isStringTemplate = true;
-            this.buttonObj.appendTo('#' + this.getId('SortBy'));
-        }
-        if (!isNOU(select('#' + this.getId('View'), this.parent.element))) {
-            const gridSpan: string = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>';
-            const largeIconSpan: string = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>';
-            const layoutItems: SplitButtonItemModel[] = [
-                {
-                    id: this.getPupupId('large'), text: getLocaleText(this.parent, 'View-LargeIcons'),
-                    iconCss: this.parent.view === 'Details' ? '' : CLS.TB_OPTION_TICK
-                },
-                {
-                    id: this.getPupupId('details'), text: getLocaleText(this.parent, 'View-Details'),
-                    iconCss: this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : ''
-                }
-            ];
-            this.layoutBtnObj = new DropDownButton({
-                iconCss: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE,
-                cssClass: getCssClass(this.parent, 'e-caret-hide ' + CLS.ROOT_POPUP),
-                items: layoutItems, select: this.layoutChange.bind(this),
-                enableRtl: this.parent.enableRtl,
-                content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>',
-                beforeItemRender: (args: MenuEventArgs) => {
-                    const tickIcon: string = args.item.iconCss;
-                    const viewText: boolean = args.item.text === getLocaleText(this.parent, 'View-LargeIcons');
-                    const iconClass: string = tickIcon ? ' e-menu-icon ' + tickIcon : '';
-                    args.element.innerHTML = '<span class="' + iconClass + '"></span>' + (viewText ? largeIconSpan : gridSpan) + args.item.text;
-                    const span: HTMLElement = args.element.firstChild as HTMLElement;
-                    if (span && span.className === '') {
-                        args.element.removeChild(span);
-                    }
-                }
-            });
-            this.layoutBtnObj.isStringTemplate = true;
-            this.layoutBtnObj.appendTo('#' + this.getId('View'));
-        }
-        this.hideItems(this.default, true);
-        this.hideStatus();
-        if ((this as any).parent.portals && (this.toolbarObj as any).portals) {
-            (this as any).parent.portals = (this as any).parent.portals.concat((this.toolbarObj as any).portals);
-            (this.parent as any)['renderReactTemplates']();
-        }
-        const btnElement: HTMLInputElement[] = (selectAll('.e-btn', this.toolbarObj.element) as HTMLInputElement[]);
-        for (let btnCount: number = 0; btnCount < btnElement.length; btnCount++) {
-            /* istanbul ignore next */
-            btnElement[btnCount as number].onkeydown = (e: KeyboardEvent) => {
-                if (e.keyCode === 13 && !(<HTMLElement>e.target).classList.contains('e-fe-popup')) {
-                    e.preventDefault();
-                }
-            };
-            btnElement[btnCount as number].onkeyup = (e: KeyboardEvent) => {
-                if (e.keyCode === 13 && !(<HTMLElement>e.target).classList.contains('e-fe-popup')) {
-                    btnElement[btnCount as number].click();
-                }
-            };
-        }
-        this.parent.refreshLayout();
-    }
-
-    private updateSortByButton(): void {
-        if (this.buttonObj) {
-            const items: SplitButtonItemModel[] = this.buttonObj.items;
-            for (let itemCount: number = 0; itemCount < items.length; itemCount++) {
-                if (items[itemCount as number].id === this.getPupupId('name')) {
-                    items[itemCount as number].iconCss = this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : '';
-                } else if (items[itemCount as number].id === this.getPupupId('size')) {
-                    items[itemCount as number].iconCss = this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '';
-                } else if (items[itemCount as number].id === this.getPupupId('date')) {
-                    if (this.parent.sortBy === 'dateModified' || this.parent.sortBy === 'dateCreated') {
-                        items[itemCount as number].iconCss = this.parent.sortBy === this.parent.sortBy ? CLS.TB_OPTION_DOT : '';
-                    }
-                    else {
-                        items[itemCount as number].iconCss = this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '';
-                    }
-                } else if (items[itemCount as number].id === this.getPupupId('ascending')) {
-                    items[itemCount as number].iconCss = this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '';
-                } else if (items[itemCount as number].id === this.getPupupId('descending')) {
-                    items[itemCount as number].iconCss = this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : '';
-                } else if (items[itemCount as number].id === this.getPupupId('none')) {
-                    items[itemCount as number].iconCss = this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : '';
-                }
-            }
-        }
-    }
-
-    private getPupupId(id: string): string {
-        return this.parent.element.id + '_ddl_' + id.toLowerCase();
-    }
-
-    private layoutChange(args: MenuEventArgs): void {
-        if (this.parent.view === 'Details') {
-            if (args.item.id === this.getPupupId('large')) {
-                updateLayout(this.parent, 'LargeIcons');
-            }
-        } else {
-            if (args.item.id === this.getPupupId('details')) {
-                updateLayout(this.parent, 'Details');
-            }
-        }
-    }
-
-    private toolbarItemData(data: string[]): ItemModel[] {
-        const items: ItemModel[] = [];
-        let mode: DisplayMode = 'Both';
-        if (this.parent.isMobile) {
-            mode = 'Overflow';
-        }
-        for (let i: number = 0; i < data.length; i++) {
-            let item: ItemModel;
-            let propItem: ToolbarItemModel;
-            if (this.parent.toolbarItems.length > 0) {
-                propItem = this.getItemModel(this.parent.toolbarItems[parseInt(i.toString(), 10)]);
-            }
-            const itemId: string = this.getId(data[i as number]);
-            const itemText: string = getLocaleText(this.parent, data[i as number]);
-            const itemTooltip: string = getLocaleText(this.parent, 'Tooltip-' + data[i as number]);
-            switch (data[i as number]) {
-            case '|':
-                item = { type: 'Separator' };
-                break;
-            case 'Upload':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_UPLOAD, showTextOn: mode };
-                break;
-            case 'SortBy': {
-                let spanElement: string = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + itemText + '</span>';
-                if (propItem && propItem.text) {
-                    spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + propItem.text + '</span>';
-                }
-                item = {
-                    id: itemId, tooltipText: itemTooltip,
-                    template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1">' + spanElement + '</button>'
-                };
-                break;
-            }
-            case 'Refresh':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_REFRESH, showTextOn: mode };
-                break;
-            case 'Selection':
-                item = {
-                    id: itemId, text: itemText, tooltipText: itemTooltip, suffixIcon: CLS.ICON_CLEAR, overflow: 'Show',
-                    align: 'Right'
-                };
-                break;
-            case 'View': {
-                let viewText: string;
-                if (propItem && propItem.text) {
-                    viewText = propItem.text;
-                } else {
-                    viewText = getLocaleText(this.parent, 'View');
-                }
-                item = {
-                    id: itemId, tooltipText: itemTooltip, prefixIcon: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE,
-                    overflow: 'Show', align: 'Right', text: itemText, showTextOn: 'Overflow',
-                    template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1" aria-label=' +
-                    viewText + '></button>'
-                };
-                break;
-            }
-            case 'Details':
-                item = {
-                    id: itemId, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DETAILS, overflow: 'Show', align: 'Right',
-                    text: itemText, showTextOn: 'Overflow'
-                };
-                break;
-            case 'NewFolder':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_NEWFOLDER, showTextOn: mode };
-                break;
-            case 'Cut':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_CUT, showTextOn: mode };
-                break;
-            case 'Copy':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_COPY, showTextOn: mode };
-                break;
-            case 'Paste':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_PASTE, showTextOn: mode };
-                break;
-            case 'Delete':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DELETE, showTextOn: mode };
-                break;
-            case 'Rename':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_RENAME, showTextOn: mode };
-                break;
-            case 'Download':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DOWNLOAD, showTextOn: mode };
-                break;
-            case 'SelectAll':
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_SELECTALL, showTextOn: mode };
-                break;
-            default:
-                item = { id: itemId, text: itemText, tooltipText: itemTooltip, template: '' };
-                break;
-            }
-            if (this.parent.toolbarItems.length > 0 && propItem) {
-                const mergedItems: ToolbarItemModel = Object.assign({}, item, propItem);
-                items.push(mergedItems);
-            }
-            else {
-                items.push(item);
-            }
-        }
-        return items;
-    }
-
-    private getItemModel(propItem: ToolbarItemModel): ToolbarItemModel {
-        const item: ToolbarItemModel = {};
-        if (propItem.id) {
-            item.id = propItem.id;
-        }
-        if (propItem.text) {
-            item.text = propItem.text;
-        }
-        if (propItem.tooltipText) {
-            item.tooltipText = propItem.tooltipText;
-        }
-        if (propItem.prefixIcon) {
-            item.prefixIcon = propItem.prefixIcon;
-        }
-        if (propItem.cssClass) {
-            item.cssClass = propItem.cssClass;
-        }
-        if (propItem.showTextOn !== 'Both') {
-            item.showTextOn = propItem.showTextOn;
-        }
-        if (propItem.template) {
-            item.template = propItem.template;
-        }
-        if (propItem.disabled) {
-            item.disabled = propItem.disabled;
-        }
-        if (propItem.width !== 'auto') {
-            item.width = propItem.width;
-        }
-        if (propItem.suffixIcon) {
-            item.suffixIcon = propItem.suffixIcon;
-        }
-        if (propItem.align !== 'Left') {
-            item.align = propItem.align;
-        }
-        if (propItem.overflow !== 'None') {
-            item.overflow = propItem.overflow;
-        }
-        if (propItem.htmlAttributes) {
-            item.htmlAttributes = propItem.htmlAttributes;
-        }
-        if (propItem.type !== 'Button') {
-            item.type = propItem.type;
-        }
-        if (propItem.visible !== true) {
-            item.visible = propItem.visible;
-        }
-        if (propItem.showAlwaysInPopup) {
-            item.showAlwaysInPopup = propItem.showAlwaysInPopup;
-        }
-        if (propItem.tabIndex !== -1) {
-            item.tabIndex = propItem.tabIndex;
-        }
-        return item;
-    }
-
-    private getId(id: string): string {
-        return this.parent.element.id + '_tb_' + id.toLowerCase();
-    }
-
-    private addEventListener(): void {
-        this.parent.on(events.modelChanged, this.onPropertyChanged, this);
-        this.parent.on(events.selectionChanged, this.onSelectionChanged, this);
-        this.parent.on(events.layoutChange, this.onLayoutChange, this);
-        this.parent.on(events.showPaste, this.showPaste, this);
-        this.parent.on(events.hidePaste, this.hidePaste, this);
-        this.parent.on(events.destroy, this.destroy, this);
-        this.parent.on(events.sortByChange, this.updateSortByButton, this);
-    }
-
-    private reRenderToolbar(e: NotifyArgs): void {
-        let itemsToProcess: string | string[] = [];
-        if (this.parent.toolbarItems.length > 0) {
-            itemsToProcess = this.parent.toolbarItems.map((item: ToolbarItem) => {
-                return item.name;
-            });
-        } else if (e.newProp.toolbarSettings.items !== undefined) {
-            itemsToProcess = e.newProp.toolbarSettings.items.map((item: string) => {
-                return item.trim();
-            });
-        }
-
-        if (itemsToProcess.length > 0) {
-            this.items = this.toolbarItemData(this.getItems(itemsToProcess));
-            const eventArgs: ToolbarCreateEventArgs = { items: this.items };
-            this.parent.trigger('toolbarCreate', eventArgs, (toolbarCreateArgs: ToolbarCreateEventArgs) => {
-                if (this.buttonObj) { this.buttonObj.destroy(); }
-                if (this.layoutBtnObj) { this.layoutBtnObj.destroy(); }
-                this.items = toolbarCreateArgs.items; this.toolbarObj.items = this.items;
-                this.toolbarObj.dataBind();
-                this.toolbarCreateHandler();
-            });
-        }
-    }
-
-    private onSelectionChanged(): void {
-        this.hideStatus();
-        this.hideItems(this.single, true);
-        this.hideItems(this.selection, false);
-        if (this.parent.selectedItems.length === 1) {
-            this.hideItems(this.single, false);
-            this.hideItems(this.selection, true);
-        } else if (this.parent.selectedItems.length > 1) {
-            this.hideItems(this.multiple, false);
-            this.hideItems(this.selection, true);
-        }
-        const ele: Element = select('#' + this.getId('Selection'), this.toolbarObj.element);
-        if (this.parent.selectedItems.length > 0 && ele && !this.parent.enableVirtualization) {
-            let txt: string;
-            if (this.parent.selectedItems.length === 1) {
-                txt = this.parent.selectedItems.length + ' ' + getLocaleText(this.parent, 'Item-Selection');
-            } else {
-                txt = this.parent.selectedItems.length + ' ' + getLocaleText(this.parent, 'Items-Selection');
-            }
-            select('.e-tbar-btn-text', ele).textContent = txt;
-            this.toolbarObj.hideItem(ele.parentElement, false);
-        }
-    }
-
-    private hideItems(tools: string[], toHide: boolean): void {
-        for (let i: number = 0; i < tools.length; i++) {
-            const ele: Element = select('#' + this.getId(tools[i as number]), this.parent.element);
-            if (ele) { this.toolbarObj.hideItem(ele.parentElement, toHide); }
-        }
-    }
-
-    private hideStatus(): void {
-        const ele: Element = select('#' + this.getId('Selection'), this.toolbarObj.element);
-        if (ele) { this.toolbarObj.hideItem(ele.parentElement, true); }
-    }
-
-    private showPaste(): void {
-        this.hideItems(['Paste'], false);
-    }
-
-    private hidePaste(): void {
-        this.hideItems(['Paste'], true);
-    }
-
-    private onLayoutChange(): void {
-        if (this.layoutBtnObj) {
-            this.layoutBtnObj.iconCss = this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE;
-            const items: SplitButtonItemModel[] = this.layoutBtnObj.items;
-            for (let itemCount: number = 0; itemCount < items.length; itemCount++) {
-                if (items[itemCount as number].id === this.getPupupId('large')) {
-                    items[itemCount as number].iconCss = this.parent.view === 'LargeIcons' ? CLS.TB_OPTION_TICK : '';
-                } else if (items[itemCount as number].id === this.getPupupId('details')) {
-                    items[itemCount as number].iconCss = this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : '';
-                }
-            }
-        }
-    }
-
-    private removeEventListener(): void {
-        this.parent.off(events.modelChanged, this.onPropertyChanged);
-        this.parent.off(events.selectionChanged, this.onSelectionChanged);
-        this.parent.off(events.layoutChange, this.onLayoutChange);
-        this.parent.off(events.showPaste, this.showPaste);
-        this.parent.off(events.hidePaste, this.hidePaste);
-        this.parent.off(events.destroy, this.destroy);
-        this.parent.off(events.sortByChange, this.updateSortByButton);
-    }
-
-    /**
-     * For internal use only - Get the module name.
-     *
-     * @returns {string} - returns module name.
-     * @private
-     */
-    private getModuleName(): string {
-        return 'toolbar';
-    }
-
-    private onPropertyChanged(e: NotifyArgs): void {
-        if (e.module !== this.getModuleName() && e.module !== 'common') {
-            /* istanbul ignore next */
-            return;
-        }
-        for (const prop of Object.keys(e.newProp)) {
-            switch (prop) {
-            case 'cssClass':
-                if (this.buttonObj) {
-                    this.buttonObj.cssClass = getCssClass(this.parent, CLS.ROOT_POPUP);
-                }
-                if (this.layoutBtnObj) {
-                    this.layoutBtnObj.cssClass = getCssClass(this.parent, 'e-caret-hide ' + CLS.ROOT_POPUP);
-                }
-                break;
-            case 'height':
-            case 'width':
-                this.toolbarObj.refreshOverflow();
-                break;
-            case 'toolbarSettings':
-            case 'toolbarItems':
-                this.reRenderToolbar(e);
-                break;
-            }
-        }
-    }
-
-    public destroy(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.removeEventListener();
-        if (this.buttonObj) { this.buttonObj.destroy(); }
-        if (this.layoutBtnObj) { this.layoutBtnObj.destroy(); }
-        this.toolbarObj.destroy();
-        this.parent.refreshLayout();
-    }
-
-    public enableItems(items: string[], isEnable?: boolean): void {
-        for (let i: number = 0; i < items.length; i++) {
-            const ele: Element = select('#' + this.getId(items[i as number]), this.parent.element);
-            if (ele) {
-                this.toolbarObj.enableItems(ele.parentElement, isEnable);
-            }
-        }
-    }
-}