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

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

@@ -2,11 +2,17 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, QueryList, ViewChildren } from '@angular/core';
+import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, QueryList, ViewChildren, ViewChild } from '@angular/core';
 import { NgFor, NgIf, NgClass } from '@angular/common';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { take } from 'rxjs/operators';
+import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
+import { ColumnMenuService } from './column-menu.service';
+import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
+import { Subscription } from 'rxjs';
+import { Keys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
+import * as i1 from "./column-list-kb-nav.service";
 /**
  * @hidden
  */
@@ -14,9 +20,8 @@ export class ColumnListComponent {
     element;
     ngZone;
     renderer;
-    get className() {
-        return true;
-    }
+    listNavigationService;
+    className = true;
     reset = new EventEmitter();
     apply = new EventEmitter();
     columnChange = new EventEmitter();
@@ -29,10 +34,17 @@ export class ColumnListComponent {
         return this._columns;
     }
     autoSync = true;
+    ariaLabel;
     allowHideAll = false;
     applyText;
     resetText;
-    actionsClass = 'k-actions';
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    isLast;
+    isExpanded;
+    service;
+    resetButton;
+    applyButton;
+    options;
     checkboxes;
     hasLocked;
     hasVisibleLocked;
@@ -41,36 +53,52 @@ export class ColumnListComponent {
     hasFiltered;
     _columns;
     allColumns;
-    domSubscriptions;
-    constructor(element, ngZone, renderer) {
+    domSubscriptions = new Subscription();
+    constructor(element, ngZone, renderer, listNavigationService) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
-    }
-    isDisabled(column) {
-        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
-            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
+        this.listNavigationService = listNavigationService;
     }
     ngOnInit() {
         if (!this.element) {
             return;
         }
         this.ngZone.runOutsideAngular(() => {
-            this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                     this.handleCheckBoxClick(e);
                 });
-            });
+            }));
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
         });
     }
-    ngOnDestroy() {
-        if (this.domSubscriptions) {
-            this.domSubscriptions();
+    ngAfterViewInit() {
+        this.listNavigationService.items = this.options.toArray();
+        this.listNavigationService.toggle(0, true);
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.updateDisabled());
+    }
+    ngOnChanges(changes) {
+        if (!this.service) {
+            return;
+        }
+        if (changes['isLast'] && this.isLast) {
+            this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
         }
+        if (changes['isExpanded'] && this.isExpanded && this.isLast && this.applyButton) {
+            this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
+        }
+    }
+    ngOnDestroy() {
+        this.domSubscriptions.unsubscribe();
+    }
+    isDisabled(column) {
+        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
+            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
     }
     cancelChanges() {
-        this.checkboxes.forEach((item, index) => {
-            item.checkedState = !this.columns[index].hidden;
+        this.checkboxes.forEach((element, index) => {
+            element.checkedState = !this.columns[index].hidden;
         });
         this.updateDisabled();
         this.reset.emit();
@@ -88,6 +116,31 @@ export class ColumnListComponent {
         this.updateDisabled();
         this.apply.emit(changed);
     }
+    onTab(e) {
+        if (this.isLast) {
+            e.preventDefault();
+            if (this.service) {
+                this.service.menuTabbingService.firstFocusable.focus();
+            }
+            else {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, true);
+            }
+        }
+    }
+    onKeydown = (e) => {
+        if (e.keyCode !== Keys.Tab) {
+            e.preventDefault();
+        }
+        if (e.keyCode === Keys.ArrowDown) {
+            this.listNavigationService.next();
+        }
+        else if (e.keyCode === Keys.ArrowUp) {
+            this.listNavigationService.prev();
+        }
+        else if (e.keyCode === Keys.Space && e.target.classList.contains('k-column-list-item')) {
+            this.listNavigationService.toggleCheckedState();
+        }
+    };
     updateDisabled() {
         if (this.allowHideAll && !this.hasLocked) {
             return;
@@ -97,16 +150,16 @@ export class ColumnListComponent {
             if (checkbox.checkedState) {
                 checkedItems.push({ checkbox, index });
             }
-            checkbox.disabled = false;
+            this.setDisabledState(checkbox, false);
         });
         if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            checkedItems[0].checkbox.disabled = true;
+            this.setDisabledState(checkedItems[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
             const columns = this.columns;
             const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
             if (checkedUnlocked.length === 1) {
-                checkedUnlocked[0].checkbox.disabled = true;
+                this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
         }
     }
@@ -124,12 +177,39 @@ export class ColumnListComponent {
             this.hasUnlockedFiltered = false;
         }
     }
+    setDisabledState(checkbox, disabled) {
+        this.ngZone.run(() => checkbox.disabled = disabled);
+        const checkboxElement = checkbox.hostElement.nativeElement;
+        const parentElement = checkboxElement.parentElement;
+        const classCommand = disabled ? 'addClass' : 'removeClass';
+        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
+        this.renderer[classCommand](parentElement, 'k-disabled');
+        this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
+    }
     handleCheckBoxClick = (e) => {
-        const closestItem = e.target.closest('.k-checkbox-wrap');
+        const closestItem = e.target.closest('.k-column-list-item');
         if (closestItem) {
+            const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
+            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
+            const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
+            if (index !== this.listNavigationService.activeIndex) {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                this.listNavigationService.activeIndex = index;
+                this.listNavigationService.toggle(index, true);
+            }
+            if (checkboxElement.contains(e.target)) {
+                const checkboxInputElement = checkboxElement.firstElementChild;
+                checkboxInputElement.blur();
+                checkboxInputElement.classList.remove('k-focus');
+            }
+            else {
+                this.listNavigationService.toggleCheckedState();
+            }
+            closestItem.focus();
             if (this.autoSync) {
-                const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === closestItem);
-                const index = parseInt(closestItem.firstElementChild.getAttribute('data-index'), 10);
+                if (!this.columns[index]) {
+                    return;
+                }
                 const column = this.columns[index];
                 const hidden = !checkbox.checkedState;
                 if (Boolean(column.hidden) !== hidden) {
@@ -140,72 +220,97 @@ export class ColumnListComponent {
                 }
             }
             else {
-                this.ngZone.run(() => this.updateDisabled());
+                this.updateDisabled();
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, viewQueries: [{ propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
+                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
             <button
+                #applyButton
                 type="button"
-                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="cancelChanges()">
-                {{ resetText }}
-            </button>
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
             <button
+                #resetButton
                 type="button"
-                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="applyChanges()">
-                {{ applyText }}
-            </button>
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnlist',
+                    providers: [ColumnListKeyboardNavigation],
                     template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
+                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
             <button
+                #applyButton
                 type="button"
-                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="cancelChanges()">
-                {{ resetText }}
-            </button>
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
             <button
+                #resetButton
                 type="button"
-                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="applyChanges()">
-                {{ applyText }}
-            </button>
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, NgClass, CheckBoxComponent]
+                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ["class.k-column-list-wrapper"]
             }], reset: [{
@@ -218,6 +323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], autoSync: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], allowHideAll: [{
                 type: Input
             }], applyText: [{
@@ -226,6 +333,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], actionsClass: [{
                 type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton', { static: false }]
+            }], applyButton: [{
+                type: ViewChild,
+                args: ['applyButton', { static: false }]
+            }], options: [{
+                type: ViewChildren,
+                args: [ColumnMenuChooserItemCheckedDirective]
             }], checkboxes: [{
                 type: ViewChildren,
                 args: [CheckBoxComponent]

package/esm2022/column-menu/column-menu-autosize-all.component.mjs

@@ -0,0 +1,79 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, isDevMode } from '@angular/core';
+import { displayInlineFlexIcon } from '@progress/kendo-svg-icons';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
+import { ContextService } from '../common/provider.service';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import { autoSizeColumn } from './utils';
+import { ColumnMenuItemComponent } from './column-menu-item.component';
+import { NgIf } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
+/**
+ * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
+ * [See example](slug:columnmenu_treelist#toc-autosize-all-columns-item).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-treelist-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_treelist#toc-customizing-the-content).
+ *
+ * @example
+ * ```html
+ * <kendo-treelist [columnMenu]="true" ...>
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *     <kendo-treelist-columnmenu-autosize-all-columns [service]="service">
+ *     </kendo-treelist-columnmenu-autosize-all-columns>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
+ */
+export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
+    ctx;
+    displayInlineFlexIcon = displayInlineFlexIcon;
+    constructor(ctx) {
+        super();
+        this.ctx = ctx;
+    }
+    ngOnInit() {
+        const isVirtualColumns = this.ctx.treelist.columnMenuTemplate && this.ctx.treelist.virtualColumns;
+        if (isVirtualColumns && isDevMode()) {
+            console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
+        }
+    }
+    /**
+     * Resizes all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
+     */
+    autoSizeAllColumns() {
+        autoSizeColumn(this.ctx.treelist, this.service);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuAutoSizeAllColumnsComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
+        <kendo-treelist-columnmenu-item
+            *ngIf="!this.ctx.treelist.virtualColumns"
+            [text]="ctx.localization.get('autosizeAllColumns')"
+            icon="display-inline-flex"
+            [svgIcon]="displayInlineFlexIcon"
+            (itemClick)="autoSizeAllColumns()"
+        ></kendo-treelist-columnmenu-item>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-columnmenu-autosize-all-columns',
+                    template: `
+        <kendo-treelist-columnmenu-item
+            *ngIf="!this.ctx.treelist.virtualColumns"
+            [text]="ctx.localization.get('autosizeAllColumns')"
+            icon="display-inline-flex"
+            [svgIcon]="displayInlineFlexIcon"
+            (itemClick)="autoSizeAllColumns()"
+        ></kendo-treelist-columnmenu-item>
+    `,
+                    standalone: true,
+                    imports: [NgIf, ColumnMenuItemComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; } });

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

@@ -0,0 +1,87 @@
+/**-----------------------------------------------------------------------------------------
+* 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, isDevMode } from '@angular/core';
+import { maxWidthIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import { autoSizeColumn } from './utils';
+import { ColumnMenuItemComponent } from './column-menu-item.component';
+import { NgIf } from '@angular/common';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
+/**
+ * Represents the column-menu item for resizing the specified column to the minimum possible width so that it fits the header or cell content without wrapping.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ * [See example](slug:columnmenu_treelist#toc-customizing-the-content).
+ *
+ * You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) and `column` that are passed by
+ * the template to the `service` and `column` input of the `kendo-treelist-columnmenu-autosize-column` component.
+ *
+ * @example
+ * ```html
+ * <kendo-treelist [columnMenu]="true" ...>
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service" let-column="column">
+ *     <kendo-treelist-columnmenu-autosize-column [column]="column" [service]="service">
+ *     </kendo-treelist-columnmenu-autosize-column>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
+ */
+export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
+    ctx;
+    /**
+     * The TreeList column instance which will be resized through the auto size column option.
+     */
+    column;
+    maxWidthIcon = maxWidthIcon;
+    constructor(ctx) {
+        super();
+        this.ctx = ctx;
+    }
+    ngOnInit() {
+        const isVirtualColumns = this.ctx.treelist.columnMenuTemplate && this.ctx.treelist.virtualColumns;
+        if (isVirtualColumns && isDevMode()) {
+            console.warn(ColumnMenuErrorMessages.autoSizeColumn);
+        }
+    }
+    /**
+     * Resizes a specified column to the minimum possible width so that it fits the widest header or cell content without wrapping.
+     */
+    autoSizeColumn() {
+        autoSizeColumn(this.ctx.treelist, this.service, this.column);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuAutoSizeColumnComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-treelist-columnmenu-item
+            *ngIf="!this.ctx.treelist.virtualColumns"
+            class="k-grid-columnmenu-autosize-column"
+            [text]="ctx.localization.get('autosizeThisColumn')"
+            icon="max-width"
+            [svgIcon]="maxWidthIcon"
+            (itemClick)="autoSizeColumn()"
+        ></kendo-treelist-columnmenu-item>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-columnmenu-autosize-column',
+                    template: `
+        <kendo-treelist-columnmenu-item
+            *ngIf="!this.ctx.treelist.virtualColumns"
+            class="k-grid-columnmenu-autosize-column"
+            [text]="ctx.localization.get('autosizeThisColumn')"
+            icon="max-width"
+            [svgIcon]="maxWidthIcon"
+            (itemClick)="autoSizeColumn()"
+        ></kendo-treelist-columnmenu-item>
+    `,
+                    standalone: true,
+                    imports: [NgIf, ColumnMenuItemComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { column: [{
+                type: Input
+            }] } });