all files / grid/actions/ column-menu.js

94.29% Statements 396/420
85.5% Branches 283/331
98% Functions 49/50
94.27% Lines 395/419
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 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652   21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21×     27× 25× 25× 110×       41× 37× 37× 172×           41× 41×     41× 37×   41× 41× 41× 41× 19×     18× 16×                           11× 11× 11× 11× 11× 11× 11× 11× 11× 11×       10×   10× 10×         10×     11× 11×   11×     63×   22×   21× 21× 21× 21× 19×   21× 21× 21× 21× 21× 21×   42× 21×   21× 21× 21× 21× 17×   21× 21× 21× 21× 21× 21×                 23×   21× 21× 21× 21× 21×                         21×     21× 21×   21× 17×     41× 30×     152× 152× 10×                         150× 20× 20×     10×       10× 10×                       171×     13× 13× 13× 71× 71× 71× 71× 10×   71×     13× 13×                       82× 82×             22× 22×           16×           10×     16×   10×           82×   13× 13×                       13× 13×                   71×   32× 32× 32× 141× 141× 138× 28× 28× 28×     110×           32×   139× 139×       10× 10×   11× 11×   18× 18×   29× 29×   27× 27×   28× 28×   139×       139×   139×   259×   407×       20541×   21×                   21×   22×   22× 21× 21×     28× 28× 131× 131× 118×     28×                                                                 28× 28× 28× 28×   28× 11× 11×   28×   28× 28×   18×   28×   14× 14×   27×     27×     104×     11×        
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/util", "../base/constant", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "../actions/group", "../actions/sort", "../actions/filter", "../actions/resize", "../base/enum", "../base/string-literals"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, util_1, events, ej2_popups_1, ej2_buttons_1, group_1, sort_1, filter_1, resize_1, enum_1, literals) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ColumnMenu = (function () {
        function ColumnMenu(parent, serviceLocator) {
            this.defaultItems = {};
            this.localeText = this.setLocaleKey();
            this.disableItems = [];
            this.hiddenItems = [];
            this.isOpen = false;
            this.GROUP = 'e-icon-group';
            this.UNGROUP = 'e-icon-ungroup';
            this.ASCENDING = 'e-icon-ascending';
            this.DESCENDING = 'e-icon-descending';
            this.ROOT = 'e-columnmenu';
            this.FILTER = 'e-icon-filter';
            this.POP = 'e-filter-popup';
            this.WRAP = 'e-col-menu';
            this.COL_POP = 'e-colmenu-popup';
            this.CHOOSER = '_chooser_';
            this.AUTOFIT = 'e-icon-autofit';
            this.AUTOFITALL = 'e-icon-autofitall';
            this.COLUMNCHOOSER = 'e-icon-columnchooser';
            this.parent = parent;
            this.gridID = parent.element.id;
            this.serviceLocator = serviceLocator;
            this.addEventListener();
            if (this.parent.enableAdaptiveUI) {
                this.setFullScreenDialog();
            }
        }
        ColumnMenu.prototype.wireEvents = function () {
            if (!this.parent.enableAdaptiveUI) {
                var elements = this.getColumnMenuHandlers();
                for (var i = 0; i < elements.length; i++) {
                    ej2_base_1.EventHandler.add(elements[parseInt(i.toString(), 10)], 'mousedown', this.columnMenuHandlerDown, this);
                }
            }
        };
        ColumnMenu.prototype.unwireEvents = function () {
            if (!this.parent.enableAdaptiveUI) {
                var elements = this.getColumnMenuHandlers();
                for (var i = 0; i < elements.length; i++) {
                    ej2_base_1.EventHandler.remove(elements[parseInt(i.toString(), 10)], 'mousedown', this.columnMenuHandlerDown);
                }
            }
        };
        ColumnMenu.prototype.setFullScreenDialog = function () {
            if (this.serviceLocator) {
                this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, enum_1.ResponsiveDialogAction.isColMenu);
            }
        };
        ColumnMenu.prototype.destroy = function () {
            var gridElement = this.parent.element;
            Iif (!gridElement.querySelector('.' + literals.gridContent) && (!gridElement.querySelector('.' + literals.gridHeader)) || !gridElement) {
                return;
            }
            if (this.columnMenu) {
                this.columnMenu.destroy();
            }
            this.removeEventListener();
            this.unwireFilterEvents();
            this.unwireEvents();
            if (!this.parent.enableAdaptiveUI && this.element.parentNode) {
                ej2_base_2.remove(this.element);
            }
        };
        ColumnMenu.prototype.columnMenuHandlerClick = function (e) {
            if (e.target.classList.contains('e-columnmenu')) {
                if (this.parent.enableAdaptiveUI) {
                    this.headerCell = this.getHeaderCell(e);
                    var col = this.getColumn();
                    this.responsiveDialogRenderer.isCustomDialog = true;
                    this.parent.notify(events.renderResponsiveChangeAction, { action: 4 });
                    this.parent.notify(events.filterOpen, { col: col, target: e.target, isClose: null, id: null });
                    this.responsiveDialogRenderer.showResponsiveDialog(null, col);
                }
                else {
                    this.columnMenu.items = this.getItems();
                    this.columnMenu.dataBind();
                    if ((this.isOpen && this.headerCell !== this.getHeaderCell(e)) ||
                        document.querySelector('.e-grid-menu .e-menu-parent.e-ul')) {
                        this.columnMenu.close();
                        this.openColumnMenu(e);
                    }
                    else if (!this.isOpen) {
                        this.openColumnMenu(e);
                    }
                    else {
                        this.columnMenu.close();
                    }
                }
            }
        };
        ColumnMenu.prototype.openColumnMenuByField = function (field) {
            this.openColumnMenu({ target: this.parent.getColumnHeaderByField(field).querySelector('.e-columnmenu') });
        };
        ColumnMenu.prototype.afterFilterColumnMenuClose = function () {
            Eif (this.columnMenu) {
                this.columnMenu.items = this.getItems();
                this.columnMenu.dataBind();
                this.columnMenu.close();
            }
        };
        ColumnMenu.prototype.openColumnMenu = function (e) {
            var contentRect = this.parent.getContent().getClientRects()[0];
            var headerEle = this.parent.getHeaderContent();
            var headerElemCliRect = headerEle.getBoundingClientRect();
            var pos = { top: 0, left: 0 };
            this.element.style.cssText = 'display:block;visibility:hidden';
            var elePos = this.element.getBoundingClientRect();
            var gClient = this.parent.element.getBoundingClientRect();
            this.element.style.cssText = 'display:none;visibility:visible';
            this.headerCell = this.getHeaderCell(e);
            if (this.parent.enableRtl) {
                pos = this.parent.enableStickyHeader ? ej2_popups_1.calculatePosition(this.headerCell, 'left', 'bottom', true) :
                    ej2_popups_1.calculatePosition(this.headerCell, 'left', 'bottom');
            }
            else {
                pos = this.parent.enableStickyHeader ? ej2_popups_1.calculatePosition(this.headerCell, 'right', 'bottom', true) :
                    ej2_popups_1.calculatePosition(this.headerCell, 'right', 'bottom');
                pos.left -= elePos.width;
                if (headerEle.classList.contains('e-sticky')) {
                    pos.top = this.parent.element.offsetTop + headerElemCliRect.top + headerElemCliRect.height;
                    Iif (headerElemCliRect.top + headerElemCliRect.height > contentRect.top) {
                        pos.top += ((headerElemCliRect.top + headerElemCliRect.height) - contentRect.top);
                    }
                }
                else if (this.parent.enableStickyHeader) {
                    pos.top = this.parent.element.offsetTop + headerEle.offsetTop + headerElemCliRect.height;
                }
                if ((pos.left + elePos.width + 1) >= gClient.right) {
                    pos.left -= 35;
                }
            }
            this.columnMenu['open'](pos.top, pos.left);
            if (e.preventDefault) {
                e.preventDefault();
            }
            util_1.applyBiggerTheme(this.parent.element, this.columnMenu.element.parentElement);
        };
        ColumnMenu.prototype.columnMenuHandlerDown = function () {
            this.isOpen = !(this.element.style.display === 'none' || this.element.style.display === '');
        };
        ColumnMenu.prototype.getColumnMenuHandlers = function () {
            return [].slice.call(this.parent.getHeaderTable().getElementsByClassName(this.ROOT));
        };
        ColumnMenu.prototype.addEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.on(events.headerRefreshed, this.wireEvents, this);
            this.parent.on(events.uiUpdate, this.enableAfterRenderMenu, this);
            this.parent.on(events.initialEnd, this.render, this);
            if (this.isFilterItemAdded()) {
                this.parent.on(events.filterDialogCreated, this.filterPosition, this);
            }
            this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);
            this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);
            this.parent.on(events.click, this.columnMenuHandlerClick, this);
            this.parent.on(events.afterFilterColumnMenuClose, this.afterFilterColumnMenuClose, this);
            this.parent.on(events.keyPressed, this.keyPressHandler, this);
            this.parent.on(events.destroy, this.destroy, this);
        };
        ColumnMenu.prototype.removeEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.off(events.headerRefreshed, this.unwireEvents);
            this.parent.off(events.uiUpdate, this.enableAfterRenderMenu);
            this.parent.off(events.initialEnd, this.render);
            if (this.isFilterItemAdded()) {
                this.parent.off(events.filterDialogCreated, this.filterPosition);
            }
            this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);
            this.parent.off(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction);
            this.parent.off(events.click, this.columnMenuHandlerClick);
            this.parent.on(events.afterFilterColumnMenuClose, this.afterFilterColumnMenuClose);
            this.parent.off(events.keyPressed, this.keyPressHandler);
            this.parent.off(events.destroy, this.destroy);
        };
        ColumnMenu.prototype.keyPressHandler = function (e) {
            var gObj = this.parent;
            if (e.action === 'altDownArrow' && !this.parent.enableAdaptiveUI) {
                var element = gObj.focusModule.currentInfo.element;
                if (element && element.classList.contains('e-headercell')) {
                    var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));
                    this.openColumnMenuByField(column.field);
                }
            }
        };
        ColumnMenu.prototype.enableAfterRenderMenu = function (e) {
            if (e.module === this.getModuleName() && e.enable) {
                if (this.columnMenu) {
                    this.columnMenu.destroy();
                    ej2_base_2.remove(this.element);
                }
                Eif (!this.parent.enableAdaptiveUI) {
                    this.render();
                }
            }
        };
        ColumnMenu.prototype.render = function () {
            if (this.parent.enableAdaptiveUI) {
                return;
            }
            this.l10n = this.serviceLocator.getService('localization');
            this.element = this.parent.createElement('ul', { id: this.gridID + '_columnmenu', className: 'e-colmenu' });
            this.element.setAttribute('aria-label', this.l10n.getConstant('ColumnMenuDialogARIA'));
            this.parent.element.appendChild(this.element);
            this.columnMenu = new ej2_navigations_1.ContextMenu({
                cssClass: this.parent.cssClass ? 'e-grid-menu e-grid-column-menu' + ' ' + this.parent.cssClass : 'e-grid-menu e-grid-column-menu',
                enableRtl: this.parent.enableRtl,
                enablePersistence: this.parent.enablePersistence,
                locale: this.parent.locale,
                items: this.getItems(),
                select: this.columnMenuItemClick.bind(this),
                beforeOpen: this.columnMenuBeforeOpen.bind(this),
                onOpen: this.columnMenuOnOpen.bind(this),
                onClose: this.columnMenuOnClose.bind(this),
                beforeItemRender: this.beforeMenuItemRender.bind(this),
                beforeClose: this.columnMenuBeforeClose.bind(this)
            });
            Iif (this.element && util_1.parentsUntil(this.element, 'e-popup')) {
                this.element.classList.add(this.COL_POP);
            }
            this.columnMenu.appendTo(this.element);
            this.wireFilterEvents();
        };
        ColumnMenu.prototype.wireFilterEvents = function () {
            if (!ej2_base_1.Browser.isDevice && this.isFilterItemAdded()) {
                ej2_base_1.EventHandler.add(this.element, 'mouseover', this.appendFilter, this);
            }
        };
        ColumnMenu.prototype.unwireFilterEvents = function () {
            if (!ej2_base_1.Browser.isDevice && this.isFilterItemAdded() && !this.parent.enableAdaptiveUI) {
                ej2_base_1.EventHandler.remove(this.element, 'mouseover', this.appendFilter);
            }
        };
        ColumnMenu.prototype.beforeMenuItemRender = function (args) {
            var _a;
            if (this.isChooserItem(args.item)) {
                var field_1 = this.getKeyFromId(args.item.id, this.CHOOSER);
                var column = this.parent.columnModel.filter(function (col) { return col.field === field_1; });
                var check = ej2_buttons_1.createCheckBox(this.parent.createElement, false, {
                    label: args.item.text,
                    checked: column[0].visible
                });
                if (this.parent.enableRtl) {
                    check.classList.add('e-rtl');
                }
                Iif (this.parent.cssClass) {
                    if (this.parent.cssClass.indexOf(' ') !== -1) {
                        (_a = check.classList).add.apply(_a, this.parent.cssClass.split(' '));
                    }
                    else {
                        check.classList.add(this.parent.cssClass);
                    }
                }
                args.element.innerHTML = '';
                args.element.appendChild(check);
            }
            else if (args.item.id && this.getKeyFromId(args.item.id) === 'Filter') {
                args.element.appendChild(this.parent.createElement('span', { className: 'e-icons e-caret' }));
                args.element.className += 'e-filter-item e-menu-caret-icon';
            }
        };
        ColumnMenu.prototype.columnMenuBeforeClose = function (args) {
            Iif (args.event && args.event.target instanceof Document && args.event.type === 'scroll') {
                args.cancel = true;
                return;
            }
            var colChooser = args.event ? ej2_base_1.closest(args.event.target, '.e-menu-item') : null;
            if (!ej2_base_1.isNullOrUndefined(args.parentItem) &&
                this.getKeyFromId(args.parentItem.id) === 'ColumnChooser' &&
                colChooser && this.isChooserItem(colChooser)) {
                args.cancel = args.event && args.event.code === 'Escape' ? false : true;
            }
            else if (args.event && (ej2_base_1.closest(args.event.target, '.' + this.POP)
                || (args.event.currentTarget && args.event.currentTarget.activeElement &&
                    util_1.parentsUntil(args.event.currentTarget.activeElement, 'e-filter-popup'))
                || (util_1.parentsUntil(args.event.target, 'e-popup') && util_1.parentsUntil(args.event.target, 'e-colmenu-popup'))
                || (util_1.parentsUntil(args.event.target, 'e-popup-wrapper'))) && !ej2_base_1.Browser.isDevice) {
                args.cancel = true;
            }
            else Iif (args.event && args.event.target && args.event.target.classList.contains('e-filter-item') && args.event.key === 'Enter') {
                args.cancel = true;
            }
        };
        ColumnMenu.prototype.isChooserItem = function (item) {
            return item.id && item.id.indexOf('_colmenu_') >= 0 &&
                this.getKeyFromId(item.id, this.CHOOSER).indexOf('_colmenu_') === -1;
        };
        ColumnMenu.prototype.columnMenuBeforeOpen = function (args) {
            args.column = this.targetColumn = this.getColumn();
            this.parent.trigger(events.columnMenuOpen, args);
            for (var _i = 0, _a = args.items; _i < _a.length; _i++) {
                var item = _a[_i];
                var key = this.getKeyFromId(item.id);
                var dItem = this.defaultItems["" + key];
                if (this.getDefaultItems().indexOf(key) !== -1 && this.ensureDisabledStatus(key) && !dItem.hide) {
                    this.disableItems.push(item.text);
                }
                if (item.hide) {
                    this.hiddenItems.push(item.text);
                }
            }
            this.columnMenu.enableItems(this.disableItems, false);
            this.columnMenu.hideItems(this.hiddenItems);
        };
        ColumnMenu.prototype.columnMenuOnOpen = function (args) {
            if (args.element.className === 'e-menu-parent e-ul ') {
                if (args.element.offsetHeight > window.innerHeight || this.parent.element.offsetHeight > window.innerHeight) {
                    args.element.style.maxHeight = (window.innerHeight) * 0.8 + 'px';
                    args.element.style.overflowY = 'auto';
                    if (this.parent.enableStickyHeader) {
                        args.element.style.position = 'fixed';
                    }
                }
            }
        };
        ColumnMenu.prototype.ensureDisabledStatus = function (item) {
            var status = false;
            switch (item) {
                case 'Group':
                    if (!this.parent.allowGrouping || (this.parent.ensureModuleInjected(group_1.Group) && this.targetColumn
                        && this.parent.groupSettings.columns.indexOf(this.targetColumn.field) >= 0 ||
                        this.targetColumn && !this.targetColumn.allowGrouping)) {
                        status = true;
                    }
                    break;
                case 'AutoFitAll':
                case 'AutoFit':
                    status = !this.parent.ensureModuleInjected(resize_1.Resize);
                    break;
                case 'Ungroup':
                    Eif (!this.parent.ensureModuleInjected(group_1.Group) || (this.parent.ensureModuleInjected(group_1.Group) && this.targetColumn
                        && this.parent.groupSettings.columns.indexOf(this.targetColumn.field) < 0)) {
                        status = true;
                    }
                    break;
                case 'SortDescending':
                case 'SortAscending':
                    if (this.parent.allowSorting && this.parent.ensureModuleInjected(sort_1.Sort)
                        && this.parent.sortSettings.columns.length > 0 && this.targetColumn && this.targetColumn.allowSorting) {
                        var sortColumns = this.parent.sortSettings.columns;
                        for (var i = 0; i < sortColumns.length; i++) {
                            if (sortColumns[parseInt(i.toString(), 10)].field === this.targetColumn.field
                                && sortColumns[parseInt(i.toString(), 10)].direction.toLocaleLowerCase() === item.toLocaleLowerCase().replace('sort', '')) {
                                status = true;
                            }
                        }
                    }
                    else if (!this.parent.allowSorting || !this.parent.ensureModuleInjected(sort_1.Sort) ||
                        this.parent.allowSorting && this.targetColumn && !this.targetColumn.allowSorting) {
                        status = true;
                    }
                    break;
                case 'Filter':
                    if (this.parent.allowFiltering && (this.parent.filterSettings.type !== 'FilterBar')
                        && this.parent.ensureModuleInjected(filter_1.Filter) && this.targetColumn && this.targetColumn.allowFiltering) {
                        status = false;
                    }
                    else Eif (this.parent.ensureModuleInjected(filter_1.Filter) && this.parent.allowFiltering
                        && this.targetColumn && (!this.targetColumn.allowFiltering || this.parent.filterSettings.type === 'FilterBar')) {
                        status = true;
                    }
            }
            return status;
        };
        ColumnMenu.prototype.columnMenuItemClick = function (args) {
            var item = this.isChooserItem(args.item) ? 'ColumnChooser' : this.getKeyFromId(args.item.id);
            switch (item) {
                case 'AutoFit':
                    this.parent.autoFitColumns(this.targetColumn.field);
                    break;
                case 'AutoFitAll':
                    this.parent.autoFitColumns([]);
                    break;
                case 'Ungroup':
                    this.parent.ungroupColumn(this.targetColumn.field);
                    break;
                case 'Group':
                    this.parent.groupColumn(this.targetColumn.field);
                    break;
                case 'SortAscending':
                    this.parent.sortColumn(this.targetColumn.field, 'Ascending');
                    break;
                case 'SortDescending':
                    this.parent.sortColumn(this.targetColumn.field, 'Descending');
                    break;
                case 'ColumnChooser':
                    var key = this.getKeyFromId(args.item.id, this.CHOOSER);
                    var checkbox = args.element.querySelector('.e-checkbox-wrapper .e-frame');
                    if (checkbox && checkbox.classList.contains('e-check')) {
                        checkbox.classList.remove('e-check');
                        this.parent.hideColumns(key, 'field');
                    }
                    else if (checkbox) {
                        this.parent.showColumns(key, 'field');
                        checkbox.classList.add('e-check');
                    }
                    break;
                case 'Filter':
                    this.getFilter(args.element, args.item.id);
                    break;
            }
            args.column = this.targetColumn;
            this.parent.trigger(events.columnMenuClick, args);
        };
        ColumnMenu.prototype.columnMenuOnClose = function (args) {
            var parent = 'parentObj';
            Eif (args.items.length > 0 && args.items[0]["" + parent] instanceof ej2_navigations_1.ContextMenu) {
                this.columnMenu.enableItems(this.disableItems, false);
                this.disableItems = [];
                this.columnMenu.showItems(this.hiddenItems);
                this.hiddenItems = [];
                if (this.isFilterPopupOpen()) {
                    this.getFilter(args.element, args.element.id, true);
                }
            }
            Iif (!ej2_base_1.isNullOrUndefined(args.parentItem) && this.getKeyFromId(args.parentItem.id) === 'ColumnChooser'
                && this.columnMenu.element.querySelector('.e-selected')) {
                this.columnMenu.element.querySelector('.e-selected').focus();
            }
            else {
                this.parent.notify(events.restoreFocus, {});
            }
        };
        ColumnMenu.prototype.getDefaultItems = function () {
            return ['AutoFitAll', 'AutoFit', 'SortAscending', 'SortDescending', 'Group', 'Ungroup', 'ColumnChooser', 'Filter'];
        };
        ColumnMenu.prototype.getItems = function () {
            var items = [];
            var defultItems = this.parent.columnMenuItems ? this.parent.columnMenuItems : this.getDefault();
            for (var _i = 0, defultItems_1 = defultItems; _i < defultItems_1.length; _i++) {
                var item = defultItems_1[_i];
                if (typeof item === 'string') {
                    if (item === 'ColumnChooser') {
                        var col = this.getDefaultItem(item);
                        col.items = this.createChooserItems();
                        items.push(col);
                    }
                    else {
                        items.push(this.getDefaultItem(item));
                    }
                }
                else {
                    items.push(item);
                }
            }
            return items;
        };
        ColumnMenu.prototype.getDefaultItem = function (item) {
            var menuItem = {};
            switch (item) {
                case 'SortAscending':
                    menuItem = { iconCss: this.ASCENDING };
                    break;
                case 'SortDescending':
                    menuItem = { iconCss: this.DESCENDING };
                    break;
                case 'Group':
                    menuItem = { iconCss: this.GROUP };
                    break;
                case 'Ungroup':
                    menuItem = { iconCss: this.UNGROUP };
                    break;
                case 'Filter':
                    menuItem = { iconCss: this.FILTER };
                    break;
                case 'ColumnChooser':
                    menuItem = { iconCss: this.COLUMNCHOOSER };
                    break;
                case 'AutoFit':
                    menuItem = { iconCss: this.AUTOFIT };
                    break;
                case 'AutoFitAll':
                    menuItem = { iconCss: this.AUTOFITALL };
                    break;
            }
            this.defaultItems["" + item] = {
                text: this.getLocaleText(item), id: this.generateID(item),
                iconCss: menuItem.iconCss ? 'e-icons ' + menuItem.iconCss : null
            };
            return this.defaultItems["" + item];
        };
        ColumnMenu.prototype.getLocaleText = function (item) {
            return this.l10n.getConstant(this.localeText["" + item]);
        };
        ColumnMenu.prototype.generateID = function (item, append) {
            return this.gridID + '_colmenu_' + (append ? append + item : item);
        };
        ColumnMenu.prototype.getKeyFromId = function (id, append) {
            return id.indexOf('_colmenu_') > 0 &&
                id.replace(this.gridID + '_colmenu_' + (append ? append : ''), '');
        };
        ColumnMenu.prototype.getColumnMenu = function () {
            return this.element;
        };
        ColumnMenu.prototype.getModuleName = function () {
            return 'columnMenu';
        };
        ColumnMenu.prototype.setLocaleKey = function () {
            var localeKeys = {
                'AutoFitAll': 'autoFitAll',
                'AutoFit': 'autoFit',
                'Group': 'Group',
                'Ungroup': 'Ungroup',
                'SortAscending': 'SortAscending',
                'SortDescending': 'SortDescending',
                'ColumnChooser': 'Columnchooser',
                'Filter': 'FilterMenu'
            };
            return localeKeys;
        };
        ColumnMenu.prototype.getHeaderCell = function (e) {
            return ej2_base_1.closest(e.target, 'th.e-headercell');
        };
        ColumnMenu.prototype.getColumn = function () {
            if (this.headerCell) {
                var uid = this.headerCell.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');
                return this.parent.getColumnByUid(uid);
            }
            return null;
        };
        ColumnMenu.prototype.createChooserItems = function () {
            var items = [];
            for (var _i = 0, _a = this.parent.columnModel; _i < _a.length; _i++) {
                var col = _a[_i];
                if (col.showInColumnChooser && col.field) {
                    items.push({ id: this.generateID(col.field, this.CHOOSER), text: col.headerText ? col.headerText : col.field });
                }
            }
            return items;
        };
        ColumnMenu.prototype.appendFilter = function (e) {
            var filter = 'Filter';
            if (!this.defaultItems["" + filter]) {
                return;
            }
            else {
                var key = this.defaultItems["" + filter].id;
                if (ej2_base_1.closest(e.target, '#' + key) && !this.isFilterPopupOpen()) {
                    this.getFilter(e.target, key);
                }
                else Eif (!ej2_base_1.closest(e.target, '#' + key) && this.isFilterPopupOpen()) {
                    this.getFilter(e.target, key, true);
                }
            }
        };
        ColumnMenu.prototype.getFilter = function (target, id, isClose) {
            var filterPopup = this.getFilterPop();
            if (filterPopup) {
                filterPopup.style.display = !ej2_base_1.Browser.isDevice && isClose ? 'none' : 'block';
            }
            else {
                this.parent.notify(events.filterOpen, {
                    col: this.targetColumn, target: target, isClose: isClose, id: id
                });
            }
        };
        ColumnMenu.prototype.setPosition = function (li, ul) {
            var gridPos = this.parent.element.getBoundingClientRect();
            var liPos = li.getBoundingClientRect();
            var left = liPos.left - gridPos.left;
            var top = liPos.top - gridPos.top;
            Iif (gridPos.height < top) {
                top = top - ul.offsetHeight + liPos.height;
            }
            else Iif (gridPos.height < top + ul.offsetHeight) {
                top = gridPos.height - ul.offsetHeight;
            }
            Iif (window.innerHeight < ul.offsetHeight + top + gridPos.top) {
                top = window.innerHeight - ul.offsetHeight - gridPos.top;
            }
            Iif (top + gridPos.top < 0) {
                top = 0;
            }
            left += (this.parent.enableRtl ? -ul.offsetWidth : liPos.width);
            Iif (gridPos.width <= left + ul.offsetWidth) {
                left -= liPos.width + ul.offsetWidth;
                if (liPos.left < ul.offsetWidth) {
                    left = liPos.left + ul.offsetWidth / 2;
                }
            }
            else Eif (left < 0) {
                left += ul.offsetWidth + liPos.width;
            }
            ul.style.top = top + 'px';
            ul.style.left = left + 'px';
        };
        ColumnMenu.prototype.filterPosition = function () {
            var filterPopup = this.getFilterPop();
            if (this.parent.enableAdaptiveUI) {
                return;
            }
            filterPopup.classList.add(this.WRAP);
            Eif (!ej2_base_1.Browser.isDevice) {
                var disp = filterPopup.style.display;
                filterPopup.style.cssText += 'display:block;visibility:hidden';
                var li = this.element.querySelector('.' + this.FILTER);
                Eif (li) {
                    this.setPosition(li.parentElement, filterPopup);
                    filterPopup.style.cssText += 'display:' + disp + ';visibility:visible';
                }
            }
        };
        ColumnMenu.prototype.getDefault = function () {
            var items = [];
            Eif (this.parent.ensureModuleInjected(resize_1.Resize)) {
                items.push('AutoFitAll');
                items.push('AutoFit');
            }
            if (this.parent.allowGrouping && this.parent.ensureModuleInjected(group_1.Group)) {
                items.push('Group');
                items.push('Ungroup');
            }
            if (this.parent.allowSorting && this.parent.ensureModuleInjected(sort_1.Sort)) {
                items.push('SortAscending');
                items.push('SortDescending');
            }
            items.push('ColumnChooser');
            if (this.parent.allowFiltering && (this.parent.filterSettings.type !== 'FilterBar') &&
                this.parent.ensureModuleInjected(filter_1.Filter)) {
                items.push('Filter');
            }
            return items;
        };
        ColumnMenu.prototype.isFilterPopupOpen = function () {
            var filterPopup = this.getFilterPop();
            return filterPopup && filterPopup.style.display !== 'none';
        };
        ColumnMenu.prototype.getFilterPop = function () {
            Iif (!ej2_base_1.isNullOrUndefined(this.targetColumn) && this.parent.filterSettings.type === 'Menu' && ej2_base_1.Browser.isDevice) {
                return document.getElementById(this.targetColumn.uid + '-flmdlg');
            }
            return this.parent.element.querySelector('.' + this.POP) ||
                (document.getElementById(this.parent.element.id + '_e-popup') && document.getElementById(this.parent.element.id + '_e-popup').querySelector('.' + this.POP));
        };
        ColumnMenu.prototype.isFilterItemAdded = function () {
            return (this.parent.columnMenuItems &&
                this.parent.columnMenuItems.indexOf('Filter') >= 0) || !this.parent.columnMenuItems;
        };
        ColumnMenu.prototype.renderResponsiveChangeAction = function (args) {
            this.responsiveDialogRenderer.action = args.action;
        };
        return ColumnMenu;
    }());
    exports.ColumnMenu = ColumnMenu;
});