@syncfusion/ej2-filemanager 29.2.10 → 30.1.37

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

@@ -0,0 +1,609 @@
+/* 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);
+            }
+        }
+    }
+}