all files / actions/ toolbar.js

98.63% Statements 359/364
93.6% Branches 234/250
100% Functions 38/38
98.62% Lines 357/362
4 statements, 5 branches Ignored     
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607                       1466× 1466× 1466× 1466× 1466× 1466× 1466×   1466× 19155× 1466× 1466× 1466× 1466×               1466× 1466× 1466×     30×         1481× 1481× 15×   1481× 66×   1481×     437× 437×   437× 437× 437× 112× 112×     325× 325×   437× 437× 437× 437× 437× 437×   28× 28×   28×   62× 62×   43× 43×   23× 23×   38× 30×     30× 30×   31× 31× 31×   31× 31×   55× 55× 55×   40× 40×   10× 10×   79×     75× 75×   79×   10× 10×             1481× 1481× 1470×                             1470×           1470× 1470×   1481× 1453× 1453× 1453×                   1453×             24× 24× 24× 24× 24× 24× 12×       1453× 1453×   1481× 1481× 1481×       1481× 1481×   19262×     19262×       1481× 19262×   1481×   50× 48× 48× 336× 48×   288× 48×   240× 48×       48×     192× 48×   144× 48×   96× 48×         13214×   12×             1481× 1481× 1481× 30×   1481× 19405× 19405× 19405× 66×   19405× 19405× 19405× 19405×   133× 133×   1478× 1478×   1470× 1470×   1470×       1470×     1470× 1470×   1453×       1453×   1453× 1453×       1453×   1453×           1453×     1470×       1470×   1472× 1472×   1478× 1478×   1477× 1477×   1477× 1477×   1478× 1478×   1466× 1466×   1478× 1478×   15× 15×   137× 137×   19405× 66× 66×     19339×     1481×   66× 66×   66× 55×   66×   66×   66×   66×   66×   66×   66×   66×   66×   66×   66×   66×   66×   66×   66× 10×   66×   91362×   1466× 1466× 1466× 1466× 1466× 1466× 1466×   23× 23× 23×     22× 14× 234×     23× 15× 15× 15× 15× 15×   15× 14×   15× 15× 15× 15×       3908× 3908× 3908× 3908× 1065× 1065×   2843× 330× 330×   3908× 3908× 1383× 1383× 1053×     330×   1383× 1383×     12225× 56751× 56751× 56652×       5389× 5389× 5330×     96×   42×   60× 60× 60× 60× 120× 60×   60× 60×         1463× 1463× 1463× 1463× 1463× 1463× 1463×               11315×   256×   150×   106× 109× 109×   16× 16×   16× 16×   16×     36× 36×     23× 23×       2901× 1438×   1463× 1463× 1457×   1463× 1446×   1463× 1463×   17× 21× 21× 17×            
define(["require", "exports", "@syncfusion/ej2-navigations", "@syncfusion/ej2-base", "../pop-up/dialog", "../base/constant", "../base/classes", "../common/utility", "../common/utility", "../common/operations", "@syncfusion/ej2-splitbuttons", "../common/index", "../common/index"], function (require, exports, ej2_navigations_1, ej2_base_1, dialog_1, events, CLS, utility_1, utility_2, operations_1, ej2_splitbuttons_1, index_1, index_2) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    /**
     * Toolbar module
     */
    var Toolbar = /** @class */ (function () {
        /**
         * Constructor for the Toolbar module
         *
         * @hidden
         * @param {IFileManager} parent - specifies the parent element.
         * @private
         */
        function Toolbar(parent) {
            this.default = ['Delete', 'Rename', 'Download', 'Cut', 'Copy', 'Paste'];
            this.single = ['Delete', 'Rename', 'Download', 'Cut', 'Copy'];
            this.multiple = ['Delete', 'Download', 'Cut', 'Copy', 'Refresh'];
            this.selection = ['NewFolder', 'Upload', 'SortBy', 'Refresh'];
            this.parent = parent;
            this.render();
            this.addEventListener();
        }
        Toolbar.prototype.render = function () {
            var _this = this;
            this.items = this.toolbarItemData(this.getItems(this.parent.toolbarSettings.items.map(function (item) { return item.trim(); })));
            var eventArgs = { items: this.items };
            this.parent.trigger('toolbarCreate', eventArgs, function (toolbarCreateArgs) {
                _this.items = toolbarCreateArgs.items;
                _this.toolbarObj = new ej2_navigations_1.Toolbar({
                    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);
            });
        };
        Toolbar.prototype.getItemIndex = function (item) {
            var itemId = this.getId(item);
            for (var i = 0; i < this.items.length; i++) {
                if (this.items[i].id === itemId) {
                    return i;
                }
            }
            return -1;
        };
        Toolbar.prototype.getItems = function (items) {
            var currItems = items.slice();
            if (this.parent.isDevice && this.parent.allowMultiSelection) {
                currItems.push('SelectAll');
            }
            if (this.parent.toolbarItems.length > 0) {
                currItems = this.parent.toolbarItems.map(function (item) { return item.name; });
            }
            return currItems;
        };
        /* istanbul ignore next */
        Toolbar.prototype.onClicked = function (args) {
            var _this = this;
            Iif (ej2_base_1.isNullOrUndefined(args.item) || !args.item.id) {
                return;
            }
            var tool = args.item.id.substr((this.parent.element.id + '_tb_').length);
            var details;
            if (tool === 'refresh' || tool === 'newfolder' || tool === 'upload') {
                details = [utility_1.getPathObject(this.parent)];
                this.parent.itemData = details;
            }
            else {
                this.parent.notify(events.selectedData, {});
                details = this.parent.itemData;
            }
            var eventArgs = { cancel: false, fileDetails: details, item: args.item };
            this.parent.trigger('toolbarClick', eventArgs, function (toolbarClickArgs) {
                var sItems;
                var target;
                Eif (!toolbarClickArgs.cancel) {
                    switch (tool) {
                        case 'sortby':
                            target = ej2_base_1.closest(args.originalEvent.target, '.' + CLS.TB_ITEM);
                            Iif (target && target.classList.contains('e-toolbar-popup')) {
                                args.cancel = true;
                            }
                            break;
                        case 'newfolder':
                            index_2.createNewFolder(_this.parent);
                            break;
                        case 'cut':
                            index_1.cutFiles(_this.parent);
                            break;
                        case 'copy':
                            index_1.copyFiles(_this.parent);
                            break;
                        case 'delete':
                            for (var i = 0; i < details.length; i++) {
                                if (!index_1.hasEditAccess(details[i])) {
                                    utility_2.createDeniedDialog(_this.parent, details[i], events.permissionEdit);
                                    return;
                                }
                            }
                            dialog_1.createDialog(_this.parent, 'Delete');
                            break;
                        case 'details':
                            _this.parent.notify(events.detailsInit, {});
                            sItems = _this.parent.selectedItems;
                            Iif (_this.parent.activeModule === 'navigationpane') {
                                sItems = [];
                            }
                            operations_1.GetDetails(_this.parent, sItems, _this.parent.path, 'details');
                            break;
                        case 'paste':
                            _this.parent.folderPath = '';
                            index_1.pasteHandler(_this.parent);
                            break;
                        case 'refresh':
                            utility_1.refresh(_this.parent);
                            break;
                        case 'download':
                            index_2.doDownload(_this.parent);
                            break;
                        case 'rename':
                            if (!index_1.hasEditAccess(details[0])) {
                                utility_2.createDeniedDialog(_this.parent, details[0], events.permissionEdit);
                            }
                            else {
                                _this.parent.notify(events.renameInit, {});
                                dialog_1.createDialog(_this.parent, 'Rename');
                            }
                            break;
                        case 'upload':
                            index_2.uploadItem(_this.parent);
                            break;
                        case 'selectall':
                            _this.parent.notify(events.selectAllInit, {});
                            break;
                        case 'selection':
                            _this.parent.notify(events.clearAllInit, {});
                            break;
                    }
                }
            });
        };
        Toolbar.prototype.toolbarCreateHandler = function () {
            var _this = this;
            if (!ej2_base_1.isNullOrUndefined(ej2_base_1.select('#' + this.getId('SortBy'), this.parent.element))) {
                var items = [
                    { id: this.getPupupId('name'), text: utility_1.getLocaleText(this.parent, 'Name'),
                        iconCss: this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : '' },
                    { id: this.getPupupId('size'), text: utility_1.getLocaleText(this.parent, 'Size'),
                        iconCss: this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '' },
                    { id: this.getPupupId('date'), text: utility_1.getLocaleText(this.parent, 'DateModified'),
                        iconCss: this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '' },
                    { separator: true },
                    { id: this.getPupupId('ascending'), text: utility_1.getLocaleText(this.parent, 'Ascending'),
                        iconCss: this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '' },
                    { id: this.getPupupId('descending'), text: utility_1.getLocaleText(this.parent, 'Descending'),
                        iconCss: this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : '' },
                    { id: this.getPupupId('none'), text: utility_1.getLocaleText(this.parent, 'None'),
                        iconCss: this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : '' }
                ];
                this.buttonObj = new ej2_splitbuttons_1.DropDownButton({
                    items: items, cssClass: utility_1.getCssClass(this.parent, CLS.ROOT_POPUP),
                    select: utility_1.sortbyClickHandler.bind(this, this.parent),
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    enableRtl: this.parent.enableRtl, iconCss: CLS.ICON_SHORTBY
                });
                this.buttonObj.isStringTemplate = true;
                this.buttonObj.appendTo('#' + this.getId('SortBy'));
            }
            if (!ej2_base_1.isNullOrUndefined(ej2_base_1.select('#' + this.getId('View'), this.parent.element))) {
                var gridSpan_1 = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>';
                var largeIconSpan_1 = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>';
                var layoutItems = [
                    {
                        id: this.getPupupId('large'), text: utility_1.getLocaleText(this.parent, 'View-LargeIcons'),
                        iconCss: this.parent.view === 'Details' ? '' : CLS.TB_OPTION_TICK
                    },
                    {
                        id: this.getPupupId('details'), text: utility_1.getLocaleText(this.parent, 'View-Details'),
                        iconCss: this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : ''
                    }
                ];
                this.layoutBtnObj = new ej2_splitbuttons_1.DropDownButton({
                    iconCss: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE,
                    cssClass: utility_1.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">' + utility_1.getLocaleText(this.parent, 'View') + '</span>',
                    beforeItemRender: function (args) {
                        var tickIcon = args.item.iconCss;
                        var viewText = args.item.text === utility_1.getLocaleText(_this.parent, 'View-LargeIcons');
                        var iconClass = tickIcon ? ' e-menu-icon ' + tickIcon : '';
                        args.element.innerHTML = '<span class="' + iconClass + '"></span>' + (viewText ? largeIconSpan_1 : gridSpan_1) + args.item.text;
                        var span = args.element.firstChild;
                        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();
            Iif (this.parent.portals && this.toolbarObj.portals) {
                this.parent.portals = this.parent.portals.concat(this.toolbarObj.portals);
                this.parent['renderReactTemplates']();
            }
            var btnElement = ej2_base_1.selectAll('.e-btn', this.toolbarObj.element);
            var _loop_1 = function (btnCount) {
                /* istanbul ignore next */
                btnElement[btnCount].onkeydown = function (e) {
                    Iif (e.keyCode === 13 && !e.target.classList.contains('e-fe-popup')) {
                        e.preventDefault();
                    }
                };
                btnElement[btnCount].onkeyup = function (e) {
                    Eif (e.keyCode === 13 && !e.target.classList.contains('e-fe-popup')) {
                        btnElement[btnCount].click();
                    }
                };
            };
            for (var btnCount = 0; btnCount < btnElement.length; btnCount++) {
                _loop_1(btnCount);
            }
            this.parent.refreshLayout();
        };
        Toolbar.prototype.updateSortByButton = function () {
            if (this.buttonObj) {
                var items = this.buttonObj.items;
                for (var itemCount = 0; itemCount < items.length; itemCount++) {
                    if (items[itemCount].id === this.getPupupId('name')) {
                        items[itemCount].iconCss = this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : '';
                    }
                    else if (items[itemCount].id === this.getPupupId('size')) {
                        items[itemCount].iconCss = this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '';
                    }
                    else if (items[itemCount].id === this.getPupupId('date')) {
                        Iif (this.parent.sortBy === 'dateModified' || this.parent.sortBy === 'dateCreated') {
                            items[itemCount].iconCss = this.parent.sortBy === this.parent.sortBy ? CLS.TB_OPTION_DOT : '';
                        }
                        else {
                            items[itemCount].iconCss = this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '';
                        }
                    }
                    else if (items[itemCount].id === this.getPupupId('ascending')) {
                        items[itemCount].iconCss = this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '';
                    }
                    else if (items[itemCount].id === this.getPupupId('descending')) {
                        items[itemCount].iconCss = this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : '';
                    }
                    else if (items[itemCount].id === this.getPupupId('none')) {
                        items[itemCount].iconCss = this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : '';
                    }
                }
            }
        };
        Toolbar.prototype.getPupupId = function (id) {
            return this.parent.element.id + '_ddl_' + id.toLowerCase();
        };
        Toolbar.prototype.layoutChange = function (args) {
            if (this.parent.view === 'Details') {
                if (args.item.id === this.getPupupId('large')) {
                    utility_2.updateLayout(this.parent, 'LargeIcons');
                }
            }
            else {
                if (args.item.id === this.getPupupId('details')) {
                    utility_2.updateLayout(this.parent, 'Details');
                }
            }
        };
        Toolbar.prototype.toolbarItemData = function (data) {
            var items = [];
            var mode = 'Both';
            if (this.parent.isMobile) {
                mode = 'Overflow';
            }
            for (var i = 0; i < data.length; i++) {
                var item = void 0;
                var propItem = void 0;
                if (this.parent.toolbarItems.length > 0) {
                    propItem = this.getItemModel(this.parent.toolbarItems[parseInt(i.toString(), 10)]);
                }
                var itemId = this.getId(data[i]);
                var itemText = utility_1.getLocaleText(this.parent, data[i]);
                var itemTooltip = utility_1.getLocaleText(this.parent, 'Tooltip-' + data[i]);
                switch (data[i]) {
                    case '|':
                        item = { type: 'Separator' };
                        break;
                    case 'Upload':
                        item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_UPLOAD, showTextOn: mode };
                        break;
                    case 'SortBy': {
                        var spanElement = '<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': {
                        var viewText = void 0;
                        Iif (propItem && propItem.text) {
                            viewText = propItem.text;
                        }
                        else {
                            viewText = utility_1.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) {
                    var mergedItems = Object.assign({}, item, propItem);
                    items.push(mergedItems);
                }
                else {
                    items.push(item);
                }
            }
            return items;
        };
        Toolbar.prototype.getItemModel = function (propItem) {
            var item = {};
            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;
        };
        Toolbar.prototype.getId = function (id) {
            return this.parent.element.id + '_tb_' + id.toLowerCase();
        };
        Toolbar.prototype.addEventListener = function () {
            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);
        };
        Toolbar.prototype.reRenderToolbar = function (e) {
            var _this = this;
            var itemsToProcess = [];
            if (this.parent.toolbarItems.length > 0) {
                itemsToProcess = this.parent.toolbarItems.map(function (item) {
                    return item.name;
                });
            }
            else if (e.newProp.toolbarSettings.items !== undefined) {
                itemsToProcess = e.newProp.toolbarSettings.items.map(function (item) {
                    return item.trim();
                });
            }
            if (itemsToProcess.length > 0) {
                this.items = this.toolbarItemData(this.getItems(itemsToProcess));
                var eventArgs = { items: this.items };
                this.parent.trigger('toolbarCreate', eventArgs, function (toolbarCreateArgs) {
                    Eif (_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();
                });
            }
        };
        Toolbar.prototype.onSelectionChanged = function () {
            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);
            }
            var ele = ej2_base_1.select('#' + this.getId('Selection'), this.toolbarObj.element);
            if (this.parent.selectedItems.length > 0 && ele && !this.parent.enableVirtualization) {
                var txt = void 0;
                if (this.parent.selectedItems.length === 1) {
                    txt = this.parent.selectedItems.length + ' ' + utility_1.getLocaleText(this.parent, 'Item-Selection');
                }
                else {
                    txt = this.parent.selectedItems.length + ' ' + utility_1.getLocaleText(this.parent, 'Items-Selection');
                }
                ej2_base_1.select('.e-tbar-btn-text', ele).textContent = txt;
                this.toolbarObj.hideItem(ele.parentElement, false);
            }
        };
        Toolbar.prototype.hideItems = function (tools, toHide) {
            for (var i = 0; i < tools.length; i++) {
                var ele = ej2_base_1.select('#' + this.getId(tools[i]), this.parent.element);
                if (ele) {
                    this.toolbarObj.hideItem(ele.parentElement, toHide);
                }
            }
        };
        Toolbar.prototype.hideStatus = function () {
            var ele = ej2_base_1.select('#' + this.getId('Selection'), this.toolbarObj.element);
            if (ele) {
                this.toolbarObj.hideItem(ele.parentElement, true);
            }
        };
        Toolbar.prototype.showPaste = function () {
            this.hideItems(['Paste'], false);
        };
        Toolbar.prototype.hidePaste = function () {
            this.hideItems(['Paste'], true);
        };
        Toolbar.prototype.onLayoutChange = function () {
            Eif (this.layoutBtnObj) {
                this.layoutBtnObj.iconCss = this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE;
                var items = this.layoutBtnObj.items;
                for (var itemCount = 0; itemCount < items.length; itemCount++) {
                    if (items[itemCount].id === this.getPupupId('large')) {
                        items[itemCount].iconCss = this.parent.view === 'LargeIcons' ? CLS.TB_OPTION_TICK : '';
                    }
                    else Eif (items[itemCount].id === this.getPupupId('details')) {
                        items[itemCount].iconCss = this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : '';
                    }
                }
            }
        };
        Toolbar.prototype.removeEventListener = function () {
            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
         */
        Toolbar.prototype.getModuleName = function () {
            return 'toolbar';
        };
        Toolbar.prototype.onPropertyChanged = function (e) {
            if (e.module !== this.getModuleName() && e.module !== 'common') {
                /* istanbul ignore next */
                return;
            }
            for (var _i = 0, _a = Object.keys(e.newProp); _i < _a.length; _i++) {
                var prop = _a[_i];
                switch (prop) {
                    case 'cssClass':
                        Eif (this.buttonObj) {
                            this.buttonObj.cssClass = utility_1.getCssClass(this.parent, CLS.ROOT_POPUP);
                        }
                        Eif (this.layoutBtnObj) {
                            this.layoutBtnObj.cssClass = utility_1.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;
                }
            }
        };
        Toolbar.prototype.destroy = function () {
            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();
        };
        Toolbar.prototype.enableItems = function (items, isEnable) {
            for (var i = 0; i < items.length; i++) {
                var ele = ej2_base_1.select('#' + this.getId(items[i]), this.parent.element);
                if (ele) {
                    this.toolbarObj.enableItems(ele.parentElement, isEnable);
                }
            }
        };
        return Toolbar;
    }());
    exports.Toolbar = Toolbar;
});