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

93.56% Statements 697/745
86.83% Branches 455/524
88.73% Functions 63/71
94.4% Lines 691/732
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 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085   38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38×     38×     38× 38×   38×           38×     78× 78×   77× 77× 77× 77× 77× 34×           416× 416×     409×       39×   38× 38× 38× 38× 38× 38× 38× 38× 38×   38×     78× 41×   37× 37× 37× 37× 37× 37× 37× 37× 37×   37×   37×     38× 38× 32×   38×   462× 462× 128× 19×     15×               109×     124×     458×   458× 399×     59×         93× 37× 37×     16×   16× 13× 13×   12× 12×   12×     12× 12× 12× 12× 12× 12× 12× 12× 12×   12×     10× 10×   12× 12× 12× 12×   12×           12×     11×     12× 12× 12×   12×     12×       15×   44× 44×     44×   36× 36×   35×   35× 20× 20×     15×   35× 35×   35× 35× 33×   33×       35× 35× 34×   35×   23×   35× 35×           25× 25× 10×   25× 24×     34× 34×   27× 27×   1791×   147×   38× 38× 38× 32×   38×                         38× 32×                               38× 38× 38× 38×     38×   58× 58× 58×       58×       58× 58× 58× 58× 58× 58× 58× 540× 540×       58× 58× 58× 58×     49×   58× 58×   15× 15× 15× 15× 15× 15×           14×   15× 15×   15× 14× 13×   13×   13× 13× 13× 13×     14×   14×                     21× 21× 21× 21× 21× 21×           21×   15× 20× 20× 20×     11× 17× 17× 17× 16×   17×     19× 19×     69× 69× 69× 36×   36×       33×   33× 30×     69× 53× 22×     31×     16×     13×     40× 40× 40× 40×   40×   40× 40× 36×   40× 36× 36× 36×         40×   40× 38× 38× 38× 38× 38× 38×   38×     36× 31×   36×                       40× 40×         38× 38× 38× 38×   77× 41×   36× 33× 33×   36× 33× 33×     39× 39× 39× 39× 24× 24× 12×     12×   24× 24×   16× 16×   24× 24×   24× 24× 24× 12× 12× 12× 61× 53×         12×   24×   24× 24× 24×         90× 90× 90× 90× 90× 2710×     2709×     90×   750× 90× 90× 79× 79×   11× 11×   90× 90×   42× 42×   48× 40× 40×           90× 79×   90× 90×   14× 14×         14× 72× 72× 72× 72× 42×   30× 30×       26× 26× 105× 105× 70×     26× 36× 36× 34×     26× 26×     26× 26× 24× 24×     26× 26× 26× 125× 125×     125× 125×   26× 26×         26× 24×     96× 96× 96×     96× 96× 96× 96× 96× 96× 96×       93×     96×           96×   96× 96×                         11× 11× 11×                                                 35× 35× 35× 35× 35× 302× 302× 302× 15×     287×   302× 302× 302× 273× 273×     29× 29×       398× 369×     29×     1056× 1056×   1056× 1056× 1056× 1056× 1056× 1056× 1056×   98× 98× 98× 98× 959× 959× 959× 959× 959× 959× 959× 959× 28×       28×     959× 250×   959×     98×   98× 98×   98× 43×         44×   28× 28×   48× 48×             20541×           49×         49× 49× 49×   14×          
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-base", "../base/constant", "@syncfusion/ej2-popups", "../base/util", "../base/enum", "@syncfusion/ej2-buttons", "../services/focus-strategy", "../base/string-literals"], function (require, exports, ej2_base_1, ej2_data_1, ej2_base_2, events, ej2_popups_1, util_1, enum_1, ej2_buttons_1, focus_strategy_1, literals) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ColumnChooser = (function () {
        function ColumnChooser(parent, serviceLocator) {
            this.filterColumns = [];
            this.showColumn = [];
            this.hideColumn = [];
            this.changedColumns = [];
            this.unchangedColumns = [];
            this.infiniteLoadedElement = [];
            this.isDlgOpen = false;
            this.isColumnChooserOpen = false;
            this.initialOpenDlg = true;
            this.stateChangeColumns = [];
            this.changedStateColumns = [];
            this.isInitialOpen = false;
            this.isCustomizeOpenCC = false;
            this.searchOperator = 'startswith';
            this.itemsCount = 50;
            this.infiniteSkipCount = 0;
            this.infiniteColumns = [];
            this.infiniteInitialLoad = false;
            this.prevInfiniteScrollDirection = '';
            this.prevShowedCols = [];
            this.hideDialogFunction = this.hideDialog.bind(this);
            this.infiniteRenderMode = false;
            this.parent = parent;
            this.serviceLocator = serviceLocator;
            this.infiniteRenderMode = this.parent.enableColumnVirtualization ? true : false;
            this.addEventListener();
            this.cBoxTrue = ej2_buttons_1.createCheckBox(this.parent.createElement, false, { checked: true, label: ' ' });
            this.cBoxFalse = ej2_buttons_1.createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });
            this.cBoxTrue.insertBefore(this.parent.createElement('input', {
                className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { type: 'checkbox' }
            }), this.cBoxTrue.firstChild);
            this.cBoxFalse.insertBefore(this.parent.createElement('input', {
                className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { 'type': 'checkbox' }
            }), this.cBoxFalse.firstChild);
            this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');
            if (this.parent.enableRtl) {
                ej2_base_1.addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);
            }
            if (this.parent.cssClass) {
                Iif (this.parent.cssClass.indexOf(' ') !== -1) {
                    ej2_base_1.addClass([this.cBoxTrue, this.cBoxFalse], this.parent.cssClass.split(' '));
                }
                else {
                    ej2_base_1.addClass([this.cBoxTrue, this.cBoxFalse], [this.parent.cssClass]);
                }
            }
            if (this.parent.enableAdaptiveUI) {
                this.setFullScreenDialog();
            }
        }
        ColumnChooser.prototype.destroy = function () {
            var gridElement = this.parent.element;
            if (!gridElement.querySelector('.' + literals.gridContent) && (!gridElement.querySelector('.' + literals.gridHeader)) || !gridElement) {
                return;
            }
            this.removeEventListener();
            this.unWireEvents();
            this.infiniteLoadedElement = null;
            this.infiniteDiv = null;
            if (!ej2_base_1.isNullOrUndefined(this.dlgObj) && this.dlgObj.element && !this.dlgObj.isDestroyed) {
                this.dlgObj.destroy();
            }
        };
        ColumnChooser.prototype.setFullScreenDialog = function () {
            Eif (this.serviceLocator) {
                this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, enum_1.ResponsiveDialogAction.isColumnChooser);
            }
            Eif (this.parent.enableAdaptiveUI) {
                this.parent.on(events.renderResponsiveColumnChooserDiv, this.renderResponsiveColumnChooserDiv, this);
                this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);
            }
        };
        ColumnChooser.prototype.rtlUpdate = function () {
            Eif (!ej2_base_1.isNullOrUndefined(this.innerDiv)) {
                if (this.parent.enableRtl) {
                    ej2_base_1.addClass([].slice.call(this.innerDiv.getElementsByClassName('e-checkbox-wrapper')), ['e-rtl']);
                }
                else {
                    ej2_base_1.removeClass([].slice.call(this.innerDiv.getElementsByClassName('e-checkbox-wrapper')), ['e-rtl']);
                }
            }
        };
        ColumnChooser.prototype.addEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            ej2_base_2.EventHandler.add(document, 'click', this.clickHandler, this);
            this.parent.on(events.uiUpdate, this.enableAfterRenderEle, this);
            this.parent.on(events.initialEnd, this.render, this);
            this.parent.addEventListener(events.dataBound, this.hideDialogFunction);
            this.parent.on(events.destroy, this.destroy, this);
            this.parent.on(events.rtlUpdated, this.rtlUpdate, this);
            this.parent.on(events.resetColumns, this.onResetColumns, this);
            this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);
            if (this.parent.enableAdaptiveUI) {
                this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);
            }
            if (this.infiniteRenderMode || this.parent.enableAdaptiveUI) {
                this.parent.on(events.renderResponsiveColumnChooserDiv, this.renderResponsiveColumnChooserDiv, this);
            }
        };
        ColumnChooser.prototype.removeEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            ej2_base_2.EventHandler.remove(document, 'click', this.clickHandler);
            this.parent.off(events.initialEnd, this.render);
            this.parent.off(events.destroy, this.destroy);
            this.parent.off(events.uiUpdate, this.enableAfterRenderEle);
            this.parent.off(events.rtlUpdated, this.rtlUpdate);
            this.parent.off(events.resetColumns, this.onResetColumns);
            this.parent.removeEventListener(events.dataBound, this.hideDialogFunction);
            this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);
            if (this.infiniteDiv) {
                ej2_base_2.EventHandler.remove(this.infiniteDiv, 'scroll', this.infiniteScrollHandler);
                ej2_base_2.EventHandler.remove(this.infiniteDiv, 'mouseup', this.infiniteScrollMouseKeyUpHandler);
                ej2_base_2.EventHandler.remove(this.infiniteDiv, 'mousedown', this.infiniteScrollMouseKeyDownHandler);
            }
            if (this.parent.enableAdaptiveUI) {
                this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);
                this.parent.off(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction);
            }
            if (this.infiniteRenderMode || this.parent.enableAdaptiveUI) {
                this.parent.off(events.renderResponsiveColumnChooserDiv, this.renderResponsiveColumnChooserDiv);
            }
        };
        ColumnChooser.prototype.render = function () {
            this.l10n = this.serviceLocator.getService('localization');
            if (!this.parent.enableAdaptiveUI) {
                this.renderDlgContent();
            }
            this.getShowHideService = this.serviceLocator.getService('showHideService');
        };
        ColumnChooser.prototype.clickHandler = function (e) {
            var targetElement = e.target;
            if (!this.isCustomizeOpenCC) {
                if (!ej2_base_1.isNullOrUndefined(ej2_base_2.closest(targetElement, '.e-cc-toolbar')) || !ej2_base_1.isNullOrUndefined(ej2_base_2.closest(targetElement, '.e-cc'))) {
                    if (targetElement.classList.contains('e-columnchooser-btn') || targetElement.classList.contains('e-cc-toolbar')) {
                        Eif ((this.initialOpenDlg && this.dlgObj.visible) || !this.isDlgOpen) {
                            this.isDlgOpen = true;
                            return;
                        }
                    }
                    else Iif (targetElement.classList.contains('e-cc-cancel')) {
                        targetElement.parentElement.querySelector('.e-ccsearch').value = '';
                        this.columnChooserSearch('');
                        this.removeCancelIcon();
                        this.refreshCheckboxButton();
                    }
                }
                else {
                    if (!ej2_base_1.isNullOrUndefined(this.dlgObj) && this.dlgObj.visible && !targetElement.classList.contains('e-toolbar-items')) {
                        this.dlgObj.hide();
                        this.clearActions();
                        this.refreshCheckboxState();
                        this.isDlgOpen = false;
                    }
                }
                if (this.parent.detailTemplate || this.parent.childGrid) {
                    this.targetdlg = e.target;
                }
            }
            if (this.isCustomizeOpenCC && e.target.classList.contains('e-cc-cancel')) {
                this.refreshCheckboxState();
            }
            if (!this.parent.enableAdaptiveUI) {
                this.rtlUpdate();
            }
            else {
                Iif (this.parent.enableRtl) {
                    ej2_base_1.addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);
                }
            }
        };
        ColumnChooser.prototype.hideDialog = function () {
            if (!ej2_base_1.isNullOrUndefined(this.dlgObj) && this.dlgObj.visible) {
                this.dlgObj.hide();
                this.isDlgOpen = false;
            }
        };
        ColumnChooser.prototype.renderColumnChooser = function (x, y, target) {
            if (!this.dlgObj.visible && (this.parent.detailTemplate || this.parent.childGrid)) {
                this.hideOpenedDialog();
            }
            if (!this.dlgObj.visible) {
                var args = this.beforeOpenColumnChooserEvent();
                if (args.cancel) {
                    return;
                }
                Eif (target) {
                    this.targetdlg = target;
                }
                Iif (this.infiniteRenderMode) {
                    this.dlgObj.show();
                }
                this.refreshCheckboxState();
                this.dlgObj.dataBind();
                this.dlgObj.element.style.maxHeight = '430px';
                var elementVisible = this.dlgObj.element.style.display;
                this.dlgObj.element.style.display = 'block';
                var isSticky = this.parent.getHeaderContent().classList.contains('e-sticky');
                var toolbarItem = ej2_base_2.closest(target, '.e-toolbar-item');
                var newpos = void 0;
                if (document.getElementById(this.parent.element.id + '_e-popup') && document.getElementById(this.parent.element.id + '_e-popup').querySelector('.e-ccdlg')) {
                    this.parent.element.appendChild(this.dlgObj.element);
                }
                if (isSticky) {
                    newpos = toolbarItem.getBoundingClientRect();
                    this.dlgObj.element.classList.add('e-sticky');
                }
                else {
                    this.dlgObj.element.classList.remove('e-sticky');
                    newpos = ej2_popups_1.calculateRelativeBasedPosition(toolbarItem, this.dlgObj.element);
                }
                this.dlgObj.element.style.display = elementVisible;
                this.dlgObj.element.style.top = newpos.top + ej2_base_2.closest(target, '.e-cc-toolbar').getBoundingClientRect().height + 'px';
                var dlgWidth = 250;
                if (!ej2_base_1.isNullOrUndefined(ej2_base_2.closest(target, '.e-bigger'))) {
                    this.dlgObj.width = 258;
                }
                Iif (ej2_base_1.Browser.isDevice) {
                    this.dlgObj.position = { X: 'center', Y: 'center' };
                    this.dlgObj.refreshPosition();
                    this.dlgObj.open = this.mOpenDlg.bind(this);
                }
                else {
                    if (this.parent.enableRtl) {
                        this.dlgObj.element.style.left = target.offsetLeft + 'px';
                    }
                    else {
                        this.dlgObj.element.style.left = ((newpos.left - dlgWidth) + ej2_base_2.closest(target, '.e-cc-toolbar').clientWidth) + 2 + 'px';
                    }
                }
                this.removeCancelIcon();
                Eif (!this.infiniteRenderMode) {
                    this.dlgObj.show();
                }
                if (this.parent.getContent().firstElementChild.offsetHeight < this.dlgObj.element.offsetHeight &&
                    !this.parent.element.classList.contains('e-drillthrough-grid')) {
                    util_1.resetDialogAppend(this.parent, this.dlgObj);
                    this.dlgObj.element.querySelector('.e-ccsearch').select();
                }
                this.parent.notify(events.columnChooserOpened, { dialog: this.dlgObj });
            }
            else {
                this.hideDialog();
                this.addcancelIcon();
                this.clearActions();
                this.refreshCheckboxState();
            }
            this.rtlUpdate();
        };
        ColumnChooser.prototype.openColumnChooser = function (X, Y) {
            this.isCustomizeOpenCC = true;
            if (this.parent.enableAdaptiveUI) {
                if (!this.isColumnChooserOpen) {
                    this.parent.showResponsiveCustomColumnChooser();
                }
                this.isColumnChooserOpen = false;
                this.renderDlgContent();
            }
            if (this.dlgObj.visible) {
                this.hideDialog();
                return;
            }
            var args = this.beforeOpenColumnChooserEvent();
            if (args.cancel) {
                return;
            }
            if (this.infiniteRenderMode) {
                this.dlgObj.show();
            }
            if (!this.isInitialOpen) {
                this.dlgObj.content = this.renderChooserList();
                this.updateIntermediateBtn();
            }
            else {
                this.refreshCheckboxState();
            }
            this.dlgObj.dataBind();
            if (this.infiniteRenderMode) {
                this.refreshCheckboxState();
            }
            this.dlgObj.position = { X: 'center', Y: 'center' };
            if (ej2_base_1.isNullOrUndefined(X)) {
                if (this.parent.enableAdaptiveUI) {
                    this.dlgObj.position = { X: '', Y: '' };
                }
                this.dlgObj.refreshPosition();
            }
            else {
                this.dlgObj.element.style.top = '';
                this.dlgObj.element.style.left = '';
                this.dlgObj.element.style.top = Y + 'px';
                this.dlgObj.element.style.left = X + 'px';
            }
            this.dlgObj.beforeOpen = this.customDialogOpen.bind(this);
            if (!this.infiniteRenderMode) {
                this.dlgObj.show();
            }
            if (this.parent.getContent().firstElementChild.offsetHeight < this.dlgObj.element.offsetHeight &&
                !this.parent.element.classList.contains('e-drillthrough-grid')) {
                util_1.resetDialogAppend(this.parent, this.dlgObj);
            }
            this.isInitialOpen = true;
            this.dlgObj.beforeClose = this.customDialogClose.bind(this);
        };
        ColumnChooser.prototype.enableAfterRenderEle = function (e) {
            if (e.module === this.getModuleName() && e.enable) {
                this.render();
            }
        };
        ColumnChooser.prototype.keyUpHandler = function (e) {
            Eif (e.key === 'Escape') {
                this.resetColumnState();
            }
            this.setFocus(util_1.parentsUntil(e.target, 'e-cclist'));
        };
        ColumnChooser.prototype.setFocus = function (elem) {
            var prevElem = this.dlgDiv.querySelector('.e-colfocus');
            if (prevElem) {
                prevElem.classList.remove('e-colfocus');
            }
            if (elem) {
                elem.classList.add('e-colfocus');
            }
        };
        ColumnChooser.prototype.customDialogOpen = function () {
            var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
            ej2_base_2.EventHandler.add(searchElement, 'keyup', this.columnChooserManualSearch, this);
        };
        ColumnChooser.prototype.customDialogClose = function () {
            var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
            ej2_base_2.EventHandler.remove(searchElement, 'keyup', this.columnChooserManualSearch);
        };
        ColumnChooser.prototype.getColumns = function () {
            var columns = (this.infiniteRenderMode ? this.infiniteColumns : this.parent.getColumns()).filter(function (column) { return (column.type !== 'checkbox'
                && column.showInColumnChooser === true) || (column.type === 'checkbox' && column.field !== undefined); });
            return columns;
        };
        ColumnChooser.prototype.renderDlgContent = function () {
            var isAdaptive = this.parent.enableAdaptiveUI;
            this.dlgDiv = this.parent.createElement('div', { className: 'e-ccdlg e-cc', id: this.parent.element.id + '_ccdlg' });
            if (!isAdaptive) {
                this.parent.element.appendChild(this.dlgDiv);
            }
            this.dlgObj = new ej2_popups_1.Dialog({
                header: this.parent.enableAdaptiveUI ? null : this.l10n.getConstant('ChooseColumns'),
                showCloseIcon: false,
                closeOnEscape: false,
                locale: this.parent.locale,
                visible: false,
                enableRtl: this.parent.enableRtl,
                target: document.getElementById(this.parent.element.id),
                content: this.renderChooserList(),
                width: 250,
                cssClass: this.parent.cssClass ? 'e-cc' + ' ' + this.parent.cssClass : 'e-cc',
                animationSettings: { effect: 'None' }
            });
            if (!isAdaptive) {
                this.dlgObj.buttons = [{
                        click: this.confirmDlgBtnClick.bind(this),
                        buttonModel: {
                            content: this.l10n.getConstant('OKButton'), isPrimary: true,
                            cssClass: this.parent.cssClass ? 'e-cc e-cc_okbtn' + ' ' + this.parent.cssClass : 'e-cc e-cc_okbtn'
                        }
                    },
                    {
                        click: this.clearBtnClick.bind(this),
                        buttonModel: {
                            cssClass: this.parent.cssClass ?
                                'e-flat e-cc e-cc-cnbtn' + ' ' + this.parent.cssClass : 'e-flat e-cc e-cc-cnbtn',
                            content: this.l10n.getConstant('CancelButton')
                        }
                    }];
            }
            var isStringTemplate = 'isStringTemplate';
            this.dlgObj["" + isStringTemplate] = true;
            this.dlgObj.appendTo(this.dlgDiv);
            if (isAdaptive) {
                var responsiveCnt = document.querySelector('.e-responsive-dialog > .e-dlg-content > .e-mainfilterdiv');
                Eif (responsiveCnt) {
                    responsiveCnt.appendChild(this.dlgDiv);
                }
                this.dlgObj.open = this.mOpenDlg.bind(this);
                this.dlgObj.target = document.querySelector('.e-rescolumnchooser > .e-dlg-content > .e-mainfilterdiv');
            }
            this.wireEvents();
        };
        ColumnChooser.prototype.renderChooserList = function () {
            this.mainDiv = this.parent.createElement('div', { className: 'e-main-div e-cc' });
            var searchDiv = this.parent.createElement('div', { className: 'e-cc-searchdiv e-cc e-input-group' });
            var ccsearchele = this.parent.createElement('input', {
                className: 'e-ccsearch e-cc e-input',
                attrs: { placeholder: this.l10n.getConstant('Search'), cssClass: this.parent.cssClass }
            });
            var ccsearchicon = this.parent.createElement('span', {
                className: 'e-ccsearch-icon e-icons e-cc e-input-group-icon',
                attrs: { title: this.l10n.getConstant('Search') }
            });
            var conDiv = this.parent.createElement('div', { className: 'e-cc-contentdiv' });
            this.innerDiv = this.parent.createElement('div', { className: 'e-innerdiv e-cc' });
            searchDiv.appendChild(ccsearchele);
            searchDiv.appendChild(ccsearchicon);
            this.searchBoxObj = new focus_strategy_1.SearchBox(ccsearchele, this.serviceLocator);
            var columns = this.getColumns();
            if (this.infiniteRenderMode && !this.isInitialOpen) {
                columns = this.parent.columns;
                for (var i = 0; i < columns.length; i++) {
                    Eif (columns[parseInt(i.toString(), 10)].showInColumnChooser) {
                        this.infiniteColumns.push(columns[parseInt(i.toString(), 10)]);
                    }
                }
            }
            var innerDivContent = this.refreshCheckboxList(columns);
            this.innerDiv.appendChild(innerDivContent);
            conDiv.appendChild(this.innerDiv);
            if (this.parent.enableAdaptiveUI) {
                var searchBoxDiv = this.parent.createElement('div', { className: 'e-cc-searchBox' });
                searchBoxDiv.appendChild(searchDiv);
                this.mainDiv.appendChild(searchBoxDiv);
            }
            else {
                this.mainDiv.appendChild(searchDiv);
            }
            this.mainDiv.appendChild(conDiv);
            return this.mainDiv;
        };
        ColumnChooser.prototype.confirmDlgBtnClick = function (args) {
            var _this = this;
            this.stateChangeColumns = [];
            this.changedStateColumns = [];
            var columns = this.infiniteRenderMode ? this.infiniteColumns : this.parent.getColumns();
            var isCheckALL = (this.infiniteRenderMode ? this.mainDiv : this.ulElement).querySelector('.e-selectall.e-check');
            if (this.searchValue && this.filterColumns.length && isCheckALL) {
                this.changedColumns = this.filterColumns.map(function (column) { return column.uid; });
                this.showColumn = [];
                this.hideColumn = [];
                columns.map(function (column) {
                    if (_this.changedColumns.indexOf(column.uid) !== -1) {
                        _this.showColumn.push(column.uid);
                    }
                    else if (column.showInColumnChooser) {
                        _this.hideColumn.push(column.uid);
                    }
                });
            }
            else {
                this.changedColumns = (this.changedColumns.length > 0) ? this.changedColumns : this.unchangedColumns;
            }
            this.changedColumnState(this.changedColumns);
            var uncheckedLength = this.infiniteRenderMode ? this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-uncheck'); }).length : this.ulElement.querySelector('.e-uncheck') &&
                this.ulElement.querySelectorAll('.e-uncheck:not(.e-selectall)').length;
            if (!ej2_base_1.isNullOrUndefined(args)) {
                if (uncheckedLength < columns.length) {
                    if (this.hideColumn.length) {
                        this.columnStateChange(this.hideColumn, false);
                    }
                    if (this.showColumn.length) {
                        this.columnStateChange(this.showColumn, true);
                    }
                    this.getShowHideService.setVisible(this.stateChangeColumns, this.changedStateColumns);
                    this.clearActions();
                    this.parent.notify(events.tooltipDestroy, { module: 'edit' });
                    if (this.parent.getCurrentViewRecords().length === 0) {
                        var emptyRowCell = this.parent.element.querySelector('.e-emptyrow').querySelector('td');
                        emptyRowCell.setAttribute('colSpan', this.parent.getVisibleColumns().length.toString());
                    }
                }
                if (this.parent.enableAdaptiveUI && this.parent.scrollModule) {
                    this.parent.scrollModule.refresh();
                }
                Iif (this.parent.editSettings.showAddNewRow) {
                    this.parent.notify(events.showAddNewRowFocus, {});
                }
            }
        };
        ColumnChooser.prototype.onResetColumns = function (e) {
            Eif (e.requestType === 'columnstate') {
                this.resetColumnState();
                return;
            }
        };
        ColumnChooser.prototype.renderResponsiveColumnChooserDiv = function (args) {
            if (args.action === 'open') {
                this.isColumnChooserOpen = true;
                this.openColumnChooser();
            }
            else if (args.action === 'clear') {
                this.clearBtnClick();
            }
            else Eif (args.action === 'confirm') {
                this.confirmDlgBtnClick(true);
            }
        };
        ColumnChooser.prototype.resetColumnState = function () {
            this.showColumn = [];
            this.hideColumn = [];
            this.changedColumns = [];
            this.filterColumns = [];
            this.searchValue = '';
            Iif (this.infiniteRenderMode) {
                var focusListElement = this.dlgDiv.querySelector('.e-cclist.e-cc-selectall.e-colfocus');
                if (focusListElement) {
                    focusListElement.classList.remove('e-colfocus');
                }
            }
            this.hideDialog();
        };
        ColumnChooser.prototype.changedColumnState = function (changedColumns) {
            for (var index = 0; index < changedColumns.length; index++) {
                var colUid = changedColumns[parseInt(index.toString(), 10)];
                var currentColumn = this.parent.getColumnByUid(colUid, this.infiniteRenderMode);
                this.changedStateColumns.push(currentColumn);
            }
        };
        ColumnChooser.prototype.columnStateChange = function (stateColumns, state) {
            for (var index = 0; index < stateColumns.length; index++) {
                var colUid = stateColumns[parseInt(index.toString(), 10)];
                var currentColumn = this.parent.getColumnByUid(colUid, this.infiniteRenderMode);
                if (currentColumn.type !== 'checkbox') {
                    currentColumn.visible = state;
                }
                this.stateChangeColumns.push(currentColumn);
            }
        };
        ColumnChooser.prototype.clearActions = function () {
            this.resetColumnState();
            this.addcancelIcon();
        };
        ColumnChooser.prototype.clearBtnClick = function () {
            this.clearActions();
            this.parent.notify(events.columnChooserCancelBtnClick, { dialog: this.dlgObj });
        };
        ColumnChooser.prototype.checkstatecolumn = function (isChecked, coluid, selectAll) {
            if (selectAll === void 0) { selectAll = false; }
            var currentColumn = this.parent.getColumnByUid(coluid, this.infiniteRenderMode);
            if (isChecked) {
                if (this.hideColumn.indexOf(coluid) !== -1) {
                    this.hideColumn.splice(this.hideColumn.indexOf(coluid), 1);
                }
                if (this.showColumn.indexOf(coluid) === -1 && !(currentColumn && currentColumn.visible)) {
                    this.showColumn.push(coluid);
                }
            }
            else {
                if (this.showColumn.indexOf(coluid) !== -1) {
                    this.showColumn.splice(this.showColumn.indexOf(coluid), 1);
                }
                if (this.hideColumn.indexOf(coluid) === -1 && (currentColumn && currentColumn.visible)) {
                    this.hideColumn.push(coluid);
                }
            }
            if (selectAll) {
                if (!isChecked) {
                    this.changedColumns.push(coluid);
                }
                else {
                    this.unchangedColumns.push(coluid);
                }
            }
            else if (this.changedColumns.indexOf(coluid) !== -1) {
                this.changedColumns.splice(this.changedColumns.indexOf(coluid), 1);
            }
            else {
                this.changedColumns.push(coluid);
            }
        };
        ColumnChooser.prototype.columnChooserSearch = function (searchVal) {
            var clearSearch = false;
            var okButton;
            var buttonEle = this.dlgDiv.querySelector('.e-footer-content');
            var selectedCheckbox = this.ulElement.querySelector('.e-check') &&
                this.ulElement.querySelectorAll('.e-check:not(.e-selectall)').length;
            if (this.infiniteRenderMode) {
                selectedCheckbox = this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-check'); }).length;
            }
            this.isInitialOpen = true;
            if (buttonEle) {
                okButton = buttonEle.querySelector('.e-btn').ej2_instances[0];
            }
            if (searchVal === '') {
                this.removeCancelIcon();
                this.filterColumns = this.getColumns();
                clearSearch = true;
            }
            else {
                this.filterColumns = new ej2_data_1.DataManager(this.getColumns()).executeLocal(new ej2_data_1.Query()
                    .where('headerText', this.searchOperator, searchVal, true, this.parent.columnChooserSettings.ignoreAccent));
            }
            if (this.infiniteRenderMode) {
                this.updateIfiniteSelectAll();
            }
            if (this.filterColumns.length) {
                this.innerDiv.innerHTML = ' ';
                this.innerDiv.classList.remove('e-ccnmdiv');
                this.infiniteInitialLoad = true;
                this.infiniteLoadedElement = [];
                this.innerDiv.appendChild(this.refreshCheckboxList(this.filterColumns));
                if (this.infiniteRenderMode) {
                    this.mainDiv.querySelector('.e-ccheck .e-selectall').parentElement.classList.remove('e-checkbox-disabled');
                    this.updateIntermediateBtn();
                }
                if (!clearSearch) {
                    this.addcancelIcon();
                    this.refreshCheckboxButton();
                }
                else {
                    if (okButton && selectedCheckbox) {
                        okButton.disabled = false;
                    }
                    if (selectedCheckbox && this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
                        this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: false });
                    }
                }
            }
            else {
                var nMatchele = this.parent.createElement('span', { className: 'e-cc e-nmatch' });
                nMatchele.innerHTML = this.l10n.getConstant('Matchs');
                this.innerDiv.innerHTML = ' ';
                Iif (this.infiniteRenderMode) {
                    ej2_base_1.removeClass([this.mainDiv.querySelector('.e-frame.e-selectall')], ['e-check', 'e-stop', 'e-uncheck']);
                    this.mainDiv.querySelector('.e-ccheck .e-selectall').parentElement.classList.add('e-checkbox-disabled');
                }
                this.innerDiv.appendChild(nMatchele);
                this.innerDiv.classList.add('e-ccnmdiv');
                if (okButton) {
                    okButton.disabled = true;
                }
                Iif (this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
                    this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: true });
                }
            }
            this.flag = true;
            this.stopTimer();
        };
        ColumnChooser.prototype.updateIfiniteSelectAll = function () {
            this.changedColumns = [];
            this.hideColumn = [];
            this.showColumn = [];
            var unCheckItem = this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-uncheck'); });
            for (var i = 0; i < unCheckItem.length; i++) {
                this.checkState(unCheckItem[parseInt(i.toString(), 10)].querySelector('.e-frame'), true);
            }
        };
        ColumnChooser.prototype.wireEvents = function () {
            ej2_base_2.EventHandler.add(this.dlgObj.element, 'click', this.checkBoxClickHandler, this);
            ej2_base_2.EventHandler.add(this.searchBoxObj.searchBox, 'keyup', this.columnChooserManualSearch, this);
            ej2_base_2.EventHandler.add(this.dlgObj.element, 'keyup', this.keyUpHandler, this);
            this.searchBoxObj.wireEvent();
        };
        ColumnChooser.prototype.unWireEvents = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            if (this.dlgObj && this.dlgObj.element) {
                ej2_base_2.EventHandler.remove(this.dlgObj.element, 'click', this.checkBoxClickHandler);
                ej2_base_2.EventHandler.remove(this.dlgObj.element, 'keyup', this.keyUpHandler);
            }
            if (this.searchBoxObj) {
                ej2_base_2.EventHandler.remove(this.searchBoxObj.searchBox, 'keyup', this.columnChooserManualSearch);
                this.searchBoxObj.unWireEvent();
            }
        };
        ColumnChooser.prototype.checkBoxClickHandler = function (e) {
            var checkstate;
            var selectAllElement = util_1.parentsUntil(e.target, 'e-checkbox-wrapper');
            var columns = this.infiniteRenderMode ? this.infiniteColumns : this.parent.getColumns();
            if (selectAllElement) {
                var selectAll = selectAllElement.querySelector('.e-selectall');
                if (selectAll) {
                    this.updateSelectAll(!selectAllElement.querySelector('.e-check'));
                }
                else {
                    util_1.toogleCheckbox(selectAllElement.parentElement);
                }
                selectAllElement.querySelector('.e-chk-hidden').focus();
                if (selectAllElement.querySelector('.e-check')) {
                    checkstate = true;
                }
                else Eif (selectAllElement.querySelector('.e-uncheck')) {
                    checkstate = false;
                }
                Eif (!this.infiniteRenderMode) {
                    this.updateIntermediateBtn();
                }
                var columnUid = util_1.parentsUntil(selectAllElement, 'e-ccheck').getAttribute('uid');
                var column = (this.searchValue && this.searchValue.length) ? this.filterColumns : columns;
                if (columnUid === this.parent.element.id + '-selectAll') {
                    this.changedColumns = [];
                    this.unchangedColumns = [];
                    for (var i = 0; i < column.length; i++) {
                        if (column[parseInt(i.toString(), 10)].showInColumnChooser) {
                            this.checkstatecolumn(checkstate, column[parseInt(i.toString(), 10)].uid, true);
                        }
                    }
                }
                else {
                    this.checkstatecolumn(checkstate, columnUid);
                }
                var isSelectAll = this.infiniteRenderMode && selectAllElement.querySelector('.e-selectall') &&
                    selectAllElement.querySelector('.e-uncheck') ? true : false;
                this.refreshCheckboxButton(isSelectAll);
                this.setFocus(util_1.parentsUntil(e.target, 'e-cclist'));
                Iif (this.infiniteRenderMode) {
                    this.updateIntermediateBtn();
                }
            }
        };
        ColumnChooser.prototype.updateIntermediateBtn = function () {
            var count = this.infiniteRenderMode ? this.infiniteLoadedElement.length : this.ulElement.children.length - 1;
            var className = [];
            var hideColumnsCount = 0;
            var showColumnsCount = 0;
            (this.searchValue && this.searchValue.length ? this.filterColumns : this.infiniteColumns).filter(function (column) {
                if (column.visible === false) {
                    hideColumnsCount++;
                }
                else {
                    showColumnsCount++;
                }
            });
            var selectAllElement = (this.infiniteRenderMode && this.mainDiv.querySelector('.e-cc-selectall') ?
                this.mainDiv.querySelector('.e-cc-selectall') : this.ulElement.children[0]).querySelector('.e-frame');
            var selected = this.infiniteRenderMode ? this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-check'); }).length : this.ulElement.querySelectorAll('.e-check:not(.e-selectall)').length;
            var btn;
            if (!this.parent.enableAdaptiveUI) {
                btn = this.dlgObj.btnObj[0];
                btn.disabled = false;
            }
            else Eif (this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
                this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: false });
            }
            var inputElem = selectAllElement.parentElement.querySelector('input');
            if (count === selected && (!this.infiniteRenderMode || (this.infiniteRenderMode &&
                hideColumnsCount === this.showColumn.length))) {
                className = ['e-check'];
                util_1.setChecked(inputElem, true);
            }
            else if (selected || (this.infiniteRenderMode && !selected && showColumnsCount !== this.hideColumn.length)) {
                className = ['e-stop'];
                inputElem.indeterminate = true;
            }
            else {
                className = ['e-uncheck'];
                util_1.setChecked(inputElem, false);
                if (!this.parent.enableAdaptiveUI) {
                    btn.disabled = true;
                }
                else Eif (this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
                    this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: true });
                }
            }
            if (!this.parent.enableAdaptiveUI) {
                btn.dataBind();
            }
            ej2_base_1.removeClass([selectAllElement], ['e-check', 'e-stop', 'e-uncheck']);
            ej2_base_1.addClass([selectAllElement], className);
        };
        ColumnChooser.prototype.updateSelectAll = function (checked) {
            var checkBoxItems = [].slice.call(this.ulElement.getElementsByClassName('e-frame'));
            Iif (this.infiniteRenderMode) {
                checkBoxItems = [];
                this.infiniteLoadedElement.map(function (arr) { return checkBoxItems.push(arr.querySelector('.e-frame')); });
                checkBoxItems.unshift(this.mainDiv.querySelector('.e-cc-selectall').querySelector('.e-frame'));
            }
            for (var _i = 0, checkBoxItems_1 = checkBoxItems; _i < checkBoxItems_1.length; _i++) {
                var checkBoxItem = checkBoxItems_1[_i];
                util_1.removeAddCboxClasses(checkBoxItem, checked);
                var cBoxInput = checkBoxItem.parentElement.querySelector('input');
                if (checkBoxItem.classList.contains('e-check')) {
                    util_1.setChecked(cBoxInput, true);
                }
                else Eif (checkBoxItem.classList.contains('e-uncheck')) {
                    util_1.setChecked(cBoxInput, false);
                }
            }
        };
        ColumnChooser.prototype.refreshCheckboxButton = function (checkstate) {
            var visibleCols = this.parent.getVisibleColumns();
            for (var i = 0; i < visibleCols.length; i++) {
                var columnUID = visibleCols[parseInt(i.toString(), 10)].uid;
                if (this.prevShowedCols.indexOf(columnUID) === -1 && visibleCols[parseInt(i.toString(), 10)].type !== 'checkbox') {
                    this.prevShowedCols.push(columnUID);
                }
            }
            for (var i = 0; i < this.hideColumn.length; i++) {
                var index = this.prevShowedCols.indexOf(this.hideColumn[parseInt(i.toString(), 10)]);
                if (index !== -1) {
                    this.prevShowedCols.splice(index, 1);
                }
            }
            var selected = this.showColumn.length !== 0 ? 1 : this.prevShowedCols.length;
            Iif (this.infiniteRenderMode) {
                selected = this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-uncheck'); }).length;
            }
            var btn;
            if (!this.parent.enableAdaptiveUI) {
                btn = this.dlgDiv.querySelector('.e-footer-content').querySelector('.e-btn').ej2_instances[0];
                btn.disabled = false;
            }
            else Eif (this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
                this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: false });
            }
            var sreachShowColumns = [];
            var searchData = [].slice.call(document.getElementsByClassName('e-cc-chbox'));
            for (var i = 0, itemsLen = searchData.length; i < itemsLen; i++) {
                var element = searchData[parseInt(i.toString(), 10)];
                Iif (this.infiniteRenderMode && element.classList.contains('e-selectall')) {
                    continue;
                }
                var columnUID = util_1.parentsUntil(element, 'e-ccheck').getAttribute('uid');
                sreachShowColumns.push(columnUID);
            }
            var hideColumns = this.showColumn.filter(function (column) { return sreachShowColumns.indexOf(column) !== -1; });
            if ((this.infiniteRenderMode && (checkstate || sreachShowColumns.length === selected)) ||
                (!this.infiniteRenderMode && selected === 0 && hideColumns.length === 0)) {
                if (!this.parent.enableAdaptiveUI) {
                    btn.disabled = true;
                }
                else Eif (this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
                    this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: true });
                }
            }
            if (!this.parent.enableAdaptiveUI) {
                btn.dataBind();
            }
        };
        ColumnChooser.prototype.refreshCheckboxList = function (chooserColumns) {
            this.ulElement = this.parent.createElement('ul', { className: 'e-ccul-ele e-cc' });
            var selectAllValue = this.l10n.getConstant('SelectAll');
            var columnChooserList = this.parent.createElement('li', { className: 'e-cclist e-cc e-cc-selectall',
                'styles': this.infiniteRenderMode ? 'list-style:None' : ''
            });
            var selectAll = this.createCheckBox(selectAllValue, false, this.parent.element.id + '-selectAll');
            Eif (chooserColumns.length) {
                selectAll.querySelector('.e-checkbox-wrapper').firstElementChild.classList.add('e-selectall');
                selectAll.querySelector('.e-frame').classList.add('e-selectall');
                this.checkState(selectAll.querySelector('.e-icons'), true);
                columnChooserList.appendChild(selectAll);
                if (this.infiniteRenderMode) {
                    if (this.mainDiv.querySelector('.e-cc-contentdiv') && !this.mainDiv.querySelector('.e-cc-selectall')) {
                        this.infiniteDiv = this.mainDiv.querySelector('.e-cc-contentdiv');
                        this.mainDiv.insertBefore(columnChooserList, this.infiniteDiv);
                        this.infiniteDiv.classList.add('e-checkbox-infinitescroll');
                        ej2_base_2.EventHandler.add(this.infiniteDiv, 'scroll', this.infiniteScrollHandler, this);
                        ej2_base_2.EventHandler.add(this.infiniteDiv, 'mouseup', this.infiniteScrollMouseKeyUpHandler, this);
                        ej2_base_2.EventHandler.add(this.infiniteDiv, 'mousedown', this.infiniteScrollMouseKeyDownHandler, this);
                    }
                }
                else {
                    this.ulElement.appendChild(columnChooserList);
                }
            }
            if (this.parent.cssClass) {
                Iif (this.parent.cssClass.indexOf(' ') !== -1) {
                    ej2_base_1.addClass([selectAll], this.parent.cssClass.split(' '));
                }
                else {
                    ej2_base_1.addClass([selectAll], [this.parent.cssClass]);
                }
            }
            if (this.infiniteRenderMode && chooserColumns.length > (this.itemsCount * 3)) {
                this.infiniteSkipCount = this.itemsCount * 2;
            }
            this.renderCheckbox(chooserColumns.slice(0, this.infiniteRenderMode ? this.itemsCount * 3 : chooserColumns.length));
            return this.ulElement;
        };
        ColumnChooser.prototype.infiniteScrollMouseKeyDownHandler = function () {
            ej2_base_2.EventHandler.remove(this.infiniteDiv, 'scroll', this.infiniteScrollHandler);
        };
        ColumnChooser.prototype.infiniteScrollMouseKeyUpHandler = function (e) {
            var _this = this;
            ej2_base_2.EventHandler.add(this.infiniteDiv, 'scroll', this.infiniteScrollHandler, this);
            var target = this.infiniteDiv;
            if (this.ulElement.children.length > 1 && (target.scrollTop >= target.scrollHeight - target.offsetHeight ||
                target.scrollTop <= 0)) {
                this.infiniteScrollHandler();
            }
            util_1.Global.timer = setTimeout(function () { _this.clickHandler(e); util_1.Global.timer = null; }, 0);
        };
        ColumnChooser.prototype.infiniteScrollHandler = function () {
            var target = this.infiniteDiv;
            var columns = this.searchValue && this.searchValue.length ? this.filterColumns : this.infiniteColumns;
            if (target.scrollTop >= target.scrollHeight - target.offsetHeight
                && this.infiniteLoadedElement.length <= (this.infiniteSkipCount + this.itemsCount)
                && this.ulElement.children.length === this.itemsCount * 3
                && (!columns.length || columns.length > (this.infiniteSkipCount + this.itemsCount))) {
                var diffcount = columns.length - (this.infiniteSkipCount + this.itemsCount);
                var count = 0;
                Iif (diffcount < this.itemsCount) {
                    count = diffcount;
                }
                util_1.infiniteRemoveElements(([].slice.call(this.ulElement.children)).splice(0, this.itemsCount));
                this.infiniteInitialLoad = true;
                this.infiniteSkipCount += this.itemsCount;
                this.renderCheckbox(columns.slice(this.infiniteSkipCount, this.infiniteSkipCount + (count + this.itemsCount)));
                this.prevInfiniteScrollDirection = 'down';
            }
            else if (target.scrollTop >= target.scrollHeight - target.offsetHeight && this.infiniteLoadedElement.length > (this.infiniteSkipCount + this.itemsCount) && this.ulElement.children.length === this.itemsCount * 3) {
                util_1.infiniteRemoveElements(([].slice.call(this.ulElement.children)).splice(0, this.itemsCount));
                this.infiniteSkipCount += this.prevInfiniteScrollDirection === 'down' ? this.itemsCount :
                    (this.itemsCount * 3);
                util_1.appendChildren(this.ulElement, this.infiniteLoadedElement.slice(this.infiniteSkipCount, this.itemsCount +
                    this.infiniteSkipCount));
                this.prevInfiniteScrollDirection = 'down';
            }
            else if (target.scrollTop === 0 && !this.infiniteInitialLoad && this.infiniteSkipCount
                && this.infiniteLoadedElement.length && this.infiniteLoadedElement.length > this.itemsCount * 3
                && this.ulElement.children.length === this.itemsCount * 3) {
                util_1.infiniteRemoveElements(([].slice.call(this.ulElement.children)).splice(this.itemsCount * 2, this.itemsCount));
                this.infiniteSkipCount -= this.prevInfiniteScrollDirection === 'up' ? this.itemsCount : this.itemsCount * 3;
                util_1.infiniteAppendElements([].slice.call(this.infiniteLoadedElement.slice(this.infiniteSkipCount, this.infiniteSkipCount +
                    this.itemsCount)), this.ulElement);
                this.prevInfiniteScrollDirection = 'up';
                this.infiniteDiv.scrollTop = this.infiniteScrollAppendDiff;
            }
            else Iif (target.scrollTop === 0 && !this.infiniteInitialLoad && this.infiniteSkipCount &&
                (this.infiniteSkipCount > this.itemsCount * 2) && this.infiniteLoadedElement.length &&
                this.ulElement.children.length < this.itemsCount * 3) {
                util_1.infiniteRemoveElements(([].slice.call(this.ulElement.children)).splice((this.itemsCount * 2), columns.length % this.itemsCount));
                this.infiniteSkipCount = (Math.floor(columns.length / this.itemsCount) - 3) *
                    this.itemsCount;
                util_1.infiniteAppendElements([].slice.call(this.infiniteLoadedElement.slice(this.infiniteSkipCount, this.infiniteSkipCount +
                    this.itemsCount)), this.ulElement);
                this.infiniteDiv.scrollTop = this.infiniteScrollAppendDiff;
                this.prevInfiniteScrollDirection = 'up';
            }
        };
        ColumnChooser.prototype.refreshCheckboxState = function () {
            this.dlgObj.element.querySelector('.e-cc.e-input').value = '';
            this.columnChooserSearch('');
            var gridObject = this.parent;
            var currentCheckBoxColls = this.dlgObj.element.querySelectorAll('.e-cc-chbox:not(.e-selectall)');
            for (var i = 0, itemLen = currentCheckBoxColls.length; i < itemLen; i++) {
                var element = currentCheckBoxColls[parseInt(i.toString(), 10)];
                var columnUID = void 0;
                if (this.parent.childGrid || this.parent.detailTemplate) {
                    columnUID = util_1.parentsUntil(this.dlgObj.element.querySelectorAll('.e-cc-chbox:not(.e-selectall)')[parseInt(i.toString(), 10)], 'e-ccheck').getAttribute('uid');
                }
                else {
                    columnUID = util_1.parentsUntil(element, 'e-ccheck').getAttribute('uid');
                }
                var column = gridObject.getColumnByUid(columnUID, this.infiniteRenderMode);
                var uncheck = [].slice.call(element.parentElement.getElementsByClassName('e-uncheck'));
                if (column.visible && !uncheck.length) {
                    element.checked = true;
                    this.checkState(element.parentElement.querySelector('.e-icons'), true);
                }
                else {
                    element.checked = false;
                    this.checkState(element.parentElement.querySelector('.e-icons'), false);
                }
            }
        };
        ColumnChooser.prototype.checkState = function (element, state) {
            if (state) {
                ej2_base_1.classList(element, ['e-check'], ['e-uncheck']);
            }
            else {
                ej2_base_1.classList(element, ['e-uncheck'], ['e-check']);
            }
        };
        ColumnChooser.prototype.createCheckBox = function (label, checked, uid) {
            var cbox = checked ? this.cBoxTrue.cloneNode(true) : this.cBoxFalse.cloneNode(true);
            if (!this.parent.enableAdaptiveUI && this.parent.enableRtl && !cbox.classList.contains('e-rtl')) {
                cbox.classList.add('e-rtl');
            }
            var cboxLabel = cbox.querySelector('.e-label');
            var inputcbox = cbox.querySelector('input');
            util_1.setChecked(inputcbox, checked);
            cboxLabel.setAttribute('id', uid + 'label');
            cboxLabel.innerHTML = label;
            inputcbox.setAttribute('aria-labelledby', cboxLabel.id);
            return util_1.createCboxWithWrap(uid, cbox, 'e-ccheck');
        };
        ColumnChooser.prototype.renderCheckbox = function (columns) {
            var _a;
            var checkBoxItems = this.parent.createElement('div');
            var offsetHeight = this.ulElement.offsetHeight;
            for (var i = 0; i < columns.length; i++) {
                var column = columns[parseInt(i.toString(), 10)];
                Eif (column.showInColumnChooser) {
                    var columnChooserList = this.parent.createElement('li', { className: 'e-cclist e-cc', styles: 'list-style:None', id: 'e-ccli_' + column.uid });
                    var hideColumnState = this.hideColumn.indexOf(column.uid) === -1 ? false : true;
                    var showColumnState = this.showColumn.indexOf(column.uid) === -1 ? false : true;
                    var columnchooserccheckboxlist = this.createCheckBox(column.headerText, (column.visible && !hideColumnState) || showColumnState, column.uid);
                    columnChooserList.appendChild(columnchooserccheckboxlist);
                    if (this.parent.cssClass) {
                        Iif (this.parent.cssClass.indexOf(' ') !== -1) {
                            ej2_base_1.addClass([columnchooserccheckboxlist], this.parent.cssClass.split(' '));
                        }
                        else {
                            ej2_base_1.addClass([columnchooserccheckboxlist], [this.parent.cssClass]);
                        }
                    }
                    if (this.infiniteRenderMode && this.infiniteDiv) {
                        columnChooserList.style.height = util_1.getListHeight(this.infiniteDiv, true) + 'px';
                    }
                    checkBoxItems.appendChild(columnChooserList);
                }
            }
            if (this.infiniteRenderMode && this.infiniteInitialLoad) {
                (_a = this.infiniteLoadedElement).push.apply(_a, [].slice.call(checkBoxItems.children));
                this.infiniteInitialLoad = false;
            }
            util_1.appendChildren(this.ulElement, [].slice.call(checkBoxItems.children));
            if (this.infiniteRenderMode && !this.infiniteScrollAppendDiff) {
                this.infiniteScrollAppendDiff = this.ulElement.offsetHeight - offsetHeight;
            }
            if (this.isInitialOpen) {
                this.updateIntermediateBtn();
            }
        };
        ColumnChooser.prototype.columnChooserManualSearch = function (e) {
            this.addcancelIcon();
            this.searchValue = e.target.value;
            this.stopTimer();
            this.startTimer(e);
        };
        ColumnChooser.prototype.startTimer = function (e) {
            var proxy = this;
            var interval = !proxy.flag && e.keyCode !== 13 ? 500 : 0;
            this.timer = window.setInterval(function () { proxy.columnChooserSearch(proxy.searchValue); }, interval);
        };
        ColumnChooser.prototype.stopTimer = function () {
            window.clearInterval(this.timer);
        };
        ColumnChooser.prototype.addcancelIcon = function () {
            this.dlgDiv.querySelector('.e-cc.e-ccsearch-icon').classList.add('e-cc-cancel');
            this.dlgDiv.querySelector('.e-cc-cancel').setAttribute('title', this.l10n.getConstant('Clear'));
        };
        ColumnChooser.prototype.removeCancelIcon = function () {
            this.dlgDiv.querySelector('.e-cc.e-ccsearch-icon').classList.remove('e-cc-cancel');
            this.dlgDiv.querySelector('.e-cc.e-ccsearch-icon').setAttribute('title', this.l10n.getConstant('Search'));
        };
        ColumnChooser.prototype.mOpenDlg = function () {
            Iif (ej2_base_1.Browser.isDevice) {
                this.dlgObj.element.querySelector('.e-cc-searchdiv').classList.remove('e-input-focus');
                this.dlgObj.element.querySelectorAll('.e-cc-chbox')[0].focus();
            }
            Eif (this.parent.enableAdaptiveUI) {
                this.dlgObj.element.querySelector('.e-cc-searchdiv').classList.add('e-input-focus');
            }
        };
        ColumnChooser.prototype.getModuleName = function () {
            return 'columnChooser';
        };
        ColumnChooser.prototype.hideOpenedDialog = function () {
            var openCC = [].slice.call(document.getElementsByClassName('e-ccdlg')).filter(function (dlgEle) {
                return dlgEle.classList.contains('e-popup-open');
            });
            for (var i = 0, dlgLen = openCC.length; i < dlgLen; i++) {
                Eif (this.parent.element.id + '_ccdlg' !== openCC[parseInt(i.toString(), 10)].id || openCC[parseInt(i.toString(), 10)].classList.contains('e-dialog')) {
                    openCC[parseInt(i.toString(), 10)].ej2_instances[0].hide();
                }
            }
        };
        ColumnChooser.prototype.beforeOpenColumnChooserEvent = function () {
            var args1 = {
                requestType: 'beforeOpenColumnChooser', element: this.parent.element,
                columns: this.getColumns(), cancel: false,
                searchOperator: this.parent.columnChooserSettings.operator
            };
            this.parent.trigger(events.beforeOpenColumnChooser, args1);
            this.searchOperator = args1.searchOperator;
            return args1;
        };
        ColumnChooser.prototype.renderResponsiveChangeAction = function (args) {
            this.responsiveDialogRenderer.action = args.action;
        };
        ColumnChooser.prototype.showCustomColumnChooser = function (enable) {
            this.responsiveDialogRenderer.isCustomDialog = enable;
            this.responsiveDialogRenderer.showResponsiveDialog();
        };
        return ColumnChooser;
    }());
    exports.ColumnChooser = ColumnChooser;
});