@progress/kendo-angular-treelist 18.2.1-develop.3 → 18.3.0-develop.2

package/column-menu/utils.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { TreeListComponent } from "../treelist.component";
 /**
  * @hidden
  */
@@ -18,6 +19,18 @@ export declare const hasLock: (settings: any, column: any) => boolean;
  * @hidden
  */
 export declare const hasColumnChooser: (settings: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const hasAutoSizeColumn: (settings: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const hasAutoSizeAllColumns: (settings: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const autoSizeColumn: (treelist: TreeListComponent, service: any, column?: any) => void;
 /**
  * @hidden
  */

package/columns/sort-settings.d.ts

@@ -27,6 +27,18 @@ export type ColumnSortSettings = boolean | {
      */
     initialDirection?: 'asc' | 'desc';
 };
+/**
+ * Specifies a modifier key when multiple sort.
+ *
+ * @example
+ * ```html
+ * <kendo-treelist [sortable]="{ mode: 'multiple', multiSortKey: 'shift' }">
+ *   <kendo-treelist-column field="ProductID"></kendo-treelist-column>
+ *   ...
+ * </kendo-treelist>
+ * ```
+ */
+export type ModifierKey = 'none' | 'ctrl' | 'shift' | 'alt';
 /**
  * Defines the settings for sorting the TreeList.
  *

package/common/error-messages.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare const ColumnMenuErrorMessages: any;

package/common/id.service.d.ts

@@ -10,6 +10,9 @@ export declare class IdService {
     private prefix;
     constructor();
     cellId(rowIndex: number, colIndex: number): string;
+    gridId(): string;
+    selectionCheckboxId(itemIndex: any): string;
+    selectAllCheckboxId(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<IdService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<IdService>;
 }

package/common/provider.service.d.ts

@@ -5,6 +5,7 @@
 import { Renderer2 } from '@angular/core';
 import type { TreeListComponent } from '../treelist.component';
 import { TreeListToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -16,10 +17,11 @@ import * as i0 from "@angular/core";
  * and a avoids dependency cycles between components.
  */
 export declare class ContextService {
+    localization: LocalizationService;
     treelist: TreeListComponent;
     topToolbarNavigation: TreeListToolbarNavigationService;
     bottomToolbarNavigation: TreeListToolbarNavigationService;
-    constructor(renderer: Renderer2);
+    constructor(renderer: Renderer2, localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;
 }

package/esm2022/column-menu/column-chooser-item-checked.directive.mjs

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ContentChild, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ColumnMenuChooserItemCheckedDirective {
+    host;
+    kendoColumnMenuChooserItemChecked;
+    checkbox;
+    checkedChangeSub = new Subscription();
+    constructor(host) {
+        this.host = host;
+    }
+    ngAfterViewInit() {
+        this.checkedChangeSub.add(this.checkbox.checkedStateChange.subscribe(() => {
+            this.kendoColumnMenuChooserItemChecked = this.checkbox.checkedState === true;
+        }));
+    }
+    ngOnDestroy() {
+        this.checkedChangeSub.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserItemCheckedDirective, isStandalone: true, selector: "[kendoColumnMenuChooserItemChecked]", inputs: { kendoColumnMenuChooserItemChecked: "kendoColumnMenuChooserItemChecked" }, host: { properties: { "attr.aria-checked": "this.kendoColumnMenuChooserItemChecked" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoColumnMenuChooserItemChecked]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { kendoColumnMenuChooserItemChecked: [{
+                type: HostBinding,
+                args: ['attr.aria-checked']
+            }, {
+                type: Input
+            }], checkbox: [{
+                type: ContentChild,
+                args: [CheckBoxComponent]
+            }] } });

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

@@ -2,10 +2,10 @@
 * 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, NgZone, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, NgZone, Renderer2, ChangeDetectorRef, ViewChild } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { guid, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { columnsIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { ColumnInfoService } from '../common/column-info.service';
@@ -16,8 +16,9 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "@progress/kendo-angular-popup";
 /**
- * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
- * add the component inside a [`ToolbarTemplate`]({% slug api_treelist_toolbartemplatedirective %}) directive.
+ * Represents the component for selecting columns in the TreeList.
+ * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_treelist),
+ * add the component inside the [`ToolbarTemplate`]({% slug api_treelist_toolbartemplatedirective %}) directive.
  *
  * @example
  * ```html
@@ -37,20 +38,26 @@ export class ColumnChooserComponent {
     changeDetector;
     /**
      * 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;
+    anchor;
+    columnList;
     get columns() {
         return this.columnInfoService.leafNamedColumns;
     }
     columnsIcon = columnsIcon;
     popupRef;
+    popupId;
     closeClick;
+    escapeListener;
     constructor(localization, columnInfoService, popupService, ngZone, renderer, changeDetector) {
         this.localization = localization;
         this.columnInfoService = columnInfoService;
@@ -75,13 +82,30 @@ export class ColumnChooserComponent {
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction }
             });
-            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            const popupElement = this.popupRef?.popupElement;
+            if (popupElement) {
+                const popupId = `k-${guid()}`;
+                const popupAriaElement = popupElement.querySelector('.k-popup');
+                this.ngZone.runOutsideAngular(() => {
+                    this.escapeListener = this.renderer.listen(popupAriaElement, 'keydown', (e) => {
+                        if (e.keyCode === Keys.Escape) {
+                            this.close(true);
+                        }
+                    });
+                });
+                this.renderer.setAttribute(popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.popupId = popupId;
+            }
             if (!isDocumentAvailable()) {
                 return;
             }
             this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
                 if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
-                    this.close();
+                    this.ngZone.run(() => {
+                        this.close();
+                    });
                 }
             }));
         }
@@ -93,7 +117,7 @@ export class ColumnChooserComponent {
      * @hidden
      */
     onApply(changed) {
-        this.close();
+        this.close(true);
         if (changed.length) {
             this.changeDetector.markForCheck();
             this.columnInfoService.changeVisibility(changed);
@@ -106,13 +130,24 @@ export class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
-    close() {
+    /**
+     * @hidden
+     */
+    onShiftTab(e) {
+        if (e.target.matches('.k-column-list-item')) {
+            e.preventDefault();
+            this.columnList.resetButton.nativeElement.focus();
+        }
+    }
+    close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
             this.changeDetector.markForCheck();
+            this.escapeListener?.();
         }
         this.detachClose();
+        focusAnchor && this.anchor.element.focus();
     }
     detachClose() {
         if (this.closeClick) {
@@ -121,7 +156,7 @@ export class ColumnChooserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i3.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-treelist-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-treelist-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
         <button #anchor
             kendoButton
             type="button"
@@ -129,20 +164,27 @@ export class ColumnChooserComponent {
             fillMode="flat"
             [attr.title]="localization.get('columns')"
             icon="columns"
-            [svgIcon]="columnsIcon"></button>
+            [svgIcon]="columnsIcon"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="!!(popupRef)"
+            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
             <kendo-treelist-columnlist
+                #columnList
                 [columns]="columns"
+                [ariaLabel]="localization.get('columns')"
+                [isLast]="true"
                 [applyText]="localization.get('columnsApply')"
                 [resetText]="localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
+                (columnChange)="onChange($event)"
+                (keydown.shift.tab)="onShiftTab($event)">
             </kendo-treelist-columnlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
@@ -156,17 +198,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             fillMode="flat"
             [attr.title]="localization.get('columns')"
             icon="columns"
-            [svgIcon]="columnsIcon"></button>
+            [svgIcon]="columnsIcon"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="!!(popupRef)"
+            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
             <kendo-treelist-columnlist
+                #columnList
                 [columns]="columns"
+                [ariaLabel]="localization.get('columns')"
+                [isLast]="true"
                 [applyText]="localization.get('columnsApply')"
                 [resetText]="localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
+                (columnChange)="onChange($event)"
+                (keydown.shift.tab)="onShiftTab($event)">
             </kendo-treelist-columnlist>
         </ng-template>
     `,
@@ -177,4 +226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHideAll: [{
                 type: Input
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor']
+            }], columnList: [{
+                type: ViewChild,
+                args: ['columnList']
             }] } });

package/esm2022/column-menu/column-list-kb-nav.service.mjs

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ColumnListKeyboardNavigation {
+    renderer;
+    items;
+    activeIndex = 0;
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    next() {
+        this.toggle(this.activeIndex, false);
+        this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1);
+        this.toggle(this.activeIndex, true);
+    }
+    prev() {
+        this.toggle(this.activeIndex, false);
+        this.activeIndex = Math.max(this.activeIndex - 1, 0);
+        this.toggle(this.activeIndex, true);
+    }
+    toggle(index, active) {
+        const element = this.items[index]?.host.nativeElement;
+        element && this.renderer.setAttribute(this.items[index].host.nativeElement, 'tabindex', active ? '0' : '-1');
+        active && element?.focus();
+    }
+    toggleCheckedState() {
+        this.items[this.activeIndex].host.nativeElement.firstElementChild.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });