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

package/esm2022/adaptiveness/adaptive-renderer.component.mjs

@@ -24,7 +24,6 @@ import { ColumnMenuItemComponent } from '../column-menu/column-menu-item.compone
 import { ColumnMenuItemDirective } from '../column-menu/column-menu-item.directive';
 import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from '../column-menu/utils';
 import { ColumnMenuService } from '../column-menu/column-menu.service';
-import { ColumnListComponent } from '../column-menu/column-list.component';
 import { ContextService } from '../common/provider.service';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { SortService } from '../common/sort.service';
@@ -34,6 +33,7 @@ import { directions } from '../rendering/toolbar/tools/sort-toolbar-tool.compone
 import { EventsOutsideAngularDirective, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
 import { FormComponent } from '../editing/form';
 import { GroupToolbarToolComponent } from '../rendering/toolbar/tools/group-toolbar-tool.component';
+import { ColumnChooserContentComponent } from '../column-menu/column-chooser-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../column-menu/column-menu.service";
 import * as i2 from "../common/adaptiveness.service";
@@ -62,7 +62,6 @@ export class AdaptiveRendererComponent {
     cancelIcon = cancelIcon;
     saveIcon = saveIcon;
     columns;
-    actionsClass = 'k-actions';
     externalEditingSettings;
     get hasSort() {
         return hasSort(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
@@ -160,7 +159,7 @@ export class AdaptiveRendererComponent {
     get hasCheckCloseIcon() {
         return this.adaptiveGridService.viewType === 'sortToolbarTool' || this.adaptiveGridService.viewType === 'groupToolbarTool';
     }
-    columnList;
+    columnChooserContent;
     filterToolbarToolTemplate;
     filterMenuContainer;
     actionSheet;
@@ -224,7 +223,7 @@ export class AdaptiveRendererComponent {
         this.actionSheet.nextView();
     }
     applyChanges() {
-        this.columnList.applyChanges();
+        this.columnChooserContent.applyChanges();
         this.actionSheet.toggle(false);
     }
     sortBy(column) {
@@ -276,10 +275,11 @@ export 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;
@@ -287,7 +287,7 @@ export class AdaptiveRendererComponent {
         this.actionSheet.toggle(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.ColumnMenuService }, { token: i2.AdaptiveGridService }, { token: i3.FilterService }, { token: i4.ContextService }, { token: i5.AdaptiveService }, { token: i6.SortService }, { token: i7.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,
@@ -347,19 +347,14 @@ export 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">
@@ -501,20 +496,15 @@ export 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"
@@ -713,7 +703,7 @@ export 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,
@@ -779,19 +769,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">
@@ -933,20 +918,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"
@@ -1171,16 +1151,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: i1.ColumnMenuService }, { type: i2.AdaptiveGridService }, { type: i3.FilterService }, { type: i4.ContextService }, { type: i5.AdaptiveService }, { type: i6.SortService }, { type: i7.ColumnInfoService }]; }, propDecorators: { columnList: [{
+        }], ctorParameters: function () { return [{ type: i1.ColumnMenuService }, { type: i2.AdaptiveGridService }, { type: i3.FilterService }, { type: i4.ContextService }, { type: i5.AdaptiveService }, { type: i6.SortService }, { type: i7.ColumnInfoService }]; }, propDecorators: { columnChooserContent: [{
                 type: ViewChild,
-                args: ['columnList', { static: false }]
+                args: ['columnChooserContent', { static: false }]
             }], filterToolbarToolTemplate: [{
                 type: ViewChild,
                 args: ['filterToolbarToolTemplate', { read: ViewContainerRef, static: false }]

package/esm2022/column-menu/column-chooser-content.component.mjs

@@ -0,0 +1,306 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ChangeDetectorRef, ViewChild, EventEmitter, Output, ElementRef, Optional } from '@angular/core';
+import { ColumnInfoService } from '../common/column-info.service';
+import { EventsOutsideAngularDirective, PrefixTemplateDirective, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
+import { arrowRotateCcwIcon, checkIcon, searchIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { ColumnListComponent } from './column-list.component';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
+import { NgClass, NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { ColumnMenuService } from './column-menu.service';
+import { ContextService } from '../common/provider.service';
+import { filterBy } from '@progress/kendo-data-query';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/column-info.service";
+import * as i2 from "../common/provider.service";
+/**
+ * @hidden
+ */
+export 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: i1.ColumnInfoService, optional: true }, { token: i2.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: i1.ColumnInfoService, decorators: [{
+                    type: Optional
+                }] }, { type: i2.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
+            }] } });