@progress/kendo-angular-treelist 21.4.1-develop.1 → 22.0.0-develop.1

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

@@ -1,329 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, Input, Output, EventEmitter, ContentChild } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { trigger, transition, style, animate, state } from '@angular/animations';
-import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
-import { ColumnMenuService } from './column-menu.service';
-import { guid } from '@progress/kendo-angular-common';
-import * as i0 from "@angular/core";
-/**
- * Represents an item you can place inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
- *
- * @example
- * ```html
- * <kendo-treelist ...>
- *   <ng-template kendoTreeListColumnMenuTemplate let-service="service" let-column="column">
- *     <kendo-treelist-columnmenu-item text="Fit column"></kendo-treelist-columnmenu-item>
- *   </ng-template>
- * </kendo-treelist>
- * ```
- */
-export class ColumnMenuItemComponent {
-    /**
-     * Fires when the item is clicked.
-     */
-    itemClick = new EventEmitter();
-    /**
-     * Fires when the content expands.
-     */
-    expand = new EventEmitter();
-    /**
-     * Fires when the content collapses.
-     */
-    collapse = new EventEmitter();
-    /**
-     * Sets the name of the [font icon](slug:icons#icons-list) rendered for the item.
-     */
-    icon;
-    /**
-     * Sets the name of the [SVG icon]({% slug svgicon_list %}) rendered for the item.
-     */
-    svgIcon;
-    /**
-     * Sets the item text.
-     */
-    text;
-    /**
-     * Specifies if the item is selected.
-     */
-    selected;
-    /**
-     * Specifies if the item is disabled.
-     */
-    disabled;
-    /**
-     * Specifies if the item is expanded.
-     */
-    expanded;
-    /**
-     * Provides the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) instance.
-     * Required to include the item in the column menu keyboard navigation sequence.
-     */
-    service;
-    contentTemplate;
-    contentState = 'collapsed';
-    contentId;
-    chevronUpIcon = chevronUpIcon;
-    chevronDownIcon = chevronDownIcon;
-    get expandedIcon() {
-        return this.expanded ? 'arrow-chevron-up' : 'arrow-chevron-down';
-    }
-    get expandedSvgIcon() {
-        return this.expanded ? this.chevronUpIcon : this.chevronDownIcon;
-    }
-    ngAfterViewInit() {
-        this.contentTemplate && (this.contentId = `k-${guid()}`);
-    }
-    ngOnChanges(changes) {
-        if (changes.expanded) {
-            this.updateContentState();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onClick(e) {
-        this.itemClick.emit(e);
-        if (this.contentTemplate) {
-            this.expanded = !this.expanded;
-            this.updateContentState();
-            if (this.expanded) {
-                this.expand.emit();
-            }
-            else {
-                this.collapse.emit();
-            }
-        }
-    }
-    updateContentState() {
-        this.contentState = this.expanded ? 'expanded' : 'collapsed';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        @if (contentTemplate) {
-          <div class="k-expander">
-            <ng-container [ngTemplateOutlet]="content"></ng-container>
-          </div>
-        } @else {
-          <div
-            class="k-columnmenu-item"
-            (click)="onClick($event)"
-            (keydown.enter)="onClick($event)"
-            [class.k-selected]="selected"
-            [class.k-disabled]="disabled"
-            role="button"
-            [attr.aria-expanded]="expanded"
-            [attr.aria-controls]="expanded ? contentId : undefined">
-            <kendo-icon-wrapper
-              [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-            {{ text }}
-            @if (contentTemplate) {
-              <span class="k-spacer"></span>
-            }
-            @if (contentTemplate) {
-              <span class="k-expander-indicator">
-                <kendo-icon-wrapper
-                  [name]="expandedIcon"
-                  [svgIcon]="expandedSvgIcon">
-                </kendo-icon-wrapper>
-              </span>
-            }
-          </div>
-          @if (contentTemplate) {
-            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
-              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
-              </ng-container>
-            </div>
-          }
-        }
-        
-        <ng-template #content>
-          <div
-            class="k-columnmenu-item"
-            (click)="onClick($event)"
-            (keydown.enter)="onClick($event)"
-            [class.k-selected]="selected"
-            [class.k-disabled]="disabled"
-            role="button"
-            [attr.aria-expanded]="expanded"
-            [attr.aria-controls]="expanded ? contentId : undefined">
-            <kendo-icon-wrapper
-              [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-            {{ text }}
-            @if (contentTemplate) {
-              <span class="k-spacer"></span>
-            }
-            @if (contentTemplate) {
-              <span class="k-expander-indicator">
-                <kendo-icon-wrapper
-                  [name]="expandedIcon"
-                  [svgIcon]="expandedSvgIcon">
-                </kendo-icon-wrapper>
-              </span>
-            }
-          </div>
-          @if (contentTemplate) {
-            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
-              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
-              </ng-container>
-            </div>
-          }
-        </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-            trigger('state', [
-                state('collapsed', style({ display: 'none' })),
-                state('expanded', style({ display: 'block' })),
-                transition('collapsed => expanded', [
-                    style({
-                        height: '0px',
-                        display: 'block'
-                    }),
-                    animate('100ms ease-in', style({
-                        height: '*'
-                    }))
-                ]),
-                transition('expanded => collapsed', [
-                    style({
-                        height: '*'
-                    }),
-                    animate('100ms ease-in', style({
-                        height: '0px'
-                    }))
-                ])
-            ])
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    animations: [
-                        trigger('state', [
-                            state('collapsed', style({ display: 'none' })),
-                            state('expanded', style({ display: 'block' })),
-                            transition('collapsed => expanded', [
-                                style({
-                                    height: '0px',
-                                    display: 'block'
-                                }),
-                                animate('100ms ease-in', style({
-                                    height: '*'
-                                }))
-                            ]),
-                            transition('expanded => collapsed', [
-                                style({
-                                    height: '*'
-                                }),
-                                animate('100ms ease-in', style({
-                                    height: '0px'
-                                }))
-                            ])
-                        ])
-                    ],
-                    selector: 'kendo-treelist-columnmenu-item',
-                    template: `
-        @if (contentTemplate) {
-          <div class="k-expander">
-            <ng-container [ngTemplateOutlet]="content"></ng-container>
-          </div>
-        } @else {
-          <div
-            class="k-columnmenu-item"
-            (click)="onClick($event)"
-            (keydown.enter)="onClick($event)"
-            [class.k-selected]="selected"
-            [class.k-disabled]="disabled"
-            role="button"
-            [attr.aria-expanded]="expanded"
-            [attr.aria-controls]="expanded ? contentId : undefined">
-            <kendo-icon-wrapper
-              [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-            {{ text }}
-            @if (contentTemplate) {
-              <span class="k-spacer"></span>
-            }
-            @if (contentTemplate) {
-              <span class="k-expander-indicator">
-                <kendo-icon-wrapper
-                  [name]="expandedIcon"
-                  [svgIcon]="expandedSvgIcon">
-                </kendo-icon-wrapper>
-              </span>
-            }
-          </div>
-          @if (contentTemplate) {
-            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
-              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
-              </ng-container>
-            </div>
-          }
-        }
-        
-        <ng-template #content>
-          <div
-            class="k-columnmenu-item"
-            (click)="onClick($event)"
-            (keydown.enter)="onClick($event)"
-            [class.k-selected]="selected"
-            [class.k-disabled]="disabled"
-            role="button"
-            [attr.aria-expanded]="expanded"
-            [attr.aria-controls]="expanded ? contentId : undefined">
-            <kendo-icon-wrapper
-              [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-            {{ text }}
-            @if (contentTemplate) {
-              <span class="k-spacer"></span>
-            }
-            @if (contentTemplate) {
-              <span class="k-expander-indicator">
-                <kendo-icon-wrapper
-                  [name]="expandedIcon"
-                  [svgIcon]="expandedSvgIcon">
-                </kendo-icon-wrapper>
-              </span>
-            }
-          </div>
-          @if (contentTemplate) {
-            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
-              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
-              </ng-container>
-            </div>
-          }
-        </ng-template>
-        `,
-                    standalone: true,
-                    imports: [IconWrapperComponent, NgTemplateOutlet]
-                }]
-        }], propDecorators: { itemClick: [{
-                type: Output
-            }], expand: [{
-                type: Output
-            }], collapse: [{
-                type: Output
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], service: [{
-                type: Input
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: [ColumnMenuItemContentTemplateDirective]
-            }] } });

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

@@ -1,147 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, Input, NgZone, Renderer2 } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { Keys } from '@progress/kendo-angular-common';
-import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
-import { ColumnMenuFilterComponent } from './column-menu-filter.component';
-import * as i0 from "@angular/core";
-/**
- * Provides keyboard navigation support for TreeList column menu items.
- * Use this directive to manage focus and tab order for custom column menu items ([see example](slug:columnmenu_treelist#customizing-the-content)).
- *
- * @example
- * ```html
- * <ng-template kendoTreelistColumnMenuTemplate let-service="service" let-column="column">
- *    <kendo-treelist-columnmenu-sort #sortItem [kendoTreeListColumnMenuItem]="sortItem" [service]="service">
- *    </kendo-treelist-columnmenu-sort>
- * </ng-template>
- * ```
- * @remarks
- * Applied to:
- * {@link ColumnMenuChooserComponent},
- * {@link ColumnMenuFilterComponent},
- * {@link ColumnMenuSortComponent},
- * {@link ColumnMenuLockComponent},
- * {@link ColumnMenuComponent},
- * {@link ColumnMenuItemComponent},
- * {@link ColumnMenuAutoSizeAllColumnsComponent},
- * {@link ColumnMenuAutoSizeColumnComponent}.
- */
-export class ColumnMenuItemDirective {
-    hostElement;
-    renderer;
-    ngZone;
-    /**
-     * Provides a reference to the TreeList column menu item. Required for built-in keyboard navigation.
-     */
-    menuItemComponent;
-    firstFocusableElement;
-    lastFocusableElement;
-    /**
-     * @hidden
-     */
-    set isFirst(value) {
-        if (value) {
-            const focusableElement = this.columnMenuItems[0];
-            this.menuItemComponent.service.menuTabbingService.firstFocusable = focusableElement;
-            this.ngZone.runOutsideAngular(() => {
-                const firstItemKeydownSub = this.renderer.listen(focusableElement, 'keydown', this.onTab);
-                this.subs.add(firstItemKeydownSub);
-            });
-        }
-        this._isFirst = value;
-    }
-    /**
-     * @hidden
-     */
-    get isFirst() {
-        return this._isFirst;
-    }
-    /**
-     * @hidden
-     */
-    set isLast(value) {
-        if (!this.columnMenuItems) {
-            return;
-        }
-        if (value) {
-            const lastFocusableElement = this.getLastColumnMenuItem();
-            this.menuItemComponent.service.menuTabbingService.lastFocusable = lastFocusableElement;
-            this.ngZone.runOutsideAngular(() => {
-                const lastItemKeydownSub = this.renderer.listen(lastFocusableElement, 'keydown', this.onTab);
-                this.subs.add(lastItemKeydownSub);
-            });
-            if (this.isExpandableItem()) {
-                this.menuItemComponent.isLast = true;
-            }
-        }
-        this._isLast = value;
-    }
-    /**
-     * @hidden
-     */
-    get isLast() {
-        return this._isLast;
-    }
-    _isFirst = false;
-    _isLast = false;
-    columnMenuItems;
-    subs = new Subscription();
-    constructor(hostElement, renderer, ngZone) {
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-    }
-    ngAfterViewInit() {
-        this.columnMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
-        [].slice.apply(this.columnMenuItems).forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
-        if (this.menuItemComponent instanceof ColumnMenuFilterComponent) {
-            this.menuItemComponent.service.menuTabbingService.isColumnMenu = true;
-        }
-        this.menuItemComponent.service?.columnMenuContainer.templateMenuItems.push(this);
-    }
-    ngOnDestroy() {
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
-    }
-    onTab = (e) => {
-        if (e.code !== Keys.Tab) {
-            return;
-        }
-        if (this.isFirst && e.shiftKey && e.target === this.columnMenuItems[0]) {
-            e.preventDefault();
-            this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
-        }
-        if (this.isLast && !e.shiftKey) {
-            const lastColumnMenuItem = this.getLastColumnMenuItem();
-            const isExpanded = this.menuItemComponent.expanded;
-            if (lastColumnMenuItem === e.target && !isExpanded) {
-                e.preventDefault();
-                this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
-            }
-        }
-    };
-    getLastColumnMenuItem() {
-        return (this.columnMenuItems.length === 1 ? this.columnMenuItems[0] : this.columnMenuItems[1]);
-    }
-    isExpandableItem() {
-        return this.menuItemComponent instanceof ColumnMenuFilterComponent ||
-            this.menuItemComponent instanceof ColumnMenuChooserComponent;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ColumnMenuItemDirective, isStandalone: true, selector: "[kendoTreeListColumnMenuItem]", inputs: { menuItemComponent: ["kendoTreeListColumnMenuItem", "menuItemComponent"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTreeListColumnMenuItem]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { menuItemComponent: [{
-                type: Input,
-                args: ['kendoTreeListColumnMenuItem']
-            }] } });

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

@@ -1,112 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ChangeDetectorRef } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
-import { ColumnInfoService } from '../common/column-info.service';
-import { ColumnMenuItemBase } from './column-menu-item-base';
-import { lockIcon, unlockIcon } from '@progress/kendo-svg-icons';
-import { ColumnMenuItemComponent } from './column-menu-item.component';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "../common/column-info.service";
-/**
- * Represents the column-menu item that lets you lock or unlock columns.
- *
- * Render this component 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 the template passes to the `service` input of the `kendo-treelist-columnmenu-lock` component.
- *
- * @example
- * ```html
- * <kendo-treelist ...>
- *   <kendo-treelist-column field="ProductName">
- *     <ng-template kendoTreeListColumnMenuTemplate>
- *       <kendo-treelist-columnmenu-lock></kendo-treelist-columnmenu-lock>
- *     </ng-template>
- *   </kendo-treelist-column>
- * </kendo-treelist>
- * ```
- */
-export class ColumnMenuLockComponent extends ColumnMenuItemBase {
-    localization;
-    columnInfoService;
-    changeDetector;
-    unlockIcon = unlockIcon;
-    lockIcon = lockIcon;
-    constructor(localization, columnInfoService, changeDetector) {
-        super();
-        this.localization = localization;
-        this.columnInfoService = columnInfoService;
-        this.changeDetector = changeDetector;
-    }
-    get text() {
-        return this.localization.get(this.locked ? 'unlock' : 'lock');
-    }
-    get icon() {
-        return this.locked ? 'unlock' : 'lock';
-    }
-    get svgIcon() {
-        return this.locked ? this.unlockIcon : this.lockIcon;
-    }
-    get disabled() {
-        return !this.locked && this.columnInfoService.unlockedRootCount < 2;
-    }
-    /**
-     * @hidden
-     */
-    toggleColumn() {
-        this.toggleHierarchy(!this.locked);
-        this.close();
-        this.changeDetector.markForCheck();
-    }
-    toggleHierarchy(locked) {
-        let root = this.service.column;
-        while (root.parent) {
-            root = root.parent;
-        }
-        const columns = [root];
-        const allChanged = [];
-        while (columns.length) {
-            const column = columns.shift();
-            column.locked = locked;
-            allChanged.push(column);
-            if (column.hasChildren) {
-                columns.push(...column.childrenArray);
-            }
-        }
-        this.columnInfoService.changeLocked(allChanged);
-    }
-    get locked() {
-        return this.service.column.locked;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnMenuLockComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
-       <kendo-treelist-columnmenu-item
-           [text]="text"
-           [icon]="icon"
-           [svgIcon]="svgIcon"
-           (itemClick)="toggleColumn()"
-           [disabled]="disabled">
-       </kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ 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: "18.2.14", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-treelist-columnmenu-lock',
-                    template: `
-       <kendo-treelist-columnmenu-item
-           [text]="text"
-           [icon]="icon"
-           [svgIcon]="svgIcon"
-           (itemClick)="toggleColumn()"
-           [disabled]="disabled">
-       </kendo-treelist-columnmenu-item>
-    `,
-                    standalone: true,
-                    imports: [ColumnMenuItemComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }] });

package/esm2022/column-menu/column-menu-settings.interface.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};