@progress/kendo-angular-grid 19.0.0-develop.2 → 19.0.0-develop.20

package/esm2022/pdf/pdf-command-tool.directive.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive } from '@angular/core';
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
 import { PDFService } from './pdf.service';
 import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { Subscription } from 'rxjs';
-import { filePdfIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
+import { ToolbarToolBase } from '../common/toolbar-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
 import * as i0 from "@angular/core";
 import * as i1 from "./pdf.service";
 import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../common/provider.service";
 /**
  * Represents the `export-to-PDF` toolbar tool of the Grid.
  * You can apply this directive to any `kendo-toolbar-button` element inside a
@@ -30,22 +32,17 @@ import * as i2 from "@progress/kendo-angular-toolbar";
  * </kendo-grid>
  * ```
  */
-export class PDFCommandToolbarDirective {
+export class PDFCommandToolbarDirective extends ToolbarToolBase {
     pdfService;
     host;
-    clickSub = new Subscription();
-    constructor(pdfService, host) {
+    constructor(pdfService, host, ctx, zone, cdr) {
+        super(host, ToolbarToolName.pdfExport, ctx, zone, cdr);
         this.pdfService = pdfService;
         this.host = host;
     }
     ngOnInit() {
-        this.clickSub = this.host.click.subscribe(e => this.onClick(e));
+        super.ngOnInit();
         this.host.className = 'k-grid-pdf';
-        this.host.svgIcon = filePdfIcon;
-        this.host.icon = 'file-pdf';
-    }
-    ngOnDestroy() {
-        this.clickSub.unsubscribe();
     }
     /**
      * @hidden
@@ -54,8 +51,8 @@ export class PDFCommandToolbarDirective {
         e.preventDefault();
         this.pdfService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, deps: [{ token: i1.PDFService }, { token: i2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PDFCommandToolbarDirective, isStandalone: true, selector: "[kendoGridPDFTool]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, deps: [{ token: i1.PDFService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PDFCommandToolbarDirective, isStandalone: true, selector: "[kendoGridPDFTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, decorators: [{
             type: Directive,
@@ -63,4 +60,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridPDFTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PDFService }, { type: i2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: i1.PDFService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/rendering/cell.component.mjs

@@ -110,7 +110,7 @@ export class CellComponent {
     get isSpanColumn() {
         return isSpanColumn(this.column) && !this.column.templateRef;
     }
-    get childColumns() {
+    get children() {
         return columnsToRender([this.column]);
     }
     get isRowReorderColumn() {
@@ -183,7 +183,7 @@ export class CellComponent {
                         [ngTemplateOutletContext]="templateContext">
                     </ng-template>
                     <ng-container *ngIf="isSpanColumn">
-                        <ng-container *ngFor="let childColumn of childColumns">
+                        <ng-container *ngFor="let childColumn of children">
                             {{ dataItem | valueOf: childColumn.field: childColumn.format}}
                         </ng-container>
                     </ng-container>
@@ -260,7 +260,7 @@ export class CellComponent {
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { 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"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
@@ -275,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [ngTemplateOutletContext]="templateContext">
                     </ng-template>
                     <ng-container *ngIf="isSpanColumn">
-                        <ng-container *ngFor="let childColumn of childColumns">
+                        <ng-container *ngFor="let childColumn of children">
                             {{ dataItem | valueOf: childColumn.field: childColumn.format}}
                         </ng-container>
                     </ng-container>

package/esm2022/rendering/header/header.component.mjs

@@ -433,7 +433,7 @@ export class HeaderComponent {
             const arr = this.dropTargets.toArray();
             const firstSpan = arr.find(t => t.context.column.parent === parent);
             const index = arr.indexOf(firstSpan);
-            const adjust = e.before ? 0 : parent.childColumns.length - 1;
+            const adjust = e.before ? 0 : parent.children.length - 1;
             target = arr[index + adjust];
         }
         return mergeObjects(e, { target });

package/esm2022/rendering/list.component.mjs

@@ -616,7 +616,7 @@ export class ListComponent {
         for (let idx = 0; idx < leafColumns.length; idx++) {
             const column = leafColumns[idx];
             if (column.isSpanColumn) {
-                viewportEnd += column.childColumns.length;
+                viewportEnd += column.children.length;
             }
         }
         this.navigationService.setColumnViewport(viewportStart, viewportEnd);

package/esm2022/rendering/table-body.component.mjs

@@ -348,7 +348,7 @@ export class TableBodyComponent {
     }
     get footerColumns() {
         const colsToRender = Array.from(this.columns).reduce((cols, col) => {
-            const newCols = (col instanceof SpanColumnComponent) ? Array.from(col.childColumns) : [col];
+            const newCols = (col instanceof SpanColumnComponent) ? Array.from(col.children) : [col];
             return [...cols, ...newCols];
         }, []);
         return colsToRender;
@@ -369,6 +369,15 @@ export class TableBodyComponent {
     clickHandler(eventArg) {
         const element = this.element.nativeElement;
         const target = this.eventTarget(eventArg);
+        const selectionEnabled = this.selectable && this.selectable.enabled !== false;
+        if (eventArg.keyCode === Keys.Space) {
+            if (!selectionEnabled) {
+                return;
+            }
+            if (!this.editService.isEditing()) {
+                eventArg.preventDefault();
+            }
+        }
         let cell, row, body, gridElement;
         let currentTarget = target;
         do {
@@ -386,7 +395,6 @@ export class TableBodyComponent {
             if (!focusable && !matchesNodeName('label')(target) && !hasClasses(target, IGNORE_TARGET_CLASSSES) &&
                 !closestInScope(target, matchesClasses(IGNORE_CONTAINER_CLASSES), cell)) {
                 const args = this.cellClickArgs(cell, row, eventArg);
-                const selectionEnabled = this.selectable && this.selectable.enabled !== false;
                 if (selectionEnabled && !this.isRowSelectable({ index: args.rowIndex, dataItem: args.dataItem })) {
                     return;
                 }
@@ -417,7 +425,7 @@ export class TableBodyComponent {
         }));
     }
     cellKeydownHandler(args) {
-        if (args.keyCode === Keys.Enter) {
+        if (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) {
             this.clickHandler(args);
         }
     }

package/esm2022/rendering/toolbar/tools/column-chooser-tool.directive.mjs

@@ -0,0 +1,201 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, NgZone, Input, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { RefreshService, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { ColumnListComponent } from '../../../column-menu/column-list.component';
+import { closest, isPresent } from '@progress/kendo-angular-common';
+import { Subscription } from 'rxjs';
+import { columnsIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../../../common/provider.service';
+import { filter, take } from 'rxjs/operators';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
+import { ColumnInfoService } from '../../../common/column-info.service';
+import { ToolbarToolBase } from '../../../common/toolbar-tool-base.directive';
+import { ToolbarToolName } from '../../../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../../../common/provider.service";
+import * as i4 from "../../../common/adaptiveness.service";
+import * as i5 from "../../../common/column-info.service";
+let incrementingId = 0;
+/**
+ * Represents the `column-chooser` toolbar tool of the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class ColumnChooserToolbarDirective extends ToolbarToolBase {
+    renderer;
+    popupSerivce;
+    host;
+    ctx;
+    zone;
+    refresh;
+    adaptiveGridService;
+    columnInfoService;
+    /**
+     * Specifies if the changes in the visibility of the column will be immediately applied.
+     *
+     * @default false
+     */
+    autoSync = false;
+    /**
+     * Specifies if all columns can be hidden.
+     *
+     * @default true
+     */
+    allowHideAll = true;
+    /**
+     * @hidden
+     */
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    popupRef;
+    subs = new Subscription();
+    nextId = incrementingId++;
+    constructor(renderer, popupSerivce, host, ctx, zone, refresh, adaptiveGridService, columnInfoService, cdr) {
+        super(host, ToolbarToolName.columns, ctx, zone, cdr);
+        this.renderer = renderer;
+        this.popupSerivce = popupSerivce;
+        this.host = host;
+        this.ctx = ctx;
+        this.zone = zone;
+        this.refresh = refresh;
+        this.adaptiveGridService = adaptiveGridService;
+        this.columnInfoService = columnInfoService;
+    }
+    ngOnInit() {
+        this.subs.add(this.host.click.subscribe(e => this.onClick(e)));
+        const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
+        const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
+        const hasIcon = hasToolbarIcon && hasOverflowIcon;
+        const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
+        if (!hasIcon) {
+            this.host.icon = 'columns';
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = columnsIcon;
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
+            this.buttonElement?.setAttribute('aria-expanded', 'false');
+            this.buttonElement?.setAttribute('title', this.ctx.localization.get('columns'));
+        });
+        this.subs.add(this.refresh.onRefresh.pipe(filter((tool) => tool === this.host)).subscribe((tool) => {
+            if (tool.overflows && this.popupRef) {
+                this.popupRef.close();
+            }
+        }));
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.subs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'columnChooserToolbarTool';
+                this.adaptiveGridService.columns = this.columns;
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
+            }
+        }
+        else {
+            this.togglePopup();
+        }
+    }
+    togglePopup() {
+        if (!this.popupRef) {
+            const direction = this.ctx.localization.rtl ? 'right' : 'left';
+            this.popupRef = this.popupSerivce.open({
+                anchor: this.buttonElement,
+                content: ColumnListComponent,
+                positionMode: 'absolute',
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction }
+            });
+            this.adaptiveGridService.popupRef = this.popupRef;
+            const popupElement = this.popupRef.popupElement;
+            const popupId = `k-column-chooser-tool-${this.nextId}-popup`;
+            const popupAriaElement = popupElement.querySelector('.k-popup');
+            this.zone.runOutsideAngular(() => {
+                this.renderer.listen(popupAriaElement, 'keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        this.closePopup(true);
+                    }
+                });
+            });
+            this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+            this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+            this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+            this.buttonElement?.setAttribute('aria-expanded', 'true');
+            this.buttonElement?.setAttribute('aria-controls', popupId);
+            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');
+            this.subs.add(this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                this.closePopup(true);
+            }));
+            this.subs.add(columnList.apply.subscribe(() => {
+                this.closePopup();
+            }));
+            this.zone.runOutsideAngular(() => this.renderer.listen('document', 'click', ({ target }) => {
+                if (this.popupRef && !closest(target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
+                    this.zone.run(() => {
+                        this.closePopup();
+                    });
+                }
+            }));
+        }
+        else {
+            this.closePopup();
+        }
+    }
+    closePopup(focusAnchor = false) {
+        this.popupRef.close();
+        this.popupRef = null;
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.removeAttribute('aria-controls');
+        focusAnchor && this.buttonElement?.focus();
+    }
+    get buttonElement() {
+        return this.host.getButton();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i1.PopupService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i2.RefreshService }, { token: i4.AdaptiveGridService }, { token: i5.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridColumnChooserTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.PopupService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i2.RefreshService }, { type: i4.AdaptiveGridService }, { type: i5.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }] } });

