@ag-grid-enterprise/column-tool-panel - npm Package Compare versions

Comparing version 22.1.2 to 23.0.0

dist/cjs/columnToolPanel/columnToolPanel.js

@@ -62,2 +62,3 @@ "use strict";
         this.primaryColsPanel.init(true, this.params);
+        core_1._.addCssClass(this.primaryColsPanel.getGui(), 'ag-column-panel-column-select');
         this.addComponent(this.primaryColsPanel);
@@ -64,0 +65,0 @@ if (this.isRowGroupingModuleLoaded()) {

dist/cjs/columnToolPanel/pivotModePanel.js

@@ -29,3 +29,3 @@ "use strict";
     PivotModePanel.prototype.createTemplate = function () {
-        return "<div class=\"ag-pivot-mode-panel\">\n                <ag-checkbox ref=\"cbPivotMode\" class=\"ag-pivot-mode-select\"></ag-checkbox>\n            </div>";
+        return "<div class=\"ag-pivot-mode-panel\">\n                <ag-toggle-button ref=\"cbPivotMode\" class=\"ag-pivot-mode-select\"></ag-checkbox>\n            </div>";
     };
@@ -32,0 +32,0 @@ PivotModePanel.prototype.init = function () {

dist/cjs/columnToolPanel/primaryColsHeaderPanel.d.ts

@@ -7,7 +7,2 @@ import { Component, ToolPanelColumnCompParams } from "@ag-grid-community/core";
 }
-export declare enum SELECTED_STATE {
-    CHECKED = 0,
-    UNCHECKED = 1,
-    INDETERMINATE = 2
-}
 export declare class PrimaryColsHeaderPanel extends Component {
@@ -19,11 +14,6 @@ private gridOptionsWrapper;
     private eSelect;
-    private eFilterWrapper;
     private eFilterTextField;
-    private eSelectChecked;
-    private eSelectUnchecked;
-    private eSelectIndeterminate;
     private eExpandChecked;
     private eExpandUnchecked;
     private eExpandIndeterminate;
-    private eSelectCheckbox;
     private expandState;
@@ -37,3 +27,2 @@ private selectState;
     private createExpandIcons;
-    private createCheckIcons;
     private showOrHideOptions;
@@ -45,3 +34,3 @@ private onFilterTextChanged;
     setExpandState(state: EXPAND_STATE): void;
-    setSelectionState(state: SELECTED_STATE): void;
+    setSelectionState(state?: boolean): void;
 }

dist/cjs/columnToolPanel/primaryColsHeaderPanel.js

@@ -29,8 +29,2 @@ "use strict";
 })(EXPAND_STATE = exports.EXPAND_STATE || (exports.EXPAND_STATE = {}));
