@progress/kendo-angular-grid 20.0.4-develop.1 → 20.1.0-develop.1

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -6,17 +6,17 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ElementRef, ViewContainerRef, ViewEncapsulation, inject, Injector, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, PrefixTemplateDirective, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, checkIcon, arrowRotateCcwIcon, columnsIcon, pencilIcon, saveIcon, trashIcon, fileExcelIcon, filePdfIcon, sparklesIcon, chevronUpIcon, chevronDownIcon, chevronRightIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, xIcon, xCircleIcon, plusCircleIcon, chevronLeftIcon, tableWizardIcon, undoIcon, redoIcon, arrowsSwapIcon, groupIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, searchIcon, checkIcon, arrowRotateCcwIcon, columnsIcon, pencilIcon, saveIcon, trashIcon, fileExcelIcon, filePdfIcon, sparklesIcon, chevronUpIcon, chevronDownIcon, chevronRightIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, xIcon, xCircleIcon, plusCircleIcon, chevronLeftIcon, tableWizardIcon, undoIcon, redoIcon, arrowsSwapIcon, groupIcon } from '@progress/kendo-svg-icons';
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, skip, auditTime, bufferCount, flatMap } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i53 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
-import { orderBy, isCompositeFilterDescriptor, groupBy, filterBy, process } from '@progress/kendo-data-query';
+import { orderBy, isCompositeFilterDescriptor, filterBy, groupBy, process } from '@progress/kendo-data-query';
 import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault, KeyValuePipe } from '@angular/common';
 import { getter } from '@progress/kendo-common';
 import * as i1$4 from '@progress/kendo-angular-intl';
@@ -2218,6 +2218,14 @@ class ColumnBase {
      * @hidden
      */
     initialMinResizableWidth;
+    /**
+     * @hidden
+     */
+    initiallyChecked;
+    /**
+     * @hidden
+     */
+    currentlyChecked;
     /**
      * @hidden
      */
@@ -5094,6 +5102,9 @@ class ColumnInfoService {
         return this.list().filter(column => !column.isVisible);
     }
     get leafNamedColumns() {
+        if (!this.list) {
+            return [];
+        }
         const columns = expandColumns(this.list().filterSort(column => !column.isColumnGroup))
             .filter(column => column.matchesMedia && column.displayTitle);
         return orderBy(columns, [{ field: 'locked', dir: 'desc' }]);
@@ -11989,44 +12000,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class.k-filter-row']
             }] } });
 