package/esm2022/rendering/toolbar/tools/filter-command-tool.directive.mjs

@@ -13,12 +13,14 @@ import { ColumnInfoService } from '../../../common/column-info.service';
 import { take } from 'rxjs/operators';
 import { FilterService } from '../../../filtering/filter.service';
 import { FilterToolWrapperComponent } from './filter-tool-wrapper.component';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-toolbar";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "../../../common/provider.service";
 import * as i4 from "../../../filtering/filter.service";
 import * as i5 from "../../../common/column-info.service";
+import * as i6 from "../../../common/adaptiveness.service";
 let incrementingId = 0;
 /**
  * Represents the toolbar tool for filtering columns of the Grid.
@@ -45,12 +47,13 @@ export class FilterCommandToolbarDirective {
     columnInfoService;
     ngZone;
     renderer;
+    adaptiveGridService;
     popupRef;
     nextId = incrementingId++;
     toolSubs = new Subscription();
     popupSubs;
     removeClickListener;
-    constructor(host, popupService, ctx, filterService, columnInfoService, ngZone, renderer) {
+    constructor(host, popupService, ctx, filterService, columnInfoService, ngZone, renderer, adaptiveGridService) {
         this.host = host;
         this.popupService = popupService;
         this.ctx = ctx;
@@ -58,6 +61,7 @@ export class FilterCommandToolbarDirective {
         this.columnInfoService = columnInfoService;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.adaptiveGridService = adaptiveGridService;
     }
     ngOnInit() {
         this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
@@ -69,7 +73,7 @@ export class FilterCommandToolbarDirective {
         const hasIcon = hasToolbarIcon && hasOverflowIcon;
         const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
         if (!hasIcon) {
-            this.host.icon = 'k-i-filter';
+            this.host.icon = 'filter';
         }
         if (!hasSvgIcon) {
             this.host.svgIcon = filterIcon;
@@ -81,9 +85,9 @@ export class FilterCommandToolbarDirective {
                 this.host.text = this.ctx.localization.get(`filterToolbarToolText`);
             });
         }
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-haspopup', 'dialog');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('title', this.ctx.localization.get('filter'));
+        this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('filter'));
     }
     ngOnDestroy() {
         if (this.toolSubs) {
@@ -111,31 +115,40 @@ export class FilterCommandToolbarDirective {
     }
     openPopup() {
         const direction = this.ctx.localization.rtl ? 'right' : 'left';
-        this.popupRef = this.popupService.open({
-            anchor: this.host.toolbarButtonElement.nativeElement,
-            content: FilterToolWrapperComponent,
-            popupClass: 'k-grid-columnmenu-popup',
-            positionMode: 'absolute',
-            anchorAlign: { vertical: 'bottom', horizontal: direction },
-            popupAlign: { vertical: 'top', horizontal: direction }
-        });
-        this.setPopupAttributes();
-        this.ngZone.runOutsideAngular(() => {
-            if (!isDocumentAvailable()) {
-                return;
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'filterToolbarTool';
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
             }
-            this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
-                if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement || node === this.host.toolbarButtonElement.nativeElement)) {
-                    this.closePopup();
+        }
+        else {
+            this.popupRef = this.popupService.open({
+                anchor: this.buttonElement,
+                content: FilterToolWrapperComponent,
+                popupClass: 'k-grid-columnmenu-popup',
+                positionMode: 'absolute',
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction }
+            });
+            this.adaptiveGridService.popupRef = this.popupRef;
+            this.setPopupAttributes();
+            this.ngZone.runOutsideAngular(() => {
+                if (!isDocumentAvailable()) {
+                    return;
                 }
+                this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
+                    if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
+                        this.closePopup();
+                    }
+                });
             });
-        });
-        this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
-            this.popupSubs?.unsubscribe();
-            this.popupSubs = null;
-            this.closePopup();
-        });
-        this.initPopupProperties();
+            this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                this.popupSubs?.unsubscribe();
+                this.popupSubs = null;
+                this.closePopup();
+            });
+            this.initPopupProperties();
+        }
     }
     setPopupAttributes() {
         const popupElement = this.popupRef.popupElement;
@@ -144,8 +157,8 @@ export class FilterCommandToolbarDirective {
         this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
         this.renderer.setAttribute(popupAriaElement, 'id', popupId);
         this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'true');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-controls', popupId);
+        this.buttonElement?.setAttribute('aria-expanded', 'true');
+        this.buttonElement?.setAttribute('aria-controls', popupId);
     }
     initPopupProperties() {
         this.popupRef.content.instance.columnInfoService = this.columnInfoService;
@@ -157,8 +170,8 @@ export class FilterCommandToolbarDirective {
         }));
     }
     closePopup() {
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
-        this.host.toolbarButtonElement.nativeElement.removeAttribute('aria-controls');
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.removeAttribute('aria-controls');
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -172,7 +185,10 @@ export class FilterCommandToolbarDirective {
             this.removeClickListener = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i4.FilterService }, { token: i5.ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    get buttonElement() {
+        return this.host.getButton();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i4.FilterService }, { token: i5.ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCommandToolbarDirective, isStandalone: true, selector: "[kendoGridFilterTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, decorators: [{
@@ -181,4 +197,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridFilterTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i4.FilterService }, { type: i5.ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i4.FilterService }, { type: i5.ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i6.AdaptiveGridService }]; } });

package/esm2022/rendering/toolbar/tools/filter-tool-wrapper.component.mjs

@@ -12,6 +12,7 @@ import { SinglePopupService } from '../../../common/single-popup.service';
 import { ScrollSyncService } from '../../../scrolling/scroll-sync.service';
 import { ColumnInfoService } from '../../../common/column-info.service';
 import { cloneFilters } from '../../../common/filter-descriptor-differ';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 /**
@@ -26,14 +27,15 @@ export class FilterToolWrapperComponent {
         this.close.emit();
         this.hostButton?.focus(event);
     }
+    onClick(event) {
+        if (this.hostButton.location !== 'toolbar') {
+            event.stopImmediatePropagation();
+        }
+    }
     close = new EventEmitter();
     hostButton;
     clearIcon = filterClearIcon;
     columnInfoService;
-    popupRef;
-    filter;
-    subscriptions;
-    _ctx;
     set ctx(ctx) {
         this._ctx = ctx;
         this.createPopup();
@@ -41,7 +43,6 @@ export class FilterToolWrapperComponent {
     get ctx() {
         return this._ctx;
     }
-    _filterService;
     set filterService(filterService) {
         this._filterService = filterService;
         this.subscriptions = this._filterService.changes.subscribe(filter => {
@@ -53,6 +54,11 @@ export class FilterToolWrapperComponent {
         return this._filterService;
     }
     columnMenuService;
+    popupRef;
+    filter;
+    subscriptions;
+    _ctx;
+    _filterService;
     constructor(injector) {
         this.injector = injector;
     }
@@ -81,6 +87,7 @@ export class FilterToolWrapperComponent {
                     { provide: FilterService, useValue: this._filterService },
                     { provide: ContextService, useValue: this._ctx },
                     { provide: ColumnInfoService, useValue: this.columnInfoService },
+                    AdaptiveGridService,
                     SinglePopupService,
                     ScrollSyncService
                 ],
@@ -93,10 +100,15 @@ export class FilterToolWrapperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolWrapperComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolWrapperComponent, isStandalone: true, selector: "kendo-filter-tool-wrapper", outputs: { close: "close" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolWrapperComponent, isStandalone: true, selector: "kendo-filter-tool-wrapper", outputs: { close: "close" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)", "click": "onClick($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
         <ng-container #container></ng-container>
         <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton [svgIcon]="clearIcon" (click)="clear()">Clear all filters</button>
+            <button kendoButton
+                    [svgIcon]="clearIcon"
+                    icon="filter-clear"
+                    (click)="clear()">
+                    {{ctx?.localization.get('filterClearAllButton')}}
+            </button>
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.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"] }] });
 }
@@ -107,7 +119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <ng-container #container></ng-container>
         <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton [svgIcon]="clearIcon" (click)="clear()">Clear all filters</button>
+            <button kendoButton
+                    [svgIcon]="clearIcon"
+                    icon="filter-clear"
+                    (click)="clear()">
+                    {{ctx?.localization.get('filterClearAllButton')}}
+            </button>
         </div>
     `,
                     standalone: true,
@@ -125,6 +142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], onEscKeyDown: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }], close: [{
                 type: Output
             }] } });