-var SELECTED_STATE;
-(function (SELECTED_STATE) {
-    SELECTED_STATE[SELECTED_STATE["CHECKED"] = 0] = "CHECKED";
-    SELECTED_STATE[SELECTED_STATE["UNCHECKED"] = 1] = "UNCHECKED";
-    SELECTED_STATE[SELECTED_STATE["INDETERMINATE"] = 2] = "INDETERMINATE";
-})(SELECTED_STATE = exports.SELECTED_STATE || (exports.SELECTED_STATE = {}));
 var PrimaryColsHeaderPanel = /** @class */ (function (_super) {
@@ -42,20 +36,11 @@ __extends(PrimaryColsHeaderPanel, _super);
     PrimaryColsHeaderPanel.prototype.preConstruct = function () {
-        var translate = this.gridOptionsWrapper.getLocaleTextFunc();
-        this.setTemplate("<div class=\"ag-primary-cols-header-panel\" role=\"presentation\">\n                <div ref=\"eExpand\"></div>\n                <div ref=\"eSelect\"></div>\n                <div class=\"ag-input-wrapper ag-primary-cols-filter-wrapper\" ref=\"eFilterWrapper\" role=\"presentation\">\n                    <input class=\"ag-primary-cols-filter\" ref=\"eFilterTextField\" type=\"text\" placeholder=\"" + translate("SearchOoo", "Search...") + "\">\n                </div>\n            </div>");
+        this.setTemplate("<div class=\"ag-column-select-header\" role=\"presentation\">\n                <div ref=\"eExpand\" class=\"ag-column-select-header-icon\"></div>\n                <ag-checkbox ref=\"eSelect\" class=\"ag-column-select-header-checkbox\"></ag-checkbox>\n                <ag-input-text-field class=\"ag-column-select-header-filter-wrapper\" ref=\"eFilterTextField\"></ag-input-text-field>\n            </div>");
     };
     PrimaryColsHeaderPanel.prototype.postConstruct = function () {
+        var _this = this;
         this.createExpandIcons();
-        if (this.gridOptionsWrapper.useNativeCheckboxes()) {
-            this.eSelectCheckbox = document.createElement("input");
-            this.eSelectCheckbox.type = "checkbox";
-            this.eSelectCheckbox.className = "ag-checkbox";
-            this.eSelect.appendChild(this.eSelectCheckbox);
-        }
-        else {
-            this.createCheckIcons();
-        }
         this.addDestroyableEventListener(this.eExpand, "click", this.onExpandClicked.bind(this));
-        this.addDestroyableEventListener(this.eSelect, "click", this.onSelectClicked.bind(this));
-        this.addDestroyableEventListener(this.eFilterTextField, "input", this.onFilterTextChanged.bind(this));
-        this.addDestroyableEventListener(this.eFilterTextField, "keypress", this.onMiniFilterKeyPress.bind(this));
+        this.addDestroyableEventListener(this.eSelect.getInputElement(), 'click', this.onSelectClicked.bind(this));
+        this.eFilterTextField.onValueChange(function () { return _this.onFilterTextChanged(); });
+        this.addDestroyableEventListener(this.eFilterTextField.getInputElement(), "keypress", this.onMiniFilterKeyPress.bind(this));
         this.addDestroyableEventListener(this.eventService, core_1.Events.EVENT_NEW_COLUMNS_LOADED, this.showOrHideOptions.bind(this));
@@ -73,8 +58,4 @@ };
         this.eExpand.appendChild((this.eExpandIndeterminate = core_1._.createIconNoSpan("columnSelectIndeterminate", this.gridOptionsWrapper)));
+        this.setExpandState(EXPAND_STATE.EXPANDED);
     };
-    PrimaryColsHeaderPanel.prototype.createCheckIcons = function () {
-        this.eSelect.appendChild((this.eSelectChecked = core_1._.createIconNoSpan("checkboxChecked", this.gridOptionsWrapper)));
-        this.eSelect.appendChild((this.eSelectUnchecked = core_1._.createIconNoSpan("checkboxUnchecked", this.gridOptionsWrapper)));
-        this.eSelect.appendChild((this.eSelectIndeterminate = core_1._.createIconNoSpan("checkboxIndeterminate", this.gridOptionsWrapper)));
-    };
     // we only show expand / collapse if we are showing columns
@@ -86,4 +67,6 @@ PrimaryColsHeaderPanel.prototype.showOrHideOptions = function () {
         var groupsPresent = this.columnController.isPrimaryColumnGroupsPresent();
-        core_1._.setDisplayed(this.eFilterWrapper, showFilter);
-        core_1._.setDisplayed(this.eSelect, showSelect);
+        var translate = this.gridOptionsWrapper.getLocaleTextFunc();
+        this.eFilterTextField.setInputPlaceholder(translate('searchOoo', 'Search...'));
+        core_1._.setDisplayed(this.eFilterTextField.getGui(), showFilter);
+        core_1._.setDisplayed(this.eSelect.getGui(), showSelect);
         core_1._.setDisplayed(this.eExpand, showExpand && groupsPresent);
@@ -95,3 +78,3 @@ };
             this.onFilterTextChangedDebounced = core_1._.debounce(function () {
-                var filterText = _this.eFilterTextField.value;
+                var filterText = _this.eFilterTextField.getValue();
                 _this.dispatchEvent({ type: "filterChanged", filterText: filterText });
@@ -104,7 +87,7 @@ }, 300);
         if (core_1._.isKeyPressed(e, core_1.Constants.KEY_ENTER)) {
-            this.dispatchEvent({ type: "selectAll" });
+            this.onSelectClicked();
         }
     };
     PrimaryColsHeaderPanel.prototype.onSelectClicked = function () {
-        var eventType = this.selectState === SELECTED_STATE.CHECKED ? "unselectAll" : "selectAll";
+        var eventType = this.selectState === true ? "unselectAll" : "selectAll";
         this.dispatchEvent({ type: eventType });
@@ -124,11 +107,3 @@ };
         this.selectState = state;
-        if (this.gridOptionsWrapper.useNativeCheckboxes()) {
-            this.eSelectCheckbox.checked = this.selectState === SELECTED_STATE.CHECKED;
-            this.eSelectCheckbox.indeterminate = this.selectState === SELECTED_STATE.INDETERMINATE;
-        }
-        else {
-            core_1._.setDisplayed(this.eSelectChecked, this.selectState === SELECTED_STATE.CHECKED);
-            core_1._.setDisplayed(this.eSelectUnchecked, this.selectState === SELECTED_STATE.UNCHECKED);
-            core_1._.setDisplayed(this.eSelectIndeterminate, this.selectState === SELECTED_STATE.INDETERMINATE);
-        }
+        this.eSelect.setValue(this.selectState);
     };
