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

package/esm2022/column-menu/column-list.component.mjs

@@ -2,23 +2,22 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChild, ViewChildren, QueryList, Optional } from '@angular/core';
+import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChildren, QueryList, Optional, ChangeDetectorRef } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
-import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
 import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
-import { NgFor, NgIf, NgClass } from '@angular/common';
+import { NgFor, NgIf } from '@angular/common';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { take } from 'rxjs/operators';
-import { arrowRotateCcwIcon, checkIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { ContextService } from '../common/provider.service';
 import { AdaptiveGridService } from '../common/adaptiveness.service';
+import { ColumnInfoService } from '../common/column-info.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-list-kb-nav.service";
-import * as i2 from "../common/adaptiveness.service";
-import * as i3 from "../common/provider.service";
+import * as i2 from "../common/column-info.service";
+import * as i3 from "../common/adaptiveness.service";
+import * as i4 from "../common/provider.service";
 /**
  * @hidden
  */
@@ -27,10 +26,10 @@ export class ColumnListComponent {
     ngZone;
     renderer;
     listNavigationService;
+    cdr;
+    columnInfoService;
     adaptiveGridService;
     ctx;
-    checkIcon = checkIcon;
-    arrowRotateCcwIcon = arrowRotateCcwIcon;
     className = true;
     get listSizeMd() {
         return !(this.ctx?.grid?.isActionSheetExpanded);
@@ -42,40 +41,59 @@ export 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;
     }
@@ -85,17 +103,17 @@ export 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);
             }
@@ -112,38 +130,88 @@ export 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;
         }
     }
+    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) {
@@ -151,6 +219,9 @@ export 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);
             }
@@ -161,10 +232,30 @@ export 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();
@@ -183,46 +274,33 @@ export 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;
@@ -239,85 +317,64 @@ export class ColumnListComponent {
             });
         }
     }
-    handleCheckBoxClick = (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);
-            }
+    onCheckboxChange(checkedState, column, _index) {
+        column.currentlyChecked = checkedState;
+        if (this.autoSync) {
+            column.hidden = !checkedState;
+            column.initiallyChecked = checkedState;
+            this.columnChange.emit([column]);
         }
-    };
-    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: i1.ColumnListKeyboardNavigation }, { token: i2.AdaptiveGridService, optional: true }, { token: i3.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: `
+        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: i1.ColumnListKeyboardNavigation }, { token: i0.ChangeDetectorRef }, { token: i2.ColumnInfoService, optional: true }, { token: i3.AdaptiveGridService, optional: true }, { token: i4.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">
                 <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">
+                <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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -331,48 +388,41 @@ 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'
+                role="option">
+                <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'
-                [kendoColumnMenuChooserItemChecked]="!column.hidden"
                 role="option">
                 <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]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }, { type: i2.AdaptiveGridService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }, { type: i0.ChangeDetectorRef }, { type: i2.ColumnInfoService, decorators: [{
+                    type: Optional
+                }] }, { type: i3.AdaptiveGridService, decorators: [{
                     type: Optional
-                }] }, { type: i3.ContextService, decorators: [{
+                }] }, { type: i4.ContextService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { className: [{
                 type: HostBinding,
@@ -391,10 +441,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: [{
@@ -403,23 +457,14 @@ 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]