-/**
- * @hidden
- */
-class ColumnMenuChooserItemCheckedDirective {
-    host;
-    kendoColumnMenuChooserItemChecked;
-    checkbox;
-    checkedChangeSub = new Subscription();
-    constructor(host) {
-        this.host = host;
-    }
-    ngAfterViewInit() {
-        this.checkedChangeSub.add(this.checkbox.checkedStateChange.subscribe(() => {
-            this.kendoColumnMenuChooserItemChecked = this.checkbox.checkedState === true;
-        }));
-    }
-    ngOnDestroy() {
-        this.checkedChangeSub.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserItemCheckedDirective, isStandalone: true, selector: "[kendoColumnMenuChooserItemChecked]", inputs: { kendoColumnMenuChooserItemChecked: "kendoColumnMenuChooserItemChecked" }, host: { properties: { "attr.aria-checked": "this.kendoColumnMenuChooserItemChecked" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoColumnMenuChooserItemChecked]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { kendoColumnMenuChooserItemChecked: [{
-                type: HostBinding,
-                args: ['attr.aria-checked']
-            }, {
-                type: Input
-            }], checkbox: [{
-                type: ContentChild,
-                args: [CheckBoxComponent]
-            }] } });
-
 /**
  * Represents the service passed to the [`ColumnMenuTemplate`]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
@@ -12112,12 +12085,12 @@ class ColumnListKeyboardNavigation {
         this.toggle(this.activeIndex, true);
     }
     toggle(index, active) {
-        const element = this.items[index]?.host.nativeElement;
-        element && this.renderer.setAttribute(this.items[index].host.nativeElement, 'tabindex', active ? '0' : '-1');
+        const element = this.items[index]?.hostElement.nativeElement.closest('.k-column-list-item');
+        element && this.renderer.setAttribute(element, 'tabindex', active ? '0' : '-1');
         active && element?.focus();
     }
     toggleCheckedState() {
-        this.items[this.activeIndex].host.nativeElement.firstElementChild.click();
+        this.items[this.activeIndex].hostElement.nativeElement.closest('.k-column-list-item').firstElementChild.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation });
@@ -12134,10 +12107,10 @@ class ColumnListComponent {
     ngZone;
     renderer;
     listNavigationService;
+    cdr;
+    columnInfoService;
     adaptiveGridService;
     ctx;
-    checkIcon = checkIcon;
-    arrowRotateCcwIcon = arrowRotateCcwIcon;
     className = true;
     get listSizeMd() {
         return !(this.ctx?.grid?.isActionSheetExpanded);
@@ -12149,40 +12122,59 @@ class ColumnListComponent {
     apply = new EventEmitter();
     columnChange = new EventEmitter();
     set columns(value) {
+        this.listNavigationService.items = this.checkboxes?.toArray();
         this._columns = value.filter(column => column.includeInChooser !== false);
-        this.allColumns = value;
-        this.updateColumnState();
     }
     get columns() {
         return this._columns;
     }
-    showActions = true;
+    get checkedCheckboxesLength() {
+        return this.columns?.filter(column => column.currentlyChecked).length;
+    }
+    filteredColumns = [];
     autoSync = true;
+    showSelectAll = false;
+    isFiltered = false;
     ariaLabel;
     allowHideAll = false;
     applyText;
     resetText;
-    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
     isLast;
     isExpanded;
     service;
+    filterable = false;
+    checkboxes;
+    get columnCheckboxes() {
+        if (this.showSelectAll) {
+            return this.checkboxes?.toArray().slice(1);
+        }
+        return this.checkboxes?.toArray();
+    }
+    get lockedColumnCheckboxes() {
+        return this.columnCheckboxes?.filter((checkbox, index) => this.filteredColumns[index]?.locked);
+    }
+    get unlockedColumnCheckboxes() {
+        return this.columnCheckboxes?.filter((checkbox, index) => !this.filteredColumns[index]?.locked);
+    }
+    get checkedCheckboxes() {
+        if (this.showSelectAll && !this.isFiltered) {
+            return this.checkboxes?.toArray().slice(1).filter(checkbox => checkbox.checkedState).length;
+        }
+        return this.checkboxes?.filter(checkbox => checkbox.checkedState).length;
+    }
     resetButton;
     applyButton;
-    options;
-    checkboxes;
-    hasLocked;
-    hasVisibleLocked;
-    unlockedCount = 0;
-    hasUnlockedFiltered;
-    hasFiltered;
+    filterInput;
     _columns;
-    allColumns;
     domSubscriptions = new Subscription();
-    constructor(element, ngZone, renderer, listNavigationService, adaptiveGridService, ctx) {
+    lastDisabledCheckbox;
+    constructor(element, ngZone, renderer, listNavigationService, cdr, columnInfoService, adaptiveGridService, ctx) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.listNavigationService = listNavigationService;
+        this.cdr = cdr;
+        this.columnInfoService = columnInfoService;
         this.adaptiveGridService = adaptiveGridService;
         this.ctx = ctx;
     }
@@ -12192,17 +12184,17 @@ class ColumnListComponent {
         }
         this.ngZone.runOutsideAngular(() => {
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
-                e.stopImmediatePropagation();
-                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    this.handleCheckBoxClick(e);
-                });
+                if (e.target.classList.contains('k-checkbox')) {
+                    const label = e.target.closest('.k-column-list-item');
+                    this.setTabindex(label);
+                }
             }));
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
         });
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.listNavigationService.items = this.options.toArray();
+            this.listNavigationService.items = this.checkboxes.toArray();
             if (this.adaptiveGridService?.viewType !== 'columnMenu') {
                 this.listNavigationService.toggle(0, true);
             }
@@ -12219,38 +12211,97 @@ class ColumnListComponent {
             return;
         }
         if (changes['isLast'] && this.isLast) {
-            this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
+            this.service.menuTabbingService.lastFocusable = this.applyButton?.nativeElement;
         }
         if (changes['isExpanded'] && this.isExpanded && this.isLast && this.applyButton) {
             this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
         }
     }
+    onSelectAllClick(e) {
+        if (e.target.classList.contains('k-checkbox')) {
+            return;
+        }
+        e.preventDefault();
+        const label = e.target.closest('.k-column-list-item');
+        const input = label?.querySelector('input');
+        input.click();
+    }
+    onSelectAllCheckboxChange(checkedState) {
+        if (!checkedState && !this.allowHideAll) {
+            const columnsToKeep = [];
+            if (!columnsToKeep.length) {
+                const unlockedColumns = this.filteredColumns.filter(c => !c.locked);
+                if (unlockedColumns.length > 0) {
+                    columnsToKeep.push(unlockedColumns[0]);
+                }
+            }
+            if (this.lockedColumnCheckboxes.length > 0) {
+                const lockedColumns = this.filteredColumns.filter(c => c.locked);
+                if (lockedColumns.length > 0) {
+                    columnsToKeep.unshift(lockedColumns[0]);
+                }
+            }
+            this.filteredColumns.forEach(column => {
+                const isChecked = columnsToKeep.indexOf(column) >= 0;
+                column.currentlyChecked = isChecked;
+            });
+        }
+        else {
+            this.filteredColumns.forEach(column => {
+                column.currentlyChecked = checkedState;
+            });
+        }
+        if (this.autoSync) {
+            const changedColumns = this.filteredColumns.filter(column => column.initiallyChecked !== column.currentlyChecked);
+            if (changedColumns.length > 0) {
+                changedColumns.forEach(column => {
+                    column.hidden = !column.currentlyChecked;
+                    column.initiallyChecked = column.currentlyChecked;
+                });
+                this.ngZone.run(() => {
+                    this.columnChange.emit(changedColumns);
+                });
+            }
+        }
+        this.filteredColumns = [...this.filteredColumns];
+        this.updateDisabled();
+    }
     ngOnDestroy() {
         this.domSubscriptions.unsubscribe();
     }
-    isDisabled(column) {
-        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
-            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
-    }
     cancelChanges() {
-        this.checkboxes.forEach((element, index) => {
-            element.checkedState = !this.columns[index].hidden;
+        this.columns.forEach((column) => {
+            column.currentlyChecked = !column.hidden;
+            column.initiallyChecked = !column.hidden;
+        });
+        this.filteredColumns.forEach((column) => {
+            column.currentlyChecked = !column.hidden;
+            column.initiallyChecked = !column.hidden;
         });
         this.updateDisabled();
         this.reset.emit();
     }
     applyChanges() {
         const changed = [];
-        this.checkboxes.forEach((item, index) => {
-            const column = this.columns[index];
-            const hidden = !item.checkedState;
-            if (Boolean(column.hidden) !== hidden) {
-                column.hidden = hidden;
+        this.columns.forEach(column => {
+            if (column.initiallyChecked !== column.currentlyChecked) {
+                column.hidden = !column.currentlyChecked;
                 changed.push(column);
             }
         });
         this.updateDisabled();
         this.apply.emit(changed);
+        if (changed.length) {
+            this.cdr.markForCheck();
+            this.columnInfoService?.changeVisibility(changed);
+        }
+    }
+    focusActiveColumn(e) {
+        const keyboardEvent = e;
+        if (keyboardEvent.shiftKey) {
+            this.listNavigationService.toggle(this.listNavigationService.activeIndex, true);
+            e.preventDefault();
+        }
     }
     onTab(e) {
         if (this.isLast) {
@@ -12258,6 +12309,9 @@ class ColumnListComponent {
             if (this.service) {
                 this.service.menuTabbingService.firstFocusable.focus();
             }
+            else if (this.filterable) {
+                this.filterInput?.input.nativeElement.focus();
+            }
             else {
                 this.listNavigationService.toggle(this.listNavigationService.activeIndex, true);
             }
@@ -12268,10 +12322,30 @@ class ColumnListComponent {
         if (code !== Keys.Tab) {
             e.preventDefault();
         }
+        if (code === 'Tab' && e.shiftKey) {
+            this.resetButton?.nativeElement.focus();
+            e.preventDefault();
+        }
         if (code === 'Tab' && !e.shiftKey && this.autoSync) {
+            if (this.filterable) {
+                this.filterInput?.input.nativeElement.focus();
+            }
+            e.preventDefault();
+        }
+        if (code === 'Tab' && e.shiftKey && this.autoSync && this.filterable) {
+            this.filterInput?.input.nativeElement.focus();
+            e.preventDefault();
+        }
+        if (code === 'Tab' && !e.shiftKey && !this.autoSync) {
+            this.applyButton?.nativeElement.focus();
             e.preventDefault();
         }
         if (code === 'Tab' && e.shiftKey) {
+            if (!this.autoSync && this.filterable && e.target.matches('.k-column-list-item')) {
+                this.filterInput?.input.nativeElement.focus();
+                e.preventDefault();
+                return;
+            }
             this.ngZone.run(() => {
                 if (e.target.matches('.k-column-list-item')) {
                     e.preventDefault();
@@ -12290,46 +12364,33 @@ class ColumnListComponent {
         }
     };
     updateDisabled() {
-        if (this.allowHideAll && !this.hasLocked) {
+        const hasLockedColumns = this.columns.filter(c => c.locked).length > 0;
+        if (this.allowHideAll && !hasLockedColumns) {
             return;
         }
-        // Cache visible columns to avoid repeated checks
-        const visibleColumns = [];
-        const columnMap = new Map();
-        this.checkboxes.forEach((checkbox, index) => {
-            // Reset all disabled states first
-            this.setDisabledState(checkbox, false);
-            if (checkbox.checkedState) {
-                visibleColumns.push({ checkbox, index });
-                columnMap.set(index, this.columns[index]);
-            }
-        });
-        // Only apply disabled states where needed
-        if (!this.allowHideAll && visibleColumns.length === 1 && !this.hasFiltered) {
-            this.setDisabledState(visibleColumns[0].checkbox, true);
-        }
-        else if (this.hasLocked && !this.hasUnlockedFiltered) {
-            const checkedUnlocked = visibleColumns.filter(item => !columnMap.get(item.index).locked);
-            if (checkedUnlocked.length === 1) {
-                this.setDisabledState(checkedUnlocked[0].checkbox, true);
-            }
-        }
-    }
-    updateColumnState() {
-        this.hasLocked = this.allColumns.filter(column => column.locked && (!column.hidden || column.includeInChooser !== false)).length > 0;
-        this.hasVisibleLocked = this.allColumns.filter(column => column.locked && !column.hidden).length > 0;
-        this.unlockedCount = this.columns.filter(column => !column.locked && !column.hidden).length;
-        const filteredColumns = this.allColumns.filter(column => column.includeInChooser === false && !column.hidden);
-        if (filteredColumns.length) {
-            this.hasFiltered = filteredColumns.length > 0;
-            this.hasUnlockedFiltered = filteredColumns.filter(column => !column.locked).length > 0;
+        const currentlyCheckedUnlockedColumns = this.columns.filter(column => !column.locked && column.currentlyChecked).length;
+        const shouldEnforceMinimumColumns = hasLockedColumns || !this.allowHideAll;
+        if (shouldEnforceMinimumColumns && currentlyCheckedUnlockedColumns === 1) {
+            this.disableFirstUnlockedCheckedCheckbox();
         }
         else {
-            this.hasFiltered = false;
-            this.hasUnlockedFiltered = false;
+            this.enableLastDisabledColumn();
         }
     }
+    disableFirstUnlockedCheckedCheckbox() {
+        const index = this.filteredColumns.filter(c => !c.locked).findIndex(column => column.currentlyChecked);
+        const firstUnlockedCheckedCheckbox = this.unlockedColumnCheckboxes[index];
+        this.setDisabledState(firstUnlockedCheckedCheckbox, true);
+        this.lastDisabledCheckbox = firstUnlockedCheckedCheckbox;
+    }
+    enableLastDisabledColumn() {
+        this.setDisabledState(this.lastDisabledCheckbox, false);
+        this.lastDisabledCheckbox = null;
+    }
     setDisabledState(checkbox, disabled) {
+        if (!checkbox) {
+            return;
+        }
         if (checkbox.disabled !== disabled) {
             this.ngZone.runOutsideAngular(() => {
                 checkbox.disabled = disabled;
@@ -12346,85 +12407,87 @@ class ColumnListComponent {
             });
         }
     }
-    handleCheckBoxClick = (e) => {
+    checkBoxClick(e) {
         const closestItem = e.target.closest('.k-column-list-item');
-        if (closestItem) {
-            const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-            const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
-            const checkbox = this.checkboxes.toArray()[index];
-            if (e.target === checkbox.input.nativeElement) {
-                closestItem.focus();
-                e.target.classList.remove('k-focus');
-            }
-            if (this.autoSync) {
-                if (!this.columns[index]) {
-                    return;
-                }
-                const column = this.columns[index];
-                const hidden = !checkbox.checkedState;
-                if (Boolean(column.hidden) !== hidden) {
-                    this.ngZone.runOutsideAngular(() => {
-                        column.hidden = hidden;
-                        this.ngZone.run(() => {
-                            this.columnChange.emit([column]);
-                        });
-                    });
-                }
-            }
-            else {
-                this.ngZone.run(() => this.updateDisabled());
-            }
-            if (index !== this.listNavigationService.activeIndex) {
-                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                this.listNavigationService.activeIndex = index;
-                this.listNavigationService.toggle(index, true);
+        if (!closestItem)
+            return;
+        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
+        const input = checkboxElement?.querySelector('input');
+        if (e.target === input) {
+            return;
+        }
+        e.preventDefault();
+        if (input) {
+            const index = parseInt(input.getAttribute('data-index'), 10);
+            const column = this.filteredColumns[index];
+            const isDisabled = checkboxElement.classList.contains('k-disabled');
+            if (column && !isDisabled) {
+                input.click();
             }
         }
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }, { token: AdaptiveGridService, optional: true }, { token: ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", showActions: "showActions", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className", "class.k-column-list-md": "this.listSizeMd", "class.k-column-list-lg": "this.listSizeLg" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    }
+    onCheckboxChange(checkedState, column, _index) {
+        column.currentlyChecked = checkedState;
+        if (this.autoSync) {
+            column.hidden = !checkedState;
+            column.initiallyChecked = checkedState;
+            this.columnChange.emit([column]);
+        }
+        this.updateDisabled();
+    }
+    setTabindex(labelElement) {
+        if (!labelElement) {
+            return;
+        }
+        const allLabels = this.checkboxes.map(checkbox => checkbox.hostElement.nativeElement.parentElement);
+        allLabels.forEach((label) => {
+            const input = label.querySelector('input');
+            input.classList.remove('k-focus');
+            this.renderer.removeAttribute(label, 'tabindex');
+        });
+        this.renderer.setAttribute(labelElement, 'tabindex', '0');
+        labelElement.focus();
+        this.listNavigationService.activeIndex = allLabels.indexOf(labelElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService, optional: true }, { token: AdaptiveGridService, optional: true }, { token: ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", filteredColumns: "filteredColumns", autoSync: "autoSync", showSelectAll: "showSelectAll", isFiltered: "isFiltered", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", isLast: "isLast", isExpanded: "isExpanded", service: "service", filterable: "filterable" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className", "class.k-column-list-md": "this.listSizeMd", "class.k-column-list-lg": "this.listSizeLg" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-column-list"
             role="listbox"
             aria-multiselectable="true"
             [attr.aria-label]="ariaLabel">
             <label
-                *ngFor="let column of columns; let index = index;"
+                *ngIf="showSelectAll"
                 class='k-column-list-item'
-                [kendoColumnMenuChooserItemChecked]="!column.hidden"
-                role="option">
+                role="option"
+                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
+                [scope]="this">
                 <kendo-checkbox
+                    #checkbox
+                    [inputAttributes]="{'data-index': '0'}"
+                    [tabindex]="-1"
+                    [checkedState]="checkedCheckboxesLength === columns.length"
+                    (checkedStateChange)="onSelectAllCheckboxChange($event)"
+                ></kendo-checkbox>
+                <span class="k-checkbox-label">{{ 'Select all' }}</span>
+            </label>
+            <label
+                *ngFor="let column of filteredColumns; let index = index;"
+                class='k-column-list-item'
+                role="option"
+                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
+                [scope]="this">
+                <kendo-checkbox
+                    #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
                     [tabindex]="-1"
-                    [checkedState]="!column.hidden"
-                    [disabled]="isDisabled(column)"
+                    [checkedState]="column.currentlyChecked"
+                    (checkedStateChange)="onCheckboxChange($event, column, index)"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
-        <div [ngClass]="actionsClass" *ngIf="!autoSync && showActions">
-            <button
-                #applyButton
-                kendoButton
-                type="button"
-                icon="check"
-                [svgIcon]="checkIcon"
-                themeColor="primary"
-                (click)="applyChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
-            <button
-                #resetButton
-                kendoButton
-                type="button"
-                icon="reset"
-                [svgIcon]="arrowRotateCcwIcon"
-                (keydown.tab)="onTab($event)"
-                (click)="cancelChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -12438,46 +12501,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             aria-multiselectable="true"
             [attr.aria-label]="ariaLabel">
             <label
-                *ngFor="let column of columns; let index = index;"
+                *ngIf="showSelectAll"
                 class='k-column-list-item'
-                [kendoColumnMenuChooserItemChecked]="!column.hidden"
-                role="option">
+                role="option"
+                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
+                [scope]="this">
                 <kendo-checkbox
+                    #checkbox
+                    [inputAttributes]="{'data-index': '0'}"
+                    [tabindex]="-1"
+                    [checkedState]="checkedCheckboxesLength === columns.length"
+                    (checkedStateChange)="onSelectAllCheckboxChange($event)"
+                ></kendo-checkbox>
+                <span class="k-checkbox-label">{{ 'Select all' }}</span>
+            </label>
+            <label
+                *ngFor="let column of filteredColumns; let index = index;"
+                class='k-column-list-item'
+                role="option"
+                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
+                [scope]="this">
+                <kendo-checkbox
+                    #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
                     [tabindex]="-1"
-                    [checkedState]="!column.hidden"
-                    [disabled]="isDisabled(column)"
+                    [checkedState]="column.currentlyChecked"
+                    (checkedStateChange)="onCheckboxChange($event, column, index)"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
-        <div [ngClass]="actionsClass" *ngIf="!autoSync && showActions">
-            <button
-                #applyButton
-                kendoButton
-                type="button"
-                icon="check"
-                [svgIcon]="checkIcon"
-                themeColor="primary"
-                (click)="applyChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
-            <button
-                #resetButton
-                kendoButton
-                type="button"
-                icon="reset"
-                [svgIcon]="arrowRotateCcwIcon"
-                (keydown.tab)="onTab($event)"
-                (click)="cancelChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
-        </div>
     `,
                     standalone: true,
-                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent, ButtonComponent]
+                    imports: [NgFor, NgIf, CheckBoxComponent, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }, { type: AdaptiveGridService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService, decorators: [{
+                    type: Optional
+                }] }, { type: AdaptiveGridService, decorators: [{
                     type: Optional
                 }] }, { type: ContextService, decorators: [{
                     type: Optional
@@ -12498,10 +12558,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], columns: [{
                 type: Input
-            }], showActions: [{
+            }], filteredColumns: [{
                 type: Input
             }], autoSync: [{
                 type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], isFiltered: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input
             }], allowHideAll: [{
@@ -12510,28 +12574,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], resetText: [{
                 type: Input
-            }], actionsClass: [{
-                type: Input
             }], isLast: [{
                 type: Input
             }], isExpanded: [{
                 type: Input
             }], service: [{
                 type: Input
-            }], resetButton: [{
-                type: ViewChild,
-                args: ['resetButton', { static: false }]
-            }], applyButton: [{
-                type: ViewChild,
-                args: ['applyButton', { static: false }]
-            }], options: [{
-                type: ViewChildren,
-                args: [ColumnMenuChooserItemCheckedDirective]
+            }], filterable: [{
+                type: Input
             }], checkboxes: [{
                 type: ViewChildren,
                 args: [CheckBoxComponent]
             }] } });
 
+/**
+ * @hidden
+ */
+class ColumnChooserContentComponent {
+    cdr;
+    columnInfoService;
+    ctx;
+    resetButton;
+    applyButton;
+    columnList;
+    filterInput;
+    filterable = true;
+    showSelectAll = true;
+    showCheckedCount = true;
+    allowHideAll = false;
+    autoSync = false;
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    closeOnReset = true;
+    set columns(value) {
+        this._columns = value;
+    }
+    get columns() {
+        return this._columns;
+    }
+    isLast;
+    isExpanded;
+    service;
+    close = new EventEmitter();
+    get selectedItemsText() {
+        const count = this.columnList?.checkedCheckboxesLength || 0;
+        const localizedMessage = this.messageFor('columnChooserSelectedColumnsCount');
+        return replaceMessagePlaceholder(localizedMessage, 'selectedColumnsCount', count.toString());
+    }
+    get actionSheetOpened() {
+        return this.ctx?.grid?.isActionSheetExpanded;
+    }
+    searchIcon = searchIcon;
+    checkIcon = checkIcon;
+    arrowRotateCcwIcon = arrowRotateCcwIcon;
+    applyText;
+    resetText;
+    filteredColumns = [];
+    isFiltered = false;
+    _columns = [];
+    constructor(cdr, columnInfoService, ctx) {
+        this.cdr = cdr;
+        this.columnInfoService = columnInfoService;
+        this.ctx = ctx;
+    }
+    ngOnInit() {
+        this.applyText = this.ctx?.localization.get('columnsApply');
+        this.resetText = this.ctx?.localization.get('columnsReset');
+    }
+    ngAfterViewInit() {
+        this.filteredColumns = this.columnInfoService?.leafNamedColumns.filter(column => {
+            if (column.includeInChooser !== false) {
+                column.initiallyChecked = column.currentlyChecked = !column.hidden;
+                return true;
+            }
+            return false;
+        });
+        this.cdr.detectChanges();
+    }
+    ngAfterViewChecked() {
+        this.columnList.resetButton = this.resetButton;
+        this.columnList.applyButton = this.applyButton;
+        this.columnList.filterInput = this.filterInput;
+    }
+    onFilter(value) {
+        this.isFiltered = value.length > 0;
+        this.showSelectAll = !this.isFiltered;
+        const filterDescriptor = {
+            field: 'displayTitle',
+            operator: 'contains',
+            value: value
+        };
+        this.filteredColumns = filterBy(this.columnInfoService?.leafNamedColumns, filterDescriptor);
+        this.cdr.detectChanges();
+        this.columnList.listNavigationService.activeIndex = 0;
+        this.columnList.listNavigationService.items = this.columnList.checkboxes?.toArray();
+    }
+    messageFor = token => this.ctx?.localization.get(token);
+    onChange(changed) {
+        this.cdr.markForCheck();
+        this.columnInfoService?.changeVisibility(changed);
+    }
+    applyChanges() {
+        this.columnList.applyChanges();
+        this.close.emit();
+    }
+    cancelChanges() {
+        this.columnList.cancelChanges();
+        if (this.closeOnReset) {
+            this.close.emit();
+        }
+    }
+    onTab(e) {
+        if (e.key === 'Tab' && !e.shiftKey) {
+            this.columnList.listNavigationService.toggle(this.columnList.listNavigationService.activeIndex, true);
+            e.preventDefault();
+        }
+        if (e.key === 'Tab' && e.shiftKey && !this.service) {
+            this.columnList.resetButton?.nativeElement.focus();
+            e.preventDefault();
+        }
+    }
+    onApplyButtonKeydown(e) {
+        if (e.key === 'Tab') {
+            this.columnList.focusActiveColumn(e);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ColumnInfoService, optional: true }, { token: ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserContentComponent, isStandalone: true, selector: "kendo-grid-column-chooser-content", inputs: { filterable: "filterable", showSelectAll: "showSelectAll", showCheckedCount: "showCheckedCount", allowHideAll: "allowHideAll", autoSync: "autoSync", actionsClass: "actionsClass", closeOnReset: "closeOnReset", columns: "columns", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: `
+            <form class="k-filter-menu">
+                <div class="k-filter-menu-container">
+                    <kendo-textbox
+                        #filterInput
+                        *ngIf="filterable"
+                        class="k-searchbox"
+                        (valueChange)="onFilter($event)"
+                        [kendoEventsOutsideAngular]="{'keydown': onTab}"
+                        [scope]="this"
+                        >
+                        <ng-template kendoPrefixTemplate>
+                            <kendo-icon-wrapper
+                                [name]="'search'"
+                                [svgIcon]="searchIcon">
+                            </kendo-icon-wrapper>
+                        </ng-template>
+                    </kendo-textbox>
+                    <kendo-grid-columnlist
+                        #columnList
+                        [columns]="columns"
+                        [filteredColumns]="filteredColumns"
+                        [ariaLabel]="messageFor('columns')"
+                        [showSelectAll]="showSelectAll"
+                        [isLast]="isLast"
+                        [isFiltered]="isFiltered"
+                        [filterable]="filterable"
+                        [isExpanded]="isExpanded"
+                        [service]="service"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="autoSync"
+                        [allowHideAll]="allowHideAll"
+                        (columnChange)="onChange($event)"
+                        >
+                    </kendo-grid-columnlist>
+                    <div *ngIf="showCheckedCount" class="k-filter-selected-items">
+                        {{selectedItemsText}}
+                    </div>
+                    <div [ngClass]="actionsClass" *ngIf="!autoSync && !actionSheetOpened">
+                        <button
+                            #applyButton
+                            kendoButton
+                            type="button"
+                            icon="check"
+                            [svgIcon]="checkIcon"
+                            themeColor="primary"
+                            (click)="applyChanges()"
+                            (keydown)="onApplyButtonKeydown($event)"
+                        >{{ applyText }}</button>
+                        <button
+                            #resetButton
+                            kendoButton
+                            type="button"
+                            icon="reset"
+                            (keydown.tab)="columnList.onTab($event)"
+                            [svgIcon]="arrowRotateCcwIcon"
+                            (click)="cancelChanges()"
+                        >{{ resetText }}</button>
+                    </div>
+                </div>
+            </form>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "filteredColumns", "autoSync", "showSelectAll", "isFiltered", "ariaLabel", "allowHideAll", "applyText", "resetText", "isLast", "isExpanded", "service", "filterable"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: PrefixTemplateDirective, selector: "[kendoPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-column-chooser-content',
+                    template: `
+            <form class="k-filter-menu">
+                <div class="k-filter-menu-container">
+                    <kendo-textbox
+                        #filterInput
+                        *ngIf="filterable"
+                        class="k-searchbox"
+                        (valueChange)="onFilter($event)"
+                        [kendoEventsOutsideAngular]="{'keydown': onTab}"
+                        [scope]="this"
+                        >
+                        <ng-template kendoPrefixTemplate>
+                            <kendo-icon-wrapper
+                                [name]="'search'"
+                                [svgIcon]="searchIcon">
+                            </kendo-icon-wrapper>
+                        </ng-template>
+                    </kendo-textbox>
+                    <kendo-grid-columnlist
+                        #columnList
+                        [columns]="columns"
+                        [filteredColumns]="filteredColumns"
+                        [ariaLabel]="messageFor('columns')"
+                        [showSelectAll]="showSelectAll"
+                        [isLast]="isLast"
+                        [isFiltered]="isFiltered"
+                        [filterable]="filterable"
+                        [isExpanded]="isExpanded"
+                        [service]="service"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="autoSync"
+                        [allowHideAll]="allowHideAll"
+                        (columnChange)="onChange($event)"
+                        >
+                    </kendo-grid-columnlist>
+                    <div *ngIf="showCheckedCount" class="k-filter-selected-items">
+                        {{selectedItemsText}}
+                    </div>
+                    <div [ngClass]="actionsClass" *ngIf="!autoSync && !actionSheetOpened">
+                        <button
+                            #applyButton
+                            kendoButton
+                            type="button"
+                            icon="check"
+                            [svgIcon]="checkIcon"
+                            themeColor="primary"
+                            (click)="applyChanges()"
+                            (keydown)="onApplyButtonKeydown($event)"
+                        >{{ applyText }}</button>
+                        <button
+                            #resetButton
+                            kendoButton
+                            type="button"
+                            icon="reset"
+                            (keydown.tab)="columnList.onTab($event)"
+                            [svgIcon]="arrowRotateCcwIcon"
+                            (click)="cancelChanges()"
+                        >{{ resetText }}</button>
+                    </div>
+                </div>
+            </form>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass, ButtonComponent, ColumnListComponent, TextBoxComponent, PrefixTemplateDirective, IconWrapperComponent, EventsOutsideAngularDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ColumnInfoService, decorators: [{
+                    type: Optional
+                }] }, { type: ContextService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { resetButton: [{
+                type: ViewChild,
+                args: ['resetButton']
+            }], applyButton: [{
+                type: ViewChild,
+                args: ['applyButton']
+            }], columnList: [{
+                type: ViewChild,
+                args: ['columnList']
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], filterable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], showCheckedCount: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }], autoSync: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], closeOnReset: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
 /**
  * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
@@ -12560,6 +12903,18 @@ class ColumnChooserComponent {
      * @default false
      */
     autoSync = false;
+    /**
+     * Specifies if the column chooser displays a search box.
+     *
+     * @default true
+     */
+    filterable = true;
+    /**
+     * Specifies if the column chooser displays a select all checkbox.
+     *
+     * @default true
+     */
+    showSelectAll = true;
     /**
      * Specifies if all columns can be hidden.
      *
@@ -12635,16 +12990,6 @@ class ColumnChooserComponent {
             this.close();
         }
     }
-    /**
-     * @hidden
-     */
-    onApply(changed) {
-        this.close(true);
-        if (changed.length) {
-            this.changeDetector.markForCheck();
-            this.columnInfoService.changeVisibility(changed);
-        }
-    }
     /**
      * @hidden
      */
@@ -12652,6 +12997,9 @@ class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
+    /**
+     * @hidden
+     */
     close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
@@ -12669,7 +13017,7 @@ class ColumnChooserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i2.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", filterable: "filterable", showSelectAll: "showSelectAll", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
         <button #anchor
             kendoButton
             type="button"
@@ -12682,20 +13030,19 @@ class ColumnChooserComponent {
             [attr.aria-expanded]="!!(popupRef)"
             [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
-            <kendo-grid-columnlist
-                #columnList
+            <kendo-grid-column-chooser-content
                 [columns]="columns"
-                [ariaLabel]="messageFor('columns')"
-                [isLast]="true"
-                [applyText]="messageFor('columnsApply')"
-                [resetText]="messageFor('columnsReset')"
                 [autoSync]="autoSync"
+                [filterable]="filterable"
+                [showSelectAll]="showSelectAll"
+                [closeOnReset]="false"
+                [isLast]="true"
                 [allowHideAll]="allowHideAll"
-                (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
-            </kendo-grid-columnlist>
+                (close)="close(true)"
+            >
+            </kendo-grid-column-chooser-content>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
@@ -12714,25 +13061,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [attr.aria-expanded]="!!(popupRef)"
             [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
-            <kendo-grid-columnlist
-                #columnList
+            <kendo-grid-column-chooser-content
                 [columns]="columns"
-                [ariaLabel]="messageFor('columns')"
-                [isLast]="true"
-                [applyText]="messageFor('columnsApply')"
-                [resetText]="messageFor('columnsReset')"
                 [autoSync]="autoSync"
+                [filterable]="filterable"
+                [showSelectAll]="showSelectAll"
+                [closeOnReset]="false"
+                [isLast]="true"
                 [allowHideAll]="allowHideAll"
-                (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
-            </kendo-grid-columnlist>
+                (close)="close(true)"
+            >
+            </kendo-grid-column-chooser-content>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, ColumnListComponent]
+                    imports: [ButtonComponent, ColumnListComponent, ColumnChooserContentComponent]
                 }]
         }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i2.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
                 type: Input
+            }], filterable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
             }], allowHideAll: [{
                 type: Input
             }], anchor: [{
@@ -12867,6 +13217,18 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
      * @default true
      */
     allowHideAll = true;
+    /**
+     * When `true`, enables the columns' filtering.
+     *
+     * @default true
+     */
+    filterable = true;
+    /**
+     * When `true`, displays a select all checkbox.
+     *
+     * @default true
+     */
+    showSelectAll = true;
     /**
      * @hidden
      */
@@ -12945,7 +13307,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
             const direction = this.ctx.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupSerivce.open({
                 anchor: this.buttonElement,
-                content: ColumnListComponent,
+                content: ColumnChooserContentComponent,
                 positionMode: 'absolute',
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction }
@@ -12967,18 +13329,28 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
             this.buttonElement?.setAttribute('aria-expanded', 'true');
             this.buttonElement?.setAttribute('aria-controls', popupId);
             this.host.selected = true;
-            const columnList = this.popupRef.content.instance;
-            columnList.isLast = true;
-            columnList.autoSync = this.autoSync;
-            columnList.allowHideAll = this.allowHideAll;
-            columnList.applyText = this.ctx.localization.get('columnsApply');
-            columnList.resetText = this.ctx.localization.get('columnsReset');
-            columnList.columns = this.ctx.grid.columns;
-            columnList.ariaLabel = this.ctx.localization.get('columns');
+            const columnChooserContent = this.popupRef.content.instance;
+            columnChooserContent.columnInfoService = this.columnInfoService;
+            columnChooserContent.ctx = this.ctx;
+            columnChooserContent.showSelectAll = this.showSelectAll;
+            columnChooserContent.filterable = this.filterable;
+            columnChooserContent.isLast = true;
+            columnChooserContent.autoSync = this.autoSync;
+            columnChooserContent.allowHideAll = this.allowHideAll;
+            columnChooserContent.applyText = this.ctx.localization.get('columnsApply');
+            columnChooserContent.resetText = this.ctx.localization.get('columnsReset');
+            columnChooserContent.columns = this.ctx.grid.columns;
+            columnChooserContent.filteredColumns = this.columnInfoService?.leafNamedColumns.filter(column => {
+                if (column.includeInChooser !== false) {
+                    column.initiallyChecked = column.currentlyChecked = !column.hidden;
+                    return true;
+                }
+                return false;
+            });
             this.subs.add(this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
                 this.closePopup(true);
             }));
-            this.subs.add(columnList.apply.subscribe((changed) => {
+            this.subs.add(columnChooserContent.columnList.apply.subscribe((changed) => {
                 if (changed.length) {
                     this.cdr.markForCheck();
                     this.columnInfoService.changeVisibility(changed);
@@ -13006,7 +13378,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
         focusAnchor && this.buttonElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i2.PopupService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: AdaptiveGridService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll", filterable: "filterable", showSelectAll: "showSelectAll" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, decorators: [{
             type: Directive,
@@ -13018,6 +13390,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHideAll: [{
                 type: Input
+            }], filterable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
             }] } });
 
 /**
@@ -13703,7 +14079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     ctx;
     columnInfoService;
-    changeDetector;
     hostElement;
     /**
      * Fires when the content expands.
@@ -13730,23 +14105,12 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         return this.columnInfoService.leafNamedColumns;
     }
     columnsIcon = columnsIcon;
-    constructor(ctx, columnInfoService, changeDetector, hostElement) {
+    constructor(ctx, columnInfoService, hostElement) {
         super();
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
-        this.changeDetector = changeDetector;
         this.hostElement = hostElement;
     }
-    /**
-     * @hidden
-     */
-    onApply(changed) {
-        this.close();
-        if (changed.length) {
-            this.changeDetector.markForCheck();
-            this.columnInfoService.changeVisibility(changed);
-        }
-    }
     /**
      * @hidden
      */
@@ -13764,7 +14128,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.expanded = true;
         this.expand.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('columns')"
@@ -13774,22 +14138,18 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
             (collapse)="onCollapse()"
             (expand)="onExpand()">
             <ng-template kendoGridColumnMenuItemContentTemplate>
-                <kendo-grid-columnlist
-                    [applyText]="ctx.localization.get('columnsApply')"
-                    [resetText]="ctx.localization.get('columnsReset')"
-                    [ariaLabel]="ctx.localization.get('columns')"
+                <kendo-grid-column-chooser-content
                     [columns]="columns"
-                    [autoSync]="false"
-                    [allowHideAll]="false"
-                    [actionsClass]="actionsClass"
                     [isLast]="isLast"
                     [isExpanded]="expanded"
+                    [closeOnReset]="false"
                     [service]="service"
-                    (apply)="onApply($event)">
-                </kendo-grid-columnlist>
+                    (close)="close()"
+                >
+                </kendo-grid-column-chooser-content>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
@@ -13804,26 +14164,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             (collapse)="onCollapse()"
             (expand)="onExpand()">
             <ng-template kendoGridColumnMenuItemContentTemplate>
-                <kendo-grid-columnlist
-                    [applyText]="ctx.localization.get('columnsApply')"
-                    [resetText]="ctx.localization.get('columnsReset')"
-                    [ariaLabel]="ctx.localization.get('columns')"
+                <kendo-grid-column-chooser-content
                     [columns]="columns"
-                    [autoSync]="false"
-                    [allowHideAll]="false"
-                    [actionsClass]="actionsClass"
                     [isLast]="isLast"
                     [isExpanded]="expanded"
+                    [closeOnReset]="false"
                     [service]="service"
-                    (apply)="onApply($event)">
-                </kendo-grid-columnlist>
+                    (close)="close()"
+                >
+                </kendo-grid-column-chooser-content>
             </ng-template>
         </kendo-grid-columnmenu-item>
     `,
                     standalone: true,
-                    imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnListComponent]
+                    imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnListComponent, ColumnChooserContentComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output
@@ -14845,16 +15201,6 @@ class ColumnMenuComponent {
     get hasColumnChooser() {
         return hasColumnChooser(this.settings);
     }
-    /**
-     * @hidden
-     */
-    onApply(changed) {
-        this.close(true);
-        if (changed.length) {
-            this.cdr.markForCheck();
-            this.columnInfoService.changeVisibility(changed);
-        }
-    }
     /**
      * @hidden
      */
@@ -15168,22 +15514,18 @@ class ColumnMenuComponent {
                         </kendo-icon-wrapper>
                     </ng-template>
                     <ng-template kendoTabContent>
-                        <kendo-grid-columnlist
-                            [applyText]="ctx.localization.get('columnsApply')"
-                            [resetText]="ctx.localization.get('columnsReset')"
+                        <kendo-grid-column-chooser-content
                             [columns]="columns"
-                            [autoSync]="false"
-                            [allowHideAll]="false"
-                            [actionsClass]="actionsClass"
                             [service]="service"
-                            (apply)="onApply($event)">
-                        </kendo-grid-columnlist>
+                            (close)="close()"
+                            >
+                        </kendo-grid-column-chooser-content>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
 
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
@@ -15347,16 +15689,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </kendo-icon-wrapper>
                     </ng-template>
                     <ng-template kendoTabContent>
-                        <kendo-grid-columnlist
-                            [applyText]="ctx.localization.get('columnsApply')"
-                            [resetText]="ctx.localization.get('columnsReset')"
+                        <kendo-grid-column-chooser-content
                             [columns]="columns"
-                            [autoSync]="false"
-                            [allowHideAll]="false"
-                            [actionsClass]="actionsClass"
                             [service]="service"
-                            (apply)="onApply($event)">
-                        </kendo-grid-columnlist>
+                            (close)="close()"
+                            >
+                        </kendo-grid-column-chooser-content>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
@@ -15369,7 +15707,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ColumnMenuSortComponent, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuStickComponent,
                         ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuAutoSizeColumnComponent,
                         ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuFilterComponent, TabStripComponent,
-                        TabStripTabComponent, TabTitleDirective, TabContentDirective, FilterMenuContainerComponent, ColumnListComponent
+                        TabStripTabComponent, TabTitleDirective, TabContentDirective, FilterMenuContainerComponent, ColumnListComponent,
+                        ColumnChooserContentComponent
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: ColumnMenuService }, { type: ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService }, { type: IdService, decorators: [{
@@ -22088,8 +22427,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1757603683,
-    version: '20.0.4-develop.1',
+    publishDate: 1758109748,
+    version: '20.1.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -25956,6 +26295,15 @@ class GridMessages extends ComponentMessages {
      * Sets the text for the Grid Column Chooser and Column Chooser toolbar tool.
      */
     columns;
+    /**
+     * The message for the selected columns count in the Column Chooser.
+     * Follows the pattern **{selectedColumnsCount} Selected items ** by default.
+     *
+     * The message consists of two parts - selected columns count and a localizable string.
+     * To allow for reordering its parts, the `columnChooserSelectedColumnsCount` input accepts a string with a placeholder for the selected columns count.
+     * The `{selectedColumnsCount}` placeholder will be replaced internally with the respective actual value.
+     */
+    columnChooserSelectedColumnsCount;
     /**
      * Sets the subtitle for the adaptive Grid Column Chooser and Column Chooser toolbar tool.
      */
@@ -26208,7 +26556,7 @@ class GridMessages extends ComponentMessages {
      */
     externalEditingCancelText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
@@ -26344,6 +26692,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], columns: [{
                 type: Input
+            }], columnChooserSelectedColumnsCount: [{
+                type: Input
             }], columnsSubtitle: [{
                 type: Input
             }], adaptiveFilterTitle: [{
@@ -27729,7 +28079,6 @@ class AdaptiveRendererComponent {
     cancelIcon = cancelIcon;
     saveIcon = saveIcon;
     columns;
-    actionsClass = 'k-actions';
     externalEditingSettings;
     get hasSort() {
         return hasSort(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
@@ -27827,7 +28176,7 @@ class AdaptiveRendererComponent {
     get hasCheckCloseIcon() {
         return this.adaptiveGridService.viewType === 'sortToolbarTool' || this.adaptiveGridService.viewType === 'groupToolbarTool';
     }
-    columnList;
+    columnChooserContent;
     filterToolbarToolTemplate;
     filterMenuContainer;
     actionSheet;
@@ -27891,7 +28240,7 @@ class AdaptiveRendererComponent {
         this.actionSheet.nextView();
     }
     applyChanges() {
-        this.columnList.applyChanges();
+        this.columnChooserContent.applyChanges();
         this.actionSheet.toggle(false);
     }
     sortBy(column) {
@@ -27943,10 +28292,11 @@ class AdaptiveRendererComponent {
         this.adaptiveGridService.notifyAnimationEnd();
     }
     cancelChanges() {
-        this.columnList.cancelChanges();
+        this.columnChooserContent.cancelChanges();
+        this.columnChooserContent.cdr.detectChanges();
     }
     onTab(event) {
-        this.columnList.onTab(event);
+        this.columnChooserContent.onTab(event);
     }
     saveEditing() {
         const { event, formGroup, externalEditingDirective } = this.externalEditingSettings;
@@ -27954,7 +28304,7 @@ class AdaptiveRendererComponent {
         this.actionSheet.toggle(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: ColumnMenuService }, { token: AdaptiveGridService }, { token: FilterService }, { token: ContextService }, { token: i2$1.AdaptiveService }, { token: SortService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnChooserContent", first: true, predicate: ["columnChooserContent"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             [cssClass]="{
                 'k-adaptive-actionsheet': true,
@@ -28014,19 +28364,14 @@ class AdaptiveRendererComponent {
                     </ng-container>
                 </ng-template>
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
-                        #columnList
-                        [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
+                    <kendo-grid-column-chooser-content
+                        #columnChooserContent
+                        [columns]="columns"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                 </ng-template>
                 <ng-template kendoActionSheetFooterTemplate>
                     <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
@@ -28168,20 +28513,15 @@ class AdaptiveRendererComponent {
                 </ng-template>
 
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
+                    <kendo-grid-column-chooser-content
                         *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
-                        #columnList
+                        #columnChooserContent
                         [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                     <kendo-grid-filter-menu-container
                         *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
                         [column]="adaptiveGridService.column"
@@ -28380,7 +28720,7 @@ class AdaptiveRendererComponent {
                 {{messageFor('filterFilterButton')}}
             </button>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -28446,19 +28786,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
                 </ng-template>
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
-                        #columnList
-                        [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
+                    <kendo-grid-column-chooser-content
+                        #columnChooserContent
+                        [columns]="columns"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                 </ng-template>
                 <ng-template kendoActionSheetFooterTemplate>
                     <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
@@ -28600,20 +28935,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ng-template>
 
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
+                    <kendo-grid-column-chooser-content
                         *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
-                        #columnList
+                        #columnChooserContent
                         [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                     <kendo-grid-filter-menu-container
                         *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
                         [column]="adaptiveGridService.column"
@@ -28838,16 +29168,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ColumnMenuAutoSizeAllColumnsComponent,
                         ColumnMenuItemComponent,
                         ColumnMenuItemDirective,
-                        ColumnListComponent,
                         FilterMenuContainerComponent,
                         ColumnMenuLockComponent,
                         EventsOutsideAngularDirective,
-                        FormComponent
+                        FormComponent,
+                        ColumnChooserContentComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnMenuService }, { type: AdaptiveGridService }, { type: FilterService }, { type: ContextService }, { type: i2$1.AdaptiveService }, { type: SortService }, { type: ColumnInfoService }]; }, propDecorators: { columnList: [{
+        }], ctorParameters: function () { return [{ type: ColumnMenuService }, { type: AdaptiveGridService }, { type: FilterService }, { type: ContextService }, { type: i2$1.AdaptiveService }, { type: SortService }, { type: ColumnInfoService }]; }, propDecorators: { columnChooserContent: [{
                 type: ViewChild,
-                args: ['columnList', { static: false }]
+                args: ['columnChooserContent', { static: false }]
             }], filterToolbarToolTemplate: [{
                 type: ViewChild,
                 args: ['filterToolbarToolTemplate', { read: ViewContainerRef, static: false }]
@@ -32277,6 +32607,9 @@ class GridComponent {
 
             i18n-aiAssistantOutputCardBodyContent="kendo.grid.aiAssistantOutputCardBodyContent|The success message dispayed in the AI Assistant Prompt Output Card's body"
             aiAssistantOutputCardBodyContent="Operation is successful. Data is:"
+
+            i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
+            columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -33134,6 +33467,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-aiAssistantOutputCardBodyContent="kendo.grid.aiAssistantOutputCardBodyContent|The success message dispayed in the AI Assistant Prompt Output Card's body"
             aiAssistantOutputCardBodyContent="Operation is successful. Data is:"
+
+            i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
+            columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -37382,7 +37718,6 @@ const KENDO_GRID_FILTER_ROW = [
  * Utility array that contains the former ColumnMenu module declarations
  */
 const KENDO_GRID_COLUMN_MENU_DECLARATIONS = [
-    ColumnMenuChooserItemCheckedDirective,
     ColumnListComponent,
     ColumnChooserComponent,
     ColumnChooserToolbarDirective,
@@ -37612,7 +37947,7 @@ const KENDO_GRID = [
  */
 class GridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, HighlightDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, UndoRedoDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, TableDirective,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnListComponent, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, HighlightDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, UndoRedoDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, TableDirective,
             UndoCommandToolbarDirective,
             RedoCommandToolbarDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, HighlightDirective, CustomMessagesComponent, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, UndoRedoDirective, UndoCommandToolbarDirective, RedoCommandToolbarDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, providers: [