@@ -151,5 +126,2 @@ __decorate([
     __decorate([
-        core_1.RefSelector('eFilterWrapper')
-    ], PrimaryColsHeaderPanel.prototype, "eFilterWrapper", void 0);
-    __decorate([
         core_1.RefSelector('eFilterTextField')
@@ -156,0 +128,0 @@ ], PrimaryColsHeaderPanel.prototype, "eFilterTextField", void 0);

dist/cjs/columnToolPanel/primaryColsListPanel.d.ts

@@ -9,3 +9,2 @@ import { AbstractColDef, Component, ToolPanelColumnCompParams } from "@ag-grid-community/core";
     static TEMPLATE: string;
-    private gridOptionsWrapper;
     private columnController;
@@ -12,0 +11,0 @@ private colDefService;

dist/cjs/columnToolPanel/primaryColsListPanel.js

@@ -74,2 +74,3 @@ "use strict";
         shouldSyncColumnLayoutWithGrid ? this.syncColumnLayout() : this.buildTreeFromProvidedColumnDefs();
+        this.setFilterText(this.filterText);
     };
@@ -230,2 +231,5 @@ PrimaryColsListPanel.prototype.syncColumnLayout = function () {
         else {
+            // we don't want to change visibility on lock visible columns
+            var primaryCols = this.columnApi.getPrimaryColumns();
+            var colsToChange = primaryCols.filter(function (col) { return !col.getColDef().lockVisible; });
             // however if pivot mode is off, then it's all about column visibility so we can do a bulk
@@ -235,8 +239,3 @@ // operation directly with the column controller. we could column.onSelectAllChanged(checked)
             if (!core_1._.exists(this.filterText)) {
-                var primaryCols = this.columnApi.getPrimaryColumns();
-                // we don't want to change visibility on lock visible / hidden columns
-                var colsToChange = primaryCols.filter(function (col) {
-                    return !col.getColDef().lockVisible && !col.getColDef().hide;
-                });
-                this.columnApi.setColumnsVisible(colsToChange, this.selectAllChecked);
+                this.columnController.setColumnsVisible(colsToChange, this.selectAllChecked, 'columnMenu');
                 return;
@@ -251,6 +250,7 @@ }
             if (filteredCols_1.length > 0) {
+                var filteredColsToChange = colsToChange.filter(function (col) { return core_1._.includes(filteredCols_1, col.getColId()); });
                 // update visibility of columns currently filtered
-                this.columnApi.setColumnsVisible(filteredCols_1, this.selectAllChecked);
+                this.columnController.setColumnsVisible(filteredColsToChange, this.selectAllChecked, 'columnMenu');
                 // update select all header with new state
-                var selectionState = this.selectAllChecked ? primaryColsHeaderPanel_1.SELECTED_STATE.CHECKED : primaryColsHeaderPanel_1.SELECTED_STATE.UNCHECKED;
+                var selectionState = this.selectAllChecked ? true : false;
                 this.dispatchEvent({ type: 'selectionChanged', state: selectionState });
@@ -302,10 +302,8 @@ }
         if (checkedCount > 0 && uncheckedCount > 0) {
-            return primaryColsHeaderPanel_1.SELECTED_STATE.INDETERMINATE;
+            return undefined;
         }
         else if (checkedCount === 0 || uncheckedCount > 0) {
-            return primaryColsHeaderPanel_1.SELECTED_STATE.UNCHECKED;
+            return false;
         }
-        else {
-            return primaryColsHeaderPanel_1.SELECTED_STATE.CHECKED;
-        }
+        return true;
     };
@@ -367,3 +365,4 @@ PrimaryColsListPanel.prototype.setFilterText = function (filterText) {
             if (comp) {
-                var passesFilter = _this.filterResults ? _this.filterResults[compId] : true;
+                var filterResultExists = _this.filterResults && core_1._.exists(_this.filterResults[compId]);
+                var passesFilter = filterResultExists ? _this.filterResults[compId] : true;
                 comp.setDisplayed(parentGroupsOpen && passesFilter);
@@ -409,7 +408,4 @@ }
     };
-    PrimaryColsListPanel.TEMPLATE = "<div class=\"ag-primary-cols-list-panel\"></div>";
+    PrimaryColsListPanel.TEMPLATE = "<div class=\"ag-column-select-list\"></div>";
     __decorate([
-        core_1.Autowired('gridOptionsWrapper')
-    ], PrimaryColsListPanel.prototype, "gridOptionsWrapper", void 0);
-    __decorate([
         core_1.Autowired('columnController')
@@ -416,0 +412,0 @@ ], PrimaryColsListPanel.prototype, "columnController", void 0);

dist/cjs/columnToolPanel/primaryColsPanel.js

@@ -82,3 +82,3 @@ "use strict";
     };
-    PrimaryColsPanel.TEMPLATE = "<div class=\"ag-column-select-panel\">\n            <ag-primary-cols-header ref=\"primaryColsHeaderPanel\"></ag-primary-cols-header>\n            <ag-primary-cols-list ref=\"primaryColsListPanel\"></ag-primary-cols-list>\n        </div>";
+    PrimaryColsPanel.TEMPLATE = "<div class=\"ag-column-select\">\n            <ag-primary-cols-header ref=\"primaryColsHeaderPanel\"></ag-primary-cols-header>\n            <ag-primary-cols-list ref=\"primaryColsListPanel\"></ag-primary-cols-list>\n        </div>";
     __decorate([
@@ -85,0 +85,0 @@ core_1.RefSelector('primaryColsHeaderPanel')

dist/cjs/columnToolPanel/toolPanelColumnComp.js

@@ -37,3 +37,4 @@ "use strict";
         this.eDragHandle = core_1._.createIconNoSpan('columnDrag', this.gridOptionsWrapper);
-        core_1._.addCssClass(this.eDragHandle, 'ag-column-drag');
+        core_1._.addCssClass(this.eDragHandle, 'ag-drag-handle');
+        core_1._.addCssClass(this.eDragHandle, 'ag-column-select-column-drag-handle');
         this.cbSelect.getGui().insertAdjacentElement('afterend', this.eDragHandle);
@@ -46,5 +47,5 @@ this.displayName = this.columnController.getDisplayNameForColumn(this.column, 'toolPanel');
         if (this.groupsExist) {
-            this.addCssClass('ag-toolpanel-add-group-indent');
+            this.addCssClass('ag-column-select-add-group-indent');
         }
-        this.addCssClass("ag-toolpanel-indent-" + indent);
+        this.addCssClass("ag-column-select-indent-" + indent);
         this.setupDragging();
@@ -258,2 +259,3 @@ this.addDestroyableEventListener(this.eventService, core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.onColumnStateChanged.bind(this));
         this.cbSelect.setReadOnly(checkboxReadOnly);
+        core_1._.addOrRemoveCssClass(this.getGui(), 'ag-column-select-column-readonly', checkboxReadOnly);
         var checkboxPassive = isPivotMode && this.gridOptionsWrapper.isFunctionsPassive();
@@ -285,3 +287,3 @@ this.cbSelect.setPassive(checkboxPassive);
     };
-    ToolPanelColumnComp.TEMPLATE = "<div class=\"ag-column-tool-panel-column\">\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-tool-panel-column-label\" ref=\"eLabel\"></span>\n        </div>";
+    ToolPanelColumnComp.TEMPLATE = "<div class=\"ag-column-select-column\">\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-select-column-label\" ref=\"eLabel\"></span>\n        </div>";
     __decorate([
@@ -288,0 +290,0 @@ core_1.Autowired('gridOptionsWrapper')

dist/cjs/columnToolPanel/toolPanelColumnGroupComp.js

@@ -39,3 +39,4 @@ "use strict";
         this.eDragHandle = core_1._.createIconNoSpan('columnDrag', this.gridOptionsWrapper);
-        core_1._.addCssClass(this.eDragHandle, 'ag-column-drag');
+        core_1._.addCssClass(this.eDragHandle, 'ag-drag-handle');
+        core_1._.addCssClass(this.eDragHandle, 'ag-column-select-column-group-drag-handle');
         this.cbSelect.getGui().insertAdjacentElement('afterend', this.eDragHandle);
@@ -48,3 +49,3 @@ this.displayName = this.columnController.getDisplayNameForOriginalColumnGroup(null, this.columnGroup, 'toolPanel');
         this.setupExpandContract();
-        this.addCssClass('ag-toolpanel-indent-' + this.columnDept);
+        this.addCssClass('ag-column-select-indent-' + this.columnDept);
         this.addDestroyableEventListener(this.eventService, core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.onColumnStateChanged.bind(this));
@@ -192,2 +193,3 @@ this.addDestroyableEventListener(this.eLabel, 'click', this.onLabelClicked.bind(this));
         this.cbSelect.setReadOnly(readOnlyValue);
+        core_1._.addOrRemoveCssClass(this.getGui(), 'ag-column-select-column-group-readonly', readOnlyValue);
         this.processingColumnStateChange = false;
@@ -304,3 +306,3 @@ };
     };
-    ToolPanelColumnGroupComp.TEMPLATE = "<div class=\"ag-column-tool-panel-column-group\">\n            <span class=\"ag-column-group-icons\" ref=\"eColumnGroupIcons\" >\n                <span class=\"ag-column-group-closed-icon\" ref=\"eGroupClosedIcon\"></span>\n                <span class=\"ag-column-group-opened-icon\" ref=\"eGroupOpenedIcon\"></span>\n            </span>\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-tool-panel-column-label\" ref=\"eLabel\"></span>\n        </div>";
+    ToolPanelColumnGroupComp.TEMPLATE = "<div class=\"ag-column-select-column-group\">\n            <span class=\"ag-column-group-icons\" ref=\"eColumnGroupIcons\" >\n                <span class=\"ag-column-group-closed-icon\" ref=\"eGroupClosedIcon\"></span>\n                <span class=\"ag-column-group-opened-icon\" ref=\"eGroupOpenedIcon\"></span>\n            </span>\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-select-column-label\" ref=\"eLabel\"></span>\n        </div>";
     __decorate([
@@ -307,0 +309,0 @@ core_1.Autowired('eventService')

dist/es6/columnToolPanel/columnToolPanel.js

@@ -60,2 +60,3 @@ var __extends = (this && this.__extends) || (function () {
         this.primaryColsPanel.init(true, this.params);
+        _.addCssClass(this.primaryColsPanel.getGui(), 'ag-column-panel-column-select');
         this.addComponent(this.primaryColsPanel);
@@ -62,0 +63,0 @@ if (this.isRowGroupingModuleLoaded()) {

dist/es6/columnToolPanel/pivotModePanel.js

@@ -27,3 +27,3 @@ var __extends = (this && this.__extends) || (function () {
     PivotModePanel.prototype.createTemplate = function () {
-        return "<div class=\"ag-pivot-mode-panel\">\n                <ag-checkbox ref=\"cbPivotMode\" class=\"ag-pivot-mode-select\"></ag-checkbox>\n            </div>";
+        return "<div class=\"ag-pivot-mode-panel\">\n                <ag-toggle-button ref=\"cbPivotMode\" class=\"ag-pivot-mode-select\"></ag-checkbox>\n            </div>";
     };
@@ -30,0 +30,0 @@ PivotModePanel.prototype.init = function () {

dist/es6/columnToolPanel/primaryColsHeaderPanel.d.ts

@@ -7,7 +7,2 @@ import { Component, ToolPanelColumnCompParams } from "@ag-grid-community/core";
 }
-export declare enum SELECTED_STATE {
-    CHECKED = 0,
-    UNCHECKED = 1,
-    INDETERMINATE = 2
-}
 export declare class PrimaryColsHeaderPanel extends Component {
@@ -19,11 +14,6 @@ private gridOptionsWrapper;
     private eSelect;
-    private eFilterWrapper;
     private eFilterTextField;
-    private eSelectChecked;
-    private eSelectUnchecked;
-    private eSelectIndeterminate;
     private eExpandChecked;
     private eExpandUnchecked;
     private eExpandIndeterminate;
-    private eSelectCheckbox;
     private expandState;
@@ -37,3 +27,2 @@ private selectState;
     private createExpandIcons;
-    private createCheckIcons;
     private showOrHideOptions;
@@ -45,3 +34,3 @@ private onFilterTextChanged;
     setExpandState(state: EXPAND_STATE): void;
-    setSelectionState(state: SELECTED_STATE): void;
+    setSelectionState(state?: boolean): void;
 }

dist/es6/columnToolPanel/primaryColsHeaderPanel.js

@@ -27,8 +27,2 @@ var __extends = (this && this.__extends) || (function () {
 })(EXPAND_STATE || (EXPAND_STATE = {}));
-export var SELECTED_STATE;
-(function (SELECTED_STATE) {
-    SELECTED_STATE[SELECTED_STATE["CHECKED"] = 0] = "CHECKED";
-    SELECTED_STATE[SELECTED_STATE["UNCHECKED"] = 1] = "UNCHECKED";
-    SELECTED_STATE[SELECTED_STATE["INDETERMINATE"] = 2] = "INDETERMINATE";
-})(SELECTED_STATE || (SELECTED_STATE = {}));
 var PrimaryColsHeaderPanel = /** @class */ (function (_super) {
@@ -40,20 +34,11 @@ __extends(PrimaryColsHeaderPanel, _super);
     PrimaryColsHeaderPanel.prototype.preConstruct = function () {
-        var translate = this.gridOptionsWrapper.getLocaleTextFunc();
-        this.setTemplate("<div class=\"ag-primary-cols-header-panel\" role=\"presentation\">\n                <div ref=\"eExpand\"></div>\n                <div ref=\"eSelect\"></div>\n                <div class=\"ag-input-wrapper ag-primary-cols-filter-wrapper\" ref=\"eFilterWrapper\" role=\"presentation\">\n                    <input class=\"ag-primary-cols-filter\" ref=\"eFilterTextField\" type=\"text\" placeholder=\"" + translate("SearchOoo", "Search...") + "\">\n                </div>\n            </div>");
+        this.setTemplate("<div class=\"ag-column-select-header\" role=\"presentation\">\n                <div ref=\"eExpand\" class=\"ag-column-select-header-icon\"></div>\n                <ag-checkbox ref=\"eSelect\" class=\"ag-column-select-header-checkbox\"></ag-checkbox>\n                <ag-input-text-field class=\"ag-column-select-header-filter-wrapper\" ref=\"eFilterTextField\"></ag-input-text-field>\n            </div>");
     };
     PrimaryColsHeaderPanel.prototype.postConstruct = function () {
+        var _this = this;
         this.createExpandIcons();
-        if (this.gridOptionsWrapper.useNativeCheckboxes()) {
-            this.eSelectCheckbox = document.createElement("input");
-            this.eSelectCheckbox.type = "checkbox";
-            this.eSelectCheckbox.className = "ag-checkbox";
-            this.eSelect.appendChild(this.eSelectCheckbox);
-        }
-        else {
-            this.createCheckIcons();
-        }
         this.addDestroyableEventListener(this.eExpand, "click", this.onExpandClicked.bind(this));
-        this.addDestroyableEventListener(this.eSelect, "click", this.onSelectClicked.bind(this));
-        this.addDestroyableEventListener(this.eFilterTextField, "input", this.onFilterTextChanged.bind(this));
-        this.addDestroyableEventListener(this.eFilterTextField, "keypress", this.onMiniFilterKeyPress.bind(this));
+        this.addDestroyableEventListener(this.eSelect.getInputElement(), 'click', this.onSelectClicked.bind(this));
+        this.eFilterTextField.onValueChange(function () { return _this.onFilterTextChanged(); });
+        this.addDestroyableEventListener(this.eFilterTextField.getInputElement(), "keypress", this.onMiniFilterKeyPress.bind(this));
         this.addDestroyableEventListener(this.eventService, Events.EVENT_NEW_COLUMNS_LOADED, this.showOrHideOptions.bind(this));
@@ -71,8 +56,4 @@ };
         this.eExpand.appendChild((this.eExpandIndeterminate = _.createIconNoSpan("columnSelectIndeterminate", this.gridOptionsWrapper)));
+        this.setExpandState(EXPAND_STATE.EXPANDED);
     };
-    PrimaryColsHeaderPanel.prototype.createCheckIcons = function () {
-        this.eSelect.appendChild((this.eSelectChecked = _.createIconNoSpan("checkboxChecked", this.gridOptionsWrapper)));
-        this.eSelect.appendChild((this.eSelectUnchecked = _.createIconNoSpan("checkboxUnchecked", this.gridOptionsWrapper)));
-        this.eSelect.appendChild((this.eSelectIndeterminate = _.createIconNoSpan("checkboxIndeterminate", this.gridOptionsWrapper)));
-    };
     // we only show expand / collapse if we are showing columns
@@ -84,4 +65,6 @@ PrimaryColsHeaderPanel.prototype.showOrHideOptions = function () {
         var groupsPresent = this.columnController.isPrimaryColumnGroupsPresent();
-        _.setDisplayed(this.eFilterWrapper, showFilter);
-        _.setDisplayed(this.eSelect, showSelect);
+        var translate = this.gridOptionsWrapper.getLocaleTextFunc();
+        this.eFilterTextField.setInputPlaceholder(translate('searchOoo', 'Search...'));
+        _.setDisplayed(this.eFilterTextField.getGui(), showFilter);
+        _.setDisplayed(this.eSelect.getGui(), showSelect);
         _.setDisplayed(this.eExpand, showExpand && groupsPresent);
@@ -93,3 +76,3 @@ };
             this.onFilterTextChangedDebounced = _.debounce(function () {
-                var filterText = _this.eFilterTextField.value;
+                var filterText = _this.eFilterTextField.getValue();
                 _this.dispatchEvent({ type: "filterChanged", filterText: filterText });
@@ -102,7 +85,7 @@ }, 300);
         if (_.isKeyPressed(e, Constants.KEY_ENTER)) {
-            this.dispatchEvent({ type: "selectAll" });
+            this.onSelectClicked();
         }
     };
     PrimaryColsHeaderPanel.prototype.onSelectClicked = function () {
-        var eventType = this.selectState === SELECTED_STATE.CHECKED ? "unselectAll" : "selectAll";
+        var eventType = this.selectState === true ? "unselectAll" : "selectAll";
         this.dispatchEvent({ type: eventType });
@@ -122,11 +105,3 @@ };
         this.selectState = state;
-        if (this.gridOptionsWrapper.useNativeCheckboxes()) {
-            this.eSelectCheckbox.checked = this.selectState === SELECTED_STATE.CHECKED;
-            this.eSelectCheckbox.indeterminate = this.selectState === SELECTED_STATE.INDETERMINATE;
-        }
-        else {
-            _.setDisplayed(this.eSelectChecked, this.selectState === SELECTED_STATE.CHECKED);
-            _.setDisplayed(this.eSelectUnchecked, this.selectState === SELECTED_STATE.UNCHECKED);
-            _.setDisplayed(this.eSelectIndeterminate, this.selectState === SELECTED_STATE.INDETERMINATE);
-        }
+        this.eSelect.setValue(this.selectState);
     };
@@ -149,5 +124,2 @@ __decorate([
     __decorate([
-        RefSelector('eFilterWrapper')
-    ], PrimaryColsHeaderPanel.prototype, "eFilterWrapper", void 0);
-    __decorate([
         RefSelector('eFilterTextField')
@@ -154,0 +126,0 @@ ], PrimaryColsHeaderPanel.prototype, "eFilterTextField", void 0);

dist/es6/columnToolPanel/primaryColsListPanel.d.ts

@@ -9,3 +9,2 @@ import { AbstractColDef, Component, ToolPanelColumnCompParams } from "@ag-grid-community/core";
     static TEMPLATE: string;
-    private gridOptionsWrapper;
     private columnController;
@@ -12,0 +11,0 @@ private colDefService;

dist/es6/columnToolPanel/primaryColsListPanel.js

@@ -23,3 +23,3 @@ var __extends = (this && this.__extends) || (function () {
 import { ToolPanelColumnComp } from "./toolPanelColumnComp";
-import { EXPAND_STATE, SELECTED_STATE } from "./primaryColsHeaderPanel";
+import { EXPAND_STATE } from "./primaryColsHeaderPanel";
 var PrimaryColsListPanel = /** @class */ (function (_super) {
@@ -73,2 +73,3 @@ __extends(PrimaryColsListPanel, _super);
         shouldSyncColumnLayoutWithGrid ? this.syncColumnLayout() : this.buildTreeFromProvidedColumnDefs();
+        this.setFilterText(this.filterText);
     };
@@ -229,2 +230,5 @@ PrimaryColsListPanel.prototype.syncColumnLayout = function () {
         else {
+            // we don't want to change visibility on lock visible columns
+            var primaryCols = this.columnApi.getPrimaryColumns();
+            var colsToChange = primaryCols.filter(function (col) { return !col.getColDef().lockVisible; });
             // however if pivot mode is off, then it's all about column visibility so we can do a bulk
@@ -234,8 +238,3 @@ // operation directly with the column controller. we could column.onSelectAllChanged(checked)
             if (!_.exists(this.filterText)) {
-                var primaryCols = this.columnApi.getPrimaryColumns();
-                // we don't want to change visibility on lock visible / hidden columns
-                var colsToChange = primaryCols.filter(function (col) {
-                    return !col.getColDef().lockVisible && !col.getColDef().hide;
-                });
-                this.columnApi.setColumnsVisible(colsToChange, this.selectAllChecked);
+                this.columnController.setColumnsVisible(colsToChange, this.selectAllChecked, 'columnMenu');
                 return;
@@ -250,6 +249,7 @@ }
             if (filteredCols_1.length > 0) {
+                var filteredColsToChange = colsToChange.filter(function (col) { return _.includes(filteredCols_1, col.getColId()); });
                 // update visibility of columns currently filtered
-                this.columnApi.setColumnsVisible(filteredCols_1, this.selectAllChecked);
+                this.columnController.setColumnsVisible(filteredColsToChange, this.selectAllChecked, 'columnMenu');
                 // update select all header with new state
-                var selectionState = this.selectAllChecked ? SELECTED_STATE.CHECKED : SELECTED_STATE.UNCHECKED;
+                var selectionState = this.selectAllChecked ? true : false;
                 this.dispatchEvent({ type: 'selectionChanged', state: selectionState });
@@ -301,10 +301,8 @@ }
         if (checkedCount > 0 && uncheckedCount > 0) {
-            return SELECTED_STATE.INDETERMINATE;
+            return undefined;
         }
         else if (checkedCount === 0 || uncheckedCount > 0) {
-            return SELECTED_STATE.UNCHECKED;
+            return false;
         }
-        else {
-            return SELECTED_STATE.CHECKED;
-        }
+        return true;
     };
@@ -366,3 +364,4 @@ PrimaryColsListPanel.prototype.setFilterText = function (filterText) {
             if (comp) {
-                var passesFilter = _this.filterResults ? _this.filterResults[compId] : true;
+                var filterResultExists = _this.filterResults && _.exists(_this.filterResults[compId]);
+                var passesFilter = filterResultExists ? _this.filterResults[compId] : true;
                 comp.setDisplayed(parentGroupsOpen && passesFilter);
@@ -408,7 +407,4 @@ }
     };
-    PrimaryColsListPanel.TEMPLATE = "<div class=\"ag-primary-cols-list-panel\"></div>";
+    PrimaryColsListPanel.TEMPLATE = "<div class=\"ag-column-select-list\"></div>";
     __decorate([
-        Autowired('gridOptionsWrapper')
-    ], PrimaryColsListPanel.prototype, "gridOptionsWrapper", void 0);
-    __decorate([
         Autowired('columnController')
@@ -415,0 +411,0 @@ ], PrimaryColsListPanel.prototype, "columnController", void 0);

dist/es6/columnToolPanel/primaryColsPanel.js

@@ -80,3 +80,3 @@ var __extends = (this && this.__extends) || (function () {
     };
-    PrimaryColsPanel.TEMPLATE = "<div class=\"ag-column-select-panel\">\n            <ag-primary-cols-header ref=\"primaryColsHeaderPanel\"></ag-primary-cols-header>\n            <ag-primary-cols-list ref=\"primaryColsListPanel\"></ag-primary-cols-list>\n        </div>";
+    PrimaryColsPanel.TEMPLATE = "<div class=\"ag-column-select\">\n            <ag-primary-cols-header ref=\"primaryColsHeaderPanel\"></ag-primary-cols-header>\n            <ag-primary-cols-list ref=\"primaryColsListPanel\"></ag-primary-cols-list>\n        </div>";
     __decorate([
@@ -83,0 +83,0 @@ RefSelector('primaryColsHeaderPanel')

dist/es6/columnToolPanel/toolPanelColumnComp.js

@@ -35,3 +35,4 @@ var __extends = (this && this.__extends) || (function () {
         this.eDragHandle = _.createIconNoSpan('columnDrag', this.gridOptionsWrapper);
-        _.addCssClass(this.eDragHandle, 'ag-column-drag');
+        _.addCssClass(this.eDragHandle, 'ag-drag-handle');
+        _.addCssClass(this.eDragHandle, 'ag-column-select-column-drag-handle');
         this.cbSelect.getGui().insertAdjacentElement('afterend', this.eDragHandle);
@@ -44,5 +45,5 @@ this.displayName = this.columnController.getDisplayNameForColumn(this.column, 'toolPanel');
         if (this.groupsExist) {
-            this.addCssClass('ag-toolpanel-add-group-indent');
+            this.addCssClass('ag-column-select-add-group-indent');
         }
-        this.addCssClass("ag-toolpanel-indent-" + indent);
+        this.addCssClass("ag-column-select-indent-" + indent);
         this.setupDragging();
@@ -256,2 +257,3 @@ this.addDestroyableEventListener(this.eventService, Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.onColumnStateChanged.bind(this));
         this.cbSelect.setReadOnly(checkboxReadOnly);
+        _.addOrRemoveCssClass(this.getGui(), 'ag-column-select-column-readonly', checkboxReadOnly);
         var checkboxPassive = isPivotMode && this.gridOptionsWrapper.isFunctionsPassive();
@@ -283,3 +285,3 @@ this.cbSelect.setPassive(checkboxPassive);
     };
-    ToolPanelColumnComp.TEMPLATE = "<div class=\"ag-column-tool-panel-column\">\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-tool-panel-column-label\" ref=\"eLabel\"></span>\n        </div>";
+    ToolPanelColumnComp.TEMPLATE = "<div class=\"ag-column-select-column\">\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-select-column-label\" ref=\"eLabel\"></span>\n        </div>";
     __decorate([
@@ -286,0 +288,0 @@ Autowired('gridOptionsWrapper')

dist/es6/columnToolPanel/toolPanelColumnGroupComp.js

@@ -37,3 +37,4 @@ var __extends = (this && this.__extends) || (function () {
         this.eDragHandle = _.createIconNoSpan('columnDrag', this.gridOptionsWrapper);
-        _.addCssClass(this.eDragHandle, 'ag-column-drag');
+        _.addCssClass(this.eDragHandle, 'ag-drag-handle');
+        _.addCssClass(this.eDragHandle, 'ag-column-select-column-group-drag-handle');
         this.cbSelect.getGui().insertAdjacentElement('afterend', this.eDragHandle);
@@ -46,3 +47,3 @@ this.displayName = this.columnController.getDisplayNameForOriginalColumnGroup(null, this.columnGroup, 'toolPanel');
         this.setupExpandContract();
-        this.addCssClass('ag-toolpanel-indent-' + this.columnDept);
+        this.addCssClass('ag-column-select-indent-' + this.columnDept);
         this.addDestroyableEventListener(this.eventService, Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.onColumnStateChanged.bind(this));
@@ -190,2 +191,3 @@ this.addDestroyableEventListener(this.eLabel, 'click', this.onLabelClicked.bind(this));
         this.cbSelect.setReadOnly(readOnlyValue);
+        _.addOrRemoveCssClass(this.getGui(), 'ag-column-select-column-group-readonly', readOnlyValue);
         this.processingColumnStateChange = false;
@@ -302,3 +304,3 @@ };
     };
-    ToolPanelColumnGroupComp.TEMPLATE = "<div class=\"ag-column-tool-panel-column-group\">\n            <span class=\"ag-column-group-icons\" ref=\"eColumnGroupIcons\" >\n                <span class=\"ag-column-group-closed-icon\" ref=\"eGroupClosedIcon\"></span>\n                <span class=\"ag-column-group-opened-icon\" ref=\"eGroupOpenedIcon\"></span>\n            </span>\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-tool-panel-column-label\" ref=\"eLabel\"></span>\n        </div>";
+    ToolPanelColumnGroupComp.TEMPLATE = "<div class=\"ag-column-select-column-group\">\n            <span class=\"ag-column-group-icons\" ref=\"eColumnGroupIcons\" >\n                <span class=\"ag-column-group-closed-icon\" ref=\"eGroupClosedIcon\"></span>\n                <span class=\"ag-column-group-opened-icon\" ref=\"eGroupOpenedIcon\"></span>\n            </span>\n            <ag-checkbox ref=\"cbSelect\" class=\"ag-column-select-checkbox\"></ag-checkbox>\n            <span class=\"ag-column-select-column-label\" ref=\"eLabel\"></span>\n        </div>";
     __decorate([
@@ -305,0 +307,0 @@ Autowired('eventService')

package.json

 {
   "name": "@ag-grid-enterprise/column-tool-panel",
-  "version": "22.1.2",
+  "version": "23.0.0",
   "description": "Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components",
   "main": "./dist/cjs/main.js",
   "module": "./dist/es6/main.js",
-  "types": "./dist/es6/main.d.ts",
+  "types": "./dist/cjs/main.d.ts",
   "scripts": {
@@ -44,6 +44,6 @@ "build-cjs": "tsc -p tsconfig.json",
   "dependencies": {
-    "@ag-grid-community/core": "~22.1.1",
-    "@ag-grid-enterprise/core": "~22.1.1",
-    "@ag-grid-enterprise/row-grouping": "~22.1.1",
-    "@ag-grid-enterprise/side-bar": "~22.1.1"
+    "@ag-grid-community/core": "~23.0.0",
+    "@ag-grid-enterprise/core": "~23.0.0",
+    "@ag-grid-enterprise/row-grouping": "~23.0.0",
+    "@ag-grid-enterprise/side-bar": "~23.0.0"
   },
@@ -56,2 +56,2 @@ "devDependencies": {
   }
-}
+}

README.md

@@ -13,3 +13,3 @@
 
-[Angular 1](https://www.ag-grid.com/angular-grid/) | [Angular 2](https://www.ag-grid.com/angular-grid/) | [Javascript](https://www.ag-grid.com/javascript-grid/) | [Polymer](https://www.ag-grid.com/best-polymer-data-grid/) | [React](https://www.ag-grid.com/react-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/) | [VueJS](https://www.ag-grid.com/vuejs-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/) 
+[Angular 1](https://www.ag-grid.com/angular-grid/) | [Angular 2](https://www.ag-grid.com/angular-grid/) | [Javascript](https://www.ag-grid.com/javascript-grid/) | [Polymer](https://www.ag-grid.com/best-polymer-data-grid/) | [React](https://www.ag-grid.com/react-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-building-typescript/) | [VueJS](https://www.ag-grid.com/vuejs-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/) 
 
@@ -16,0 +16,0 @@ This is not free software, this software is covered by copyright and to use you need a commercial license.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5923498

increased by2.19%

Lines of code

92840

increased by1.95%

Dependency changes

• + Added@ag-grid-community/core@23.0.2(transitive)

• + Added@ag-grid-enterprise/core@23.0.2(transitive)

• + Added@ag-grid-enterprise/row-grouping@23.0.2(transitive)

• + Added@ag-grid-enterprise/side-bar@23.0.2(transitive)

• - Removed@ag-grid-community/core@22.1.1(transitive)

• - Removed@ag-grid-enterprise/core@22.1.1(transitive)

• - Removed@ag-grid-enterprise/row-grouping@22.1.1(transitive)

• - Removed@ag-grid-enterprise/side-bar@22.1.1(transitive)

• Updated@ag-grid-community/core@~23.0.0

• Updated@ag-grid-enterprise/core@~23.0.0

• Updated@ag-grid-enterprise/row-grouping@~23.0.0

• Updated@ag-grid-enterprise/side-bar@~23.0.0